/* Genel Kapsayıcı Ayarları */
.seo-hero-module {
    max-width: 1250px;
    height: 400px;
    margin: 0 auto;
    background-color: #ffffff;
    display: flex;
    align-items: stretch; /* Her iki sütunun da yüksekliği tam 400px almasını sağlar */
    justify-content: space-between;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; /* Font güncellendi */
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-radius: 8px;
    overflow: hidden;
}

/* Sol İçerik Alanı */
.seo-hero-content {
    flex: 0 0 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px; /* Padding'i sadece yazı tarafına verdik ki resim alta tam sıfırlanabilsin */
    box-sizing: border-box;
}

/* Başlık */
/* Başlık Genel Ayarı */
.seo-hero-title {
    font-size: 46px;
    color: #111111;
    line-height: 1.2;
    margin: 0 0 25px 0;
    letter-spacing: -0.5px;
}

/* İnce Yazı (Üst Satır) */
.title-light {
    font-weight: 400;
}

/* Kalın Yazı (Alt Satır) */
.title-bold {
    font-weight: 700;
}

/* Açıklama ve Yeşil Çizgi */
.seo-hero-description {
    border-left: 5px solid #14C34D;
    padding-left: 20px;
    margin-bottom: 35px;
}

.seo-hero-description p {
    font-size: 18px;
    color: #666666;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
}

/* Buton Grubu */
.seo-hero-buttons {
    display: flex;
    gap: 15px;
}

.seo-hero-buttons a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 30px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Mor Buton */
.btn-purple {
    background-color: #8d47c7;
    color: #ffffff;
}

.btn-purple:hover {
    background-color: #6564e0;
}

/* Siyah Buton */
.btn-black {
    background-color: #000000;
    color: #ffffff;
}

.btn-black:hover {
    background-color: #333333;
}

/* Sağ Görsel Alanı */
.seo-hero-image-area {
    flex: 0 0 45%;
    display: flex;
    align-items: flex-end; /* Resmi kutunun en altına hizalar */
    justify-content: center; 
    box-sizing: border-box;
    padding-right: 40px; /* Sağdan hafif boşluk bırakmak isterseniz */
}

/* Görsel Ayarları */
.seo-hero-img {
    max-height: 100%; /* Resmin 400px yüksekliği aşmamasını ve kesilmemesini sağlar */
    width: auto;
    object-fit: contain;
    display: block;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .seo-hero-module {
        height: auto;
        flex-direction: column;
    }
    .seo-hero-content {
        flex: 1;
        padding: 40px 20px 20px 20px;
        text-align: center;
    }
    .seo-hero-description {
        border-left: none;
        border-top: 5px solid #14C34D;
        padding-left: 0;
        padding-top: 20px;
        margin: 0 auto 30px auto;
        max-width: 600px;
    }
    .seo-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    .seo-hero-image-area {
        padding-right: 0;
        justify-content: center;
    }
    .seo-hero-img {
        max-height: 350px;
    }
}

@media (max-width: 992px) {
    /* Başlık Ortalama ve Boyut Ayarı */
    .seo-hero-title {
        text-align: center;
        font-size: 32px; /* Mobil için uygun font boyutu */
        line-height: 1.3;
    }
    
    /* İnce ve Kalın metinleri ayrı bloklar (satırlar) haline getiriyoruz */
    .seo-hero-title .title-light,
    .seo-hero-title .title-bold {
        display: block; 
    }
    
    /* Masaüstü için koyduğumuz <br> etiketini mobilde gizliyoruz ki boşluk yaratmasın */
    .seo-hero-title br {
        display: none;
    }

    /* --- Önceki Mobil Ayarlarınız (Aynen Kalabilir) --- */
    .seo-hero-module {
        height: auto;
        flex-direction: column;
    }
    .seo-hero-content {
        flex: 1;
        padding: 40px 20px 20px 20px;
        text-align: center;
    }
    .seo-hero-description {
        border-left: none;
        border-top: 5px solid #14C34D;
        padding-left: 0;
        padding-top: 20px;
        margin: 0 auto 30px auto;
        max-width: 600px;
    }
    .seo-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    .seo-hero-image-area {
        padding-right: 0;
        justify-content: center;
    }
    .seo-hero-img {
        max-height: 350px;
    }
}

/* Genel Kapsayıcı Ayarları */
.seo-google-section {
    background-color: #ffffff;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

.seo-google-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Dikeyde ortalama */
    justify-content: space-between;
    gap: 60px;
}

/* Sol Taraf: Görsel Alanı */
.seo-google-image {
    flex: 0 0 auto; /* Görsel alanının esnemesini engeller */
    width: 100%;
    max-width: 655px; /* Belirttiğiniz genişlik sınırı */
}

.seo-google-image img {
    width: 100%;
    height: auto; /* Oranı korur */
    max-height: 617px; /* Belirttiğiniz yükseklik sınırı */
    object-fit: contain;
    display: block;
}

/* Sağ Taraf: İçerik Alanı */
.seo-google-content {
    flex: 1;
}

/* Üst Başlık */
.seo-google-subtitle {
    display: block;
    color: #9C27B0; /* Mor tonu */
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Ana Başlık ve Google Renkleri */
.seo-google-title {
    color: #333333;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

.g-blue { color: #4285F4; }
.g-red { color: #EA4335; }
.g-yellow { color: #FBBC05; }
.g-green { color: #34A853; }

/* Dalgalı Çizgi */
.wavy-line {
    margin-bottom: 25px;
    display: block;
}

/* Açıklama Metni */
.seo-google-desc {
    color: #666666;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 35px;
    font-weight: 400;
}

.seo-google-desc p {
    margin: 0 0 15px 0;
}

.seo-google-desc p:last-child {
    margin-bottom: 0;
}

.highlight-text {
    color: #9C27B0; /* Mor tonu */
    font-weight: 700;
}

/* Degrade (Gradient) Buton */
.btn-gradient-orange {
    display: inline-flex;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    padding: 16px 35px;
    border-radius: 50px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    box-shadow: 0 8px 20px rgba(216, 27, 96, 0.25);
    transition: all 0.3s ease;
}

.btn-gradient-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(216, 27, 96, 0.35);
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .seo-google-container {
        flex-direction: column; /* HTML sıralaması sayesinde görsel üste gelir */
        text-align: center;
        gap: 40px;
    }

    .seo-google-image {
        max-width: 100%;
    }

    .seo-google-title {
        font-size: 34px;
    }

    .wavy-line {
        margin: 0 auto 25px auto; /* Mobilde çizgiyi ortalar */
    }
}

/* Genel Bölüm Ayarları (Arka plan hafif gri tonlu ferah bir renk) */
.seo-services-section {
    padding: 16px 20px;
    font-family: 'Poppins', sans-serif;
}

.seo-services-container {
    max-width: 1000px; /* İçerik çok yayılmasın diye biraz daha dar tuttuk */
    margin: 0 auto;
}

/* Üst Başlıklar ve Metinler */
.seo-services-header {
    text-align: center;
    margin-bottom: 50px;
}

.seo-sub-heading {
    color: #444444;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.seo-main-heading {
    color: #8d47c7; /* Görseldeki açık mavi/mor tonu */
    font-size: 54px;
    font-weight: 700;
    margin: 0 0 25px 0;
    letter-spacing: -1px;
    line-height: 1.2; /* 54px gibi dev başlıklarda 1.2 en ideal satır aralığıdır */
}

/* Mobil ve Tablet Uyumluluk (Responsive) */
@media (max-width: 768px) {
    .seo-main-heading {
        font-size: 36px; /* 54px mobilde çok taşar, bu yüzden 36px'e kadar indiriyoruz */
        line-height: 1.25; /* Satırların yapışmasını engeller */
        margin: 0 0 20px 0; /* Mobilde alt boşluğu da hafifçe daraltıyoruz */
        letter-spacing: -0.5px; /* Font küçüldüğü için harf aralığını biraz açmak okunabilirliği artırır */
    }
}

.seo-description {
    color: #999999; /* Açık gri font rengi */
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

.seo-list-title {
    color: #111111;
    font-size: 32px;
    font-weight: 500;
    margin: 0;
}

/* Beyaz Kart ve Liste Alanı */
.seo-services-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); /* Etrafındaki yumuşak gölge */
}

/* Listeleri İki Sütuna Böldüğümüz Izgara Yapısı */
.seo-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 60px; /* Satırlar arası 20px, sütunlar arası 60px boşluk */
}

/* Liste Ayarları */
.seo-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Maddeler arası boşluk */
}

.seo-service-list li {
    display: flex;
    align-items: flex-start; /* İkonu ve yazıyı üstten hizalar */
    gap: 15px;
}

.check-icon {
    width: 18px;
    height: 18px;
    color: #8A9DF8; /* Mavi/Mor ikon rengi */
    flex-shrink: 0; /* İkonun yazıyla beraber küçülmesini engeller */
    margin-top: 4px; /* İkonu ilk satırla tam ortalamak için hafif aşağı indirdik */
}

.seo-service-list span {
    color: #4a505e; /* Koyu antrasit metin rengi */
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .seo-main-heading {
        font-size: 38px;
    }
    
    .seo-description br {
        display: none; /* Mobilde yazının ekran genişliğine göre doğal akması için */
    }
    
    .seo-services-card {
        padding: 30px 20px;
    }
    
    .seo-services-grid {
        grid-template-columns: 1fr; /* Mobilde sütunları tekli alt alta sıralar */
        gap: 20px;
    }
}

/* Genel CTA Bölümü */
.seo-cta-section {
    padding: 20px 20px;
    background-color: #ffffff; /* Üstteki bölümle uyumlu beyaz arka plan */
    font-family: 'Poppins', sans-serif;
}

/* Dikkat Çekici Kutu */
.seo-cta-container {
    max-width: 1100px;
    margin: 0 auto;
    background: linear-gradient(135deg, #4E65FF 0%, #7B7AF4 100%); /* Mor/Mavi Degrade */
    border-radius: 24px;
    padding: 70px 40px;
    text-align: center;
    position: relative;
    overflow: hidden; /* Taşan dekoratif şekilleri gizler */
    box-shadow: 0 20px 40px rgba(123, 122, 244, 0.25); /* Kutuya özel renkli gölge */
}

/* Dekoratif Şekiller (Tasarımı zenginleştirmek için) */
.cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); /* Çok hafif transparan beyaz */
    z-index: 1;
}

.cta-shape-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
}

