/* Ana sayfa ERP entegrasyon şeridi.
   Yalnızca .section-intstrip altındaki seçiciler; global stil ezilmiyor. */

.section-intstrip .intstrip-lead {
    max-width: 720px;
    margin: 20px auto 0;
    font-size: 17px;
    line-height: 1.7;
    /* --secondary (#71717a) sayfa zemininde (--body #edecec) 4.10:1, AA eşiği
       4.5. Token'ın kendisine dokunulmuyor (styles.css bu dosyanın işi değil),
       sadece burada bir kademe koyusu seçiliyor: --neutral-600 => 6.56:1. */
    color: var(--neutral-600);
}

/* --- Çift yönlü akış --- */

.section-intstrip .intstrip-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.section-intstrip .intstrip-flow-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    border-radius: var(--radius);
    background-color: var(--white);
    border: 1px solid var(--neutral-200);
}

.section-intstrip .intstrip-flow-icon {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background-color: var(--neutral-900);
    color: var(--white);
    font-size: 18px;
    line-height: 1;
}

/* Ters yön görsel olarak da ayrışsın: iki kutu aynı görünürse "çift yönlü"
   iddiası tek bakışta okunmuyor.
   İkon aria-hidden olduğu için 1.4.11 kapsamı dışında, ama beyaz glif ham
   marka mavisinde 2.76:1 ile pratikte silikleşiyordu. Zemin olarak marka
   %70 + siyah => beyazla 5.20:1; sayfadaki diğer "beyaz glif marka hapta"
   örnekleriyle (.onboard-num, .rts-btn.btn-primary) aynı oran. */
.section-intstrip .intstrip-flow-in .intstrip-flow-icon {
    background-color: #2a739a;
    background-color: color-mix(in srgb, var(--brand) 70%, #000);
}

.section-intstrip .intstrip-flow-label {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary);
    margin: 0 0 6px;
}

.section-intstrip .intstrip-flow-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--secondary);
    margin: 0;
}

/* --- Logo ızgarası --- */

.section-intstrip .intstrip-group {
    margin-bottom: 40px;
}

/* Etiket büyütüldü ve uppercase kaldırıldı: 14px + büyük harf, bu boyutta
   bağırıyor gibi duruyordu ve logolardan daha çok dikkat çekiyordu. 20px
   normal yazım, duvarın üstünde bir alt başlık gibi okunuyor. */
.section-intstrip .intstrip-group-label {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    /* .intstrip-lead ile aynı gerekçe: --body zemininde 4.10 -> 6.56. */
    color: var(--neutral-600);
    margin: 0 0 16px;
}

.section-intstrip .intstrip-group-note {
    font-size: 15px;
    line-height: 1.6;
    /* Aynı gerekçe: --body zemininde 4.10 -> 6.56. */
    color: var(--neutral-600);
    margin: -8px 0 16px;
}

/* auto-fill + minmax: kayıt sayısı değişince satır sayısı değişiyor, hücre
   genişliği değişmiyor. Son satır yarım kalsa da hücreler esnemiyor. */
/* Logo şeridi. Önceden iki ayrı ızgara (ERP + banka) alt alta duruyordu ve
   bölümü gereğinden çok uzatıyordu; artık ikisi de kayan şerit (Swiper).
   Genişlikleri Swiper JS'ten geliyor, burada yalnızca hizalama var. */

.section-intstrip .intstrip-swiper {
    /* Şeridin kenarlarda kesildiği belli olsun ama kutu dışına taşmasın. */
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.section-intstrip .intstrip-track {
    margin: 0;
    padding: 0;
    list-style: none;
    /* Slaytlar farklı oranlarda logo taşıyor; hepsi aynı hizada dursun. */
    align-items: center;
}

/* Logolar zeminsiz basılıyor: kutu, çerçeve ve hover'da yükselme yok.
   Önceki hâlde her logo beyaz bir kartın içindeydi ve karta sığdığı kadar
   büyüyordu; kaynak dosyaların oranları çok farklı olduğu için ARP neredeyse
   kart boyunda, Uyumsoft ise yarı boyda görünüyordu. Artık boyutu kart değil
   logonun KENDİ yüksekliği belirliyor.

   Gri tonlama korunuyor (sitedeki diğer logo duvarlarıyla aynı dil: durgunken
   tek renk, üzerine gelince kendi rengine döner) ama opaklık 0.85'ten 1'e
   çekildi: beyaz kutu kalkınca açık renkli logolar (Uyumsoft, V3) --body gri
   zemininde soluklaşıyordu. */
/* slidesPerView:'auto' slayt genişliğini BURADAN okuyor. Sabit genişlik
   bilinçli: logo genişliğine bırakılsaydı (width:auto) geniş logoyla dar logo
   yan yana geldiğinde ritim bozuluyordu. Sabit hücre + ortalanmış logo, hangi
   oran gelirse gelsin eşit aralık veriyor. */
.section-intstrip .intstrip-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hücre, logonun max genişliğine (116px) yakın tutuluyor. 150px'ken
       hücrenin içinde 34px boşluk kalıyordu ve spaceBetween'in üstüne
       biniyordu; ikisi toplanınca logolar arası boşluk logodan genişti. */
    width: 120px;
    height: 56px;
    padding: 0;
}

