/* MLC INVEST — küçük düzeltmeler (eski tema üstüne). CTA zemin/yapısına dokunulmaz. */

/* İletişim CTA metinleri koyu. Temada .cta-title/.cta-text'e renk verilmemiş;
   üstten beyaz miras alıp açık zeminde okunmuyorlar. */
.cta .cta-title,
.cta .cta-text {
    color: #14203a !important;
}

/* Bizi Takip Edin (sosyal = .blog.gray-bg): kompakt kartlar (görsel alanı kaldırıldı). */
.blog.gray-bg .blog-box {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 22px 20px;
}

/* Proje kartları (anasayfa "Seçilmiş Projeler" + Projelerimiz sayfası) "Neden İngiltere"
   kartlarıyla aynı why-us-box yapısını kullanır. Farkı: ikon yerine kapak görseli var.
   Görsel YUVARLAK (müşteri kararı) — bir ara tam genişlik bant denendi, daireye dönüldü.

   Daire 190px: eski 145px'lik hâlinde kart genişliğinin ancak yarısını dolduruyor ve
   üstünde fazla boşluk bırakıyordu. Kartın 3rem (48px) üst padding'i negatif margin ile
   28px'e çekiliyor; böylece daire hem büyük hem üstteki boşluk makul. */
.mlc-project-card .why-us-box-icon-box {
    width: 190px;
    height: 190px;
    flex-shrink: 0;
    margin: -20px 0 1.25rem;
    overflow: hidden;
    border-radius: 50%;
}

.mlc-project-card .why-us-box-icon-box img {
    width: 100%;
    height: 100%;
    display: block;
    /* Thumb 600x600 kare. loading="lazy" görsel yüklenene kadar yüksekliği 0 bırakıp
       düzeni kaydırıyordu; oranla yer önceden tutuluyor. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Dar ekranda kart daralıyor — daire taşmasın. */
@media (max-width: 480px) {
    .mlc-project-card .why-us-box-icon-box {
        width: 150px;
        height: 150px;
    }
}

/* Projelerimiz sayfası: liste uzun, kartlar satır sarsın (why-us-row flex'tir). */
.mlc-projects-grid {
    flex-wrap: wrap;
    gap: 20px;
}

.mlc-projects-grid .why-us-box {
    flex-grow: 0;
    flex-basis: calc(25% - 15px);
}

@media (max-width: 992px) {
    .mlc-projects-grid .why-us-box {
        flex-basis: 100%;
    }
}

/* ---------------- Çalışma Alanları: süreç şeridi (brief §5 Sayfa 2) ---------------- */
.mlc-process {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    list-style: none;
    margin: 0 0 45px;
    padding: 0;
}

.mlc-process-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-top: 3px solid var(--color1);
    border-radius: 6px;
}

.mlc-process-num {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color1);
}

.mlc-process-icon i {
    font-size: 20px;
    color: var(--color1);
}

/* Süreç adımı görseli (müşteri görselleri) — ikonun yerine geçer.
   Kart üstünde tam genişlik bant; kartın kendi padding'inden taşması için
   negatif margin kullanılıyor (kart border-top'u korunsun diye üstte 20px). */
.mlc-process-image {
    display: block;
    /* order:-1 → görsel kartın en üstüne çıkar. HTML'de numaradan sonra geliyor;
       negatif üst margin'le yukarı çekilince numaranın üstüne biniyordu. */
    order: -1;
    margin: -20px -18px 10px;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.mlc-process-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Thumb 600x295. loading="lazy" görsel yüklenene kadar yüksekliği 0 bırakıp
       layout kaymasına yol açıyordu; oran verilerek yer önceden tutuluyor. */
    aspect-ratio: 600 / 295;
    object-fit: cover;
}

.mlc-process-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--general-color, #222);
}

.mlc-process-desc {
    font-size: 13px;
    color: #667085;
    line-height: 1.5;
}

/* Açık çağrı kartı (6. kart) — hizmet alanı değil, davet: zemin ayrışır. */
.investment-box--invite {
    background: rgba(32, 87, 184, .06) !important;
    border: 1px solid rgba(32, 87, 184, .25) !important;
}

