/* FILE: assets/css/responsive.css */
/* ==========================================================================
   Pagerm - Responsive (Mobil / Tablet) Kuralları
   NOT: Tüm @media kuralları istisnasız bu dosyadadır. assets/css/style.css
   içerisinde hiçbir responsive kod bulunmaz.
   ========================================================================== */

/* ==========================================================================
   GENİŞ MASAÜSTÜ (max-width: 1399.98px)
   İçerik sarmalayıcı (.container) sağ/sol boşluğunun kademeli azalışı: 1/5
   ========================================================================== */
@media (max-width: 1399.98px) {
    :root {
        --container-pad-x: 200px;
    }
}

/* ==========================================================================
   KÜÇÜK MASAÜSTÜ (max-width: 1199.98px)
   İçerik sarmalayıcı (.container) sağ/sol boşluğunun kademeli azalışı: 2/5
   ========================================================================== */
@media (max-width: 1199.98px) {
    :root {
        --container-pad-x: 80px;
    }
}

/* ==========================================================================
   TABLET VE ALTI (max-width: 991.98px)
   Masaüstü Mega Menü -> Mobil Off-canvas Menüye geçiş
   İçerik sarmalayıcı (.container) sağ/sol boşluğunun kademeli azalışı: 3/5
   ========================================================================== */
