/* Genel Responsive CSS Kuralları */

/* Box-sizing reset - Tüm elemanlar için */
* {
    box-sizing: border-box;
}

/* HTML ve Body için sıkı kontrol */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Ana içerik alanı - Sıkı kontrol */
body {
    position: relative;
    overflow-x: hidden;
}

/* Container genişlik kontrolü - Sıkı sınırlar */
.container {
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ana içerik alanı */
.main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Grid sistemleri için genel kurallar */
.grid-container {
    display: grid;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Kartlar için genel kurallar */
.card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Metin taşmasını engelleme */
.text-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Tüm section'lar için genel kurallar */
.section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Tüm div'ler için genel kontrol */
div {
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive breakpoint'ler */
@media (max-width: 1200px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }
    
    /* Mobilde grid'leri tek sütun yap */
    .grid-container {
        grid-template-columns: 1fr !important;
        max-width: 100%;
    }
    
    /* Mobilde padding'leri azalt */
    .card {
        padding: 20px 15px !important;
        max-width: 100%;
    }
    
    /* Mobilde tüm section'lar için sıkı kontrol */
    .section {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
        max-width: 100%;
    }
    
    .card {
        padding: 15px 10px !important;
        max-width: 100%;
    }
    
    /* Küçük ekranlarda daha sıkı kontrol */
    .section {
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
        max-width: 100%;
    }
    
    .card {
        padding: 10px 8px !important;
        max-width: 100%;
    }
    
    /* En küçük ekranlarda maksimum sıkılık */
    .section {
        padding-left: 8px !important;
        padding-right: 8px !important;
        max-width: 100%;
    }
}

/* Tablet özel ayarları */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding-left: 25px;
        padding-right: 25px;
        max-width: 100%;
    }
}

/* Büyük ekranlar için */
@media (min-width: 1201px) {
    .container {
        max-width: 1400px;
        width: 100%;
    }
}

/* Flex container'lar için */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Responsive resimler */
img {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

/* Responsive tablolar */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
    box-sizing: border-box;
}

/* Responsive form elemanları */
input, textarea, select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive butonlar */
.btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .btn {
        width: 100%;
        margin-bottom: 10px;
        max-width: 100%;
    }
}

/* Özel sınıflar için genel kurallar */
.kurumsal-section,
.referanslar-section,
.iletisim-section,
.urunler-section,
.hero-section {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Grid sistemleri için özel kurallar */
.degerler-grid,
.referanslar-grid,
.basari-grid,
.urunler-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Kartlar için özel kurallar */
.deger-card,
.referans-card,
.basari-card,
.urun-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Layout container'lar için */
.iletisim-layout {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Form container'lar için */
.iletisim-form-container,
.iletisim-right-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Misyon-vizyon grid için */
.misyon-vizyon {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* MV kartları için */
.mv-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Başarı hikayeleri için */
.basari-hikayeleri {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ürünler container için */
.urunler-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ürünler controls için */
.urunler-controls {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* View toggle için */
.view-toggle {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* View button'ları için */
.view-btn {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Modal içerikleri için */
.modal-content {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Notification container için */
#notification-container {
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Footer için */
#footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Bottom footer için */
#bottom-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}