.investment-box--link {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color1);
}

/* ---------------- Hakkımızda: sayı şeridi (brief §5 Sayfa 3) ---------------- */
.mlc-stats {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin: 35px 0 10px;
}

.mlc-stat {
    border-top: 3px solid var(--color1);
    padding-top: 14px;
}

.mlc-stat-value {
    display: block;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    color: var(--color1);
}

.mlc-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: #667085;
}

/* Section başlıkları üstteki içerikle yapışmasın. */
.section-top {
    margin-top: 50px;
}

.section-top:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    .section-top {
        margin-top: 35px;
    }
}

/* Projelerimiz sayfa metni (panelden: Sayfalar → Projelerimiz → Açıklama) —
   kart listesiyle yapışmasın. */
.mlc-page-text {
    margin-top: 60px;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .mlc-page-text {
        margin-top: 40px;
        margin-bottom: 30px;
    }
}

/* Çalışma Alanları kartları: slider yerine sarmalı grid (yan yana, sığmazsa alt satır). */
.mlc-areas-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.mlc-areas-grid .investment-box {
    flex: 0 0 calc(50% - 10px);
    display: flex;
    flex-direction: column;
    margin: 0;
}

@media (max-width: 767px) {
    .mlc-areas-grid .investment-box {
        flex-basis: 100%;
    }
}

/* ---------------- Kategori filtresi (brief §6) ----------------
   Kartlar JS ile hidden alır; .investment-box display:flex olduğu için
   [hidden] tek başına yetmez, !important ile bastırılması gerekir. */
.mlc-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 50px 0 25px;
}

.mlc-filter-btn {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 40px;
    color: #444;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 20px;
    transition: all .2s ease;
}

.mlc-filter-btn:hover {
    border-color: var(--color1);
    color: var(--color1);
}

.mlc-filter-btn.is-active {
    background: var(--color1);
    border-color: var(--color1);
    color: #fff;
}

[data-filter-grid] > [hidden] {
    display: none !important;
}

/* ---------------- Proje detay galerisi ----------------
   .picture-box zaten temanın kalıbı (hover karartma + büyüteç ikonu, lightbox JS'i
   ona bağlı). Burada yalnızca ızgara boşluğu ve eşit kart yüksekliği veriliyor. */
.mlc-project-gallery {
    margin-top: 35px;
}

.mlc-project-gallery .picture-box img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* ---------------- Hero 2. buton ----------------
   Birinci buton temanın btn-secondary'si; ikincisi yeşil zemin + beyaz yazı.
   (ANA SAYFA 1 dokümanı ikinciyi ⚪ ikincil gösteriyordu; müşteri yeşil istedi.) */
.btn-secondary--green {
    background: #1f9d55 !important;
    border: 1px solid #1f9d55;
    color: #fff !important;
    margin-left: 10px;
}

.btn-secondary--green:hover {
    background: #187f44 !important;
    border-color: #187f44;
    color: #fff !important;
}