@media (max-width: 991.98px) {

    :root {
        --container-pad-x: 48px;
    }

    /* ---- Header ---- */
    .header-row {
        padding: 18px 0;
    }
    .header-logo img {
        height: 26px;
    }

    /* KÖŞE BEYAZLIK/SIZINTI DÜZELTMESİ (Kurumsal sayfasında bulundu — ama
       .page-hero-banner PAYLAŞILAN olduğundan bunu kullanan HER sayfayı
       etkiler, bkz. .page-hero-banner yorumu style.css'te): header bu
       breakpoint'te (≤991.98px, hemen yukarıdaki .header-row/.header-logo
       img override'ları yüzünden) SADECE 64px yüksekliğinde — düz/kavis
       öncesi bölgesi (64-32=32px) banner'ın kendi 30px köşe kavisine karşı
       sadece 8px güvenlik payı bırakıyor, pratikte fotoğrafın koyulaştırılmamış
       köşesi ince bir şerit halinde sızıyordu. Bindirme -90px'e çıkarıldı;
       .page-hero-caption'ın inset'i de AYNI miktarda güncellendi (aksi halde
       rozet/başlık yukarı kayardı). */
    .page-hero-banner {
        margin-top: -90px;
    }
    .page-hero-caption {
        inset: 90px 16px 0;
    }

    /* .page-hero-caption'ın bu breakpoint'teki kutusu (inset:90px 16px 0,
       .page-hero-image'in kendi yüksekliğine göre ~34px) 2 satırlık bu
       paragrafa göre çok dar; .page-hero-image{overflow:hidden} yüzünden
       taşan kısım kırpılıyordu. Font küçültüldü ki iki satır da sığsın. */
    .iletisim-hero-text,
    .faq-hero-text {
        font-size: 11px;
        line-height: 1.4;
    }

    /* Masaüstü hamburger (mega menü tetikleyici) gizlenir,
       Mobil hamburger (off-canvas tetikleyici) gösterilir */
    .hamburger-btn:not(.hamburger-btn--mobile) {
        display: none;
    }
    .hamburger-btn--mobile {
        display: flex;
        /* DOM sırası artık dil seçici -> hamburger (madde 5, masaüstüyle
           TUTARLI: hamburger en sağda, dil seçici solunda) — bu breakpoint'te
           mobil hamburger zaten dil seçiciden SONRA geldiği için ekstra bir
           "order" override'ına gerek yok, doğal akış aynı düzeni verir. */
    }

    /* Mega menü mobilde kullanılmaz */
    .mega-menu,
    .mega-menu-backdrop {
        display: none !important;
    }

    .lang-btn {
        font-size: 13px;
    }

    /* ---- Hero ---- */
    .hero-section {
        /* Alt boşluk eskiden 80px idi; butonlar mobilde alt alta yığılınca
           (bkz. .btn-hero-primary width:100%) son butonun KENDİ
           margin-bottom'u (10px) + bu 80px = 90px, üstteki metin-buton
           boşluğundan (34px) belirgin şekilde fazlaydı. 24px + 10px = 34px
           ile üstteki boşlukla EŞİTLENDİ. Üst boşluk (madde: "Your Trusted"
           üzerindeki fazla boşluk) 60px'ten yarıya, 30px'e indirildi. */
        padding: 30px 0 24px;
    }
    .hero-title {
        font-size: 32px;
    }
    .hero-text {
        font-size: 14px;
        max-width: 100%;
    }
    .btn-hero-primary,
    .btn-cta-yellow {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }
    /* Dekoratif ürün görseli (slide-img.png) bu breakpoint'te metnin
       ARKASINA/ALTINA düşüp okunurluğu bozacağından gizlenir. */
    .hero-decor-img {
        display: none;
    }
    .hero-search-form-wrap {
        max-width: 100%;
    }

    /* ---- Genel Bölüm Boşlukları ---- */
    .world-network-section,
    .one-stop-shop-section,
    .product-range-section,
    .brands-section,
    .continuity-section,
    .contact-form-section {
        padding: 56px 0;
    }
    /* Değerlerimiz: üst boşluk product-range-section'ın alt boşluğuyla
       TUTARLI kalması için sıfırlandı (üstteki genel 56px zaten yeterli). */
    .values-section {
        padding-top: 44px;
    }

    /* ---- One Stop Shop / Diyagram: dar ekranda dikey yığılır ---- */
    /* KÖK NEDEN (test edildi): .one-stop-shop-card'ın masaüstü aspect-ratio'su
       (2038/839) dar ekranda kartı çok kısaltıyor (~140px); overflow:hidden
       İLE birlikte bu, logo+başlık+metin+butonlar sığmayınca ALT KISMI
       (butonlar dahil) KIRPIP GİZLİYORDU — aspect-ratio, içerik sığmasa bile
       kutuyu büyütmüyor. Çözüm: mobilde aspect-ratio iptal edilip yükseklik
       tamamen içeriğe göre otomatik büyüyor; background-size:cover zaten
       her yükseklikte görseli oranı bozmadan kaplamaya devam ediyor. */
    .one-stop-shop-card {
        aspect-ratio: auto;
        /* Masaüstünde .one-stop-shop-content TEK flex item'dı (row yönünde,
           dikeyde ortalanmış). Artık .one-stop-shop-actions da AYNI kartın
           doğrudan çocuğu (ikinci flex item) — mobilde ikisini YAN YANA değil
           ALT ALTA yığmak için column yönüne çevriliyor. */
        flex-direction: column;
        align-items: stretch;
    }
    .one-stop-shop-content {
        padding: 34px 24px;
        max-width: 100%;
    }
    /* Masaüstünde butonlar (.one-stop-shop-actions) görselin TABANINA
       position:absolute + left:50%/translateX(-50%) ile yatayda ortalanmış
       şekilde yaslanıyor (bkz. style.css) — dar ekranda kart yüksekliği
       metin uzunluğuna göre büyüyüp küçüldüğünden, sabit bir "bottom" değeri
       metinle ÇAKIŞMA riski taşır. Bu yüzden mobilde absolute konumlandırma
       iptal edilip butonlar normal akışa, metnin HEMEN ALTINA, section'ın en
       altında AYRI bir blok olarak (yine ortalanmış) geri döndürülüyor —
       taşma/üst üste binme riski olmadan. */
    .one-stop-shop-actions {
        position: static;
        transform: none;
        margin-top: 20px;
        justify-content: center;
        padding: 0 24px 34px;
    }
    .product-diagram {
        flex-direction: column;
    }
    .diagram-col {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
    .diagram-col .diagram-label {
        flex: 1 1 45%;
    }
    .world-network-boxes-img {
        width: 60%;
    }
    /* .continuity-truck-image { margin-top: 24px; } KALDIRILDI — eskiden
       yan yana (.row/.col-lg-5/.col-lg-7) düzende mobilde sütun stack
       olunca gereken bir ayardı; artık masaüstünde de tek sütun
       (tasarim/edit10.png) olduğundan base kural (style.css, margin:40px 0)
       zaten her genişlikte tutarlı, ayrı bir mobil override'a gerek yok. */
    /* ---- Kurumsal / F.A.Q içerik blokları (madde 3):
       üst boşluk ile alt boşluk BİRBİRİNE EŞİT ve önceki 56px'ten de az. ---- */
    .corporate-content-section,
    .faq-content-section {
        padding: 40px 0;
    }
    /* ---- Font tutarlılığı (madde 15): kurumsal.html paragraf metni
       (style.css'te 18px) faq.html'nin akordiyon içerik metniyle
       (15px, referans alındı) EŞİTLENDİ. ---- */
    .corporate-panel p {
        font-size: 15px;
    }
    /* ---- urun-kategorileri.html (madde 11): başlık üstü / kartlar altı
       zaten eşitti (90px=90px) ama ikisi de fazlaydı — diğerleriyle
       tutarlı 40px'e indirildi. ---- */
    .urunler-content-section {
        padding: 40px 0;
    }
    /* urunler.html + urun-detay.html (madde: üst/alt boşluk kurumsal.html
       ile eşitlendi) — masaüstünde 60px 0 90px (asimetrik) idi. */
    .urunler-detail-section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 26px;
    }

    /* Masaüstünde .section-text dar bir metin sütunu için max-width:300px
       taşıyordu (bkz. style.css); sütunlar mobilde tam genişliğe indiğinde
       bu artık kasıtlı bir sütun değil, sadece gereksiz bir kısıtlama —
       kaldırılıyor ki paragraf tam genişliği kullansın. */
    .section-text {
        max-width: none;
    }

    /* ---- Değerlerimiz: 4'lü satır dar ekranda 2'şer 2'şer sarar ---- */
    .values-grid {
        margin-top: 30px;
    }
    .values-grid-row {
        flex-wrap: wrap;
    }
    .values-grid-row .value-card {
        flex: 1 1 calc(50% - 12px);
    }
    /* Gemi görselinin masaüstündeki kutulara binme efekti (style.css,
       negatif margin) bu breakpointte KALDIRILIYOR — satırlar 2'şer 2'şer
       sarınca kart yüksekliği öngörülemez hale geliyor (metin uzunluğuna
       göre değişir), sabit bir negatif margin taşma/kesilmeye yol açardı.
       Normal pozitif boşluğa dönülüyor. */
    .values-ship-image {
        margin: 20px 0;
        z-index: 0;
    }
    /* "Katalog Hesabı Oluştur" butonunun margin-top:auto'su (style.css)
       SADECE masaüstünde sağ form grid'iyle aynı satırda (.col-lg-4/8 yan
       yana, stretch) anlamlıydı — bu breakpoint'te sütunlar alt alta
       yığılıp sol kolonun kendi yüksekliği içerik kadar olduğundan "auto"
       boşluğu sıfıra çöküyor, buton metne yapışık kalırdı. Sabit boşluğa
       geri dönülüyor. */
    .bottom-form-catalog-btn {
        margin-top: 22px;
    }
    /* Metnin üst/alt satırlarda kutunun tepesine/dibine itilmesi (bkz.
       style.css: flex-start + alt satırda padding-top:95px) SADECE
       masaüstünde gemiye yer açmak içindi — gemi binmesi burada zaten
       kaldırıldığından, mobilde metin gereksiz yere kutunun bir
       kenarına yapışık/95px aşağı itilmiş kalmasın diye hem
       justify-content ORTALANIYOR hem de alt satırın padding-top'u
       paylaşılan ".product-card, .value-card" kuralındaki varsayılana
       (30px) döndürülüyor. */
    .values-grid-row:first-child .value-card,
    .values-grid-row:last-child .value-card {
        justify-content: center;
    }
    .values-grid-row:last-child .value-card {
        padding-top: 30px;
    }

    /* ---- Whatsapp Sekmesi ---- */
    .whatsapp-tab {
        padding: 8px 14px;
        font-size: 12px;
    }

    /* ---- Footer ---- */
    /* Üst boşluk masaüstünde 130px (yuvarlak üst köşelere görsel payanda
       olarak) — mobilde bu kadar boşluğa gerek yok, diğer bölümlerle
       tutarlı bir değere indirildi. */
    .site-footer {
        padding: 60px 0 30px;
    }
    .footer-logo {
        display: inline-block;
        margin-top: 8px;
        margin-left: 0;
    }
    /* Logonun ALTINDAKİ boşluk (bu kural + .footer-top row'un gy-4
       gutter'ı, style.css'teki 34px'lik varsayılan margin-top yüzünden)
       ÜSTÜNDEKİ boşluktan (24px gy-4 + 8px yukarıdaki margin-top = 32px)
       belirgin şekilde fazlaydı — ikisi birbirine yaklaştırılacak şekilde
       azaltıldı. */
    .footer-divider {
        margin-top: 24px;
    }
    /* Footer'daki TÜM elemanlar (linkler, logo, copyright, sosyal ikonlar)
       mobilde ORTALANIYOR. .footer-bottom .col-lg-6 KALDIRILDI — footer
       artık iki ayrı row (footer-top/footer-bottom) değil, TEK row/iki
       kolon (.footer-left-col/.footer-right-col, bkz. _PublicLayout.cshtml)
       kullanıyor; masaüstünde sağ kolonu sağa yaslayan
       align-items:flex-end (style.css .footer-right-col) burada
       center'a çevrilip sütunlar alt alta yığılınca ortalanmış kalıyor. */
    .footer-nav {
        text-align: center;
    }
    .footer-nav ul {
        justify-content: center;
    }
    .footer-right-col {
        text-align: center;
        align-items: center;
    }
    .footer-copyright {
        justify-content: center;
    }

    /* ---- Ürünler: 3'lü kart grid'i bu breakpoint'te 2 sütuna düşer ---- */
    .urunler-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Son 2 kartlık ortalanmış satır, üstteki grid 2 sütuna düşünce artık
       TEK bir sütun genişliğiyle değil, ((100% - 20px)/2) formülüyle
       eşleşmeli (gap tek, sütun sayısı 2). */
    .urunler-product-grid-last-row .product-card {
        width: calc((100% - 20px) / 2);
        flex: 0 0 calc((100% - 20px) / 2);
    }

    /* ---- Ürünler Detay (urunler.html): kart grid'i 2 sütuna düşer ---- */
    .category-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-product-grid-last-row .category-product-card {
        width: calc((100% - 24px) / 2);
        flex: 0 0 calc((100% - 24px) / 2);
    }
}

