/* ===== HİZMETLER SAYFASI CSS DOSYASI ===== */

/* Sayfa Üst Boşluğu */
.sayfa-ust-bosluk {
    padding-top: 5rem;
}

/* Hero Bölümü */
.hizmetler-hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 50%, #f3e8ff 100%);
}

.hero-baslik-merkez {
    text-align: center;
    margin-bottom: 4rem;
}
.ana-baslik {
    font-size: 3rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .ana-baslik {
        font-size: 3rem;
    }
}

.hero-aciklama-merkez {
    font-size: 1.25rem;
    color: #6b7280;
    max-width: 48rem;
    margin: 0 auto;
}

/* Ana Hizmetler Bölümü */
.ana-hizmetler-bolumu {
    padding: 6rem 0;
    background-color: white;
    
    
}

.hizmetler-izgara {
    display: grid;
    gap: 2rem;
    margin-bottom: 4rem;
    justify-content: center;
    max-width: 1200px; /* Opsiyonel: Izgaranın maksimum genişliğini ayarla */
    margin-left: auto; /* Izgarayı sayfada ortala */
    margin-right: auto; /* Izgarayı sayfada ortala */
}

@media (min-width: 768px) {
    .hizmetler-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .hizmetler-izgara {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Hizmet Kartları */
/* Ana Hizmetler Bölümü */
.ana-hizmetler-bolumu {
    padding: 6rem 0; /* Üstte ve altta boşluk */
    background-color: white; /* Arka plan rengi */
}

/* Konteyner (Bu bölüm özelinde) */
.container {
    max-width: 1200px; /* İçeriği sınırlar */
    margin: 0 auto; /* Ortalar */
    padding: 0 1.5rem; /* Yanlarda boşluk */
}

/* Hizmetler Izgarası (Grid Yapısı) */
.hizmetler-izgara {
    display: grid;
    gap: 2rem; /* Kartlar arası boşluk */
    margin-bottom: 4rem; /* Izgara ile altındaki boşluk */
    justify-content: center; /* Kartları grid içinde ortala */
    max-width: 1200px; /* Izgaranın maksimum genişliğini ayarla */
    margin-left: auto; /* Izgarayı sayfada ortala */
    margin-right: auto; /* Izgarayı sayfada ortala */
    
    /* Mobil için varsayılan tek sütun */
    grid-template-columns: 1fr; 
}

/* Medya Sorguları - Duyarlı Izgara */
/* Tablet boyutlarından (768px) itibaren 2x2 düzeni */
@media (min-width: 768px) { 
    .hizmetler-izgara {
        grid-template-columns: repeat(2, 1fr); /* 2 sütun */
    }
}

/* Daha büyük masaüstü ekranlar için (isteğe bağlı, eğer 2x2'den fazlası istenmezse bu kaldırılabilir) */
@media (min-width: 1024px) { 
    .hizmetler-izgara {
        grid-template-columns: repeat(2, 1fr); /* Yine 2 sütun */
    }
}


/* Hizmet Kartı Temel Stilleri */
.hizmet-karti {
    background-color: white;
    padding: 2.5rem; /* İç boşluk artırıldı */
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); /* Belirgin gölge */
    border: 1px solid #f3f4f6; /* Hafif kenarlık */
    transition: all 0.3s ease; /* Hover efekti için geçiş */
    min-width: 18rem; /* Kartın minimum genişliği */
    display: flex; /* İçeriği hizalamak için flexbox */
    flex-direction: column; /* İçeriği dikeyde sırala */
    justify-content: space-between; /* İçeriği dikeyde dağıt */
    height: auto; /* İçeriğe göre yüksekliği ayarlar */
}

.hizmet-karti:hover {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); /* Hover'da gölge artırıldı */
    transform: translateY(-0.75rem); /* Hafif yukarı kayma artırıldı */
}

/* Hizmet İkonu Stilleri */
.hizmet-ikonu {
    width: 4.5rem; /* İkon kapsayıcı boyutu artırıldı */
    height: 4.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; /* İkon rengi beyaz */
    font-size: 2.25rem; /* İkon boyutu artırıldı */
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* İkonun kendi gölgesi */
    transition: transform 0.3s ease; /* Hover efekti için geçiş */
}

.hizmet-karti:hover .hizmet-ikonu {
    transform: scale(1.05); /* Kart hover'da ikon hafif büyür */
}