@media (max-width: 767px) {
    .btn-secondary--green {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* ---------------- CTA kanal butonları (WhatsApp / E-posta / Görüşme Talebi) ---------------- */
.cta-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cta-channels .btn-style i {
    margin-right: 6px;
}

/* ---------------- Proje kartı meta satırı (tür + konum) ---------------- */
.mlc-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    justify-content: center;
    margin: -6px 0 10px;
}

.mlc-project-meta-item {
    color: #777;
    font-size: 13px;
    font-weight: 500;
}

/* "Alan" (proje türü) kategoriden ayrışsın diye hafif vurgulu. */
.mlc-project-meta-item--alan {
    color: var(--color1);
}

/* ---------------- Sayfa destekleyici görseli (brief §5 Sayfa 3) ---------------- */
.mlc-page-image {
    margin: 30px 0 10px;
}

.mlc-page-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/* ---------------- Dar masaüstü penceresinde hero ----------------
   sliders.blade.php masaüstü/mobil slider'ı server-side isMobile() (user-agent) ile
   seçiyor; main.css ise 991px'te (ekran genişliği) .swiper-slider'ı gizliyor. İkisi
   çelişince masaüstü tarayıcı 992px altına daraltıldığında hero TAMAMEN kayboluyordu:
   swiper CSS ile gizli, mobil slider ise UA masaüstü olduğu için DOM'da hiç yok.
   (Firefox/Chrome responsive modu UA'yı değiştirmediği için test ederken de bu olur.)
   Mobil UA'da .swiper-slider hiç basılmadığından bu blok o tarafı etkilemez. */
@media (max-width: 991px) {
    .swiper-slider {
        display: block;
    }

    /* edit.css hero metnini absolute + max-width:600px veriyor. Dar ekranda bu kutu
       viewport'tan taşıp TÜM sayfada yatay kaydırma ve sağda boşluk şeridi yaratıyordu.
       Mobil slider'daki gibi akışa alınıyor. */
    .swiper-slider > div > div .swiper-content {
        position: static;
        max-width: 100%;
        padding: 25px 20px;
        text-align: center;
    }

    .swiper-slider > div > div .swiper-content .swiper-content--title {
        text-align: center;
    }
}

/* ---------------- Yatay taşma: edit.css'in :has(.why-us-row) kuralı ----------------
   edit.css'te şu var:  :has(.why-us-row) { padding: 0; }
   :has() argümanının özgüllüğünü aldığı için (.why-us-row → 0,1,0) `.container` ile
   eşit çıkıyor ve edit.css main.css'ten sonra yüklendiği için kazanıyor. Sonuç:
   .why-us-row barındıran HER ata padding'ini kaybediyor — body, section ve .container.
   Bootstrap grid'inde .container'ın 12px yatay padding'i, .row'un -12px negatif
   margin'ini dengeler; padding sıfırlanınca satır iki yandan 12px taşıyor ve sayfa
   yatay kayıyor (390px ekranda docScrollWidth=402).

   .container'ın padding'ini geri vermek why-us kartlarının hizasını değiştirirdi;
   onun yerine yalnızca o container'daki satırların negatif margin'i nötrleniyor.
   Kolonların kendi 12px padding'i durduğu için iç hizalama bozulmuyor. */
.container:has(.why-us-row) > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---------------- Hero metin kutusu: küçük + sağ alt (müşteri kararı) ----------------
   edit.css kutuyu sol ÜSTE, 450px genişlik ve 40px padding ile koyuyor; bu hâliyle
   banner'ın üst kısmındaki çember etiketlerini örtüyordu. Kutu küçültülüp SOL ALTA
   alındı, butonlar yan yana getirildi (yazı okunur kalsın diye 13.5px).
   991px altı mlc-invest.css'in kendi bloğunda akışa alınıyor — burası yalnızca masaüstü. */
@media (min-width: 992px) {
    .swiper-slider > div > div .swiper-content {
        top: auto;
        right: auto;
        left: 5%;
        bottom: 8%;
        max-width: 450px;
        padding: 22px 24px;
        background: rgba(255, 255, 255, .94);
    }

    .swiper-slider > div > div .swiper-content .swiper-content--title {
        font-size: 19px;
        line-height: 1.35;
    }

    .swiper-slider > div > div .swiper-content .swiper-content--title:has(+ *) {
        margin-bottom: 10px;
    }

    .swiper-slider > div > div .swiper-content .swiper-content--article {
        font-size: 14.5px;
        line-height: 24px;
        margin-bottom: 0;
    }

    /* Butonlar yan yana: inline-block oldukları için yarım genişlik + ortalı metin
       yeterli. calc'taki pay, inline-block'lar arasındaki boşluk karakterini telafi eder. */
    .swiper-slider > div > div .swiper-content .btn-secondary {
        /* border-box şart: buton content-box davranıyor, padding genişliğe ekleniyor
           ve iki buton kutunun içine sığmayıp alt alta düşüyordu (205+205+6 > 390). */
        box-sizing: border-box;
        /* inline-flex + min-height: metin uzunlukları farklı olduğu için biri iki
           satıra inip yükseklikler şaşıyordu; ikisi de aynı yükseklikte ve metin
           dikey ortalı kalsın. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 54px: metinler farklı uzunlukta, biri iki satıra iniyor. 48px'te iki satırlık
           buton 51px'e çıkıp diğerinden yüksek kalıyordu — min-height iki satırı da
           kapsamalı ki ikisi eşit görünsün. */
        min-height: 54px;
        width: calc(50% - 4px);
        margin-top: 16px;
        padding: 8px 6px;
        font-size: 13.5px;
        line-height: 1.3;
        text-align: center;
        vertical-align: top;
    }

    .swiper-slider > div > div .swiper-content .btn-secondary--green {
        margin-left: 4px;
    }
}

/* ---------------- Bölüm açıklaması (.section-desc) ----------------
   Temada bu sınıf için hiç kural yok; 15px + line-height:normal ile miras alıyordu ve
   44px'lik bölüm başlığının altında sıkışık/küçük kalıyordu. Üç bölümde de aynı kalıp
   kullanılıyor (Segmentasyon, Seçilmiş Projeler, Bizi Takip Edin) — hepsi birlikte. */
.section-top .section-desc {
    font-size: 17px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .section-top .section-desc {
        font-size: 15.5px;
        line-height: 1.6;
    }
}

/* ---------------- Header sosyal medya ikonları ----------------
   Sağ üstteki telefon/e-posta butonlarının yerini aldı (müşteri kararı).
   Marka mavisi zeminde yuvarlak ikon; nav-area zemini beyaz olduğu için kontrast var. */
.mlc-social-btns {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mlc-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color1);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    transition: background .2s ease, transform .2s ease;
}

