/* =================================================================== */
/* --- MASTER-RESPONSIVE.CSS: GLOBAL UYUMLULUK VE KORUMA --- */
/* (Tüm bileşen CSS'lerinden sonra yüklenmelidir.) */
/* =================================================================== */


/* 1. GLOBAL KORUMA VE TAŞMA ENGELLEYİCİLER */

/* 1.1. Yatay Kaydırmayı ve Dikey Taşmayı Önleme */
/* #root etiketi, React içeriğinin ana kapsayıcısıdır. */
#root, .page-wrapper { 
    overflow-x: hidden !important; /* Yatay kaydırmayı kesinkes engelle */
    min-height: 100vh;
}

/* 1.2. Akıllı Resim Ölçekleyici (Logolar ve Resimler İçin) */
/* Firebase'den gelen 4K resimlerin kapsayıcıdan taşmasını engeller. */
img, svg, video {
    max-width: 100% !important; /* Kapsayıcıyı asla aşma (En üst öncelik) */
    height: auto; 
    display: block;
    object-fit: contain; /* Görüntü oranını koruyarak sığdırır */
}

/* 1.3. Arka Plan Koruyucu */
/* Hero Bölümündeki Arka Plan Resminin Mobil Ekrana Tam Sığmasını Garanti Eder. */
.welcome-container {
    background-size: cover !important;        
    background-position: center center !important; 
    background-repeat: no-repeat !important;
}


/* 2. MOBİL METİN VE BUTON DENGESİ */
/* (Metin boyutunu küçültürken yerleşimi bozmaz) */

/* TABLETLER (Maks. 992px) */
@media (max-width: 992px) {
    .welcome-title {
        font-size: 3rem !important; /* Başlık boyutu düşürülür */
    }
    .services-summary h2 {
        font-size: 2.4rem !important;
    }
    .services-summary {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* TELEFONLAR (Maks. 768px) */
@media (max-width: 768px) {
    .welcome-title {
        font-size: 2.2rem !important;
    }
    .welcome-subtitle {
        font-size: 1rem !important;
    }
    .welcome-logo-text {
        font-size: 1.8rem !important;
    }
    
    /* FOOTER BAR (Taşmayı Engelle) */
    .welcome-footer-bar {
        /* İçeriğin akmasına izin ver, ancak kenarlardan sıkıştır */
        padding-left: 10px !important;
        padding-right: 10px !important;
        /* Sosyal medya ikonları gibi öğelerin ezilmesini önlemek için */
        flex-wrap: wrap !important;
    }
    
    /* Butonları küçült (min-width'i koruyarak) */
    .cta-main {
        font-size: 1rem !important;
        padding: 12px 25px !important;
    }
}

/* ÇOK KÜÇÜK TELEFONLAR (Maks. 480px) */
@media (max-width: 480px) {
    .welcome-title {
        font-size: 1.6rem !important;
    }
    .welcome-subtitle {
        font-size: 0.85rem !important;
    }
    .role-btn, .cta-main {
        font-size: 0.85rem !important;
        padding: 8px 15px !important;
    }
}