.cta-shape-2 {
    width: 400px;
    height: 400px;
    bottom: -150px;
    right: -100px;
}

/* İçerik (Şekillerin üstünde kalması için) */
.seo-cta-content {
    position: relative;
    z-index: 2;
}

/* Başlık ve Metin */
.seo-cta-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px 0;
    letter-spacing: -0.5px;
}

.seo-cta-desc {
    color: rgba(255, 255, 255, 0.85); /* Göz yormayan hafif kırık beyaz */
    font-size: 18px;
    line-height: 1.6;
    max-width: 650px;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

/* Buton Grubu */
.seo-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.seo-cta-buttons a {
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 36px;
    border-radius: 50px; /* Modern yuvarlak hap görünümü */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Beyaz Dolgulu Buton */
.btn-cta-solid {
    background-color: #ffffff;
    color: #4E65FF;
}

.btn-cta-solid:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px); /* Hoverda hafif yukarı kalkma efekti */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Transparan Çizgili Buton (İkinci Seçenek) */
.btn-cta-outline {
    background-color: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.btn-cta-outline:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

.whatsapp-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .seo-cta-container {
        padding: 50px 20px;
        border-radius: 20px;
    }

    .seo-cta-title {
        font-size: 32px;
    }

    .seo-cta-desc {
        font-size: 16px;
    }

    .seo-cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .seo-cta-buttons a {
        width: 100%; /* Mobilde butonlar tam genişlik kaplasın */
        box-sizing: border-box;
    }
}

/* Genel Kapsayıcı Ayarları */
.seo-info-section {
    background-color: #ffffff; /* Beyaz arka plan */
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

.seo-info-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: stretch; /* Ortadaki çizginin sütunlarla aynı boyda olmasını sağlar */
    justify-content: space-between;
    gap: 50px;
}

/* Sütun Ayarları */
.seo-info-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Tema Ezmesini Önlemek İçin Div ile Yapılan Başlık */
.seo-info-title {
    color: #7B7AF4; /* Sayfadaki diğer modüllerle uyumlu mor tonu */
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    line-height: 1.3; /* Metin birden fazla satıra inerse rahat okunmasını sağlar */
}

/* Mobil ve Tablet Uyumluluk (Responsive) */
@media (max-width: 768px) {
    .seo-info-title {
        font-size: 24px; /* Mobilde daha kibar durması için ufak bir küçültme */
        line-height: 1.3; 
        margin-bottom: 20px; /* Mobilde altındaki metinle veya elemanla çok açılmasın diye boşluk biraz kısıldı */
    }
}

/* Paragraf Ayarları */
.seo-info-column p {
    color: #555555; /* Siyah yerine göz yormayan koyu gri */
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 20px 0;
    font-weight: 400;
}

.seo-info-column p:last-child {
    margin-bottom: 0;
}

.seo-info-column strong {
    color: #333333;
    font-weight: 600;
}

/* Blog Linki Ayarları */
.seo-info-link {
    color: #7B7AF4;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.seo-info-link:hover {
    color: #111111;
    text-decoration: underline;
}

/* Ortadaki Çizgi */
.seo-info-divider {
    width: 1px;
    background-color: #e5e5e5; /* Açık ve zarif bir gri */
    flex-shrink: 0;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .seo-info-container {
        flex-direction: column;
        gap: 40px;
    }

    /* Mobilde dikey çizgiyi yatay çizgiye dönüştürürüz */
    .seo-info-divider {
        width: 100%;
        height: 1px; 
    }

    .seo-info-column {
        text-align: center; /* Mobilde yazıları ortalamak okumayı kolaylaştırır */
    }
}

/* Genel Bölüm Ayarları */
.sm-manage-section {
    background-color: #ffffff;
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

.sm-manage-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Dikeyde ortalar */
    justify-content: space-between;
    gap: 60px;
}

/* Sol Taraf: Görsel Alanı */
.sm-manage-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 656px; /* İstenen maksimum genişlik */
}

.sm-manage-image img {
    width: 100%;
    height: auto;
    max-height: 617px; /* İstenen maksimum yükseklik */
    object-fit: contain; /* Görselin oranını bozmadan sığdırır */
    display: block;
}

/* Sağ Taraf: İçerik Alanı */
.sm-manage-content {
    flex: 1;
}

/* Tema Ezilmesini Önleyen Başlık Sınıfı */
.sm-manage-title {
    color: #2c323f; /* Koyu lacivert/antrasit tonu */
    font-size: 38px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 15px 0;
    letter-spacing: -0.5px;
}

/* Dalgalı Çizgi */
.sm-wavy-line {
    margin-bottom: 25px;
    display: block;
}

/* Açıklama Metni */
.sm-manage-desc {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 30px 0;
    font-weight: 400;
}

/* Özellikler Listesi */
.sm-manage-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0;
}

.sm-manage-list li {
    display: flex;
    align-items: center; /* İkon ile metni dikeyde hizalar */
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0; /* Alt çizgi (Görseldeki gibi) */
}

.sm-manage-list li:last-child {
    border-bottom: none; /* Son maddede çizgiyi kaldırır */
}

.sm-check-icon {
    width: 22px;
    height: 22px;
    color: #4f46e5; /* Buton gradientindeki mavi tonuyla uyumlu ikon rengi */
    flex-shrink: 0;
}

.sm-manage-list span {
    color: #4a505e;
    font-size: 15px;
    font-weight: 500;
}

/* İstenilen Degrade (Gradient) Buton */
.btn-sm-contact {
    display: inline-flex;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 35px;
    border-radius: 50px; /* Modern yuvarlak (pill) görünüm */
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3); /* Pembe/Mavi karışımı yumuşak gölge */
    transition: all 0.3s ease;
}

.btn-sm-contact:hover {
    transform: translateY(-3px); /* Hoverda hafif yukarı kalkma */
    box-shadow: 0 15px 30px rgba(236, 72, 153, 0.4);
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .sm-manage-container {
        flex-direction: column; /* Mobilde alt alta dizer */
        gap: 40px;
    }

    .sm-manage-title {
        font-size: 32px;
        text-align: center;
    }
    
    .sm-wavy-line {
        margin: 0 auto 25px auto; /* Çizgiyi ortalar */
    }

    .sm-manage-desc {
        text-align: center;
    }

    .sm-manage-content {
        display: flex;
        flex-direction: column;
        align-items: center; /* Butonu ortalar */
    }

    .sm-manage-list li {
        text-align: left; /* Okunabilirlik için liste sola dayalı kalır */
    }
}

/* Genel Bölüm ve Arka Plan Rengi */
.sm-value-section {
    position: relative;
    padding: 0 0 100px 0;
    font-family: 'Poppins', sans-serif;
    overflow: hidden; /* Uçuşan ikonların taşmasını engeller */
}

/* Üst Kavis (Wave) Yapısı */
.sm-value-curve {
    width: 100%;
    height: 4px;
    margin-bottom: 40px;
}

.sm-value-curve svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sm-value-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2; /* İkonların üzerinde kalsın diye */
}

/* Dekoratif Uçuşan İkonlar */
.floating-icon {
    position: absolute;
    width: 45px;
    height: 45px;
    opacity: 0.8;
    z-index: 1;
    animation: float-anim 4s ease-in-out infinite;
}

.icon-left {
    top: 150px;
    left: 15%;
    transform: rotate(-15deg);
}

.icon-right {
    bottom: 80px;
    right: 18%;
    transform: rotate(10deg);
    animation-delay: 1.5s; /* İkisi aynı anda hareket etmesin diye gecikme */
}