.mlc-social-btn:hover {
    background: var(--color2);
    color: #fff;
    transform: translateY(-2px);
}

.mlc-social-btn i {
    color: inherit;
}

/* ---------------- Breadcrumb (iç sayfa üst bandı) ----------------
   edit.css `padding: 50px 0` veriyor; bant müşteri banner'ları için alçak kalıyordu.
   Yükseklik padding üzerinden artırılıyor — sabit height vermek başlık uzun olunca
   (ör. "Çalışma Alanlarımız") taşmaya yol açar. */
.breadcrumb {
    padding: 110px 0;
}

/* Bant büyüdükçe 30px'lik başlık içeride küçük kalıyordu; sayfa adı bandın
   ana öğesi olduğu için birlikte büyütülüyor. Ekmek kırıntısı satırı da bir
   punto artıyor — başlıkla arasındaki fark korunsun diye aynı oranda değil. */
.breadcrumb h1 {
    font-size: 42px;
    line-height: 1.2;
}

.breadcrumb .breadcrumb-area ul {
    font-size: 16px;
}

@media (max-width: 991px) {
    .breadcrumb {
        padding: 70px 0;
    }

    /* Mobilde başlık daha ölçülü artıyor: "Çalışma Alanlarımız" 430px'te tek
       satıra ancak sığıyor, fazlası ikinci satıra düşürüp bandı şişiriyor. */
    .breadcrumb h1 {
        font-size: 32px;
    }
}

/* ---------------- "Tüm Projeler" butonu alt boşluğu ----------------
   edit.css'teki `:has(.why-us-row) { padding: 0 }` bu bölümün alt padding'ini
   sıfırlıyor; main.css `.btn-area`ya yalnızca margin-top veriyor. Sonuçta buton
   bir sonraki bölüme yapışık kalıyordu. Boşluk butonun altına veriliyor —
   bölümün padding'ini geri açmak `:has()` kuralının etkilediği diğer
   sarmalayıcıları da bozardı. */
.why-us .btn-area {
    margin-bottom: 60px;
}

@media (max-width: 767px) {
    .why-us .btn-area {
        margin-bottom: 40px;
    }
}

/* ---------------- Anasayfa YouTube bölümü ----------------
   Kart ızgarası flex + wrap: tema Bootstrap grid'ini `.row` negatif margin'iyle
   kullanıyor, bu bölümde `:has(.why-us-row)` benzeri padding sıfırlamalarına
   takılmamak için kendi ızgarası var. Oran 16/9 aspect-ratio ile — padding-top
   hilesine gerek yok, hedef tarayıcıların hepsi destekliyor. */