/* Tek kural, hem ERP hem banka duvarı için: her logo AYNI kutuya sığdırılıyor.
   Sabit yükseklik denendi ve bu logo setinde çalışmıyor — ölçülen kaynak
   oranları 1:1 (Mikro 456x456) ile 8.95:1 (Akbank 725x81) arasında değişiyor,
   yani 30px sabit yükseklikte Akbank 269px genişliğe, Mikro 30px'e düşüyor ve
   duvar iyice eşitsiz görünüyordu. Ortak kutu + object-fit: contain ile geniş
   logo genişlik sınırına, kare logo yükseklik sınırına dayanıyor; ikisi de
   aynı alanı kaplıyor.

   Not: kalan optik farkın kaynağı CSS değil, kaynak PNG'lerin içine gömülü
   şeffaf boşluk (ör. Uyumsoft ve V3 kendi tuvalinin küçük bir kısmını
   kaplıyor). Tam eşitlik için dosyaların kırpılması gerekir. */
.section-intstrip .intstrip-logo {
    max-height: 32px;
    max-width: 116px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 1;
    transition: filter 0.3s ease;
}

.section-intstrip .intstrip-tile:hover .intstrip-logo {
    filter: grayscale(0);
}

.section-intstrip .intstrip-logo-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    /* Kutu zemini beyaz: --secondary orada 4.83:1 ile eşiği geçiyor, bu yüzden
       durgun hali korunuyor. */
    color: var(--secondary);
    overflow-wrap: break-word;
    word-break: break-word;
    transition: color 0.3s ease;
}

/* Logosu olmayan entegrasyonların adı burada METİN olarak basılıyor; hover'da
   ham marka mavisine dönünce beyaz kutuda 2.76:1'e düşüyordu — yani fare
   üzerindeyken okunmaz oluyordu. Marka metin olduğu için %60 + siyah:
   beyaz üstünde 6.58:1. */
.section-intstrip .intstrip-tile:hover .intstrip-logo-text {
    color: #246384;
    color: color-mix(in srgb, var(--brand) 60%, #000);
}

/* --- Mikro CTA --- */

.section-intstrip .intstrip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding: 28px 32px;
    border-radius: var(--radius);
    background-color: var(--neutral-900);
}

.section-intstrip .intstrip-foot-copy {
    max-width: 560px;
}

.section-intstrip .intstrip-foot-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--white);
    margin: 0 0 6px;
}

.section-intstrip .intstrip-foot-desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--neutral-400);
    margin: 0;
}

.section-intstrip .intstrip-foot-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}

.section-intstrip .intstrip-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 2px;
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}

.section-intstrip .intstrip-foot-link:hover,
.section-intstrip .intstrip-foot-link:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
}

/* Koyu zeminde varsayılan odak halkası görünmüyordu. */
.section-intstrip .intstrip-foot-link:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 4px;
}

@media (max-width: 991px) {
    .section-intstrip .intstrip-flow {
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 40px;
    }

    .section-intstrip .intstrip-foot {
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .section-intstrip .intstrip-lead {
        font-size: 16px;
    }

    /* Mobilde slayt sayısı Swiper breakpoint'lerinden geliyor; burada
       yalnızca hücre ve logo küçülüyor. */
    /* Mobilde tek boyut kuralı bozulmuyor; sadece hücre ve logo birlikte
       küçülüyor. max-height DEĞİL height: sabit yükseklik optik eşitliği
       taşıyan şey, max-height verilirse kısa logolar yine küçük kalır. */
    .section-intstrip .intstrip-tile {
        width: 96px;
        height: 44px;
        padding: 0;
    }

    .section-intstrip .intstrip-logo {
        max-height: 24px;
        max-width: 92px;
    }

    .section-intstrip .intstrip-group-label {
        font-size: 17px;
    }

    .section-intstrip .intstrip-logo-text {
        font-size: 12px;
    }

    .section-intstrip .intstrip-flow-item {
        padding: 20px;
    }

    .section-intstrip .intstrip-foot-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Hareketi azaltma tercihi — bu duvarda kapatılacak hareket YOK.
   Kutu kaldırıldığında .intstrip-tile'ın hover'daki 2px yükselmesi ve
   border-color geçişi de gitti; geriye kalan tek geçiş logonun gri tondan
   kendi rengine dönmesi (filter). Renk değişimi yer değiştirmediği için
   WCAG 2.3.3'ün gerekçesi (vestibüler rahatsızlık) burada geçerli değil ve
   geçiş hover geri bildirimini taşıyor.
   Yalnızca metin fallback'inin renk geçişi kalıyor, o da hareket değil. */