@keyframes float-anim {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(5deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Üst Metin ve Başlık Alanı */
.sm-value-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

/* Rozet (Badge) */
.sm-value-badge {
    display: inline-block;
    background: linear-gradient(90deg, #f2f6ff 0%, #f8f6fe 33%, #fbf6fc 66%, #fff4f7 100%);
    color: #4f46e5; /* İstenilen mor/mavi ton */
    font-size: 14px;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 25px;
}

/* Tema Ezmesini Engelleyen Başlık */
.sm-value-title {
    color: #2c323f;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* Dalgalı Çizgi Ortalama */
.sm-wavy-center {
    margin: 0 auto 25px auto;
    display: block;
}

/* Açıklama Metni */
.sm-value-desc {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* Kartlar Izgarası */
.sm-value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Kart Yapısı */
.sm-value-card {
    background-color: #ffffff;
    border-radius: 20px; /* Görseldeki gibi oval köşeler */
    padding: 45px 25px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03); /* Çok yumuşak derinlik */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sm-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(79, 70, 229, 0.1); /* Hoverda mor/mavi hafif gölge */
}

/* İkon Ayarları */
.sm-value-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 25px auto;
    color: #9d50bb; /* Kurumsal ton */
}

.sm-value-icon svg {
    width: 100%;
    height: 100%;
}

/* Kart Başlığı */
.sm-value-card-title {
    color: #2c323f;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .sm-value-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette yan yana 2 */
    }
    .icon-left, .icon-right {
        display: none; /* Mobilde kalabalık yapmaması için uçuşan ikonları gizliyoruz */
    }
}

@media (max-width: 768px) {
    .sm-value-title {
        font-size: 30px;
    }
    .sm-value-grid {
        grid-template-columns: 1fr; /* Mobilde tekli alt alta */
        gap: 20px;
    }
    .sm-value-card {
        padding: 35px 20px;
    }
    .sm-value-curve {
        height: 12px; /* Mobilde kavis yüksekliğini daraltıyoruz */
    }
}

/* Genel Bölüm Ayarları */
.sm-services-section {
    padding: 15px 20px;
    font-family: 'Poppins', sans-serif;
}

.sm-services-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Üst Başlıklar ve Metinler */
.sm-services-header {
    text-align: center;
    margin-bottom: 50px;
}

.sm-sub-heading {
    color: #444444;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.sm-main-heading {
    color: #9d50bb; /* Soft mavi/mor tonu */
    font-size: 54px;
    font-weight: 700;
    margin: 0 0 25px 0;
    letter-spacing: -1px;
}

.sm-description {
    color: #999999;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 auto 40px auto;
    font-weight: 400;
}

.sm-list-title {
    color: #111111;
    font-size: 32px;
    font-weight: 500;
    margin: 0;
}

/* Beyaz Kart ve Liste Alanı */
.sm-services-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 50px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); /* Yumuşak gölge */
}

/* İki Sütunlu Izgara (Grid) Yapısı */
.sm-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İki eşit sütun */
    gap: 20px 60px; /* Satır boşluğu 20px, Sütun boşluğu 60px */
}

/* Liste Ayarları */
.sm-service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Liste elemanları arası boşluk */
}

.sm-service-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* Tik (Check) İkonu */
.sm-check-icon {
    width: 18px;
    height: 18px;
    color: #8A9DF8; /* Ana renkle uyumlu tik rengi */
    flex-shrink: 0;
    margin-top: 4px;
}

.sm-service-list span {
    color: #4a505e;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .sm-main-heading {
        font-size: 38px;
    }
    
    .sm-description br {
        display: none; /* Mobilde yazının ekran genişliğine göre doğal akması için */
    }
    
    .sm-services-card {
        padding: 30px 20px;
    }
    
    .sm-services-grid {
        grid-template-columns: 1fr; /* Mobilde sütunları tekli alt alta sıralar */
        gap: 20px;
    }
}

/* Genel Bölüm Ayarları */
.sm-portfolio-section {
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif;
}

.sm-portfolio-container {
    max-width: 1250px;
    margin: 0 auto;
}

/* Başlık ve Metin Alanı */
.sm-portfolio-header {
    text-align: center;
    margin-bottom: 50px;
}

.sm-portfolio-title {
    color: #111111;
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

/* "İnceleyin" Kelimesinin Arkasındaki Renkli Vurgu Efekti */
.highlight-text {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.highlight-text::after {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: 3px;
    height: 8px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); /* Yeşilden mora geçiş */
    z-index: -1;
    opacity: 0.8;
    border-radius: 4px;
}

.sm-portfolio-desc {
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* Portfolyo Izgarası (Masaüstünde 4'lü yapı) */
.sm-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Eşit Sütun */
    gap: 25px; /* Görseller arası boşluk */
}

/* Tekil Görsel Kutusu */
.sm-portfolio-item {
    position: relative;
    border-radius: 12px; /* Köşe ovalliği */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Çok hafif gölge */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff; /* Transparan png'ler için beyaz arka plan */
}

/* Hover Efekti: Üzerine gelince hafif büyür ve gölgesi artar */
.sm-portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.sm-portfolio-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1; /* Görsellerin her ekranda tam kare (292x292 oranında) kalmasını sağlar */
    object-fit: cover; /* Resmi bozmadan kareye sığdırır */
    display: block;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 992px) {
    .sm-portfolio-title {
        font-size: 32px;
    }
    .sm-portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablet ve Mobilde yan yana 2'li yapı */
        gap: 15px; /* Mobilde boşlukları biraz kısıyoruz */
    }
}

@media (max-width: 576px) {
    .sm-portfolio-title {
        font-size: 26px;
    }
    .sm-portfolio-desc {
        font-size: 14px;
    }
    .highlight-text::after {
        height: 8px; /* Mobilde vurguyu biraz inceltiyoruz */
        bottom: 3px;
    }
}

/* Genel Bölüm Ayarları */
.ws-boxes-section {
    padding: 0px 20px;
    font-family: 'Poppins', sans-serif;
}

.ws-boxes-container {
    max-width: 1250px;
    margin: 0 auto;
}

/* Izgara (Grid) Yapısı - Masaüstünde 4'lü */
.ws-boxes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Yan yana 4 kutu */
    gap: 30px; /* Kutular arası boşluk */
}

/* Belirgin Kutu (Kart) Tasarımı */
.ws-box-item {
    background-color: #ffffff; /* Beyaz kutu */
    border: 1px solid #eaeaea; /* İnce, zarif bir kenarlık */
    border-radius: 12px; /* Oval köşeler */
    padding: 40px 25px; /* İç boşluklar */
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); /* Hafif derinlik */
    transition: all 0.3s ease;
}

/* Kutu Üzerine Gelince (Hover) Animasyonu */
.ws-box-item:hover {
    transform: translateY(-8px); /* Hafif yukarı kalkma */
    box-shadow: 0 15px 30px rgba(162, 88, 190, 0.15); /* Mor tonlu gölge */
    border-color: #a258be; /* Kenarlık rengi mora döner */
}

/* İkon Ayarları */
.ws-box-icon {
    font-size: 42px; /* İkon boyutu */
    color: #a258be; /* İstediğiniz renk kodu */
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; 
    transition: transform 0.3s ease;
}

.ws-box-item:hover .ws-box-icon {
    transform: scale(1.1); /* Hoverda ikon hafifçe büyür */
}

/* Başlık */
.ws-box-title {
    color: #111111; 
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

/* Açıklama Metni (İlettiğiniz Metinler) */
.ws-box-desc {
    color: #666666; 
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    .ws-boxes-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette yan yana 2 kutu */
        gap: 25px;
    }
}

@media (max-width: 576px) {
    .ws-boxes-grid {
        grid-template-columns: 1fr; /* Telefonda alt alta tek kutu */
        gap: 20px;
    }
    
    .ws-box-item {
        padding: 30px 20px;
    }
} 

/* Genel Bölüm Ayarları */
.seo-why-us-section {
    padding: 1px 20px;
    font-family: 'Poppins', sans-serif;
}

.seo-why-us-container {
    max-width: 1250px;
    margin: 0 auto;
}

/* Başlık Alanı */
.seo-why-header {
    text-align: center;
    margin-bottom: 50px;
}

.seo-why-title {
    color: #111111;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    text-transform: uppercase; /* Görseldeki gibi büyük harf */
}

.seo-why-subtitle {
    color: #666666;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

/* Kart ızgarası (Grid) */
.seo-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstünde yan yana 4 sütun */
    gap: 30px;
}

/* Tekil Kart Ayarları */
.seo-why-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Yumuşak gölge */
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
}

/* Karta Hover (Üzerine gelince) Efekti */
.seo-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(123, 122, 244, 0.15); /* Mor tonlu belirgin gölge */
    border-color: #7B7AF4; /* Kenarlık mor rengi alır */
}

/* İkon Ayarları */
.seo-why-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px auto;
    color: #7B7AF4; /* Sayfadaki mor/mavi kurumsal tonumuz */
    transition: all 0.3s ease;
}

.seo-why-icon svg {
    width: 100%;
    height: 100%;
}

.seo-why-card:hover .seo-why-icon {
    transform: scale(1.1); /* Hoverda ikon hafifçe büyür */
}

/* Kart İçindeki Yazılar */
.seo-why-card-title {
    color: #111111;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.seo-why-card-text {
    color: #777777;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    .seo-why-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette yan yana 2 sütun */
    }
}

