:root {
    
    --primary-color: #2a2f3a;       
    --primary-color-dark: #212530;  
    --secondary-color: #6f768d;     
    /* YENİ KIRMIZI VURGU RENGİ */
    --red-accent: #CC0000; 
    
    --text-color-dark: #202020;     
    --light-bg: #f4f5f8;            
    --dark-bg: #212530;             
    --white: #ffffff;
    --text-color-light: #fcfcfc;
    
    --soft-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); 
    --transition-speed: 0.3s;
    
    --base-font-size: 15px;
    --max-width: 1100px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    overflow-x: hidden; 
    width: 100%;
    font-size: var(--base-font-size); 
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #444; 
    background-color: #fcfcfc; 
     overflow-x: hidden;
}

@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.container {
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 15px;
}
img {
    max-width: 100%;
    height: auto;
    display: block; 
}

a, button, .highlight-content-row, .tab-link, .vehicle-card, .gallery-item, .product-card, .dynamic-value-card {
    transition: all var(--transition-speed) ease-in-out;
}


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


.cta-button-small, .cta-button-light, .cta-banner .cta-button {
    text-decoration: none;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: var(--soft-shadow);
    display: block; 
    width: fit-content; 
    align-self: flex-start; 
}


.cta-button-light {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--dark-bg) !important;
    text-decoration: none;
    padding: 12px 25px;
    font-size: 1rem;
    border-radius: 5px;
    font-weight: 700;
    transition: all var(--transition-speed);
    
  
    margin: 0 auto; 
}

.cta-button-light:hover {
    background-color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
}


.cta-button-small {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding: 10px 20px; 
    font-size: 0.95rem; 
    margin-top: 15px; 
}
.cta-button-small:hover {
    background-color: var(--red-accent); 
    color: var(--white) !important; 
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
}



@media (max-width: 576px) {
    .container {
        width: 100%; 
        padding: 0 10px; 
    }
}
/* =================================================================== */
/* --- 1. HEADER & NAVİGASYON --- */
/* =================================================================== */