/* İkon Arka Plan Renkleri (Orijinal verdiğiniz renkler, gradyan eklendi) */
.hizmet-ikonu-mavi { background: linear-gradient(135deg, #dbeafe, #3b82f6); color: #3b82f6; } 
.hizmet-ikonu-yesil { background: linear-gradient(135deg, #dcfce7, #16a34a); color: #16a34a; }
.hizmet-ikonu-mor { background: linear-gradient(135deg, #f3e8ff, #9333ea); color: #9333ea; }
.hizmet-ikonu-turuncu { background: linear-gradient(135deg, #fed7aa, #ea580c); color: #ea580c; }

/* Kart İçindeki Başlık ve Açıklama */
.hizmet-baslik {
    font-size: 1.5rem; /* Başlık boyutu */
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    transition: color 0.3s ease; /* Hover efekti için geçiş */
}

.hizmet-karti:hover .hizmet-baslik {
    color: #3b82f6; /* Hover'da başlık rengi değişir */
}

.hizmet-aciklama {
    font-size: 1rem; /* Açıklama boyutu */
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 1.25rem; /* Özellik listesinden önce boşluk */
    flex-grow: 1; /* Kartın dikeyde dolmasını sağlar */
}

/* Hizmet Özellikleri Listesi */
.hizmet-ozellikler {
    list-style: none; /* Liste işaretlerini kaldır */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* Özellikler arası boşluk */
    margin-bottom: 1.5rem; /* Fiyat alanından önce boşluk */
}

.hizmet-ozellik {
    display: flex;
    align-items: flex-start; /* İkon ve metni üstten hizala */
    font-size: 0.9rem; /* Özellik metni boyutu */
    color: #6b7280; /* Metin rengi */
    line-height: 1.4; /* Okunabilirliği artırır */
}

.hizmet-ozellik strong {
    font-weight: 700; /* Kalın metni daha belirgin yap */
    color: #1f2937; /* Koyu gri */
}

.ozellik-ikonu {
    width: 1rem;
    height: 1rem;
    color: #16a34a; /* Yeşil onay ikonu */
    margin-right: 0.5rem;
    flex-shrink: 0; /* İkonun küçülmesini engeller */
    margin-top: 0.2rem; /* İkonu biraz aşağı hizala (metinle hizalama için) */
}

/* Hizmet Fiyat Alanı */
.hizmet-fiyat-alani {
    border-top: 1px solid #e5e7eb; /* Ayırıcı çizgi */
    padding-top: 1.25rem; /* Üst boşluk */
    margin-top: auto; /* Kartın en altına hizalar */
    display: flex;
    justify-content: space-between; /* Fiyat ve butonu yan yana, aralarında boşluk */
    align-items: center;
}

.hizmet-fiyati {
    font-size: 1rem; /* Fiyat metni boyutu */
    font-weight: 700; /* Kalın font */
    color: #3b82f6; /* Mavi fiyat rengi */
    margin: 0;
}

/* Hizmet Teklif Linki (Buton) */
.hizmet-teklif-linki {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem; /* İkon ve metin arası boşluk */
    color: #3b82f6; /* Mavi metin rengi */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease; /* Hover efektleri */
}

.hizmet-teklif-linki:hover {
    color: #2563eb; /* Hover'da daha koyu mavi */
    transform: translateX(3px); /* Hover'da hafif sağa kayma */
}

.teklif-ok-ikonu {
    width: 1rem;
    height: 1rem;
    margin-left: 0.25rem;
}
/* Süreç Bölümü */
.surec-bolumu {
    padding: 6rem 0;
    background-color: #f9fafb;
}

.surec-izgara {
    display: grid;
    gap: 2rem;
}

@media (min-width: 768px) {
    .surec-izgara {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .surec-izgara {
        grid-template-columns: repeat(4, 1fr);
    }
}

.surec-adimi {
    text-align: center;
}

.surec-numara-konteyneri {
    position: relative;
    margin-bottom: 2rem;
}

.surec-numarasi {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.surec-baslik {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.75rem;
}

.surec-aciklama {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.surec-sure-rozeti {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background-color: #dbeafe;
    color: #1d4ed8;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
}

.sure-ikonu {
    width: 1rem;
    height: 1rem;
}

/* CTA (Çağrı) Bölümü */
.cta-bolumu {
    padding: 6rem 0;
    background-color: white;
}

.cta-konteyneri {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}

.cta-baslik {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .cta-baslik {
        font-size: 3rem;
    }
}

.cta-aciklama {
    font-size: 1.25rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.cta-butonlar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

@media (min-width: 640px) {
    .cta-butonlar {
        flex-direction: row;
    }
}

/* Buton Stilleri */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-birincil {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-birincil:hover {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-ikincil {
    background-color: white;
    color: #4b5563;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.btn-ikincil:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
    .ana-baslik {
        font-size: 1.5rem;
    }
    
    .cta-baslik {
        font-size: 2rem;
    }
    
    .hizmetler-izgara {
        grid-template-columns: 1fr;
    }
    
    .surec-izgara {
        grid-template-columns: 1fr;
    }
    
    .cta-butonlar {
        flex-direction: column;
    }
}