@media (max-width: 768px) {
    .seo-why-title {
        font-size: 32px;
    }
    
    .seo-why-grid {
        grid-template-columns: 1fr; /* Mobilde tekli alt alta */
        gap: 20px;
    }
    
    .seo-why-card {
        padding: 30px 20px;
    }
}

/* Genel Ayarlar */
.ecom-services-section {
    padding: 1px 20px 120px 20px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.ecom-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Başlık Alanı */
.ecom-header {
    text-align: center;
    margin-bottom: 60px;
}

.ecom-subtitle {
    color: #a258be; /* İstediğiniz renk kodu */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.ecom-title {
    color: #2b3445; 
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.5px;
    line-height: 1.3; /* Satırların üst üste binmesini engeller */
}

/* Mobil ve Tablet Uyumluluk (Responsive) */
@media (max-width: 768px) {
    .ecom-title {
        font-size: 30px; /* Ekrana sığması için fontu küçülttük */
        line-height: 1.25; /* Mobilde daha sıkı ve okunaklı satır aralığı */
    }
}

/* Kart Izgarası - Masaüstünde 3 Sütun */
.ecom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 30px;
    position: relative;
}

/* Arkadaki Kesik Çizgi Efekti */
.ecom-dashed-wave {
    position: absolute;
    top: 50%;
    left: -5%;
    width: 110%;
    height: 2px;
    border-bottom: 2px dashed #d1c7dd; 
    z-index: 1;
    transform: rotate(-2deg);
    opacity: 0.6;
}

/* Tekil Kart Ayarları */
.ecom-card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 2; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ecom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(162, 88, 190, 0.15); /* Mor tonlu hover gölgesi */
}

/* Kartın Üst Renkli/Dalgalı Kısmı */
.ecom-top-area {
    background-color: #f8eefb; /* Temaya uygun çok açık mor/lila arka plan */
    height: 160px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dekoratif Ufak Çemberler/Noktalar */
.dec-dot {
    position: absolute;
    border-radius: 50%;
}

.dot-yellow {
    width: 10px;
    height: 10px;
    border: 2px solid #f9c04a; 
    top: 30%;
    left: 15%;
}

.dot-purple {
    width: 12px;
    height: 12px;
    border: 2px solid #a258be; /* İstenen renkle uyumlu çember */
    bottom: 35%;
    right: 15%;
}

.dot-dark {
    width: 6px;
    height: 6px;
    background-color: #2b3445; 
    top: 20%;
    right: 25%;
}

/* Kart İçi İkon */
.ecom-icon-wrapper {
    color: #a258be; /* İstediğiniz renk kodu */
    font-size: 45px;
    margin-bottom: 20px; 
}

/* Kart Altındaki SVG Dalgası */
.ecom-wave {
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 35px; 
}

/* Kartın Alt Beyaz Kısmı */
.ecom-bottom-area {
    background-color: #ffffff;
    padding: 20px 20px 40px 20px;
    text-align: center;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    flex-grow: 1;
}

.ecom-main-text {
    color: #111111;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.ecom-sub-text {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* Masaüstünde Ortadaki Sütunu Aşağı Kaydırma (Staggered Effect) */
@media (min-width: 993px) {
    .shift-down {
        margin-top: 50px; /* 2. ve 5. kartı (ortadakileri) aşağı iter */
    }
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 992px) {
    .ecom-grid {
        grid-template-columns: repeat(2, 1fr); /* Tablette yan yana 2 */
        gap: 30px;
    }
    
    .shift-down {
        margin-top: 0; /* Masaüstü kaydırmasını iptal et */
    }
    
    /* Tablette sağdaki kartları kaydır (Zikzak kurgusu için) */
    .ecom-card:nth-child(even) {
        margin-top: 40px;
    }
}

@media (max-width: 600px) {
    .ecom-title {
        font-size: 32px;
    }

    .ecom-grid {
        grid-template-columns: 1fr; /* Mobilde tekli alt alta */
        gap: 20px;
    }
    
    .ecom-card:nth-child(even) {
        margin-top: 0; /* Mobilde kaymayı tamamen iptal et */
    }
    
    .ecom-dashed-wave {
        display: none; /* Mobilde arka plan çizgisini gizle */
    }
}

/* Genel Ayarlar */
.sk-process-section {
    background-color: #ffffff;
    padding: 1px 20px;
    font-family: 'Poppins', sans-serif;
}

.sk-process-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Başlık Alanı */
.sk-process-header {
    text-align: center;
    margin-bottom: 70px;
}

/* Rozet (Nasıl Çalışıyoruz?) */
.sk-process-badge {
    display: inline-block;
    background-color: #f3f4f6;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    /* Rozet yazısı degrade kalsın */
    background-image: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Ana Başlık */
.sk-process-title {
    color: #2b3445;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* İlk Kelimenin Altındaki Fosforlu Çizgi (Highlight) */
.sk-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.sk-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    height: 12px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
    z-index: -1;
}

/* Adımlar Kapsayıcısı */
.sk-steps-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* Arkadaki Kesik Çizgi */
.sk-steps-wrapper::before {
    content: '';
    position: absolute;
    top: 35px; /* Yuvarlakların tam ortasına denk gelir */
    left: 10%;
    right: 10%;
    height: 2px;
    border-top: 2px dashed #cbd5e1;
    z-index: 1;
}

/* Tekil Adım Kutusu */
.sk-step-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2; 
    padding: 0 15px;
}

/* 1-2-3-4 Adım Yuvarlakları (İçi İstenilen Degrade ve Yazı Beyaz) */
.sk-step-circle {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); /* İçi degrade renk */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff; /* Rakamlar beyaz */
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3); /* Tasarıma uygun pembe/mor hafif gölge */
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}

/* Üzerine gelince (Hover) hafif büyüme efekti */
.sk-step-item:hover .sk-step-circle {
    transform: scale(1.1);
}

/* Adım İçerik Yazıları */
.sk-step-title {
    color: #2b3445;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.sk-step-desc {
    color: #64748b; 
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    font-weight: 400;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 992px) {
    .sk-process-title {
        font-size: 30px;
    }
    .sk-steps-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .sk-steps-wrapper::before {
        display: none; 
    }
    .sk-step-item {
        padding: 0;
    }
}

/* Genel Modül Ayarları */
.softkrea-conversion-section {
    background-color: #ffffff; /* Temiz Beyaz Arka Plan */
    padding: 100px 20px; /* Geniş ve Ferah Boşluk */
    font-family: 'Poppins', sans-serif; /* Poppins Fontu */
    overflow: hidden;
}

.sk-conv-container {
    max-width: 1250px; /* Sayfa genişliğiyle uyumlu */
    margin: 0 auto;
    display: flex;
    align-items: center; /* İçerikleri dikeyde ortalar */
    justify-content: space-between;
    gap: 60px; /* İki sütun arası boşluk */
}

/* Sol Sütun (İçerik) */
.sk-conv-content {
    flex: 1; /* Esnek genişlik */
    max-width: 550px;
}

/* Başlık Ayarları (Görseldeki gibi büyük ve vurgulu) */
.sk-conv-title {
    color: #1a1e26; /* Koyu antrasit */
    font-size: 48px; /* Büyük ve dikkat çekici */
    font-weight: 700; /* Kalın */
    line-height: 1.2; /* Dar satır aralığı */
    margin-bottom: 30px;
    letter-spacing: -1.5px;
}

/* Paragraf Ayarları */
.sk-conv-content p {
    color: #6b7280; /* Okunabilir gri tonu */
    font-size: 16px;
    line-height: 1.8; /* Rahat satır aralığı */
    margin-bottom: 25px; /* Paragraflar arası boşluk */
    font-weight: 400;
}

/* Gradient Buton Ayarları */
.sk-conv-btn {
    display: inline-block;
    padding: 16px 35px;
    /* Softkrea Marka Gradient'i */
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px; /* Oval köşeler */
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2); /* Hafif gölge */
    transition: all 0.3s ease;
    margin-top: 10px;
}

/* Buton Hover (Üzerine Gelince) Efekti */
.sk-conv-btn:hover {
    transform: translateY(-3px); /* Hafif yukarı kalkma */
    box-shadow: 0 15px 30px rgba(79, 70, 229, 0.3); /* Belirginleşen gölge */
}