/* ==========================================================================
   TABLET (max-width: 767.98px)
   İçerik sarmalayıcı (.container) sağ/sol boşluğunun kademeli azalışı: 4/5
   ========================================================================== */
@media (max-width: 767.98px) {

    :root {
        --container-pad-x: 24px;
    }

    .mobile-menu {
        width: 300px;
    }

    .search-form {
        min-width: 0;
        width: 100%;
    }
    .header-address {
        text-align: left;
        margin-top: 16px;
    }

    /* 11 etiket kutusu masaüstü boyutlarıyla dar ekranda üst üste binebilir —
       kutu/yazı küçültülüp bağlantı çizgisi kısaltılıyor (konumlar aynı % kalır).
       375px'te ölçülen 2-5px'lik komşu kutu çakışmasını gidermek için kutu
       yüksekliğini düşüren padding/line-height değerleri kullanılıyor. */
    .diagram-tag {
        width: 98px;
        height: auto;
        padding: 1px 4px;
        font-size: 8px;
        line-height: 1.1;
    }
    .diagram-tag-connector {
        width: 8px;
    }

    .product-card,
    .value-card {
        padding: 22px 20px 24px;
    }

    /* ---- Kurumsal 2x2 kart grid'i — dar ekranda tek sütun ---- */
    .corporate-card-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Slider (Marka Logoları) satır aralığı ---- */
    .carousel-item-row {
        gap: 18px;
    }

    /* ---- Form: Mesaj + Gönder AYNI satırda kalır (masaüstündeki gibi),
       buton KARE (.btn-send'in temel 127.5x127.5 boyutu, style.css)
       korunur — burada artık hiçbir override YOK. ---- */

    /* ---- Footer ---- */
    .footer-nav ul {
        gap: 14px 22px;
    }

    /* ---- Değerlerimiz: alt boşluk — carousel-item-row zaten kendi
       padding-bottom'uyla (24px, bu breakpoint'te) doğal boşluk
       bıraktığından, bölümün KENDİ alt padding'i (56px, üsttekiyle
       ortak kuraldan miras) ayrıca eklenmeden azaltıldı. Üst padding
       diğer bölümlerle tutarlı kalması için DOKUNULMADI. */
    .values-section {
        padding-bottom: 24px;
    }

    /* ---- Değerlerimiz: 2'şerli satır bu breakpoint'te tek sütuna iner ---- */
    .values-grid-row .value-card {
        flex: 1 1 100%;
    }

    /* ---- One Stop Shop / Diyagram: etiket kutucukları tek sütun ---- */
    .diagram-col .diagram-label {
        flex: 1 1 100%;
    }

    /* ---- İletişim: Kariyer formu ÜST boşluğu (madde 7) 70px'ten azaltıldı. ---- */
    .contact-form-block {
        padding: 40px 0;
    }
    /* İletişim sayfasının EN ÜST boşluğu (madde: kurumsal.html ile eşit) —
       style.css'te unconditional 90px idi. */
    .contact-map-section {
        padding-top: 40px;
    }
    /* ---- İletişim: s-logo yüksekliği (madde 5) — style.css'te 127px
       SABİT (masaüstü dar sütununa göre ölçülmüş); mobilde adres satırı
       (uzun metin) daha çok satıra bölündüğünden yanındaki metin bloğu
       çok daha uzun oluyor, logo orantısız KISA kalıyordu. align-items:
       stretch ile logo artık metin bloğuyla AYNI yükseklikte. */
    .contact-intro-row {
        align-items: stretch;
    }
    .contact-intro-logo {
        height: auto;
    }
    .contact-intro-logo img {
        height: 100%;
        min-height: 103px;
        object-fit: cover;
    }
    /* ---- İletişim: Kariyer formu tek sütuna iner ---- */
    .kariyer-layout {
        flex-direction: column;
    }
    /* kariyer.png ve arkasındaki gri arkaplan mobilde tamamen kaldırıldı —
       kariyer formu artık tek başına, tam genişlikte. */
    .kariyer-image {
        display: none;
    }
    .contact-form-grid--4col,
    .contact-form-grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
    .contact-address-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    /* ---- Ürünler Detay (urunler.html): mobilde tek sütuna iner —
       masaüstündeki "sol sütun bir satır aşağıdan başlasın" hizalama
       numarası (grid-template-columns: 230px 1fr + 2 satır) burada
       gereksiz/anlamsız; her şey DOM sırasıyla (spacer, başlık, sidebar,
       kartlar) tek sütunda üst üste akar. Spacer'ın mobilde görünecek
       bir içeriği olmadığından gizleniyor. ---- */
    .urunler-detail-layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .urunler-detail-sidebar-spacer {
        display: none;
    }
    .urunler-detail-sidebar {
        width: 100%;
        padding-right: 0;
        padding-bottom: 30px;
        border-right: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    /* ---- Ürünler (urunler.html, madde 15): "Motor" ile başlayan 11
       kategori linki mobilde sayfayı dolduracak kadar uzun tek bir liste
       olarak duruyordu — urun-detay.html'deki akordiyon mantığıyla tutarlı
       (chevron döner, mavi/kalın "açık" durumu) tek bir Bootstrap collapse
       grubuna çevrildi; varsayılan KAPALI (koleksiyonun tamamı .collapsed/
       aria-expanded=false ile başlar, bkz. urunler.html). ---- */
    .urunler-detail-sidebar-title.urunler-detail-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        margin-bottom: 0;
    }
    /* Alt grup sayfalarında başlık bir <a> içerdiğinden collapse tetikleyicisi ayrı bir
       <span>'a taşındı (bkz. UrunlerByGrup.cshtml) — aynı flex/space-between düzeni burada
       h2 üzerinde (cursor:pointer OLMADAN, h2'nin kendisi artık tıklanabilir değil), tıklama
       imleci sadece gerçek tetikleyici olan span'a (ikonu saran) uygulanıyor. */
    .urunler-detail-sidebar-title-linked {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0;
    }
    .urunler-detail-sidebar-title-linked .urunler-detail-sidebar-toggle {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .urunler-detail-sidebar-toggle-icon {
        display: block;
        width: 12px;
        height: 12px;
        flex-shrink: 0;
        /* chevron-right.svg varsayılan olarak KOYU zeminler için beyaz
           çizgili (bkz. .nav-accordion-toggle-icon, urun-detay.html) — bu
           AÇIK/beyaz sidebar arkaplanında aynı brightness(0)+opacity
           düzeltmesiyle görünür kılınıyor. */
        filter: brightness(0);
        opacity: 0.55;
        transition: transform 0.2s ease;
    }
    .urunler-detail-sidebar-toggle:not(.collapsed) .urunler-detail-sidebar-toggle-icon {
        transform: rotate(90deg);
    }
    .urunler-detail-nav.collapse,
    .urunler-detail-nav-accordion.collapse {
        display: none;
    }
    .urunler-detail-nav.collapse.show,
    .urunler-detail-nav-accordion.collapse.show {
        display: block;
    }
    .urunler-detail-nav,
    .urunler-detail-nav-accordion {
        margin-top: 20px;
    }
    .category-product-grid {
        grid-template-columns: 1fr;
    }
    .category-product-grid-last-row .category-product-card {
        width: 100%;
        flex: none;
    }
    .urunler-detail-main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 0;
    }

    /* ---- Ürün Detay (urun-detay.html): görsel + bilgi kartı alt alta ----
       KÖK NEDEN: .urun-detay-content'in masaüstü için tanımlı
       align-items:flex-start'ı (style.css) flex-direction:column olunca da
       geçerliliğini koruyordu — bu, çapraz eksende (mobilde: yatay genişlik)
       çocukların İÇERİK genişliğine küçülmesine yol açar (stretch yerine).
       Hem görsel kutusu (+altındaki "PAGERM'e Sor" butonu) hem de bilgi
       kartı (.urun-detay-info, "PAGERM Kod" vb. satırlar) bu yüzden sayfa
       genişliğini DEĞİL, içeriklerinin gerektirdiği dar genişliği
       kaplıyordu. align-items:stretch ile ikisi de artık tam genişlik. */
    .urun-detay-content {
        flex-direction: column;
        align-items: stretch;
    }
    .urun-detay-media {
        width: 100%;
        flex-basis: auto;
    }
}