.main-header {
    background-color: var(--white);
    border-bottom: 1px solid var(--light-bg);
    box-shadow: var(--soft-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Ana Kapsayıcı: Öğeleri yan yana dizer ve dikeyde hizalar */
.main-header .container {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    padding: 10px 0px; 
}

/* 1. BAŞLIK (ORDUL PLATFORM) | SIRA: 1 (En Sol) */
.header-title {
    order: 1; 
    font-size: 1.5em; 
    font-weight: 700;
    color: var(--primary-color); 
    margin-right: 70px; /* Navigasyondan ayır */
    margin-left: 5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.main-header .header-title a {
    text-decoration: none;
    color: inherit;
    padding: 0;
}

/* 2. NAVİGASYON (Menü Linkleri) | SIRA: 2 (ORTAYI KAPLIYOR) */
.main-header nav { 
    order: 2; 
    flex-grow: 1; /* Kalan tüm yatay alanı doldurur */
    display: flex; 
    justify-content: flex-end; /* Linkleri sola (Başlığa) doğru yaslar */
    align-items: center; 
}
.nav-list { list-style: none; display: flex; }
.nav-list li { position: relative; }
.nav-list li a { 
    text-decoration: none; 
    color: var(--text-color-dark); 
    font-weight: 500; 
    padding: 10px 15px; 
    border-radius: 5px; 
    display: block; 
    font-size: 1.em; 
    white-space: nowrap;
}
.nav-list li a:hover { 
    color: var(--white); 
    background-color: var(--red-accent);
}
.nav-list li a.active { 
    color: var(--white); 
    background-color: var(--primary-color); 
}
.dropdown-content { display: none; position: absolute; min-width: 200px; background-color: var(--white); box-shadow: 0 8px 16px rgba(0,0,0,0.1); z-index: 10; top: 100%; left: 0; border-radius: 4px; border-top: 3px solid var(--primary-color); padding: 5px 0; }
.dropdown-content a { padding: 10px 15px; white-space: nowrap; font-weight: 400; color: var(--text-color-dark); }
.dropdown-content a:hover { background-color: var(--light-bg); color: var(--primary-color); }
.has-dropdown:hover .dropdown-content { display: block; }

/* 3. TR/EN BUTONU | SIRA: 3 (Sağda, Logodan önce) */
.lang-switch-button {
    order: 3; 
    margin-right: 30px; /* Logo ile arasında boşluk */
    
    /* Görsel ve boyut ayarları */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color); 
    color: var(--white); 
    border: 1px solid var(--primary-color);
    border-radius: 4px; 
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 40px; 
    flex-shrink: 0; 
}
.lang-switch-button:hover {
    background-color: var(--red-accent);
    border-color: var(--red-accent);
}

/* 4. LOGO (Arma) | SIRA: 4 (En Sağ) */
.header-logo-arm {
    order: 4; 
    margin-left: 20px; /* TR/EN butonundan ayır */
    margin-right: 5px;
    display: flex;
    align-items: center;
}
.main-header .header-logo-arm img {
    height: 70px; /* Uygun boyutta logo */
    width: auto;
    display: block;
}


/* MOBİL VE MENU TOGGLE KURALLARI */

.menu-toggle { 
    order: 5; /* Mobilde en sağa itin */
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    flex-direction: column; 
    justify-content: space-around; 
    width: 30px; 
    height: 25px; 
    padding: 0; 
    margin-left: 10px;
}
.menu-toggle .bar { display: block; width: 100%; height: 3px; background: var(--text-color-dark); border-radius: 3px; transition: all 0.3s linear; }

@media (max-width: 768px) {
    /* Mobil Görünümde Sıralamayı Resetle (Standart Mobil Düzen İçin) */
    .header-title, .main-header nav, .lang-switch-button, .header-logo-arm, .menu-toggle {
        order: initial; 
        margin: initial;
        flex-grow: 0;
    }
    
    .main-header .container { 
        justify-content: space-between;
    }
    
    /* Navigasyonu gizle */
    .main-header nav { 
     position: absolute;
        top: 70px; 
        left: 0;
        width: 100%;
        height: 0; 
        overflow: hidden; 
        background-color: var(--white);
        transition: height 0.4s ease-in-out;
        flex-grow: 0; 
        display: block;
    }
    .main-header nav.is-open {
        height: 350px; /* Menünün tüm elemanlarını gösterecek yeterli bir yükseklik */
        box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
    }
    /* Hamburger görünür olsun */
    .menu-toggle { display: flex; }

    /* Logo ve TR/EN Butonunun mobil boyutu ve yerleşimi */
    .main-header .header-logo-arm { margin-right: 10px; }
    .main-header .header-logo-arm img { height: 30px; }
    
    .lang-switch-button { 
        padding: 6px 10px; 
        font-size: 13px;
        height: 30px; 
        margin-left: auto; 
        margin-right: 10px;
    }
    
    .header-title { 
        margin-left: 0;
        margin-right: auto; 
    }
    
    .nav-list { 
        display: flex; 
        flex-direction: column; 
        width: 100%; 
        padding-top: 5px; 
    }
    .main-nav.is-open .nav-list { display: flex; }
    .nav-list li { width: 100%; }
    .nav-list li a { padding: 15px 20px; text-align: center; border-bottom: 1px solid var(--light-bg); border-radius: 0; }
    .dropdown-content { position: static; width: 100%; box-shadow: none; border-top: none; background-color: var(--light-bg); }
    .dropdown-content a { padding-left: 40px; border-bottom: 1px solid #eee; text-align: left; }
    .header-right-logo-container { display: none; }
}
/* =================================================================== */
/* --- 2. HERO ALANI & GENEL BAŞLIKLAR --- */
/* =================================================================== */

.content-section { padding: 60px 0; }
.content-section h2 { color: var(--primary-color); margin-bottom: 25px; text-align: center; font-size: 2.2em; font-weight: 700; }
.content-section h3 { color: var(--text-color-dark); margin-top: 20px; margin-bottom: 10px; }


.page-header-section {
    background-color: var(--dark-bg); 
    color: var(--white);
    padding: 80px 0; 
    text-align: center;
    margin-bottom: 40px;
    position: relative; 
    z-index: 1; 
}
.page-header-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: transparent; 
    z-index: -1;
}

body.home-page .page-header-section {
    padding: 170px 0;
    background-image: url('image/yenitasarım3.png') !important; 
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important; 
}
body.home-page .page-header-section::before {
    background-color: rgba(0, 0, 0, 0.5) !important; 
}
.page-header-section h1 {
    font-size: 2.5rem; color: var(--white); margin-bottom: 10px; font-weight: 700;
    opacity: 0; animation: fadeInSlide 1s ease-out 0.5s forwards; 
}
.page-header-section p {
    font-size: 1.1em; color: #ccc;
    opacity: 0; animation: fadeInSlide 1s ease-out 1s forwards; 
}
@keyframes fadeInSlide {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


.section-header-dark {
    background-color: var(--dark-bg); 
    color: var(--text-color-light); 
    padding: 30px 0; 
    width: 100%;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.section-header-dark h2 {
    color: var(--white); text-align: center; font-size: 2.2em; font-weight: 700; margin-bottom: 10px;
}
.section-header-dark .section-description {
    color: #ccc; text-align: center; margin: 0 auto; max-width: 800px; font-size: 1.1em;
}

.araya-giris-dark {
    background-color: var(--primary-color-dark); 
    color: var(--white);
    padding: 60px 0;
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
}
.araya-giris-dark h2 { color: var(--white); font-size: 2em; font-weight: 700; margin-bottom: 15px; }
.araya-giris-dark p { color: #ccc; font-size: 1.1em; margin-bottom: 30px; }


/* =================================================================== */
/* --- 3. ANA ÜRÜN VURGULARI (YATAY BLOKLAR) --- */
/* =================================================================== */

.product-highlight-section { padding-top: 60px; padding-bottom: 0; background-color: var(--white); }
.highlight-content-row {
    display: flex; gap: 40px; align-items: center; 
}
.highlight-content-row.product-row {
    margin-bottom: 40px; background-color: var(--white); border-radius: 8px; 
    box-shadow: var(--soft-shadow); padding: 30px; 
}
.highlight-content-row.product-row:nth-child(even) { background-color: var(--light-bg); box-shadow: none; }
.highlight-content-row.product-row:hover { transform: translateY(-5px); box-shadow: var(--hover-shadow); }
.highlight-content-row.product-row.reverse { flex-direction: row-reverse; }
.highlight-content-row.product-row .image-area { max-width: 40%; flex: 0 0 40%; box-shadow: none; border-radius: 0; overflow: hidden; }
.highlight-content-row.product-row .text-area { flex: 1; padding: 0 0 0 20px; }
.highlight-content-row.product-row h3 { color: var(--primary-color-dark); font-size: 1.8em; margin-bottom: 15px; border-bottom: 2px solid var(--secondary-color); padding-bottom: 5px; display: inline-block; }
.highlight-content-row.product-row .lead-text { font-size: 1.0em; margin-bottom: 25px; }

.feature-list-check {
    list-style: none; padding: 0; margin: 20px 0;
}
.feature-list-check li {
    font-size: 1em; padding: 6px 0; display: flex; align-items: center; color: var(--text-color-dark);
}
.feature-list-check i {
    color: var(--primary-color); margin-right: 10px; 
}

.highlight-feature-section { padding: 60px 0; background-color: var(--white); }
.highlight-content-row.reverse { flex-direction: row-reverse; }


@media (max-width: 992px) {
    .highlight-content-row { flex-direction: column; text-align: center; gap: 20px; }
    .highlight-content-row.product-row, .highlight-content-row.product-row.reverse { flex-direction: column; }
    .highlight-content-row.product-row .image-area, .highlight-content-row.product-row .text-area { width: 100%; max-width: none; padding: 0; }
    .highlight-content-row.product-row h3 { font-size: 1.6em; margin-top: 15px; display: block; }
    .highlight-content-row.product-row .feature-list-check { text-align: left; max-width: 400px; margin-left: auto; margin-right: auto; }
    .highlight-content-row.product-row .image-area { order: -1; }
    .highlight-content-row .text-area { order: 2; }
    .highlight-content-row .image-area { order: 1; margin-bottom: 20px; }
    .feature-list-check { text-align: left; padding-left: 20px; }
    .cta-button-small { margin: 20px auto 0 auto; }
}


/* =================================================================== */
/* --- 4. ANA SAYFA ALT BÖLÜM (Misyon/Vizyon/Değerler) --- */
/* =================================================================== */

.mission-vision-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 30px 0; 
}
.mission-card, .vision-card {
    background: #fff; padding: 25px; border-radius: 8px; border-top: 5px solid var(--primary-color); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(10px); 
    transition: all 0.4s ease-out;
}
.mission-card:hover, .vision-card:hover { box-shadow: var(--hover-shadow); }
.mission-card .icon-large, .vision-card .icon-large { font-size: 2.2em; color: var(--primary-color); margin-bottom: 10px; }
.mission-card h3, .vision-card h3 { font-size: 1.4em; color: var(--text-color-dark); margin-bottom: 10px; }
.mission-card p, .vision-card p { font-size: 1.0em; line-height: 1.6; }

.value-cards-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 25px; margin-top: 30px;
}
.value-card {
    background: #ffffff; border-radius: 8px; border-top: 5px solid var(--secondary-color); 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); padding: 20px; text-align: center;
    opacity: 0; transform: translateY(10px); transition: all 0.4s ease-out;
}
.value-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); }
.icon-feature { font-size: 3em; color: var(--primary-color); margin-bottom: 10px; }
.value-card h3 { font-size: 1.2em; font-weight: 600; margin-bottom: 10px; }
.value-card p { font-size: 0.9em; }


@media (max-width: 768px) {
    .mission-vision-grid { grid-template-columns: 1fr; }
}


/* =================================================================== */
/* --- 5. İLETİŞİM SAYFASI STİLLERİ --- */
/* =================================================================== */

.contact-section { padding: 50px 0; background-color: #f8f8f8; }
.contact-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; margin-top: 30px; }
.contact-info-area { display: flex; flex-direction: column; gap: 20px; }
.info-card { background: var(--white); padding: 20px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary-color); }
.info-card h4 { font-size: 1.2em; margin-top: 0; margin-bottom: 10px; color: #333; }
.icon-contact { font-size: 1.5em; color: var(--primary-color); margin-right: 10px; display: block; margin-bottom: 5px; }
.info-card p { margin-bottom: 5px; line-height: 1.4; font-size: 0.95em; }
.contact-link { color: var(--primary-color); text-decoration: none; font-weight: 500; }
.contact-link:hover { text-decoration: underline; }
.small-note { font-size: 0.8em; color: #888; margin-top: 10px; }
.map-area { background: #fff; padding: 15px; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.map-area h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.5em; border-bottom: 2px solid #eee; padding-bottom: 10px; }
.map-area iframe { width: 100%; height: 350px; border: 0; border-radius: 4px; display: block; }
@media screen and (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .map-area iframe { height: 400px; }
}

/* =================================================================== */
/* --- 6. HİZMETLERİMİZ/SEKMELİ İÇERİK (Tabs: 3 Farklı Yerde Kullanılıyor) --- */
/* =================================================================== */


.tab-container { display: flex; gap: 30px; align-items: flex-start; }
.tab-menu { flex: 0 0 250px; background-color: var(--light-bg); padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: sticky; top: 100px; }
.tab-button {
    display: block; width: 100%; text-align: left; padding: 12px 15px; margin-bottom: 5px; background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-color-dark); border-radius: 6px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tab-button:hover:not(.active) { background-color: #e9ecef; }
.tab-button.active { background-color: var(--primary-color); color: var(--white); font-weight: 700; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.tab-content-area { flex-grow: 1; }
.tab-content { 
    display: none; padding: 30px; border: 1px solid #ddd; background-color: var(--white); border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); animation: fadeIn 0.4s;
}
.tab-content.active, .tab-content.active-tab { display: block; }
.tab-content.hidden-tab { display: none !important; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


.content-body { display: flex; gap: 30px; align-items: flex-start; }
.content-img { width: 40%; max-width: 400px; height: auto; border-radius: 6px; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.text-and-button { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.text-and-button p { line-height: 1.7; margin-bottom: 25px; color: var(--text-color-dark); }



.technical-details-tabs { background-color: #f8f8f8; padding-bottom: 80px; }
.tab-nav-wrapper {
    display: flex; justify-content: center; margin-bottom: 40px; padding: 10px;
    background: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.tab-link {
    background-color: transparent; color: #555; border: none; padding: 12px 25px; 
    cursor: pointer; font-size: 1.1em; font-weight: 500; transition: all 0.3s; 
    border-radius: 6px; margin: 0 5px;
}
.tab-link i { margin-right: 8px; font-size: 1.1em; color: var(--secondary-color); }
.tab-link.active { background-color: var(--primary-color); color: var(--white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.tab-link.active i { color: var(--white); }


.feature-detail-grid {
    display: flex; gap: 30px; align-items: center; background: #fff; padding: 30px;
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 30px;
}
.detail-text { flex: 1; min-width: 0; }
.detail-image-box { flex: 1; max-height: 350px; overflow: hidden; border-radius: 6px; }
.detail-image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-detail-grid.reverse-layout { flex-direction: row-reverse; }


@media screen and (max-width: 992px) {
    .tab-menu { flex: 0 0 auto; width: 100%; position: static; top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
    .tab-button { width: 48%; }
    .content-body { flex-direction: column; gap: 20px; }
    .content-img { width: 100%; max-width: none; }
    .text-and-button { align-items: center; text-align: center; }
    .text-and-button p { text-align: center; }
    .cta-button-small { align-self: center; }
    .tab-nav-wrapper { flex-wrap: wrap; }
    .tab-link { flex-basis: 45%; margin: 5px; font-size: 1em; padding: 10px 15px; }
    .feature-detail-grid, .feature-detail-grid.reverse-layout { flex-direction: column; }
    .detail-image-box { max-height: 250px; order: -1; }
}
@media screen and (max-width: 768px) {
    .tab-button { width: 100%; }
}

/* =================================================================== */
/* --- 7. SERVİS MİNİMAL NAVİGASYONU (Service Stripe) --- */
/* =================================================================== */

.services-stripe-viewer { padding: 80px 0; }
.service-navigation-stripe {
    display: flex; justify-content: space-between; border-bottom: 2px solid #ddd;
    margin-top: 50px; margin-bottom: 30px; position: relative;
}
.stripe-nav-btn {
    flex-grow: 1; padding: 15px 10px; background: none; border: none; cursor: pointer;
    font-size: 1.1em; font-weight: 600; color: #888; position: relative; transition: color 0.3s;
}
.stripe-nav-btn:hover { color: var(--text-color-dark); }
.stripe-nav-btn.active { color: var(--primary-color); }
.stripe-nav-btn.active::after {
    content: ''; position: absolute; bottom: -2px; left: 10%; width: 80%;
    height: 4px; background-color: var(--secondary-color); transition: width 0.3s, background-color 0.3s;
}

.dynamic-service-detail-box {
    background: #fcfcfc; border: 1px solid #eee; padding: 40px;
    border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.detail-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.detail-image-column { overflow: hidden; border-radius: 6px; }
.detail-image-column img { width: 100%; height: 100%; object-fit: cover; }
.detail-category-tag {
    display: inline-block; background-color: var(--secondary-color); color: var(--white);
    padding: 4px 12px; border-radius: 4px; font-size: 0.85em; font-weight: 600; margin-bottom: 15px;
}
.detail-text-column h3 { font-size: 2.2em; color: var(--primary-color-dark); margin-bottom: 15px; }
.detail-text-column p { font-size: 1.1em; line-height: 1.6; color: #555; margin-bottom: 25px; }
.detail-feature-list { list-style: none; padding: 0; columns: 2; gap: 20px; }
.detail-feature-list li { padding-left: 1.2em; position: relative; font-size: 1em; margin-bottom: 8px; color: #444; }
.detail-feature-list li::before {
    content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900;
    position: absolute; left: 0; color: var(--primary-color);
}

@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
    .service-navigation-stripe { overflow-x: scroll; flex-wrap: nowrap; }
    .stripe-nav-btn { flex-shrink: 0; min-width: 160px; }
    .detail-feature-list { columns: 1; }
}


/* =================================================================== */
/* --- 8. HAKKIMIZDA SAYFASI (SIDEBAR & TIMELINE) --- */
/* =================================================================== */

.two-column-layout { padding: 40px 0; background-color: #f8f8f8; }
.content-layout { display: flex; gap: 30px; align-items: flex-start; }
.main-content-area { flex-grow: 1; min-width: 0; }
.content-anchor { padding-top: 0 !important; margin-top: 0 !important; margin-bottom: 30px; }


.sidebar-nav {
    width: 220px; flex-shrink: 0; position: sticky; top: 100px; padding: 15px; 
    background: #fff; border-radius: 6px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}
.sidebar-nav h3 { font-size: 1.1em; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-top: 0; margin-bottom: 10px; }
.sidebar-nav nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav nav li a { display: block; padding: 6px 0; text-decoration: none; color: #555; font-size: 0.9em; }
.sidebar-nav nav li a.active { color: var(--primary-color); font-weight: 700; border-right: 3px solid var(--primary-color); }
.sidebar-nav nav li a:hover { color: var(--primary-color); }

.lead-text { font-size: 1.05em; line-height: 1.5; color: #333; margin-bottom: 15px; font-weight: 500; }
.main-content-area p { font-size: 0.95em; line-height: 1.6; margin-bottom: 15px; }
.responsive-image { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.image-box {
    text-align: center; margin-top: 20px; border: 1px solid #eee; padding: 5px; 
    border-radius: 4px; background: #fff; max-width: 700px; margin-left: auto;
    margin-right: auto; overflow: hidden; 
}
.image-box small { display: block; margin-top: 5px; color: #686666; font-size: 0.75em; }


.history-timeline-section { background: none; padding: 20px 0; }
.timeline { position: relative; max-width: 100%; padding: 10px 0; }
.timeline::after { content: ''; position: absolute; width: 3px; background: #ccc; top: 0; bottom: 0; left: 50%; margin-left: -1.5px; }
.timeline-item { padding: 8px 30px; position: relative; background-color: inherit; width: 50%; opacity: 0; transform: translateY(10px); }
.timeline-item:nth-child(even) { left: 50%; }
.timeline-dot { height: 16px; width: 16px; background-color: var(--primary-color); position: absolute; top: 20px; border-radius: 50%; z-index: 1; }
.timeline-item:nth-child(odd) .timeline-dot { right: -8px; }
.timeline-item:nth-child(even) .timeline-dot { left: -8px; }
.timeline-date { font-weight: bold; color: var(--primary-color); margin-bottom: 3px; font-size: 0.95em; }
.timeline-content { padding: 6px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); font-size: 0.9em; }
.animated-item.visible { opacity: 1; transform: translateY(0); } /* JS ile kullanılan animasyon */

@media screen and (max-width: 992px) {
    .content-layout { flex-direction: column; gap: 20px; }
    .sidebar-nav {
        width: 100%; position: relative; top: 0; padding: 10px 0; background: none; 
        box-shadow: none; border-radius: 0;
    }
    .sidebar-nav h3 { display: none; }
    .sidebar-nav nav { overflow-x: auto; white-space: nowrap; padding: 5px 0; }
    .sidebar-nav nav ul { display: inline-flex; justify-content: flex-start; }
    .sidebar-nav nav li { display: inline-block; flex-basis: auto; padding: 0 5px; }
    .sidebar-nav nav li a {
        font-size: 0.9em; padding: 6px 12px; border: 1px solid #ccc; 
        border-radius: 20px; margin: 0 5px;
    }
    .sidebar-nav nav li a.active { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); font-weight: 400; border-right: none; }
    .timeline::after { left: 20px; }
    .timeline-item { width: 100%; padding-left: 50px; padding-right: 15px; }
    .timeline-item:nth-child(even) { left: 0; }
    .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 12px; }
}


/* =================================================================== */
/* --- 9. ÜRÜN KARTLARI (product-card-grid) --- */
/* =================================================================== */

.product-card-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; margin-bottom: 60px;
}
.product-card {
    background-color: var(--white); border-radius: 8px; overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); height: 100%; 
    display: flex; flex-direction: column;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.card-image-wrapper { width: 100%; height: 200px; overflow: hidden; }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.product-card:hover .card-image-wrapper img { transform: scale(1.05); }
.card-text-content {
    padding: 20px 25px 30px; flex-grow: 1; display: flex; 
    flex-direction: column; justify-content: space-between;
}
.product-card h3 { color: var(--primary-color-dark); font-size: 1.5em; margin-top: 0; margin-bottom: 10px; }
.product-card .card-description { font-size: 1em; color: #666; margin-bottom: 15px; }

@media (max-width: 992px) {
    .product-card-grid { grid-template-columns: 1fr; gap: 20px; } 
}


/* =================================================================== */
/* --- 10. DİNAMİK DEĞER VURGULAYICI (dynamic-value-grid) --- */
/* =================================================================== */

.dynamic-value-grid {
    display: flex; gap: 40px; align-items: flex-start; margin-top: 40px;
}
.visual-content-area {
    flex: 2; padding: 20px; background-color: var(--white); border-radius: 8px;
    box-shadow: var(--soft-shadow); display: flex; flex-direction: column;
}
.image-wrapper {
    margin-bottom: 20px; height: 320px; min-height: 250px; overflow: hidden;
    border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.visual-content-area img {
    width: 100%; height: auto; max-height: 100%; object-fit: contain; 
    transition: opacity 0.4s ease-in-out; 
}
.visual-content-area h3 { font-size: 1.6em; color: var(--primary-color-dark); margin-bottom: 10px; transition: color 0.3s; }
.visual-content-area p { font-size: 1em; line-height: 1.6; margin-bottom: 20px; transition: opacity 0.3s; flex-grow: 1; }
.visual-content-area .cta-button-small { margin-top: auto; }
.value-card-area { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.dynamic-value-card {
    background: var(--light-bg); padding: 20px; border-radius: 8px;
    border-left: 5px solid var(--secondary-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer; transition: all 0.3s;
}
.dynamic-value-card:hover {
    background: var(--white); border-left-color: var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transform: translateY(-3px);
}
.dynamic-value-card h4 { font-size: 1.2em; color: var(--text-color-dark); margin-top: 5px; margin-bottom: 5px; }
.dynamic-value-card p { font-size: 0.9em; color: #666; }
.dynamic-value-card .icon-feature { font-size: 1.8em; color: var(--primary-color); margin-bottom: 5px; }

@media (max-width: 992px) {
    .dynamic-value-grid { flex-direction: column; }
    .visual-content-area, .value-card-area { flex: 1; width: 100%; }
}


/* =================================================================== */
/* --- 11. CTA BANNER (Harekete Geçirici Çağrı) --- */
/* =================================================================== */

.cta-banner {
    background-color: var(--primary-color-dark); color: var(--white);
    padding: 40px 0; text-align: center; margin: 40px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.cta-banner .container { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cta-banner h3 {
    color: var(--white); font-size: 1.8em; font-weight: 600;
    margin-top: 0; margin-bottom: 20px; line-height: 1.4;
}

.cta-banner .cta-button {
    
    display: inline-block; 
    margin-left: auto;     
    margin-right: auto;   
    
  
    background-color: var(--secondary-color); 
    color: var(--dark-bg) !important;     
    text-decoration: none;
    padding: 12px 30px;
    font-size: 1.0rem;
    border-radius: 5px;
    font-weight: 700;
    transition: all 0.3s ease;
    border: 2px solid var(--secondary-color);
}

.cta-banner .cta-button:hover {
   
    background-color: var(--white); 
    border-color: var(--white);
    color: var(--dark-bg) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
    .cta-banner { padding: 30px 0; }
    .cta-banner h3 { font-size: 1.4em; }
    .cta-banner .cta-button { padding: 10px 20px; font-size: 0.9em; }
}


/* =================================================================== */
/* --- 12. ÖZEL HİZMET ARAÇLARI SAYFASI (Vehicle Viewer) --- */
/* =================================================================== */

.dynamic-vehicle-viewer { padding-top: 50px; padding-bottom: 80px; }
.viewer-grid { display: flex; gap: 40px; margin-top: 40px; }


.navigation-cards-area {
    flex: 1; display: flex; flex-direction: column; gap: 15px;
    position: sticky; top: 20px; align-self: flex-start;
}
.vehicle-thumb-card {
    display: flex; align-items: center; padding: 10px; background: #fff;
    border-radius: 6px; border: 2px solid #eee; cursor: pointer;
    transition: all 0.3s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.vehicle-thumb-card:hover { border-color: var(--secondary-color); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.vehicle-thumb-card.active { border-color: var(--primary-color); background-color: var(--light-bg); }
.vehicle-thumb-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 15px; }
.vehicle-thumb-card h4 { font-size: 1.1em; color: var(--primary-color-dark); margin: 0; }
.vehicle-thumb-card p { font-size: 0.8em; color: #888; margin: 0; }


.detail-display-area { flex: 2; }
.main-image-wrapper {
    height: 450px; overflow: hidden; border-radius: 8px; margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.main-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s; }
.detail-display-area h3 { color: var(--primary-color-dark); font-size: 2em; margin-bottom: 15px; }
.detail-display-area p { font-size: 1.1em; line-height: 1.6; margin-bottom: 25px; }
.dynamic-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.dynamic-feature-list div {
    background-color: #f5f5f5; padding: 10px 15px; border-left: 4px solid var(--secondary-color);
    border-radius: 4px; font-size: 0.95em; font-weight: 500;
}

@media (max-width: 900px) {
    .viewer-grid { flex-direction: column; }
    .navigation-cards-area {
        position: static; flex-direction: row; overflow-x: scroll; 
        padding-bottom: 10px; flex-wrap: nowrap; align-self: auto;
    }
    .vehicle-thumb-card { flex-shrink: 0; min-width: 250px; }
    .main-image-wrapper { height: 300px; }
    .dynamic-feature-list { grid-template-columns: 1fr; }
}


/* =================================================================== */
/* --- 13. FOOTER --- */
/* =================================================================== */

.main-footer {
    background-color: var(--dark-bg); color: #c9d6de; padding: 60px 0 20px; margin-top: 60px;
}
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 40px; }
.footer-col h3 {
    color: #fff; font-size: 1.2em; margin-bottom: 20px; 
    border-bottom: 2px solid var(--secondary-color); padding-bottom: 5px; display: inline-block;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a, .footer-col p { color: #c9d6de; text-decoration: none; }
.footer-links a:hover { color: var(--secondary-color); }
.social-links { margin-top: 20px; }
.social-links a { display: inline-block; color: #fff; margin-right: 15px; font-size: 0.9em; }
.social-links a:hover { color: var(--secondary-color); }
.social-links a i { margin-right: 5px; vertical-align: middle; font-size: 1.2em; }
.footer-bottom {
    text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); 
    padding-top: 20px; font-size: 0.85em; color: rgba(255, 255, 255, 0.7);
}
.footer-logo { max-width: 160px; height: auto; margin-bottom: 15px; display: block; }


@media (max-width: 768px) {
    .main-footer { padding-top: 40px; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-col h3 { border-bottom: none; display: block; margin-top: 25px; }
    .footer-links { padding-bottom: 20px; }
}



.page-header {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 60px 0 40px 0;
    text-align: center;
    border-bottom: 5px solid var(--secondary-color);
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.page-header p {
    font-size: 1.1rem;
    font-weight: 300;
    opacity: 0.9;
}

.tech-solutions-section {
    padding: 40px 0;
}

h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    text-align: center;
}

h3 {
    font-size: 1.5rem;
    color: var(--text-color);
    margin-bottom: 15px;
    font-weight: 700;
}

.lead-text {
    font-size: 1.15rem;
    color: var(--gray-text);
    margin-bottom: 40px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* =================================================================== */
/* --- SEKMELER (NAVİGASYON VE İÇERİK) --- */
/* =================================================================== */


.tab-nav-wrapper {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.tab-link {
    background: none;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-color);
    transition: all 0.3s ease;
    border-radius: 5px;
}

.tab-link i {
    margin-right: 8px;
}

.tab-link:hover {
    background-color: rgba(0, 77, 153, 0.1);
}

.tab-link.active {
    background-color: var(--secondary-color);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.tab-content {
    
    display: none; 
    padding-top: 20px;
    animation: fadeIn 0.5s ease-out; 
}


.tab-content.active {
    display: block !important;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =================================================================== */
/* --- DETAY KARTLARI VE LİSTELER --- */
/* =================================================================== */

.feature-detail-card {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 60px;
    padding: 40px;
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.feature-detail-card.reverse {
    flex-direction: row-reverse;
}

.detail-text {
    flex: 1;
}

.detail-image-box {
    flex: 1;
    max-width: 450px;
    text-align: center;
    padding: 10px;
}

.detail-image-box img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s;
}

.detail-image-box img:hover {
    transform: scale(1.02);
}


.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.feature-list li {
    margin-bottom: 12px;
    font-size: 1rem;
    color: var(--gray-text);
}

.feature-list li i {
    color: var(--secondary-color);
    margin-right: 10px;
}

/* =================================================================== */
/* --- RESPON SİV TASARIM (Mobile Uyum) --- */
/* =================================================================== */

@media (max-width: 992px) {

    .feature-detail-card,
    .feature-detail-card.reverse {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .detail-image-box {
        max-width: 100%;
        order: -1; 
        margin-bottom: 20px;
    }

    .tab-nav-wrapper {
        flex-direction: column;
        gap: 5px;
        align-items: stretch;
    }

    .tab-link {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .page-header h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    .feature-detail-card {
        padding: 20px;
    }
}
.lang-switch-button {
    /* Konumlandırma için gereklidir (header içinde flex/grid varsa bu satır değişebilir) */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Görünüm */
    background-color:  #2a2f3a;  /* Hafif bir arka plan rengi */
    color:#ffffff ; /* Koyu metin */
    border: 1px solid #ccc;
    border-radius: 4px; /* Köşeleri yuvarlama */
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    
    /* Z-index: Diğer elementlerin (özellikle açılan menünün) altında kalmaması için */
    z-index: 20; 
    margin-left: 15px; /* Ana navigasyon/logo/hamburger ikonundan biraz boşluk bırakır */
    
    /* Çeviri metinleri arasında hafif boşluk */
    letter-spacing: 0.5px;
}

/* Hover ve Aktif Durumu */
.lang-switch-button:hover {
    background-color: #CC0000;
    border-color: #999;
}

/* --- Mobil Uyumlu Düzenleme (768px Altı) --- */
@media (max-width: 768px) {
    /* Butonu, mobil menü (hamburger ikonu) yanında rahatça görünecek şekilde optimize ederiz. */
    .lang-switch-button {
        /* Padding'i küçülterek yer kazanır */
        padding: 6px 10px; 
        font-size: 13px;
        margin-left: 10px; /* Boşluğu azaltır */
        
        /* Boyut değişimlerinde yumuşak geçiş sağlar */
        box-sizing: border-box; 
    }
    
    /* Eğer header'da `display: flex;` kullanıyorsanız: */
    .main-header .container {
        /* Butonun ve hamburger ikonunun yan yana durmasını sağlar */
        justify-content: space-between; 
        align-items: center;
    }
}
/* --- İTFAİYE SAYFASI GENİŞ EKRAN DÜZELTMESİ (993px üzeri) --- */
/* JS (translation.js) kaynaklı DOM manipülasyonu sonrası bozulan yatay düzeni onarır. */
/* =================================================================== */

@media screen and (min-width: 993px) {
    
    /* 1. ANA KAPSAYICI DÜZENİ: Menü ve İçeriği Yan Yana Zorlar */
    body.itfaiye-page .tab-container {
        display: flex !important; /* Flex'i zorla */
        flex-direction: row !important; /* Yatay düzeni zorla */
        gap: 20px !important;
        align-items: flex-start !important;
    }
    
    /* 2. TAB İÇERİĞİ DÜZENİ: Resim ve Metni Yan Yana Zorlar */
    body.itfaiye-page .tab-content .content-body {
        display: flex !important;
        flex-direction: row !important; 
        gap: 30px !important;
        align-items: flex-start !important;
    }

    /* 3. Resim Kısıtlaması: Resmin sayfayı genişletmesini engeller */
    body.itfaiye-page .content-img {
        max-width: 400px !important; 
        width: 40% !important; 
        flex-shrink: 0 !important; 
    }

    /* 4. Metin Alanı: Kalan alanı kaplar */
    body.itfaiye-page .text-and-button {
        flex: 1 !important; 
        min-width: 0 !important; /* Flex içerisinde daralma kısıtlamasını kaldırır */
    }
}
/* =================================================================== */
/* --- KRİTİK MOBİL TAMİR BLOĞU (EN ALTA EKLE) --- */
/* =================================================================== */

@media screen and (max-width: 992px) {
    /* 1. Tüm Flex yapılarını dikey yapmaya zorla */
    .highlight-content-row, 
    .tab-container, 
    .content-body, 
    .dynamic-value-grid, 
    .viewer-grid, 
    .detail-grid,
    .feature-detail-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* 2. Resimlerin her zaman yazıdan önce (üstte) gelmesini sağla */
    .image-area, 
    .detail-image-box, 
    .detail-image-column, 
    .image-wrapper, 
    .main-image-wrapper, 
    .content-img {
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* 3. Sekmelerin (Tab) Mobilde Taşmasını Engelle */
    .tab-menu, .tab-nav-wrapper {
        position: static !important;
        flex: none !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .tab-button, .tab-link {
        width: 100% !important;
        padding: 10px 5px !important;
        font-size: 13px !important;
        text-align: center !important;
    }

    /* 4. Timeline (Zaman Çizelgesi) Çizgisi */
    .timeline::after { left: 20px !important; }
    .timeline-item { 
        width: 100% !important; 
        left: 0 !important; 
        padding-left: 50px !important; 
        margin-bottom: 20px !important;
    }
    .timeline-item:nth-child(even) { left: 0 !important; }
    .timeline-dot { left: 12px !important; }

    /* 5. Header / Menü Açılış Sorunu */
    .main-header nav {
        display: none; /* JS ile .is-open gelince açılacak */
    }
    .main-header nav.is-open {
        display: block !important;
        position: absolute !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        background: white !important;
        z-index: 999 !important;
        height: auto !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    }
}

/* Telefonlar için (Extra Küçük Ekran) */
@media screen and (max-width: 576px) {
    .tab-menu, .tab-nav-wrapper {
        grid-template-columns: 1fr !important;
    }
    .header-logo-arm img { height: 40px !important; }
}