/* Sağ Sütun (Görsel) */
.sk-conv-image-wrapper {
    flex: 0 0 auto; /* Esnemeyen sabit alan */
    width: 100%;
    max-width: 656px; /* İstenen maksimum genişlik */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Görsel Ayarları */
.sk-conv-img {
    width: 100%;
    height: auto;
    max-width: 656px; /* 656px genişliği garantiler */
    max-height: 617px; /* 617px yüksekliği garantiler */
    object-fit: cover; /* Görsel oranını korur, taşmayı kırpar */
    border-radius: 20px; /* Hafif oval köşeler */
    display: block;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    /* Tablette içerikleri alt alta dizer */
    .sk-conv-container {
        flex-direction: column-reverse; /* Görseli üste alır (içerik altta kalır) */
        text-align: center;
        gap: 50px;
    }

    .sk-conv-content {
        max-width: 100%;
    }

    .sk-conv-title {
        font-size: 38px; /* Mobilde başlığı küçültür */
    }
}

@media (max-width: 600px) {
    .softkrea-conversion-section {
        padding: 60px 20px; /* Mobilde dikey boşluğu azaltır */
    }
    
    .sk-conv-title {
        font-size: 32px;
        letter-spacing: -1px;
    }
}

/* Genel Ayarlar (Arka plan şeffaf) */
.staggered-photography-section {
    background-color: transparent; /* Arka plan rengi yok */
    padding: 80px 20px;
    font-family: 'Poppins', sans-serif; /* Poppins fontu aktif */
    overflow: hidden; /* Slaytların taşmasını engeller */
}

.staggered-container {
    max-width: 1350px; /* Slaytların ferah durması için geniş kapsayıcı */
    margin: 0 auto;
    padding: 0 20px;
}

/* Başlık Alanı */
.staggered-header {
    text-align: center;
    margin-bottom: 60px;
}

.staggered-subtitle {
    color: #c84055; /* Referanstaki turuncu/kırmızı tonlu slogan metni */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.staggered-title {
    color: #111111; 
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.3; /* Satırlar arası ideal boşluğu sağlar */
}

/* Mobil cihazlar için ekstra düzeltme (Responsive) */
@media (max-width: 768px) {
    .staggered-title {
        font-size: 32px; /* Mobilde yazıyı biraz küçültürüz ki çok yer kaplamasın */
        line-height: 1.25; /* Mobilde de satırların üst üste binmesini engeller */
    }
}

/* Swiper Slaytları ve Görsel Ayarları */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    /* İstenen 327x444 piksel boyut */
    width: 327px !important;
    height: 444px !important;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Görselin oranını bozmadan sığdırır */
    border-radius: 12px; /* Referanstaki gibi hafif oval köşeler */
    box-shadow: 0 5px 20px rgba(0,0,0,0.03); /* Çok yumuşak derinlik */
    display: block;
}

/* Gezinme Okları (İstenen Gradient ve Beyaz Ok) */
.swiper-button-next,
.swiper-button-prev {
    /* İstenen Degrade (Gradient) Buton Arka Planı */
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    color: #ffffff; /* Beyaz ok */
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%; /* Yuvarlak buton */
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3); /* Tasarıma uygun pembe/mor hafif gölge */
    transition: all 0.3s ease;
    z-index: 10; /* Slaytların üstünde kalsın */
}

/* Ok İkon Boyutu */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px !important; /* Ok ikonunun boyutu */
}

/* Konumlandırma */
.swiper-button-next {
    right: -25px !important; /* Sayfa kenarına yakın, referanstaki gibi */
}

.swiper-button-prev {
    left: -25px !important;
}

/* Hoverda (Üzerine gelince) efekt */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 30px rgba(236, 72, 153, 0.4);
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    .staggered-title {
        font-size: 32px;
    }
    .staggered-container {
        padding: 0; /* Mobilde kenar boşluklarını sıfırlıyoruz */
    }
}

@media (max-width: 600px) {
    .staggered-header {
        margin-bottom: 40px;
    }
    /* Mobilde okları içeri alıyoruz */
    .swiper-button-next {
        right: 10px !important;
    }
    .swiper-button-prev {
        left: 10px !important;
    }
}

  /* Swiper Özel Ayarları */
    .staggered-photography-section {
        overflow: hidden;
        padding: 30px 0; /* Sağ-sol boşluğu sıfırladık, slaytlar ekrana yayılsın */
    }
    .staggered-header {
        text-align: center;
        margin-bottom: 50px;
    }
    .staggered-subtitle {
        color: #8b47c8;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 15px;
        display: block;
    }
    .staggered-title {
        color: #111111;
        font-size: 42px;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin: 0;
    }
    .mySwiper {
        width: 100%;
        padding: 20px 0; /* Gölgelerin kesilmemesi için dikey boşluk */
        position: relative;
    }
    /* Slayt Boyutları ve Görünümü */
    .mySwiper .swiper-slide {
        width: 327px !important;
        height: 444px !important;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
    }
    .mySwiper .swiper-slide-active {
        transform: scale(1.02); /* Ortadaki görseli hafif öne çıkarır */
    }
    .mySwiper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }
    /* Ok Tasarımları ve Konumları */
    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
        color: #ffffff !important;
        width: 50px !important;
        height: 50px !important;
        border-radius: 50%;
        box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4);
        z-index: 10;
    }
    .mySwiper .swiper-button-next::after,
    .mySwiper .swiper-button-prev::after {
        font-size: 20px !important;
        font-weight: bold;
    }
    /* Okları içeri alma */
    .mySwiper .swiper-button-prev {
        left: 40px !important; 
    }
    .mySwiper .swiper-button-next {
        right: 40px !important; 
    }
    @media (max-width: 768px) {
        .mySwiper .swiper-button-prev { left: 15px !important; }
        .mySwiper .swiper-button-next { right: 15px !important; }
    }

/* Genel Ayarlar */
.faq-module-section {
    background-color: #ffffff;
    padding: 37px 20px;
    font-family: 'Poppins', sans-serif;
}

.faq-container {
    max-width: 900px; /* Okunabilirliği artırmak için biraz daha dar tutuldu */
    margin: 0 auto;
}

/* Başlık */
.faq-main-title {
    color: #8c7a6b; /* İlettiğiniz görseldeki kahverengimsi soft başlık rengi */
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* Akordeon Kapsayıcısı */
.faq-accordion {
    display: flex;
    flex-direction: column;
}

/* Tekil Soru Elemanı */
.faq-item {
    border-bottom: 1px solid #f0f0f0; /* Alt çizgi */
    overflow: hidden;
}

.faq-item:last-child {
    border-bottom: none;
}

/* Soru Butonu */
.faq-question {
    width: 100%;
    background-color: #ffffff;
    color: #111111;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    padding: 20px 15px;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

/* İkon Ayarları */
.faq-icon {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #111111;
}

/* Cevap Alanı (Kapalı Halde) */
.faq-answer {
    max-height: 0;
    background-color: #ffffff;
    padding: 0 15px;
    opacity: 0;
    transition: all 0.3s ease;
}

.faq-answer p {
    color: #444444;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

/* =========================================
   AKTİF (AÇIK) SORU DURUMU
   ========================================= */

/* Aktif Sorunun Arka Planı (Degrade) ve Yazı Rengi */
.faq-item.active .faq-question {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    color: #ffffff;
    border-radius: 4px; /* Renkli kutuya hafif yumuşak köşe */
}

/* Aktif Sorunun İkon Rengi ve Yönü */
.faq-item.active .faq-icon {
    color: #ffffff;
    transform: rotate(180deg); /* Oku yukarı çevirir */
}

/* Aktif Cevabın Görünür Hale Gelmesi */
.faq-item.active .faq-answer {
    max-height: 500px; /* İçeriğin sığması için yeterli bir yükseklik */
    padding: 20px 15px;
    opacity: 1;
}

/* Mobil Uyumluluk */
@media (max-width: 600px) {
    .faq-main-title {
        font-size: 26px;
    }
    .faq-question {
        font-size: 15px;
        padding: 15px 10px;
    }
    .faq-answer p {
        font-size: 14px;
    }
}

/* Modül Genel Ayarları */
.sk-references-section {
    background-color: #ffffff; /* Temiz beyaz arka plan */
    padding: 31px 0; /* Üstten alttan ferahlık */
    overflow: hidden;
}

/* Swiper Kapsayıcı ve Smooth Scroll Ayarı */
.ref-swiper {
    width: 100%;
    position: relative;
    padding: 0 40px; /* Oklar için kenarlarda boşluk */
}

/* Kesintisiz Akış (Marquee) Efekti İçin Zorunlu CSS */
.ref-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Tekil Logo Slaytı Ayarları */
.ref-swiper .swiper-slide {
    width: 270px !important;
    height: 80px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.6; /* İlk etapta hafif soluk (Şık durması için) */
    transition: opacity 0.3s ease;
    cursor: pointer;
}

/* Üzerine gelince logo netleşsin */
.ref-swiper .swiper-slide:hover {
    opacity: 1;
}

/* Görsel Sığdırma */
.ref-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Görseli bozmadan içine sığdırır */
    display: block;
}

/* Minimal Gezinme Okları */
.ref-swiper .swiper-button-next.ref-next,
.ref-swiper .swiper-button-prev.ref-prev {
    color: #e5e7eb; /* Neredeyse görünmez çok açık gri */
    width: 30px !important;
    height: 30px !important;
    transition: all 0.3s ease;
}

/* İkon Boyutunu Küçültme */
.ref-swiper .swiper-button-next.ref-next::after,
.ref-swiper .swiper-button-prev.ref-prev::after {
    font-size: 18px !important;
    font-weight: bold;
}

/* Üzerine gelince marka rengini alma */
.ref-swiper .swiper-button-next.ref-next:hover,
.ref-swiper .swiper-button-prev.ref-prev:hover {
    color: #4f46e5; /* Mor/Mavi tonunuz */
    transform: scale(1.1);
}

/* Mobilde Okları Gizleme (Telefonda oklar gereksiz kalabalık yapar, parmakla kaydırılır) */
@media (max-width: 768px) {
    .ref-swiper .swiper-button-next.ref-next,
    .ref-swiper .swiper-button-prev.ref-prev {
        display: none !important;
    }
    .ref-swiper {
        padding: 0; /* Mobilde boşluğu alıyoruz */
    }
}

/* Genel Bölüm Ayarları */
.sk-static-refs-section {

    padding: 80px 20px;
}

.sk-static-refs-container {
    max-width: 1250px; /* 4 kutunun 290px + boşluklarla tam sığacağı genişlik */
    margin: 0 auto;
}

/* 4'lü Izgara (Grid) Yapısı */
.sk-static-refs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstünde yan yana 4 sütun */
    gap: 30px; /* Kutular arası boşluk */
}

/* Tekil Referans Kutusu */
.sk-ref-box {
    background-color: #ffffff;
    height: 192px; /* İstenilen sabit yükseklik */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px; /* Logonun kutu kenarlarına yapışmasını engeller */
    border: 1px solid #eaeaea; /* Çok zarif ince bir kenarlık */
    border-radius: 12px; /* Hafif oval köşeler */
}

/* Kutunun içindeki Logo */
.sk-ref-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Logonun en/boy oranını bozmadan kutuya sığdırır */
    display: block;
    /* İsterseniz logoları tamamen siyah/gri yapmak için aşağıdaki kodu açabilirsiniz */
    /* filter: grayscale(100%); opacity: 0.7; transition: all 0.3s; */
}