.mlc-youtube {
    padding: 60px 0;
}

.mlc-youtube-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/* Sütun genişliği sabit: `flex-grow: 0`. Tek video varsa da satırın üçte birini
   kaplar, esneyip tam genişliğe yayılmaz (müşteri kararı — yayılan tek video
   dev bir oynatıcı çıkarıyordu). 24px gap × 2 boşluk = 48px, sütun başına 16px. */
.mlc-youtube-box {
    flex: 0 0 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    min-width: 0;
}

.mlc-youtube-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

.mlc-youtube-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.mlc-youtube-title {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--color1);
}

@media (max-width: 991px) {
    .mlc-youtube-box {
        flex: 0 0 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }
}

@media (max-width: 640px) {
    .mlc-youtube {
        padding: 40px 0;
    }

    .mlc-youtube-grid {
        gap: 20px;
    }

    .mlc-youtube-box {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Çalışma Alanlarımız banner'ı: kaynak 1920x720 (2.67:1), bant ise ~5.7:1.
   `cover` görselin yarısına yakınını kırpıyor; `center` hizasında podyumların
   üstündeki nesnelerin (bina, vinç, küre, ampul) altı kesiliyor ve nesneler
   banttan aşağı taşıyormuş gibi duruyordu. Kırpma aşağı alınıp nesneler tam
   çerçeveye sokuluyor.

   Sayfaya özel: Hakkımızda ve Projelerimiz banner'ları kolaj — onlarda merkez
   hizası doğru, aşağı kaydırmak alt sıradaki kareleri kırpardı.

   Değer müşteriyle oturdu: %50 (tema varsayılanı) nesnelerin altını kesiyordu,
   %88 gökyüzünü tamamen aldı, %70 fazla alçak bulundu. %80'de podyumlar tam
   giriyor ve arkadaki Londra silueti hâlâ görünür. Daha yukarısı (%84+) altta
   boş masa yüzeyi bırakıyor. Bant yüksekliği değişirse bu değer yeniden
   bakılmalı — çerçeve büyüdükçe kırpma payı azalıyor. */
.breadcrumb[data-page='calisma-alanlarimiz'] {
    background-position: center 80%;
}

/* ---------------- Projelerimiz: üst boşluk ----------------
   `edit.css`'teki `:has(.why-us-row) { padding: 0 }` kuralı, kart ızgarasını
   içerdiği için bu sayfanın section'ını da yakalayıp temanın `section`
   padding'ini komple sıfırlıyordu; giriş metni breadcrumb'a yapışıyordu.
   (Aynı kural anasayfada "Tüm Projeler" butonunun altındaki boşluğu da
   yutuyor — oradaki çözüm butona margin vermek.)

   Kuralı gevşetmek yerine bu sayfaya özel üst boşluk veriliyor: `:has()`
   seçicisinin özgüllüğü argümanı kadar (0,1,0), `section.list-page` (0,1,1)
   onu geçiyor. Değer Çalışma Alanlarımız'daki `detail-page` ile aynı (60px)
   ki iki iç sayfa aynı ritimde açılsın. */
section.list-page {
    padding-top: 60px;
}

/* ---------------- Kart görseli (why_us_box) ----------------
   Müşteri Neden Biz / Neden İngiltere / Segmentasyon kartları için görsel
   gönderdi; kart yapısı korunuyor, görsel ikonun ÜSTÜNE tam genişlik bant
   olarak giriyor (mockup'ta da ikon duruyor, görselin altında).

   Kart `padding: 3rem` (edit.css) taşıyor; bant kartın kenarına otursun diye
   dört yandan aynı değerle negatif margin veriliyor (kartın 1px çerçevesi
   `calc()` ile telafi ediliyor) — yanlarda 2rem denendi,
   16px içeride kaldı. Alt boşluğu kartın kendi `gap: 30px`'i veriyor, ayrıca
   margin-bottom verilirse araya çift boşluk giriyor. */
.why-us-box-image {
    display: block;
    order: -1;
    align-self: stretch;
    margin: -3rem -3rem 0;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
}

.why-us-box-image img {
    width: 100%;
    height: auto;
    display: block;
    /* Thumb 600x450. loading="lazy" yüklenene kadar yükseklik 0 kalıp düzeni
       kaydırıyordu; oranla yer önceden tutuluyor. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}



/* ---------------- Mobil alt bar ile footer çakışması ----------------
   `.footer-sticky` 992px altında `position: fixed; bottom: 0` ile açılıyor ama
   sayfa altına yer bırakılmıyordu; telif satırı barın ARKASINDA kalıyordu.
   Bar yüksekliği ölçüldü: 87px. Güvenlik payıyla 100px boşluk bırakılıyor.

   Boşluk `body`'ye değil footer'a veriliyor — `body`'ye verilince sayfa arka
   planı barın altında bir şerit olarak görünüyor. */
@media (max-width: 992px) {
    .footer-bottom {
        padding-bottom: 100px;
    }
}

/* ---------------- Hakkımızda: Değerlerimiz kartları ----------------
   Beş kart, Hakkımızda'nın dar sütununda (col-lg-8) duruyor; bu yüzden
   sarmalı esnek ızgara kullanılıyor. minmax alt sınırı ölçerek bulundu: sütun
   ~830px. 150px'te beş kart yan yana ama her biri ~125px kalıp metin okunmuyor,
   190px'te 4+1 gibi tek başına kalan bir kart oluyor. 230px'te ızgara 3 sütuna
   iniyor ve kartlar 3+2 diziliyor — hem okunur hem dengeli.
   Görsel dikey (400x520) — kolajın panelleri dikey olduğu için oran korunuyor. */
.mlc-values {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 10px 0 45px;
}

.mlc-value {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 6px;
    overflow: hidden;
}

.mlc-value-image img {
    width: 100%;
    height: auto;
    display: block;
    /* loading="lazy" yüklenene kadar yükseklik 0 kalıp düzeni kaydırıyordu. */
    aspect-ratio: 400 / 520;
    object-fit: cover;
}

.mlc-value-title {
    padding: 14px 14px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color1);
}

.mlc-value-desc {
    padding: 6px 14px 16px;
    font-size: 13px;
    line-height: 1.55;
    color: #667085;
}

/* Mobilde kart tek sütuna düşünce dikey görsel ekranın yarısını kaplıyordu
   (430px genişlikte 559px yükseklik). Oran yataya çevriliyor; `cover` olduğu
   için panelin ortası korunuyor. */
@media (max-width: 640px) {
    .mlc-value-image img {
        aspect-ratio: 3 / 2;
    }
}

/* ---------------- Menü hover çizgisi hizası ----------------
   İki ayrı kayma vardı, ikisi de `edit.css`'teki `li::before` kuralından.

   Dikey: çizgi `top: -2px`teydi. Ölçüm: `.header-top` 63px, `li` 61px ve ikisi de
   81px'ten başlıyor — yani -2px çizgiyi menü şeridinin DIŞINA, üstündeki beyaz
   alana taşıyordu.

   Yatay: kuralda `left` yok. Mutlak konumlu bir öğe `left` verilmediğinde statik
   konumundan, yani `li`nin İÇERİK kutusunun solundan başlar; `width: 100%` ise
   DOLGU kutusuna göre hesaplanır. `li`nin 15px yan dolgusu olduğu için çizgi
   soldan 15px içeriden başlayıp sağdan 15px taşıyordu (ölçüldü). `left: 0`
   çizgiyi dolgu kutusuna oturtuyor, genişlik de tam örtüşüyor. */
.header-top-area .header-menu > li::before {
    top: 0;
    left: 0;
}

/* Görselli kartlar beyaz zemine alınıyor. Tema kartları #f5f5f5 / gainsboro
   olarak dönüşümlü boyuyor; "Neden Biz" görselleri ise beyaz zeminli
   illüstrasyon olduğu için kart gri, görsel beyaz kalıyordu. Masaüstünde
   kartlar yan yanayken göze batmıyor, mobilde alt alta inince görsel kendi
   kartından KOPUP üstteki kartın parçası gibi duruyordu.

   Beyaz zemin müşterinin gönderdiği tasarımla da örtüşüyor (mockup'ta kartlar
   beyaz). Kartlar beyaz bölümlerde kaybolmasın diye ince çerçeve ekleniyor.

   `:nth-child(n)` yalnızca özgüllüğü yükseltmek için: temanın çift kartları
   boyayan `:nth-child(2n)` kuralı (0,3,0) aksi halde bunu geçiyor. */
.why-us-row .why-us-box:nth-child(n):has(.why-us-box-image) {
    background-color: #fff;
    border: 1px solid #e8ecf1;
}

/* Ekmek kırıntısı dar ekranda sarıyor. Tema aralığı `li { margin-left: 25px }`
   ile veriyor; satır sarınca ikinci satır da 25px içeriden başlayıp kırık bir
   girinti bırakıyordu (uzun proje adlarında görülüyor). Aralık `gap`e taşındı:
   satır başına girinti kalmıyor, satırlar arasına da nefes giriyor. */
@media (max-width: 767px) {
    .breadcrumb .breadcrumb-area ul {
        flex-wrap: wrap;
        gap: 6px 25px;
    }

    .breadcrumb .breadcrumb-area ul li {
        margin-left: 0;
    }
}

/* Sayı şeridi mobilde iki sütuna iniyor; 42px'lik değer dar sütunda kutuyu
   zorluyor ("Onlarca" sağ kenara dayanıyordu). Punto küçültülüyor — üç sütun
   denendi, 118px'lik sütunda sözcükler taşıyor. */
@media (max-width: 640px) {
    .mlc-stat-value {
        font-size: 32px;
    }
}

/* İletişim formu dar ekranda 4px yatay taşma yapıyordu. Ölçüm (320px):
   `.container` 0..320 (12px yan dolgu), `.contact-form` 12..308, içindeki
   Bootstrap `.row` ise -12px negatif margin'le -4..324. Geniş ekranda kap
   ortalandığı için taşma görünmüyor, kap tam genişliğe oturunca ekranın
   dışına çıkıyor. Negatif margin sıfırlanıyor; sütun boşluğunu kolonların
   kendi 12px dolgusu vermeye devam ediyor. */
@media (max-width: 991px) {
    /* `.contact-form` bir flex kap ve `align-items: center` taşıyor; bu yüzden
       `.row` gerilmiyor, genişliğini KENDİ içeriğinden alıyor. İçindeki 302px'lik
       sabit reCAPTCHA kutusu satırı 328px'e çıkarıp 296px'lik kaptan taşırıyordu
       (ölçüldü). `width: 100%` satırı kabın genişliğine oturtuyor, `min-width: 0`
       da flex öğesinin min-content sınırını kaldırıyor. */
    .contact-form .row {
        margin-left: 0;
        margin-right: 0;
        min-width: 0;
        width: 100%;
    }
}

/* reCAPTCHA kutusu 302px sabit genişlikte. 320px'lik ekranlarda kolon dolgusuyla
   birlikte 326px'e çıkıp formu ekranın dışına itiyordu (ölçüm: form 328px,
   kap 296px). Google widget'ının kendi ölçüsü değiştirilemediği için küçültme
   uygulanıyor; `transform-origin` sola alınarak kutu sola yaslanıyor.
   `min-width: 0` da flex çocuğunun içeriğe göre şişmesini engelliyor. */
@media (max-width: 360px) {
    .captcha-wrapper .g-recaptcha {
        transform: scale(.86);
        transform-origin: left top;
    }

    /* `transform` yalnızca çizimi küçültür, yerleşim kutusu 302px kalır — kolonun
       min-content genişliği hâlâ satırı şişiriyordu. Kolonlara `min-width: 0`
       verilip kutu taşması gizleniyor; görsel olarak zaten küçültülmüş durumda. */
    .captcha-wrapper {
        overflow: hidden;
    }

    form.contact-form {
        min-width: 0;
        width: 100%;
    }

    form.contact-form .row > [class*='col-'] {
        min-width: 0;
    }
}

/* ---------------- İletişim formu: talep alanları ----------------
   Alanlar formun geri kalanıyla aynı görünmeli: ölçüler `.contact-form .form-item`
   kuralından (padding 8px 15px, 1px #d6d6d6 çerçeve, 15px alt boşluk) birebir
   alınıyor.

   `appearance: none` şart: tarayıcı select'i kendi yerel görünümüyle çiziyor ve
   verilen çerçeveyi yok sayıyordu (çerçeve tanımlıydı ama ekranda yoktu). Yerel
   görünüm kapatılınca ok işareti de kaybolduğu için arka plana SVG ok konuyor;
   sağdaki iç boşluk okun üstüne yazı gelmesini engelliyor. */
.contact-form select.form-item {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px 38px 8px 15px;
    border: solid 1px #d6d6d6;
    margin-bottom: 15px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2362656a' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    font-family: 'Poppins';
    color: #62656a;
    outline: none;
    cursor: pointer;
}

/* Radyo düğmeleri kart gibi: dokunmatik hedef büyüsün (mobilde 15px'lik
   yuvarlak düğmeye isabet ettirmek zor). Çerçeve ve renkler diğer form
   alanlarıyla aynı. */
.mlc-request-type {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Ölçüler `.contact-form .form-item` ile birebir: kartlar üstteki telefon /
       e-posta alanlarıyla aynı hizada ve aynı genişlikte dursun. */
    width: 100%;
    margin-bottom: 15px;
    padding: 8px 15px;
    border: solid 1px #d6d6d6;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.35;
    color: #62656a;
    transition: border-color .2s ease, background .2s ease;
}

.mlc-request-type:hover {
    border-color: #b9b9b9;
}

/* Seçili kart marka mavisinde: nötr gri denendi, hangi seçeneğin açık olduğu
   yeterince belli olmuyordu (müşteri kararı). Etiket metni nötr kalıyor —
   vurgu yalnızca seçili kartta. */
.mlc-request-type:has(input:checked) {
    border-color: var(--color1);
    background: rgba(32, 87, 184, .08);
    color: var(--color1);
    font-weight: 500;
}

.mlc-request-type input {
    width: auto;
    height: auto;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--color1);
}

/* Hakkımızda banner'ı: kaynak 1920x720, bant ~4.5:1 — `cover` merkez hizasında
   figürlerin BAŞINI kesiyordu. Kırpma yukarı taşınıyor (yüzde küçüldükçe
   görselin üst kısmı görünür), böylece beş kişilik grup baş dâhil çerçeveye
   giriyor. %42'de başlar bandın üst kenarına yapışıyor, %22 fazla boşluk
   bırakıyor; %28 ikisinin arası. */
.breadcrumb[data-page='hakkimizda'] {
    background-position: center 28%;
}

/* Projelerimiz banner'ı: kaynak 1920x800 ve 3'e 2'lik kolaj; bant ~4.5:1 olduğu
   için `cover` yalnızca yüksekliğin yarısını gösterebiliyor. Merkez hizasında
   ÜST sıranın üstü ve ALT sıranın altı birlikte kırpılıyor, iki sıra da yarım
   kalıyordu. Kırpma üst sıraya alındı: üç kare de tam giriyor.
   %0 denendi, kaynağın kendi üst boşluğu bant içinde açık bir şerit bırakıyor;
   %15 o şeridi dışarıda tutuyor. */
.breadcrumb[data-page='projelerimiz'] {
    background-position: center 15%;
}

/* Mobilde gövdenin üstündeki 75px'lik boşluk kaldırılıyor.
   `main.css` bunu sabit (fixed) mobil header'ı telafi etmek için koymuş; ama
   header artık `position: sticky` ve sticky öğe AKIŞTA kalıyor, kendi yerini
   zaten kaplıyor. Sonuç: header'ın üstünde 75px boş beyaz şerit. */
@media (max-width: 991px) {
    body {
        padding-top: 0;
    }
}