/*
 * ======================================================================================
 * DOSYA: about.css
 * KONUM: wwwroot/css/about.css
 * KULLANIM: Views/Home/About.cshtml (Hakkımızda Sayfası)
 * 
 * AÇIKLAMA: Bu dosya Hakkımızda sayfasının tüm görsel düzenini kontrol eder.
 * Renkler, boşluklar, yazı tipleri, kart tasarımları ve mobil uyumluluk buradadır.
 * ======================================================================================
 */

/* 
 * [BÖLÜM 1: SAYFA ÜST BAŞLIĞI (Page Header)] 
 * Sayfanın en tepesindeki mavi arka planlı, başlık ("Hakkımızda") içeren alan.
 */
.page-header {
    /* Arka Plan: Sol üstten sağ alta doğru Ana Renk -> Koyu Renk geçişi */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

    /* İç Boşluk: Üstten ve alttan 4 birim (rem) boşluk bırakır (Yüksekliği belirler) */
    padding: 4rem 0 4rem;

    /* Yazı Rengi: Beyaz */
    color: white;

    /* Alt Boşluk: Header ile altındaki içerik (resim/yazı) arasındaki mesafe */
    margin-bottom: 3rem;

    /* Konumlandırma: İçindeki süslemeleri (noktalı çizgi) yerleştirmek için referans noktası */
    position: relative;

    /* Hizalama: İçeriği dikeyde ortalamak için Flexbox */
    display: flex;
    align-items: center;

    /* Minimum Yükseklik: İçerik az olsa bile en az bu kadar yüksek olsun */
    min-height: 350px;
}

/* Header içindeki Container (İçeriği ortalayan kutu) */
.page-header .container {
    display: flex;
    align-items: center;
    justify-content: center;
    /* İçeriği tam ortalar */
    min-height: 350px;
}

/* [SÜSLEME] Header'ın en tepesindeki noktalı çizgi deseni */
.page-header::after {
    content: '';
    position: absolute;
    /* Header'a göre konumlan */
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    /* Çizgi yüksekliği */

    /* Desen: Tekrar eden beyaz çizgiler (Noktalı görünüm verir) */
    background-image: repeating-linear-gradient(90deg,
            white 0px,
            white 8px,
            transparent 8px,
            transparent 16px);

    opacity: 0.6;
    /* Hafif saydamlık (%60) */
    z-index: 2;
    /* Yazının altında ama arka planın üstünde */
}

/* Header İçeriği (H1 ve P etiketlerini kapsayan kutu) */
.page-header-content {
    padding-top: 3rem;
    /* Üstten ekstra boşluk (Noktalı çizgiye yapışmasın) */
    position: relative;
    z-index: 1;
    /* En önde görünsün */
    width: 100%;
}