/* Eğer üstteki gri efekti açarsanız, üzerine gelince (hover) 
orijinal rengine dönmesi için bu kodu kullanabilirsiniz: 
.sk-ref-box:hover img { filter: grayscale(0%); opacity: 1; }
*/

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    .sk-static-refs-grid {
        grid-template-columns: repeat(3, 1fr); /* Yatay tablette 3'lü */
    }
}

@media (max-width: 768px) {
    .sk-static-refs-grid {
        grid-template-columns: repeat(2, 1fr); /* Dikey tablette ve büyük telefonlarda 2'li */
        gap: 20px; /* Boşlukları daralt */
    }
    .sk-ref-box {
        height: 140px; /* Mobilde kutu yüksekliğini biraz küçültüyoruz ki çok devasa durmasın */
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .sk-static-refs-grid {
        grid-template-columns: repeat(2, 1fr); /* Küçük telefonlarda da 2'li kalsın ki liste çok uzamasın */
    }
}

.sk-emoji-icon {
    width: 35px; /* İkonun boyutunu buradan büyütebilir veya küçültebilirsiniz */
    height: 35px;
    vertical-align: middle; /* Yazının tam ortasına hizalar, havada veya aşağıda durmasını engeller */
    margin: 0 5px; /* Sağdan ve soldan hafif boşluk bırakır */
    display: inline-block;
}

.ref-hero-title {
    font-size: 39px;
    color: #111111;
    line-height: 1.2;
    margin: 0 0 25px 0;
    letter-spacing: -0.5px;
}

.service-card-link {
    text-decoration: none; /* Linkin alt çizgisini kaldırır */
    color: inherit; /* Kutu içindeki yazı renklerinin bozulmasını engeller */
    display: block; /* Link alanının div ile tamamen aynı boyutta olmasını sağlar */
}

/* Kutuya tıklanabilir hissi vermek için üzerine gelince (hover) imleci el işaretine çevirelim */
.service-card-link:hover .service-card {
    cursor: pointer;
}

/* Genel Ayarlar */
.sk-all-services-section {
    background-color: #fafbfe; /* Görseldeki ferah, uçuk gri/mavi zemin */
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

.sk-all-services-container {
    max-width: 1300px;
    margin: 0 auto;
}

/* Başlık Alanı */
.sk-services-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.sk-services-title {
    color: #111827;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

/* "inceleyin!" yazısının altındaki renkli çizgi efekti */
.sk-underline-text {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.sk-underline-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #4f46e5 0%, #ec4899 100%); /* Mor/Pembe çizgi */
    z-index: -1;
    border-radius: 10px;
    opacity: 0.8;
}

.sk-services-desc {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}

/* Izgara Yapısı (Grid) */
.sk-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstü 4 Sütun */
    gap: 30px;
}

/* Komple Tıklanabilir Link Sarıcısı */
.sk-service-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%; /* Kartların aynı boyda esnemesi için */
}

/* Tekil Hizmet Kartı */
.sk-srv-card {
    background-color: #ffffff;
    border-radius: 16px; /* Görseldeki kavisli köşeler */
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Çok soft gölge */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sk-service-link:hover .sk-srv-card {
    transform: translateY(-8px); /* Hafif yukarı kalkma efekti */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* Kartın Üst Kısmı (İkon ve Başlık) */
.sk-srv-top {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.sk-srv-icon {
    color: #2563eb; /* Görseldeki standart mavi ikon rengi */
    font-size: 24px;
    margin-top: 3px;
}

.sk-srv-title {
    color: #111827;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* Açıklama Metni */
.sk-srv-desc {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 25px 0;
    flex-grow: 1; /* Alt kısmın en aşağıda kalmasını sağlar */
}

/* Kartın Alt Kısmı (Ok) */
.sk-srv-bottom {
    display: flex;
    justify-content: flex-end; /* Oku sağa yaslar */
    align-items: center;
}

.sk-arrow {
    font-size: 18px;
    transition: transform 0
}

/* Genel Ayarlar ve Arka Plan Glow Efektleri */
.sk-why-us-section {
    background-color: #ffffff;
    padding: 3px 20px;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

.sk-why-us-section::before {
    background: #4f46e5; /* Mor parlama */
    top: -200px;
    left: -200px;
}

.sk-why-us-section::after {
    background: #ec4899; /* Pembe parlama */
    bottom: -200px;
    right: -200px;
}

.sk-why-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* İçeriğin parlamaların üstünde kalması için */
}

/* Flexbox Split Yapısı */
.sk-why-wrapper {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* =========================================
   SOL TARAF (Başlık ve Açıklama)
   ========================================= */
.sk-why-content {
    flex: 1;
    position: sticky;
    top: 120px; /* Kaydırırken sol tarafın sabit kalması için */
    max-width: 500px;
}

.sk-why-badge {
    display: inline-block;
    padding: 8px 20px;
    background-color: #f3f4f6;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #4f46e5;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sk-why-title {
    color: #111827;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 25px;
}

/* "Softkrea" yazısını degrade (gradient) yapma */
.sk-text-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.sk-why-desc {
    color: #4b5563;
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 400;
}

/* Buton Tasarımı */
.sk-why-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.3);
    transition: all 0.3s ease;
}

.sk-why-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.4);
}

/* =========================================
   SAĞ TARAF (Özellik Kartları Grid)
   ========================================= */
.sk-why-grid {
    flex: 1.2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Sağdaki sütunu aşağı iterek asimetrik bir görünüm sağlar */
.sk-shift-down {
    margin-top: 60px;
}

/* Tekil Kart */
.sk-why-card {
    background: rgba(255, 255, 255, 0.7); /* Cam efekti (Glassmorphism) için transparan beyaz */
    backdrop-filter: blur(10px); /* Arka planı hafif buzlu cam yapar */
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 40px 30px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sk-why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
}

/* İkon Kutusu */
.sk-why-icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.sk-why-icon-box i {
    font-size: 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Kart Başlığı */
.sk-why-card-title {
    color: #111827;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Kart Açıklaması */
.sk-why-card-desc {
    color: #6b7280;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1024px) {
    .sk-why-wrapper {
        flex-direction: column; /* Tablette yan yana değil alt alta dizer */
        gap: 60px;
    }
    .sk-why-content {
        position: static; /* Mobilde yapışkanlığı iptal eder */
        max-width: 100%;
        text-align: center;
    }
    .sk-why-desc {
        max-width: 700px;
        margin: 0 auto 40px auto;
    }
}

@media (max-width: 768px) {
    .sk-why-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun */
        gap: 20px;
    }
    .sk-shift-down {
        margin-top: 0; /* Mobilde kaydırmayı iptal eder */
    }
    .sk-why-title {
        font-size: 38px;
    }
}

.ht-all-services-section {
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

.ht-hero-title {
    font-size: 34px;
    color: #111111;
    line-height: 1.2;
    margin: 0 0 25px 0;
    letter-spacing: -0.5px;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

 /* --- ANA KUTU VE YERLEŞİM --- */
    .softkrea-about-section {
        padding: 0px 0;
        font-family: 'Poppins', sans-serif;
    }

    .sk-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sk-about-card {
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: center;
        padding: 40px;
        gap: 50px;
        border: 1px solid #eaeaea;
    }

    /* --- GÖRSEL ALANI --- */
    .sk-image-side {
        flex: 1;
        max-width: 50%;
    }

    .sk-image-side img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

    /* --- METİN VE LİSTE ALANI --- */
    .sk-text-side {
        flex: 1;
    }

    .sk-title {
        font-size: 32px; /* Başlığı biraz daha belirginleştirdim */
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .sk-desc {
        font-size: 16px;
        color: #666666;
        line-height: 1.8;
        margin-bottom: 30px;
        font-weight: 400;
    }

    .sk-features {
        list-style: none;
        padding: 0;
        margin: 0 0 35px 0;
    }

    .sk-features li {
        font-size: 16px;
        color: #444444;
        font-weight: 500;
        margin-bottom: 18px;
        display: flex;
        align-items: center;
    }

    .sk-features li i {
        font-size: 20px;
        width: 35px; 
        display: inline-block;
    }

    /* --- BUTONLAR ALANI --- */
    .sk-action-buttons {
        display: flex;
        gap: 15px;
        align-items: center;
        flex-wrap: wrap;
    }

    .sk-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 26px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 6px;
        text-decoration: none;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }

    .sk-btn-primary {
        background: linear-gradient(90deg, #9b51e0 0%, #e64980 100%);
        color: #ffffff;
        border: none;
        box-shadow: 0 4px 15px rgba(230, 73, 128, 0.25);
    }

    .sk-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(230, 73, 128, 0.4);
        color: #ffffff;
    }

    .sk-btn-outline {
        background: #000000;
        color: #444444;
        border: 2px solid #e0e0e0;
    }

    .sk-btn-outline:hover {
        border-color: #9b51e0;
        color: #9b51e0;
        background: #fcfaff;
    }

    /* --- MOBİL UYUMLULUK --- */
    @media (max-width: 992px) {
        .sk-about-card {
            flex-direction: column;
            padding: 30px 20px;
            text-align: center;
            gap: 30px;
        }

        .sk-image-side {
            max-width: 100%;
        }

        .sk-features li {
            justify-content: center;
        }
        
        .sk-action-buttons {
            justify-content: center;
        }
    }

    @media (max-width: 768px) {
        .sk-title {
            font-size: 26px;
        }
        .sk-action-buttons {
            flex-direction: column;
            gap: 12px;
        }
        .sk-btn {
            width: 100%;
        }
    }
	   /* --- İSTATİSTİK ALANI ANA KAPSAYICI --- */
    .sk-statistics-wrapper {
        padding: 80px 0;
        font-family: 'Poppins', sans-serif;
        background-color: #ffffff;
        text-align: center;
        width: 100%;
    }

    .sk-stats-container {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* --- BAŞLIK VE AÇIKLAMA --- */
    .sk-stats-header {
        margin-bottom: 60px;
    }

    .sk-stats-header h2 {
        font-size: 38px;
        font-weight: 700;
        color: #3b4256; /* Koyu lacivert/gri başlık */
        line-height: 1.3;
        margin-bottom: 20px;
    }

    .sk-stats-header p {
        font-size: 16px;
        color: #8c98a4; /* Açık gri metin */
        line-height: 1.8;
        max-width: 950px;
        margin: 0 auto;
        font-weight: 400;
    }

    /* --- İSTATİSTİK GRID YAPISI --- */
    .sk-stats-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 30px;
    }

    .sk-stat-box {
        flex: 1;
        min-width: 200px;
        text-align: center;
    }

    /* Gradient Rakam Efekti (Mordan Pembeye) */
    .sk-stat-number {
        display: block;
        font-size: 55px;
        font-weight: 700;
        /* Görseldeki renk geçişi */
        background: linear-gradient(90deg, #7b3fe4 0%, #f23b79 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 5px;
        line-height: 1.1;
    }

    .sk-stat-label {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #3b4256;
    }

    /* --- MOBİL UYUMLULUK --- */
    @media (max-width: 992px) {
        .sk-stats-header h2 { font-size: 32px; }
        .sk-stats-row { justify-content: center; }
        .sk-stat-box { flex: 0 0 45%; margin-bottom: 30px; }
    }

    @media (max-width: 576px) {
        .sk-stats-header h2 { font-size: 28px; }
        .sk-stats-header p { font-size: 15px; }
        .sk-stat-box { flex: 0 0 100%; margin-bottom: 30px; }
        .sk-stat-number { font-size: 48px; }
    }
	
	   /* --- PREMIUM BAŞLIK ALANI --- */
    .sk-premium-title-section {
        background-color: #ffffff; /* Temiz ve ferah bir arka plan */
        padding: 0px 0 29px 0; /* Yukarıdan bol boşluk (premium hissi için şarttır) */
        text-align: center;
        font-family: 'Poppins', sans-serif;
        position: relative;
        overflow: hidden;
    }

    /* Arka planda çok hafif, zarif bir mor ışıltı (Opsiyonel derinlik katar) */
    .sk-premium-title-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(123, 63, 228, 0.04) 0%, rgba(255,255,255,0) 70%);
        z-index: 0;
        pointer-events: none;
    }

    .sk-title-container {
        position: relative;
        z-index: 1;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Üst Başlık (Biz Kimiz?) */
    .sk-eyebrow {
        display: block;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 5px; /* Harfler arası açık boşluk lüks bir görünüm verir */
        margin-bottom: 15px;
        /* Softkrea marka renkleriyle gradient */
        background: linear-gradient(90deg, #7b3fe4 0%, #f23b79 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* Ana Başlık (Hakkımızda) */
    .sk-main-title {
        font-size: 52px;
        font-weight: 700;
        color: #2c3e50; /* Koyu, asil lacivert/gri */
        margin: 0;
        line-height: 1.2;
        letter-spacing: -1.5px; /* Büyük başlıklarda harfleri hafif sıkıştırmak modern durur */
    }

    /* Zarif Alt Çizgi */
    .sk-title-divider {
        width: 60px;
        height: 4px;
        background: linear-gradient(90deg, #7b3fe4 0%, #f23b79 100%);
        margin: 25px auto 0;
        border-radius: 50px;
    }

    /* Mobil Uyumluluk */
    @media (max-width: 768px) {
        .sk-premium-title-section {
            padding: 60px 0 40px 0;
        }
        .sk-main-title {
            font-size: 38px;
            letter-spacing: -1px;
        }
        .sk-eyebrow {
            font-size: 12px;
            letter-spacing: 3px;
            margin-bottom: 12px;
        }
    }

/* Genel Ayarlar */
.sk-web-features-section {
    padding: 53px 20px;
    font-family: 'Poppins', sans-serif;
}

.sk-web-feat-container {
    max-width: 1250px;
    margin: 0 auto;
}

/* Başlık Alanı */
.sk-web-feat-header {
    text-align: center;
    margin-bottom: 50px;
}

.sk-web-feat-title {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}

/* Başlıktaki vurgulu kelime */
.sk-feat-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.sk-feat-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 10px;
    background: linear-gradient(90deg, rgba(79, 70, 229, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
    z-index: -1;
    border-radius: 10px;
}

.sk-web-feat-desc {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Özellikleri Kapsayan Beyaz Kutu (Görseldeki gibi) */
.sk-feat-main-box {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03); /* Çok yumuşak derinlik */
    border: 1px solid #f0f0f0;
}

/* 4'lü Izgara Yapısı */
.sk-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstünde yan yana 4 tane */
    gap: 20px;
}

/* Tekil Özellik Kutucuğu (Hap şeklinde) */
.sk-feat-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background-color: #ffffff;
    border: 1px solid #f3f4f6; /* Görseldeki gibi ince çerçeve */
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Üzerine gelince (Hover) efekti */
.sk-feat-item:hover {
    border-color: #d1d5db; /* Çerçeve hafif koyulaşır */
    transform: translateY(-2px); /* Çok hafif yukarı kalkar */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

/* İkon Ayarları (Mor-Pembe Degrade) */
.sk-feat-item i {
    font-size: 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent; /* Font Awesome ikonunu degrade yapar */
    width: 24px; /* İkonların düzgün hizalanması için sabit genişlik */
    text-align: center;
}

/* Metin Ayarları */
.sk-feat-text {
    color: #374151;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* Mobil ve Tablet Uyumluluk (Responsive) */
@media (max-width: 1200px) {
    .sk-feat-grid {
        grid-template-columns: repeat(3, 1fr); /* Küçük bilgisayarlarda 3'lü */
    }
}

@media (max-width: 992px) {
    .sk-feat-grid {
        grid-template-columns: repeat(2, 1fr); /* Tabletlerde 2'li */
    }
    .sk-web-feat-title {
        font-size: 34px;
    }
}

@media (max-width: 600px) {
    .sk-web-features-section {
        padding: 60px 15px;
    }
    .sk-feat-main-box {
        padding: 25px 15px; /* Mobilde beyaz kutunun iç boşluklarını daralttık */
        border-radius: 16px;
    }
    .sk-feat-grid {
        grid-template-columns: 1fr; /* Telefonlarda tek sütun alt alta */
        gap: 15px;
    }
    .sk-web-feat-title {
        font-size: 28px;
    }
    .sk-feat-item {
        padding: 12px 15px;
    }
}

/* Genel Ayarlar */
.sk-magnet-cta-section {
    background-color: #ffffff; /* Temiz beyaz arka plan */
    padding: 2px 20px;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

.sk-magnet-container {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* İçerikleri dikeyde tam ortalar */
    justify-content: space-between;
    gap: 60px; /* Yazı ile görsel arası boşluk */
}

/* Sol İçerik Alanı */
.sk-magnet-content {
    flex: 1;
    max-width: 600px; /* Yazıların çok fazla uzamasını engeller */
}

/* Başlık */
.sk-magnet-title {
    color: #1a1e26; /* Koyu antrasit siyah */
    font-size: 42px;
    font-weight: 800; /* Görseldeki gibi ekstra kalın */
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 25px;
}

/* Açıklama Metinleri */
.sk-magnet-desc {
    color: #6b7280; /* Okunabilir, göz yormayan gri */
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 20px;
    font-weight: 400;
}

/* Buton Tasarımı (Görseldeki Parlamalı Efekt) */
.sk-magnet-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 16px 35px;
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%); /* Marka renkleri */
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px; /* Tam oval hatlar */
    /* Butona özel, rengiyle uyumlu parlama gölgesi */
    box-shadow: 0 10px 25px rgba(236, 72, 153, 0.4); 
    transition: all 0.3s ease;
}

.sk-magnet-btn:hover {
    transform: translateY(-3px); /* Hafif yukarı kalkma */
    box-shadow: 0 15px 35px rgba(236, 72, 153, 0.5); /* Gölgenin büyümesi */
}

/* Sağ Görsel Alanı */
.sk-magnet-image {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Görseli sağa yaslar */
    align-items: center;
}

.sk-magnet-img {
    max-width: 100%;
    height: auto;
    display: block;
    /* İsteğe bağlı: Görsele hafif bir havada durma animasyonu eklenebilir */
    /* animation: float 6s ease-in-out infinite; */
}

/* Hover Animasyonu (İsteğe Bağlı) */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* Mobil ve Tablet Uyumluluk (Responsive) */
@media (max-width: 1024px) {
    .sk-magnet-container {
        flex-direction: column-reverse; /* Mobilde görseli üste, yazıyı alta alır */
        text-align: center;
        gap: 40px;
    }
    
    .sk-magnet-content {
        max-width: 100%;
    }
    
    .sk-magnet-title {
        font-size: 36px;
    }
    
    .sk-magnet-image {
        justify-content: center; /* Mobilde görseli ortalar */
    }
}

@media (max-width: 600px) {
    .sk-magnet-cta-section {
        padding: 60px 20px;
    }
    
    .sk-magnet-title {
        font-size: 30px;
        line-height: 1.25;
    }
    
    .sk-magnet-desc {
        font-size: 15px;
    }
}

/* Genel Ayarlar */
.sk-process-section {
    background-color: #ffffff;
    padding: 35px 20px;
    font-family: 'Poppins', sans-serif;
}

.sk-process-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Başlık Alanı */
.sk-process-header {
    text-align: center;
    margin-bottom: 70px;
}

.sk-process-title {
    color: #111827;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 15px;
}

.sk-text-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.sk-process-subtitle {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

/* 2x2 Grid (Izgara) Yapısı */
.sk-process-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Yan yana 2 sütun */
    gap: 40px; /* Kartlar arasındaki boşluk */
}

/* İçerik Kutuları (Kartlar) */
.sk-process-card {
    background-color: #f8f9fa;
    padding: 40px 30px;
    border-radius: 16px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* İçeriği sola hizalar */
}

/* Kart Hover Efekti */
.sk-process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

/* İkonlar (Yuvarlak Rozetler) */
.sk-card-icon {
    width: 60px;
    height: 60px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(236, 72, 153, 0.3);
    margin-bottom: 25px; /* İkon ile başlık arası boşluk */
}

/* İkonların İçi Gradient */
.sk-card-icon i {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Kart Başlığı */
.sk-step-title {
    color: #111827;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Paragraf Ayarı */
.sk-process-card p {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

/* Mobil Uyumluluk (Ekran küçülünce alt alta geçmesi için) */
@media (max-width: 768px) {
    .sk-process-grid {
        grid-template-columns: 1fr; /* Mobilde tek sütun olur */
        gap: 25px;
    }
    
    .sk-process-header {
        margin-bottom: 40px;
    }
    
    .sk-process-title {
        font-size: 32px;
    }
}

/* Genel Bölüm Ayarları */
.sk-web-portfolio-section {
    padding: 35px 20px;
    font-family: 'Poppins', sans-serif;
}

.sk-web-container {
    max-width: 1350px;
    margin: 0 auto;
}

/* Başlık Ayarları */
.sk-web-header {
    text-align: center;
    margin-bottom: 60px;
}

.sk-web-title {
    color: #111827;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin: 0 0 15px 0;
}

/* 2. Satırdaki Şık Vurgu */
.sk-web-highlight {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 48px; /* İkinci satırı daha büyük ve heybetli yapar */
    font-weight: 800;
}

.sk-web-desc {
    color: #6b7280;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 4'lü Grid (Izgara) Yapısı */
.sk-web-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Masaüstünde yan yana 4'lü */
    gap: 30px;
}

/* Link Sarıcısı (Tüm kartı tıklanabilir yapar) */
.sk-web-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Kart Tasarımı */
.sk-web-card {
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden; /* Resmin köşelerden taşmasını engeller */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    height: 100%;
}

/* Kartın Üzerine Gelindiğinde (Hover) */
.sk-web-card-link:hover .sk-web-card {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Resim Alanı */
.sk-web-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3; /* Tüm görselleri aynı standart oranda tutar */
    overflow: hidden;
    position: relative;
    background-color: #f3f4f6; /* Resim yüklenene kadar görünen renk */
}

/* Resim Ayarları */
.sk-web-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi alana sığdırır, orantıyı bozmaz */
    object-position: top; /* Web sitesi tasarımlarının üst kısmını gösterir */
    transition: transform 0.6s ease; /* Yumuşak zoom animasyonu */
}

/* Resme Hover Zoom Efekti */
.sk-web-card-link:hover .sk-web-img-wrapper img {
    transform: scale(1.08); /* Resmi %8 yakınlaştırır */
}

/* Kart Metin Alanı */
.sk-web-card-body {
    padding: 25px 20px;
    text-align: center;
}

.sk-web-card-title {
    color: #1f2937;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.sk-web-card-category {
    color: #8b5cf6; /* Hafif mor tonlu kategori rengi */
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobil ve Tablet Uyumluluk */
@media (max-width: 1200px) {
    .sk-web-grid {
        grid-template-columns: repeat(3, 1fr); /* Küçük bilgisayarlarda 3'lü */
    }
}

@media (max-width: 992px) {
    .sk-web-grid {
        grid-template-columns: repeat(2, 1fr); /* Tabletlerde 2'li */
    }
    .sk-web-title {
        font-size: 30px;
    }
    .sk-web-highlight {
        font-size: 40px;
    }
}

@media (max-width: 600px) {
    .sk-web-grid {
        grid-template-columns: 1fr; /* Telefonlarda alt alta tekli */
        gap: 20px;
    }
    .sk-web-title {
        font-size: 26px;
        line-height: 1.4;
    }
    .sk-web-highlight {
        font-size: 32px;
    }
}

/* SSS Genel Ayarları */
.sss-fg-section {
    padding: 100px 20px;
    font-family: 'Poppins', sans-serif;
}

.sss-fg-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Başlık Alanı */
.sss-fg-header {
    text-align: center;
    margin-bottom: 60px;
}

.sss-fg-title {
    color: #111827;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 15px;
}

/* Ortak Gradient Sınıfı (Önceki kodlardan kalma) */
.sk-text-gradient {
    background: linear-gradient(135deg, #4f46e5 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.sss-fg-subtitle {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

/* Accordion Listesi */
.sss-fg-list {
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* Tekil Soru Kutusu */
.sss-fg-item {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

/* Soru Başlığı (Tıklanabilir Alan) */
.sss-fg-question {
    padding: 24px 30px;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    list-style: none; 
}

.sss-fg-question::-webkit-details-marker {
    display: none;
}

/* Açma/Kapatma Butonu */
.sss-fg-toggle {
    width: 40px;
    height: 40px;
    background-color: #f3f4f6; 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* İkonun Kendisi */
.sss-fg-toggle i {
    color: #6b7280;
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
}

/* Hover Durumları */
.sss-fg-question:hover {
    color: #4f46e5;
}

.sss-fg-question:hover .sss-fg-toggle {
    background-color: #e0e7ff; 
}

.sss-fg-question:hover .sss-fg-toggle i {
    color: #4f46e5;
}

/* AÇIK OLAN Sorunun Stili */
details[open].sss-fg-item {
    border-color: #4f46e5; 
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.1);
}

details[open] .sss-fg-question {
    color: #4f46e5;
    border-bottom: 1px solid #f3f4f6; 
}

/* AÇIKKEN Butonun Stili */
details[open] .sss-fg-toggle {
    background-color: #ec4899; 
    transform: rotate(180deg); 
}

details[open] .sss-fg-toggle i {
    color: #ffffff; 
    transform: rotate(180deg); 
}

/* Cevap Alanı */
.sss-fg-answer {
    padding: 24px 30px;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
    background-color: #ffffff;
    animation: slideDown 0.4s ease;
}

.sss-fg-answer p {
    margin: 0;
}

/* Animasyon */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .sss-fg-title {
        font-size: 32px;
    }
    .sss-fg-question {
        padding: 20px;
        font-size: 16px;
    }
    .sss-fg-toggle {
        width: 35px;
        height: 35px;
        min-width: 35px; 
    }
    .sss-fg-answer {
        padding: 20px;
        font-size: 15px;
    }
}