/* ==========================================================================
   TEKNOLOJİK - HİZALAMA & TASARIM DÜZELTMELERİ (fixes.css)
   style.css'ten SONRA yüklenir (tüm header'larda </head> öncesi).
   Tüm diller (TR / EN / DE) ve tüm şablonlar için geçerlidir.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Genel güvenlik ağı
   -------------------------------------------------------------------------- */
html { overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }
input, select, textarea, button { font-family: inherit; }
textarea::placeholder, input::placeholder { font-family: inherit; }
/* Uzun Almanca bileşik kelimeler kutudan taşmasın */
h1, h2, h3, h4, .section-title, .page-hero h1 { overflow-wrap: break-word; hyphens: auto; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { hyphens: auto; -webkit-hyphens: auto; }

/* --------------------------------------------------------------------------
   1. Bölüm etiketleri & vurgu renkleri — açık zeminde okunabilirlik
      (#00d4ff beyaz zeminde kontrast 1.8 → koyu turkuaz)
   -------------------------------------------------------------------------- */
.sectors-section .section-tag,
.partners-section .section-tag,
.hero-slider-section .section-tag {
    color: #0369a1;
    background: rgba(3,105,161,0.08);
    border-color: rgba(3,105,161,0.25);
}
.sectors-section .section-title .highlight,
.partners-section .section-title .highlight {
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   2. Ana sayfa slider (hero-slider) + sayaç
   -------------------------------------------------------------------------- */
.slider-counter {
    text-align: center;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #64748b;
}
.hero-slider-section .slider-counter { color: #64748b; }
.hero-slider-section .slider-counter .current { color: var(--primary); }
.hero-slider-section .slider-counter .total { color: #64748b; }
/* Hizmetler ızgarasının altındaki işlevsiz "01 / 06" sayacı */
.services-section .slider-counter { display: none; }
/* Slick başlamadan önce slaytların alt alta yığılmasını engelle */
.hero-slider:not(.slick-initialized) .hero-slide:not(:first-child) { display: none; }
.hero-slide-content h2 { overflow-wrap: break-word; }

@media (max-width: 992px) {
    .hero-slider-section { padding: 50px 0; }
    .hero-slide-inner { grid-template-columns: 1fr; gap: 0; }
    .hero-slide-image { height: 260px; }
    .hero-slide-content { padding: 28px 24px 30px; }
    .hero-slide-content h2 { font-size: 26px; }
}
@media (max-width: 576px) {
    .hero-slide-image { height: 200px; }
    .hero-slide-content { padding: 22px 18px 24px; }
    .hero-slide-content h2 { font-size: 22px; }
    .hero-slide-content p { font-size: 14px; margin-bottom: 18px; }
    .slider-nav { margin-top: 20px; }
    .slider-nav button { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   3. Hizmetler ızgarası (ana sayfa, koyu bölüm)
      9 kart: masaüstünde 5+4 yerine ortalanmış satırlar, mobilde 2 sütun
   -------------------------------------------------------------------------- */
.services-section .services-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.services-section .services-grid > .service-card { flex: 0 1 calc((100% - 4 * 25px) / 5); min-width: 0; }
@media (max-width: 1200px) {
    .services-section .services-grid > .service-card { flex-basis: calc((100% - 2 * 25px) / 3); }
}
@media (max-width: 992px) {
    .services-section .services-grid { gap: 16px; }
    .services-section .services-grid > .service-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 768px) {
    .services-section { padding: 70px 0; }
    .services-section .services-grid > .service-card { flex-basis: calc((100% - 16px) / 2); padding: 22px 12px; }
    .service-card h3 { font-size: 15px; }
    .service-card p { font-size: 12.5px; }
}
@media (max-width: 360px) {
    .services-section .services-grid > .service-card { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   4. Sektörler bölümü — eksik istatistik / CTA stilleri
   -------------------------------------------------------------------------- */
.sector-detail > p { font-size: 15px; color: var(--text-light); line-height: 1.75; margin-bottom: 22px; }
.sector-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 8px; }
.sector-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
    padding: 14px 20px;
    background: var(--light-gray);
    border: 1px solid #e8edf3;
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}
.sector-stat-num { font-size: 20px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.sector-stat-label { font-size: 13px; color: var(--text-light); }
.sector-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding: 12px 26px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 50px;
    transition: var(--transition);
}
.sector-cta:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); }
.sector-products-grid { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 992px) {
    .sectors-section { padding: 70px 0; }
    .sectors-container { gap: 30px; }
    .sector-tabs { gap: 8px; }
    .sector-tab { flex: 1 1 calc(50% - 8px); padding: 12px 14px; font-size: 14px; }
    .sector-content h2 { font-size: 26px; }
}
@media (max-width: 576px) {
    .sector-content h2 { font-size: 22px; }
    .sector-stat { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   5. Footer — sütun sayısına göre hizalama (4/5/6 sütun), mobil düzen
      HTML'de .footer-links kullanılıyor, CSS'te .footer-column vardı.
   -------------------------------------------------------------------------- */
.footer-links h4, .footer-contact h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--white);
}
.footer-links ul { list-style: none; }
.footer-links ul li { margin-bottom: 10px; }
.footer-links ul li a { font-size: 14px; color: rgba(255,255,255,0.7); transition: var(--transition); }
.footer-links ul li a:hover { color: var(--secondary); padding-left: 4px; }
.footer-contact p { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 12px; line-height: 1.6; }
.footer-contact p i { color: var(--secondary); margin-top: 4px; flex-shrink: 0; width: 14px; text-align: center; }
.footer-brand { padding-right: 20px; }
img.footer-logo { display: block; height: auto; width: 180px; max-width: 100%; margin-bottom: 18px; }

@media (min-width: 1201px) {
    .footer-main { grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; gap: 32px; }
    .footer-main:has(> :nth-child(6)) { grid-template-columns: 1.3fr repeat(4, 1fr) 1.3fr; gap: 28px; }
    .footer-main:not(:has(> :nth-child(5))) { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; }
}
@media (min-width: 769px) and (max-width: 1200px) {
    .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .footer-main:not(:has(> :nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; padding-right: 0; max-width: 520px; }
}
@media (max-width: 768px) {
    .footer { padding-top: 50px; }
    .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; text-align: left; padding-bottom: 36px; }
    .footer-brand, .footer-contact { grid-column: 1 / -1; padding-right: 0; }
    .footer-brand { text-align: center; }
    img.footer-logo { margin: 0 auto 14px; }
    .footer-social { justify-content: center; }
    .footer-links h4, .footer-contact h4 { margin-bottom: 12px; }
    .footer-bottom-inner { flex-direction: column; text-align: center; gap: 10px; }
    .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 10px; }
}
.footer-bottom { display: block; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-bottom-links { display: flex; align-items: center; gap: 12px; }
.footer-bottom-links span { color: rgba(255,255,255,0.3); }

/* --------------------------------------------------------------------------
   6. EN/DE hizmet detay sayfası — tanımsız .service-hero stili
   -------------------------------------------------------------------------- */
:is(html[lang="en"], html[lang="de"]) .service-hero {
    padding: 140px 0 60px;
    background: linear-gradient(135deg, var(--dark) 0%, #1a2744 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    text-align: center;
}
:is(html[lang="en"], html[lang="de"]) .service-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0,102,204,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
:is(html[lang="en"], html[lang="de"]) .service-hero .container { position: relative; z-index: 1; }
:is(html[lang="en"], html[lang="de"]) .service-hero .breadcrumb { margin-bottom: 26px; font-size: 14px; text-align: left; }
:is(html[lang="en"], html[lang="de"]) .service-hero .breadcrumb a { color: rgba(255,255,255,0.6); }
:is(html[lang="en"], html[lang="de"]) .service-hero .breadcrumb a:hover { color: #fff; }
:is(html[lang="en"], html[lang="de"]) .service-hero .breadcrumb > span { color: rgba(255,255,255,0.4); margin: 0 8px; }
:is(html[lang="en"], html[lang="de"]) .service-hero .breadcrumb > span:last-child { color: var(--secondary); margin: 0; }
:is(html[lang="en"], html[lang="de"]) .service-hero-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(0,102,204,0.25);
    border: 1px solid rgba(0,212,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--secondary);
}
:is(html[lang="en"], html[lang="de"]) .service-hero h1 { font-size: 38px; font-weight: 700; margin-bottom: 14px; color: #fff; line-height: 1.25; }
:is(html[lang="en"], html[lang="de"]) .service-hero p { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 720px; margin: 0 auto 28px; line-height: 1.7; }
:is(html[lang="en"], html[lang="de"]) .service-hero-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
    :is(html[lang="en"], html[lang="de"]) .service-hero { padding: 110px 0 45px; }
    :is(html[lang="en"], html[lang="de"]) .service-hero h1 { font-size: 28px; }
    :is(html[lang="en"], html[lang="de"]) .service-hero p { font-size: 15px; }
}

/* Hizmet detay — istatistik kutuları ve süreç adımları */
.hd-stats { flex-wrap: wrap; justify-content: center; }
@media (max-width: 576px) {
    .hd-stats { gap: 12px; }
    .hd-stat { flex: 1 1 calc(50% - 12px); padding: 12px; }
}

/* TR hizmet detay — "Neden Teknolojik" bölümü mobilde taşıyordu */
.service-benefits .benefits-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-benefits .benefits-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 992px) {
    .service-benefits .benefits-wrapper { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 576px) {
    section.service-benefits { padding: 55px 0; }
    .service-benefits .benefits-content h2 { font-size: 1.6rem; }
    .service-benefits .benefits-list li { font-size: 0.98rem; }
    .service-benefits .benefits-stats { gap: 12px; }
    .service-benefits .stat-item { padding: 20px 10px; }
    .service-benefits .stat-number { font-size: 1.8rem; }
    .service-benefits .stat-label { font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   7. Satır içi (inline style) ızgaralar — mobil uyum
      Marka, bölge, hizmet, çözüm, blog sayfalarında style="grid-template-columns:..."
      ile yazılmış ve medya sorgusu olmayan ızgaralar telefonda taşıyor/sıkışıyordu.
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns:1fr 380px"],
    [style*="grid-template-columns:1fr 350px"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
    [style*="grid-template-columns"] > * { min-width: 0; }
}
@media (max-width: 400px) {
    [style*="minmax(300px"], [style*="minmax(280px"], [style*="minmax(260px"],
    [style*="minmax(250px"], [style*="minmax(240px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Bölge sayfası CTA istatistikleri */
@media (max-width: 576px) {
    .bolge-cta-stats { gap: 16px 10px !important; }
    .bolge-cta-stats > div > div:first-child { font-size: 1.6rem !important; }
}

/* Marka sayfası kartı — mobilde iç boşluk */
@media (max-width: 576px) {
    [style*="padding:35px;border:1px solid #eee"] { padding: 22px !important; }
}

/* İçerik tabloları mobilde yatay kaydırılabilir olsun (sayfayı taşırmasın) */
@media (max-width: 768px) {
    main table, section table, article table, .blog-content table, table.blog-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   8. Okunabilirlik — beyaz zemin üzerinde WhatsApp yeşili metin
   -------------------------------------------------------------------------- */
a[style*="color:#25D366"]:not([style*="background"]),
a[style*="color: #25D366"]:not([style*="background"]),
a[style*="color:#25d366"]:not([style*="background"]) { color: #128c4a !important; }

/* --------------------------------------------------------------------------
   9. Mobil başlık & butonlar — uzun DE/EN metinlerin sığması
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    .section-title { font-size: 26px; line-height: 1.3; }
    .page-hero h1 { font-size: 28px; }
    .page-hero { padding-top: 110px; }
    .btn { white-space: normal; text-align: center; justify-content: center; }
    .hero-tags { gap: 8px; }
}
@media (min-width: 993px) and (max-width: 1280px) {
    /* DE menüsü (Unternehmen / Dienstleistungen / Lösungen) dar masaüstünde sığsın */
    html[lang="de"] .main-nav .nav-link,
    html[lang="en"] .main-nav .nav-link { padding-left: 10px; padding-right: 10px; font-size: 14px; }
}

/* --------------------------------------------------------------------------
   10. Uzun SEO içerik blokları (EN/DE hizmet & çözüm sayfaları)
   -------------------------------------------------------------------------- */
.hd-long-content { max-width: 900px; margin: 0 auto; color: #334155; font-size: 16px; line-height: 1.8; }
.hd-long-content h2 { font-size: 28px; font-weight: 700; color: var(--dark); margin: 0 0 16px; line-height: 1.3; }
.hd-long-content h3 { font-size: 20px; font-weight: 700; color: var(--dark); margin: 28px 0 12px; }
.hd-long-content p { margin-bottom: 14px; }
.hd-long-content ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.hd-long-content ul li { position: relative; padding: 6px 0 6px 28px; }
.hd-long-content ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 7px; color: #10b981; font-size: 14px; }
.hd-long-content strong { color: var(--dark); }
.hizmet-detay-section .hd-long-content { margin: 10px auto 50px; }
.hd-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.hd-intro-side { background: var(--light-gray); border: 1px solid #e8edf3; border-radius: var(--radius); padding: 24px; }
.hd-brand-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hd-badge { display: inline-block; padding: 6px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 50px; font-size: 13px; font-weight: 600; color: var(--primary); }
@media (max-width: 992px) { .hd-intro-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 576px) {
    .hd-long-content { font-size: 15px; }
    .hd-long-content h2 { font-size: 22px; }
    .hd-long-content h3 { font-size: 18px; }
}

/* Sektör menüsü — çok sayıda sektör için iki sütun */
@media (min-width: 993px) {
    .dropdown-menu.dropdown-sectors { display: grid; grid-template-columns: repeat(2, minmax(210px, 1fr)); column-gap: 6px; min-width: 470px; }
    .dropdown-menu.dropdown-sectors .dropdown-all { grid-column: 1 / -1; border-top: 1px solid #e2e8f0; margin-top: 6px; padding-top: 10px; color: var(--primary); font-weight: 600; }
}

/* --------------------------------------------------------------------------
   11. Mobil hızlı iletişim çubuğu (Ara / Ücretsiz Keşif) — dönüşüm
   -------------------------------------------------------------------------- */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 9990;
        gap: 8px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255,255,255,0.97);
        box-shadow: 0 -4px 18px rgba(15,23,42,0.12);
        backdrop-filter: blur(6px);
    }
    .mobile-cta-bar a {
        flex: 1;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 46px;
        border-radius: 10px;
        font-weight: 700; font-size: 15px;
        text-decoration: none;
    }
    .mobile-cta-bar .mcb-call { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
    .mobile-cta-bar .mcb-quote { background: var(--primary); color: #fff; }
    body { padding-bottom: 66px; }
    .whatsapp-float { bottom: 80px !important; right: 16px !important; width: 54px !important; height: 54px !important; font-size: 28px !important; }
    .cookie-banner { bottom: 62px !important; }
}

/* Almanca uzun bileşik kelimeler — dar kartlarda kelime ortasından kırılmasın */
.service-card h3, .service-card p, .hd-feature-card h4, .sector-tab, .hizmet-liste-card h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.service-card p { overflow: visible; text-overflow: clip; white-space: normal; }
@media (max-width: 768px) {
    html[lang="de"] .services-section .service-card h3 { font-size: 13.5px; letter-spacing: -0.1px; }
    html[lang="de"] .services-section .service-card p { font-size: 12px; }
}
@media (max-width: 400px) {
    html[lang="de"] .services-section .services-grid > .service-card { flex-basis: 100%; }
}

/* Ana sayfa — tüm sektörler bağlantısı */
.sectors-all-link { text-align: center; margin-top: 36px; }
.sectors-all-link a { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 2px solid var(--primary); border-radius: 50px; color: var(--primary); font-weight: 600; font-size: 14px; line-height: 1.4; transition: var(--transition); }
.sectors-all-link a:hover { background: var(--primary); color: #fff; }
@media (max-width: 576px) { .sectors-all-link a { font-size: 13px; padding: 10px 16px; } }

/* Sektör sayfaları uzun metin listeleri — madde işareti yoktu (TR .sector-description, EN/DE .sec-long) */
.sector-description ul, .sec-long ul { list-style: none; margin: 0 0 18px; padding-left: 0; }
.sector-description ul li, .sec-long ul li { position: relative; padding: 5px 0 5px 28px; line-height: 1.65; }
.sector-description ul li::before, .sec-long ul li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 7px; color: #10b981; font-size: 14px;
}