/* Ana Başlık (H1) - Örn: "Hakkımızda" */
/* Ana Başlık (H1) - Örn: "Hakkımızda" */
.page-header h1 {
    color: white;
    font-size: 2.5rem;
    /* 4rem'den küçültüldü */
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Alt Açıklama (P) - Örn: "Yılların Tecrübesi..." */
.page-header p {
    font-size: 1.2rem;
    /* 1.5rem'den küçültüldü */
    opacity: 0.95;
    margin-bottom: 1.5rem;
}

/* 
 * [BÖLÜM 2: HAKKIMIZDA ANA İÇERİK (About Section)] 
 * Sol tarafta resim, sağ tarafta "Biz Kimiz" yazısının olduğu ana gövde.
 */
.about-section {
    padding: 0 0 5rem;
    /* Alttan boşluk bırak */
    overflow-x: hidden;
    /* Taşma olursa gizle (Kaydırma çubuğu çıkmasın) */
    position: relative;
}

/* Resim Alanı Kapsayıcısı */
.about-image {
    position: relative;
    /* İçindeki "Deneyim Rozeti" buna göre konumlanır */
}

/* [GÖRSEL YER TUTUCU] Resim yüklenmezse görünen renkli kutu */
.image-placeholder {
    /* Koyu Gri/Mavi -> Kahverengi Geçiş */
    background: linear-gradient(135deg, #34495e, #8E735B);
    border-radius: 20px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 6rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* [DENEYİM ROZETİ] Resmin köşesindeki "15 Yıllık Tecrübe" kutusu */
.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: #8E735B;
    /* Kahverengi */
    color: white;
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(142, 115, 91, 0.4);
    min-width: 150px;
}

/* Rozet içindeki Yıl Sayısı (Örn: "15") */
.experience-badge .years {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

/* Rozet içindeki Yazı (Örn: "Yıllık Tecrübe") */
.experience-badge .text {
    font-size: 0.9rem;
    opacity: 0.9;
    font-weight: 500;
}

/* Sağ Taraftaki Yazı İçeriği Başlığı */
.about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    font-weight: 700;
}

.about-content .section-subtitle {
    color: #8E735B;
    /* Hikayemiz - Kahve Rengi */
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Sağ Taraftaki Paragraflar */
.about-content p {
    color: #6c757d;
    margin-bottom: 1rem;
    line-height: 1.8;
    font-size: 1.1rem;
}

/* Özellik Listesi (Check işaretli maddeler) */
.about-features {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

/* Check İkonu Rengi */
.about-feature i {
    color: #25d366;
    /* Parlak Yeşil */
    font-size: 1.5rem;
}

/* Bize Ulaşın Butonu */
.about-content .btn-primary {
    background-color: #8E735B;
    border: 2px solid #8E735B;
    color: white;
    border-radius: 10px;
    font-weight: 700;
    /* Kalın font */
    padding: 1rem 3rem;
    /* Daha büyük buton */
    font-size: 1.1rem;
    /* Daha büyük yazı */
    text-transform: uppercase;
    /* Büyük harf */
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(142, 115, 91, 0.3);
}

.about-content .btn-primary:hover {
    background-color: white;
    color: #8E735B;
    transform: translateY(-3px);
}

/* 
 * [BÖLÜM 3: DEĞERLERİMİZ (Values Section)] 
 * Misyon, Vizyon, Kalite Politikası kartlarının olduğu bölüm.
 */
.values-section {
    padding: 5rem 0;
    background: #2c3e50 !important;
    /* Koyu Arka Plan */
    position: relative;
    overflow: hidden;
}

.values-section .section-title {
    color: white !important;
}

.values-section .section-subtitle {
    color: #b4a078 !important;
    /* Altın Rengi */
}

/* [KART] Tekil Değer Kartı (Kutu) */
.value-card {
    background: var(--white);
    padding: 2.5rem;
    /* İç mesafe */
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    /* Hafif gölge */
    height: 100%;
    /* Hepsi eşit yükseklikte olsun */
    color: var(--dark) !important;
    /* Yazılar siyah */
    transition: all 0.3s ease;
    /* Hover efekti için yumuşak geçiş */
    cursor: pointer;
    /* Üzerine gelince el işareti çıksın */
}

/* Karta Mouse ile Gelince (Hover) */
.value-card:hover {
    transform: translateY(-8px);
    /* Hafifçe yukarı zıpla */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    /* Gölgeyi büyüt */
}

/* Kartın İkonu (Yuvarlak içindeki simge) */
.value-icon {
    width: 80px;
    height: 80px;
    /* İkon arka planı: Degrade geçiş */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    /* Tam yuvarlak */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    /* Ortala ve alttan boşluk ver */
    font-size: 2rem;
    color: white;
    transition: all 0.3s ease;
}

/* Kart hover olunca ikonu büyüt */
.value-card:hover .value-icon {
    transform: scale(1.1);
    /* %10 büyüt */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.value-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--dark) !important;
    transition: color 0.3s ease;
}

/* Kart hover olunca başlığı mavi yap */
.value-card:hover h3 {
    color: var(--primary-color) !important;
}

.value-card p {
    color: var(--dark) !important;
    margin: 0;
    transition: color 0.3s ease;
}

/* Kart hover olunca paragrafı gri yap */
.value-card:hover p {
    color: var(--gray) !important;
}

/* 
 * [BÖLÜM 4: İSTATİSTİKLER (Stats Section)] 
 * Proje Sayısı, Müşteri Sayısı gibi sayaçların olduğu alan.
 */
/* 
 * [BÖLÜM 4: İSTATİSTİKLER (Stats Section)] 
 * Proje Sayısı, Müşteri Sayısı gibi sayaçların olduğu alan.
 */
.about-stats-section {
    padding: 6rem 0;
    /* Açık Gri/Beyaz Desenli Arka Plan */
    background: #f8f9fa !important;
    position: relative;
    overflow: hidden;
}

.about-stats-section .container {
    position: relative;
    z-index: 1;
}

/* İstatistik Kartı */
.about-stat-card {
    height: 100%;
    position: relative;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 3rem 1.5rem;
    background: #ffffff;
    border: none;
    /* Çerçeve Yok */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Yumuşak Gölge */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* İstatistik Kartı Hover Durumu */
.about-stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

/* İstatistik İkon Alanı */
.about-stat-card .stat-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.5rem;
    /* Koyu Gri/Siyah Daire */
    background: linear-gradient(135deg, #34495e, #2c3e50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 20px rgba(44, 62, 80, 0.3);
    /* İkon Gölgesi */
    border: 4px solid #fff;
    /* Beyaz Çerçeve (opsiyonel, görselde sanki yok ama temiz durur) */
    outline: 1px solid rgba(0, 0, 0, 0.05);
}

.about-stat-card:hover .stat-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, #2c3e50, #8E735B);
    /* Hover'da Kahve Geçişi */
}

.about-stat-card .stat-icon i {
    color: #ffffff !important;
    font-size: 2.5rem;
}

/* İstatistik Sayı Değeri */
.about-stat-card .stat-value {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: var(--font-heading);
    color: #2c3e50 !important;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.about-stat-card .counter-value {
    color: #2c3e50 !important;
}

.about-stat-card .counter-suffix {
    font-size: 1.5rem;
    font-weight: 600;
    color: #7f8c8d !important;
    margin-left: 2px;
}

.about-stat-card .stat-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #95a5a6 !important;
    /* Açık Gri Yazı */
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

/* 
 * [BÖLÜM 5: MOBİL UYUMLULUK (Responsive)] 
 * Tabletler ve Telefonlar için özel ayarlar.
 * !important etiketleri, Bootstrap varsayılanlarını ezmek için kullanılır.
 */

/* TABLET (768px ve altı) */
@media (max-width: 768px) {
    .about-stats-section {
        padding: 4rem 0;
        /* Boşlukları azalt */
    }

    .about-stat-card {
        padding: 1.5rem 1rem;
        /* Kart iç boşluğunu küçült */
    }

    .about-stat-card .stat-icon {
        width: 75px;
        /* İkonu küçült */
        height: 75px;
    }

    .about-stat-card .stat-icon i {
        font-size: 2.2rem;
    }

    .about-stat-card .stat-value {
        font-size: 2.8rem;
        /* Sayıyı küçült */
    }

    .about-stat-card .counter-suffix {
        font-size: 1.6rem;
    }

    .about-stat-card .stat-label {
        font-size: 0.95rem;
    }
}


/* [BÖLÜM 6: HİZMET BÖLGELERİ (Service Areas)] */
.service-areas-section {
    padding: 6rem 0;
    /* Koyu Lacivert Arka Plan */
    background-color: #2c3e50 !important;
    position: relative;
    overflow: hidden;
}

/* Arka plan dekorasyonu (noktalı desen) */
.service-areas-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.3;
    pointer-events: none;
}

.service-areas-section .container {
    position: relative;
    z-index: 1;
}

.service-areas-section .section-subtitle {
    color: #b4a078 !important;
    /* Altın Rengi */
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.service-areas-section .section-title {
    color: white !important;
    font-size: 2.5rem !important;
    margin-bottom: 1.5rem;
    /* Boşluk Azaltıldı */
    font-weight: 700;
}

.service-areas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

/* Bölge Kartı/Butonu */
.area-badge {
    background: #ffffff;
    /* Beyaz Zemin */
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    color: #2c3e50;
    /* Koyu Yazı */
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    cursor: default;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Hover Efekti */
.area-badge:hover {
    background: #b4a078;
    /* Altın Rengi Dolgu */
    border-color: #b4a078;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.area-badge i {
    color: #b4a078;
    /* İkon Altın Rengi */
    font-size: 1.1rem;
    margin-right: 0.5rem;
    transition: color 0.3s ease;
}

.area-badge:hover i {
    color: white;
    /* Hover'da İkon Beyaz */
}

/* 
 * [MOBİL DÜZENLEMELERİ DEVAM] 
 * Küçük ekranlarda düzenin bozulmaması için kritik ayarlar.
 */

@media (max-width: 991.98px) {

    /* Deneyim Rozetini biraz daha içeri çek */
    .experience-badge {
        right: 20px;
    }
}

/* TELEFON (768px ve altı) */
@media (max-width: 768px) {

    /* Header yüksekliğini ve boşluklarını azalt */
    .page-header {
        padding: 3rem 0 3rem;
        min-height: 300px;
    }

    .page-header .container {
        min-height: 300px;
    }

    .page-header-content {
        padding-top: 2rem;
    }

    .page-header h1 {
        font-size: 3rem;
    }

    .page-header p {
        font-size: 1.3rem;
    }

    /* [ÖNEMLİ] Section Yan Boşluk Sıfırlama */
    /* Mobilde ekran dar olduğu için section padding'ini sıfırlayıp tam genişlik kullanıyoruz */
    .about-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* [GRID DÜZELTMESİ] Bootstrap Grid Ayarlarını Ezme */
    /* Amaç: Mobilde yatay kaydırma çubuğu (scroll) çıkmasını engellemek */
    .about-section .container {
        padding-left: 12px !important;
        /* Kenarlardan hafif boşluk */
        padding-right: 12px !important;
        max-width: 100% !important;
        /* Tam genişlik */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Satır (Row) Negatif Margin Düzeltmesi */
    .about-section .row {
        margin-left: 0 !important;
        /* Bootstrap'in -15px margin'ini sıfırla */
        margin-right: 0 !important;
    }

    /* Sütun (Col) Padding Düzeltmesi */
    .about-section [class*="col-"] {
        padding-left: 12px !important;
        /* İçeriği kenarlardan biraz uzaklaştır */
        padding-right: 12px !important;
    }
}

/* KÜÇÜK TELEFON (575px ve altı) */
@media (max-width: 575.98px) {
    .page-header {
        padding: 2.5rem 0 2.5rem;
        min-height: 280px;
    }

    .page-header .container {
        min-height: 280px;
    }

    .page-header-content {
        padding-top: 1.5rem;
    }

    .page-header h1 {
        font-size: 2.5rem;
        /* Başlığı daha da küçült */
    }

    .page-header p {
        font-size: 1.2rem;
    }

    /* Aynı Grid Düzeltmelerini küçük ekranlar için de uygula */
    .about-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    .about-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .about-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .about-section [class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}