/* ==========================================================================
   MOBİL (max-width: 575.98px)
   İçerik sarmalayıcı (.container) sağ/sol boşluğunun kademeli azalışı: 5/5
   ========================================================================== */
@media (max-width: 575.98px) {

    :root {
        --container-pad-x: 16px;
    }

    /* ---- Ürünler: 3'lü kart grid'i mobilde tek sütun ---- */
    .urunler-product-grid {
        grid-template-columns: 1fr;
    }
    /* Son 2 kartlık ortalanmış satır de mobilde tek sütuna (dikey) düşer. */
    .urunler-product-grid-last-row {
        flex-direction: column;
        align-items: center;
    }
    .urunler-product-grid-last-row .product-card {
        width: 100%;
        flex: none;
    }

    /* ---- İletişim: form grid'leri mobilde tek sütun ---- */
    .contact-form-grid--4col,
    .contact-form-grid--3col {
        grid-template-columns: 1fr;
    }

    /* ---- Page Hero Caption: uzun başlıklar 390px genişlikte container'dan
       taşıp .page-hero-image'in overflow:hidden'ı tarafından kırpılıyordu
       (görünmez oluyordu); satır kırılması artık varsayılan (style.css,
       .page-hero-caption flex+text-align:center), burada sadece yazı
       boyutu küçültülüyor. Banner'ın kendi aspect-ratio'su (6.4/1,
       style.css) da 2 satırlık başlığa dikey yer açmak için büyütüldü —
       kısa başlıklı sayfalarda bu sadece banner'ı biraz daha uzun/ferah
       gösterir, zararsızdır. */
    .page-hero-image {
        aspect-ratio: 3 / 1;
    }
    .page-hero-caption h1 {
        font-size: 18px;
        line-height: 1.3;
    }
    /* ---- Ürün sayfaları (urun-kategorileri/urunler/urun-detay, madde 17):
       PAGERM rozeti mobilde 85px yükseklikte fazla büyüktü, 50px'e
       indirildi — yatay ortalama zaten .page-hero-caption'ın
       justify-content:center'ından (style.css) geliyor. ---- */
    .page-hero-caption img.page-hero-logo {
        height: 40px;
    }
    /* Sadece urun-kategorileri.html (bkz. .page-hero-logo--kategoriler,
       urunler.html/urun-detay.html'i etkilemez) — aynı 40px'e indirildi. */
    .page-hero-caption img.page-hero-logo--kategoriler {
        height: 40px;
    }
    /* Kurumsal.cshtml — AYNI sorun (bkz. yukarısı): rozet mobilde 85px'te
       hero'nun (mobilde aspect-ratio:3/1 ile ~130px yüksekliğinde) neredeyse
       tamamını kaplayıp header'la üst üste biniyordu, 40px'e indirildi. */
    .page-hero-caption img.corporate-hero-badge-logo {
        height: 40px;
    }

    .hero-title {
        font-size: 26px;
    }

    .section-title {
        font-size: 22px;
    }

    .one-stop-shop-title {
        font-size: 26px;
    }
    .one-stop-shop-text {
        font-size: 17px;
    }

    /* ---- Slider (Marka Logoları) ---- */
    .carousel-item-row {
        gap: 16px;
        padding: 16px 0 24px;
    }

    .whatsapp-tab span {
        display: none;
    }
    .whatsapp-tab {
        padding: 10px;
    }
    .whatsapp-tab img {
        width: 25px;
        height: 25px;
    }

    .footer-social {
        justify-content: center !important;
        margin-top: 16px;
    }
}