@charset "UTF-8";
/* =====================================================================
   BLUE ASCEND — endüstriyel B2B/B2C teması
   Tarım makineleri · traktör yedek parçaları · hidrolik sistemler

   TASARIM KARARLARI

   1. DIŞ KAYNAK YOK. Google Fonts yüklenmiyor.
      Eski tema fonts.googleapis.com'dan font çekiyordu. Almanya'da bu
      belgelenmiş bir DSGVO sorunudur (LG München I, 3 O 17493/20):
      ziyaretçinin IP adresi rızası olmadan Google'a gidiyor. Burada
      sistem font yığını kullanılıyor — hem yasal sorun yok, hem de
      sayfa bir istek daha az yapıyor.

   2. NUMARALAR OKUNAKLI OLMALI. Bu sektörde müşteri
      "0510765347" ile "0510165347" arasındaki farkı görebilmeli.
      Parça numaraları, stok kodları ve fiyatlar tabular-nums ile
      hizalanmış, sekmeli rakamlarla basılıyor.

   3. RENKLER PANELDEN. Bütün marka renkleri --marka* değişkenlerinden
      okunur; Tema::renkDegiskenleri() bunları paneldeki ayarlardan
      basar. Yani firma rengi değişince tek yerden değişir.

   4. YOĞUNLUK. B2B alıcısı büyük boşluk değil, bilgi ister:
      stok durumu, OEM numarası, teslim süresi, net/brüt fiyat.
      Kartlar sıkı, tablolar okunaklı.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Tokenlar
   --------------------------------------------------------------- */
:root {
    /* Marka renkleri — panel yazmazsa bu değerler geçerli olur.
       Tema::renkDegiskenleri() sonradan basıldığı için üzerine yazar. */
    /*
     | Bu degerler TAHMIN DEGIL: firmanin logosundan ve tanitim
     | bannerlarindan piksel orneklemesiyle olculdu.
     |   logo yazisi      #006986
     |   banner ara ton   #247998
     |   banner koyu      #11313C
     | Petrol mavisi (teal) — endustriyel mavi degil.
     */
    --marka: #006986;
    --marka-acik: #247998;
    --marka-koyu: #11313c;
    --marka-yumusak: #eaf3f6;
    --marka-cizgi: #cfe2e8;

    /* Eylem rengi: sepete ekle, teklif iste. Endüstriyel turuncu. */
    --vurgu: #e0701a;
    --vurgu-koyu: #bc5a0f;

    /* Nötrler — mavimsi gri, soğuk ve teknik */
    --metin: #16252c;
    --metin-soluk: #4f626b;
    --metin-silik: #7b8d96;
    --cizgi: #dce4e8;
    --zemin: #ffffff;
    --zemin-alt: #f4f7f9;
    --zemin-koyu: #11313c;

    /* Durum renkleri */
    --olumlu: #1a7a4c;
    --olumlu-yumusak: #e8f5ee;
    --uyari: #9a6700;
    --uyari-yumusak: #fff8e6;
    --olumsuz: #b3261e;
    --olumsuz-yumusak: #fdecea;

    /*
     | Ölçüler
     |
     | Köşeler büyütüldü (8→10, 14→18). 2026'nın arayüz dili daha yumuşak;
     | keskin köşe artık "eski yazılım" gibi duruyor. Gölgeler ise
     | INCELTILDI: büyük köşe + koyu gölge birlikte ucuz görünüyor.
     | Gölge rengi nötr gri değil, markanın petrol mavisinden türetildi —
     | sayfanın tamamı tek bir ışık altında duruyormuş gibi olsun.
     */
    --kose: 10px;
    --kose-buyuk: 18px;
    --kose-tam: 999px;
    --golge: 0 1px 2px rgba(10, 40, 50, .04), 0 6px 20px rgba(10, 40, 50, .06);
    --golge-yuksek: 0 10px 28px rgba(10, 40, 50, .10), 0 28px 60px rgba(10, 40, 50, .10);
    --golge-renkli: 0 6px 20px rgba(224, 112, 26, .28);

    /* İki hız: kısa geri bildirim ve uzun hareket */
    --gecis: .18s cubic-bezier(.4, 0, .2, 1);
    --gecis-uzun: .5s cubic-bezier(.22, .61, .36, 1);

    /* Tipografi: sistem yığını — dış istek yok */
    --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --yazi-numara: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                   Consolas, "Liberation Mono", monospace;

    --kap: 1320px;
}

/* ---------------------------------------------------------------
   2. Temel
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--yazi);
    font-size: 15px;
    line-height: 1.6;
    color: var(--metin);
    background: var(--zemin);
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--marka); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--marka-acik); }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--metin);
}

h1 { font-size: 1.95rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; }

hr { border: 0; border-top: 1px solid var(--cizgi); margin: 1.5rem 0; }

::selection { background: var(--marka); color: #fff; }

/* Klavyeyle gezenler için görünür odak — erişilebilirlik */
:focus-visible {
    outline: 2px solid var(--marka-acik);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Rakamların hizalanması: parça numarası ve fiyat sütunlarında şart */
.numara, .fiyat, .stok-kodu, .oem-no, td.sayi, .ba-fiyat {
    font-variant-numeric: tabular-nums;
}

.stok-kodu, .oem-no {
    font-family: var(--yazi-numara);
    font-size: .92em;
    letter-spacing: .01em;
}

/* ---------------------------------------------------------------
   3. Yerleşim
   --------------------------------------------------------------- */
.ba-kap {
    width: 100%;
    max-width: var(--kap);
    margin-inline: auto;
    padding-inline: 16px;
}

.ba-bolum { padding: 48px 0; }
.ba-bolum--dar { padding: 32px 0; }
.ba-bolum--alt { background: var(--zemin-alt); }

.ba-izgara { display: grid; gap: 20px; }
.ba-izgara--2 { grid-template-columns: repeat(2, 1fr); }
/* minmax(0, 1fr) — SADECE 1fr DEĞİL.
   CSS'te `1fr` aslında `minmax(auto, 1fr)` demektir ve `auto`
   asgarisi min-content'tir: içeriği dar olmayan bir kart ızgarayı
   ve dolayısıyla sayfayı genişletir. Ürün grubu kartları 480 px'de
   tam olarak bunu yaptı (gövde 567 px). minmax(0, …) izin verilen
   asgariyi sıfıra çeker, iz gerçekten küçülür. */
.ba-izgara--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-izgara--4 { grid-template-columns: repeat(4, 1fr); }
.ba-izgara--urun { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.ba-yan-duzen {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.ba-baslik-satir {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cizgi);
    position: relative;
}

.ba-baslik-satir::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 3px;
    background: var(--marka);
    border-radius: 3px;
}

.ba-baslik-satir h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    letter-spacing: -.02em;
}
.ba-baslik-satir a { font-size: .9rem; font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   4. Üst şerit — iletişim ve dil
   --------------------------------------------------------------- */
/*
 | UST SERIT
 |
 | Duz koyu bir bant idi. Alt kenarina markanin acik tonundan ince
 | bir cizgi kondu: serit ile beyaz baslik arasindaki gecis sert
 | olmasin. Baglantilar da artik alt cizgiyle degil, yumusak bir
 | renk gecisiyle tepki veriyor.
 */
.ba-serit {
    background: var(--zemin-koyu);
    background-image: linear-gradient(100deg, var(--marka-koyu) 0%, #143a47 60%, var(--marka-koyu) 100%);
    color: #b6c6d2;
    font-size: .82rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.ba-serit__ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
    flex-wrap: wrap;
}

.ba-serit a {
    color: #d3e0ea;
    transition: color var(--gecis);
}

.ba-serit a:hover { color: #fff; }
.ba-serit__oge:hover svg { opacity: 1; }

.ba-serit__sol, .ba-serit__sag {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ba-serit__oge { display: inline-flex; align-items: center; gap: 6px; }
.ba-serit__oge svg {
    width: 14px;
    height: 14px;
    opacity: .7;
    transition: opacity var(--gecis);
}

/*
 | Dil ve para secicileri
 |
 | Once kose yaricapi 10 px'lik kutulardi ve zeminleri seffafti;
 | koyu seritte sinirlari zor seciliyordu. Artik hafif dolgulu tam
 | yuvarlak haplar: hem tiklanabilir olduklari belli, hem de
 | seritteki oteki yazilardan ayriliyorlar.
 */
.ba-secici {
    appearance: none;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #e2ecf3;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 5px 26px 5px 11px;
    border-radius: var(--kose-tam);
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23aebcc9'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 12px;
}

.ba-secici:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .28);
}

.ba-secici:focus-visible {
    outline: 2px solid var(--marka-acik);
    outline-offset: 2px;
}

.ba-secici option { color: #1c2733; background: #fff; }

/* ---------------------------------------------------------------
   5. Başlık
   --------------------------------------------------------------- */
/*
 | YAPIŞKAN BAŞLIK — CAM ETKİSİ
 |
 | Düz beyaz bir şerit sayfanın üstüne yapışınca, altından geçen içerik
 | aniden kesiliyormuş gibi duruyordu. Yarı saydam zemin + bulanıklık
 | ile içerik başlığın altından SÜZÜLEREK geçiyor.
 |
 | backdrop-filter desteklemeyen tarayıcıda @supports dışındaki düz
 | beyaz zemin geçerli kalır — hiçbir şey bozulmaz.
 */
.ba-baslik {
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
    position: sticky;
    top: 0;
    z-index: 60;
    transition: box-shadow var(--gecis), background var(--gecis);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .ba-baslik {
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: saturate(180%) blur(16px);
        backdrop-filter: saturate(180%) blur(16px);
    }
}

/*
 | Sayfa kaydırılınca başlık inceliyor: arama ipucu gizleniyor, dikey
 | boşluk azalıyor, hafif bir gölge beliriyor. Ekranın üst şeridi
 | okunan içeriğe yer bırakıyor.
 */
.ba-baslik.kucuk { box-shadow: 0 1px 0 var(--cizgi), 0 8px 24px rgba(10, 40, 50, .07); }
.ba-baslik.kucuk .ba-baslik__ic { min-height: 62px; }
.ba-baslik.kucuk .ba-logo img { max-height: 48px; }
.ba-baslik.kucuk .ba-arama__ipucu { opacity: 0; max-height: 0; margin: 0; }

.ba-baslik__ic, .ba-logo img, .ba-arama__ipucu {
    transition: min-height var(--gecis), max-height var(--gecis),
                opacity var(--gecis), margin var(--gecis);
}

.ba-baslik__ic {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 88px;
    padding: 14px 0;
}

.ba-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--marka);
    flex-shrink: 0;
}

/* Logo kilidi "blue ascend / hydraulics / GMBH" diye üç satır; 46 px'de
   alt iki satır okunmuyordu. 56 px alt sınırdı; 62 px'de logo başlıktaki
   ağırlığını buluyor (88 px'lik satırda hâlâ rahat sığıyor).
   v30: 72 px. Arama kutusu 44 px alana + 10 px paya çıkınca logo yanında
   küçük kaldı — müşterinin "logoyu tasarıma uygun boyutta yap" dediği
   denge tam olarak buydu. 72 px'de logo satırın yüksekliğini belirleyen
   öğe oluyor ve arama kutusuyla aynı optik ağırlığa geliyor. */
.ba-logo img {
    max-height: 72px;
    width: auto;
    /* Kilit üç satır olduğu için genişliği de sınırlanmalı: dar
       pencerede 72 px yükseklik logoyu aramanın payına taşırıyordu. */
    max-width: 210px;
    object-fit: contain;
    object-position: left center;
}

/* --- Arama: bu sektörün en önemli öğesi --------------------------
   Müşteri ürün adıyla değil, söktüğü pompanın üstündeki numarayla
   arar. Bu yüzden arama kutusu başlıkta en geniş alanı kaplar ve
   yer tutucu metni numara arayabileceğini açıkça söyler.            */
.ba-arama {
    flex: 1 1 auto;
    max-width: 640px;
    position: relative;
}

/*
 | ARAMA KUTUSU — IKI PARCA DEGIL, TEK DENETIM
 |
 | Onceki halde alan ve dugme iki AYRI kutuydu: alanin sag kenari
 | silinip koseler birbirine bakacak sekilde yuvarlatilmisti. Bu
 | numara yakindan belli oluyor (iki parcanin birlestigi yerde
 | dikis kaliyor) ve odaklanma halkasi yalniz alanin etrafini
 | sariyordu — dugme halkanin disinda kaliyordu.
 |
 | Artik CERCEVE FORMUN KENDISINDE. Alan seffaf ve cerceveiz;
 | dugme cercevenin icinde duran ayri bir hap. Odaklanma halkasi
 | butun denetimi sariyor. Bugun arama kutularinin neredeyse
 | tamami boyle kuruluyor.
 */
/*
 | ARAMA KUTUSU — v30 modernlestirme
 |
 | Onceki hâl tamamen yuvarlak bir "hap" idi (--kose-tam). Hap bicimi
 | perakende/tuketici sitelerinin dili; B2B hidrolik alicisi numara
 | giren bir teknisyen ve kutunun teknik, kesin durmasi gerekiyor.
 | Kose 14 px'e cekildi: yumusak ama keskin.
 |
 | Ikinci degisiklik: alanin basina buyutec kondu. Once kutunun tek
 | isareti sagdaki dugmeydi; solda 14 px bos pay vardi ve kutu
 | siradan bir metin alanindan ayirt edilemiyordu.
 |
 | Ucuncu: zemin beyaza alindi. Gri zemin (--zemin-alt) baslik da
 | acik oldugu icin kutuyu zeminden ayirmiyordu; beyaz + ince golge
 | kutuyu one cikariyor.
 */
.ba-arama__form {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 5px 5px 14px;
    background: #fff;
    border: 1.5px solid var(--cizgi);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 32, 45, .04);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.ba-arama__form:hover {
    border-color: var(--marka-cizgi);
    box-shadow: 0 2px 8px rgba(15, 32, 45, .07);
}

.ba-arama__form:focus-within {
    border-color: var(--marka-acik);
    box-shadow: 0 0 0 4px rgba(0, 105, 134, .12);
}

/* Bastaki buyutec: alanla ayni gri, odakta markaya doner */
.ba-arama__ikon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    color: var(--metin-silik);
    transition: color var(--gecis);
}

.ba-arama__form:focus-within .ba-arama__ikon { color: var(--marka); }

.ba-arama__alan {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 6px 0 10px;
    font: inherit;
    font-size: .95rem;
    color: var(--metin);
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.ba-arama__alan::placeholder { color: var(--metin-silik); }

/* Halka artik formda; alanin kendi halkasi olmamali */
.ba-arama__alan:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

/* Arama alanindaki temizleme carpisi (WebKit) markaya uysun */
.ba-arama__alan::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: var(--metin-silik);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ba-arama__dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    font: inherit;
    font-weight: 650;
    letter-spacing: .01em;
    color: #fff;
    background: var(--marka);
    border: 0;
    /* Formun kosesi 14, ic pay 5 => 14-5 = 9. Dugme kosesi formun
       kosesiyle es merkezli olsun diye; aksi hâlde iki yay farkli
       merkezden gidip kose "ikili" gorunuyor. */
    border-radius: 9px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--gecis), box-shadow var(--gecis);
}

.ba-arama__dugme:hover {
    background: var(--marka-koyu);
    box-shadow: 0 4px 12px rgba(0, 105, 134, .28);
}

.ba-arama__dugme svg { width: 17px; height: 17px; }

/*
 | HATA: ipucu mutlak konumlandirilmisti ve baslik yuksekligine
 | dahil olmadigi icin altindaki mavi menu cubugu tarafindan
 | kesiliyordu. Artik akista duruyor, kendi yerini aciyor.
 */
/*
 | Ornek numaralar artik KUCUK ROZET.
 |
 | Duz yaziyken "Beispiel: 0510765347 · AZ365555 · Zahnradpumpe"
 | tek bir gri satirdi ve numaralarin tiklanabilir/kopyalanabilir
 | ornekler oldugu anlasilmiyordu. Rozet bicimi onlari veri olarak
 | isaretliyor — arama kutusunun hemen altinda "boyle bir sey yaz"
 | demenin en kisa yolu.
 */
.ba-arama__ipucu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    font-size: .75rem;
    line-height: 1.3;
    color: var(--metin-silik);
}

.ba-arama__ipucu-basi {
    font-weight: 600;
    color: var(--metin-soluk);
}

.ba-arama__ipucu b {
    font-family: var(--yazi-numara);
    font-weight: 600;
    font-size: .73rem;
    color: var(--marka);
    background: var(--marka-yumusak);
    border: 1px solid var(--marka-cizgi);
    border-radius: 999px;
    padding: 2px 9px;
    letter-spacing: .02em;
}

/* Urun ADI ornegi sayi degil; rakam yazi tipi ona yakismiyor */
.ba-arama__ipucu-ad {
    font-family: var(--yazi);
    letter-spacing: 0;
}

/* --- Başlık eylemleri --- */
.ba-eylemler { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/*
 | Hesap ve sepet dugmeleri
 |
 | Yazi biraz buyutuldu (.72 -> .75 rem) ve agirligi arttirildi;
 | onceki boyutta "Anmelden" ve "Warenkorb" ikonlarin altinda
 | fisilti gibi kaliyordu. Uzerine gelince marka tonunda yumusak
 | bir hap beliriyor ve ikon hafifce yukari kalkiyor.
 */
.ba-eylem {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 66px;
    padding: 8px 10px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--metin-soluk);
    border-radius: 14px;
    position: relative;
    transition: background var(--gecis), color var(--gecis);
}

.ba-eylem:hover { background: var(--marka-yumusak); color: var(--marka); }

.ba-eylem svg {
    width: 22px;
    height: 22px;
    transition: transform var(--gecis);
}

.ba-eylem:hover svg { transform: translateY(-1px); }

/*
 | Sepet sayisi. Beyaz halka (box-shadow) eklendi: rozet ikonun
 | uzerine bindiginde kenari kayboluyordu, halka onu zeminden
 | ayiriyor. Hap gorununce halka da hapin rengini alir.
 */
.ba-eylem__sayi {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    font-size: .68rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    color: #fff;
    background: var(--vurgu);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--zemin);
    transition: box-shadow var(--gecis);
}

.ba-eylem:hover .ba-eylem__sayi { box-shadow: 0 0 0 2px var(--marka-yumusak); }

/* ---------------------------------------------------------------
   6. Gezinme ve kategori menüsü
   --------------------------------------------------------------- */
/*
 | GEZINME CUBUGU — DERINLIK
 |
 | Onceki hal duz bir DIKEY gecisti (ustte marka, altta koyu). Dikey
 | gecis bir cubugu "boyanmis bant" gibi gosteriyor; 2010'larin
 | arayuz dili.
 |
 | Uc katman kondu:
 |   1. Ust kenarda ince isik cizgisi (inset) — cubuk kagittan
 |      kalkmis gibi durur.
 |   2. Ustten asagi zayiflayan beyaz parilti — cam hissi.
 |   3. Sol yarisi DUZ marka tonu, yalniz sag uc koyulasiyor.
 |
 | Ucuncu madde bilerek boyle. Once gecis sol tarafta acik tonla
 | (marka-acik) basliyordu; iki sorun cikti:
 |   * Secili ogenin beyazimsi hapi, cubugun EN ACIK yerine
 |     denk geliyor ve solgun goruniyordu.
 |   * Altindaki kahraman gorseli SOLDA KOYU, sagda acik. Cubuk
 |     tam tersi yonde gidince ikisi birbiriyle cakisiyordu.
 | Artik kategorilerin durdugu sol yari duz marka tonunda; koyulasma
 | yalniz ikincil baglantilarin oldugu sag uctaki.
 |
 | Altta yumusak golge: menu ile icerik arasinda hiyerarsi kurar.
 */
/*
 | ====================================================================
 | v34 — "KOYU AMA KUTUSUZ" (musteri secimi)
 | ====================================================================
 |
 | Musteriye uc secenek cizilip gosterildi:
 |
 |   A  acik/beyaz cubuk, aktif sekme marka renginde
 |   B  acik gri cubuk, aktif sekme beyaz kart
 |   C  koyu cubuk ama KUTU YOK, durum yalniz renk ve kalinlikla
 |
 | Musteri C'yi secti. Yani koyu zemin KALIYOR, gitmesi gereken sey
 | ogelerin uzerindeki hap/kutu bicimiydi.
 |
 | ZEMIN
 |
 | Eskiden iki katmanli bir gecisti: ust kenardan %8 beyaz bir
 | PARLAKLIK (2010 donemi "cilali dugme" gorunumu) ve soldan saga
 | marka -> koyu diyagonal bir gecis. Ikisi de kaldirildi; zemin
 | artik TEK ve DUZ bir koyu ton.
 |
 | --marka-koyu bilerek secildi: kahramanin altindaki "gercek"
 | seridi de ayni degeri kullaniyor (--zemin-koyu, ayni renk).
 | Sayfadaki koyu yuzeyler boylece tek bir tona oturuyor.
 |
 | Golge de kaldirildi. Golge, cubugu icerigin UZERINDE yuzen bir
 | katman gibi gosteriyordu; cubuk yuzen bir katman degil, basligin
 | devami. Yerine tek bir ust hat kaldi.
 */
.ba-gezinme {
    background: var(--marka-koyu);
    position: relative;
    z-index: 55;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ba-gezinme__ic { display: flex; align-items: stretch; gap: 0; }

/*
 | MENÜ TEK SATIR — TAŞAN KISIM AÇILIR LİSTEYE
 |
 | Önce flex-wrap vardı: menü iki satıra kırılıyor, ikinci satır boşta
 | kalıyordu. Sonra yatay kaydırma denendi: bu sefer son kategori
 | yarıdan kesiliyor ve sağdaki B2B/Blog/Kontakt bağlantılarının
 | ALTINDAN geçiyordu — kesilmiş bir başlık, bozuk bir sayfa gibi
 | duruyor.
 |
 | Şimdi: menü taşarsa sığmayanlar "Daha fazla" açılır listesine
 | taşınıyor (ölçümü script.js yapıyor). Hiçbir başlık kesilmiyor,
 | hiçbir bağlantı kaybolmuyor.
 |
 | `overflow: hidden` ölçüm için gerekli (scrollWidth > clientWidth
 | karşılaştırması) ve betik çalışmazsa kesilen kısmı gizleyerek en
 | azından üst üste binmeyi önlüyor.
 */
.ba-menu {
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

/*
 | `overflow: hidden` açılır alt menüleri de kırpardı. Betik öğeleri
 | yerleştirdikten sonra menüye `olculdu` sınıfını ekliyor ve taşma
 | serbest kalıyor — artık taşacak bir şey yok, çünkü sığmayanlar
 | "Daha fazla" listesine taşındı.
 |
 | Betik çalışmazsa sınıf hiç eklenmez, `overflow: hidden` yürürlükte
 | kalır ve en kötü ihtimalle son başlık kırpılır; üst üste binme
 | olmaz. Kötü durumun kötüsü değil, sadece kötüsü.
 */
.ba-menu.olculdu { overflow: visible; }

/* `hidden` niteliği her koşulda gizlesin */
.ba-menu__daha[hidden] { display: none !important; }

/*
 | Taşınan kategorinin KENDİ alt listesi de beraberinde geliyor.
 | Açılır listenin içinde ikinci bir açılır liste açmak yerine,
 | alt başlıkları girintili olarak alt alta gösteriyoruz.
 */
.ba-alt-menu .ba-alt-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 6px 12px;
    margin: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.ba-alt-menu .ba-alt-menu a { font-size: .84rem; color: var(--metin-soluk); padding: 6px 12px; }
.ba-alt-menu > li > a { font-weight: 600; }

/* Ic icedeki liste kendi kutusu degil; kenarlik ve kaydirma almaz */
.ba-alt-menu .ba-alt-menu {
    border-top: 0;
    max-height: none;
    overflow: visible;
}

/*
 | "Mehr" panelinde kategori adinin yanindaki ok KALDIRILDI.
 |
 | O ok "tiklayinca acilir" demek. Panelin icinde alt kirilimlar
 | ZATEN acik duruyor; ok orada yanlis bir soz veriyordu.
 */
.ba-alt-menu .ba-menu__ok { display: none; }

/* Ic icedeki gruplar arasinda nefes payi */
.ba-alt-menu > li + li:has(> .ba-alt-menu) { margin-top: 6px; }

/*
 | "Tümünü gör" satiri "Mehr" listesinin ICINDE gizlenir: orada
 | kategorinin kendi bagliantisi zaten bir ust satirda duruyor,
 | ikinci kez yazmak gurultu olurdu.
 */
.ba-alt-menu .ba-alt-menu .ba-alt-menu__tumu { display: none; }

/*
 | UZUN LISTE IKI SUTUNA INER
 |
 | Dokuz ya da daha cok satirda panel uzayip ekrani asabiliyor.
 | `:has()` ile satir sayisi olculup ikiye bolunuyor; "Tümünü gör"
 | satiri alttan tam genisligi kaplar.
 |
 | Yalniz masaustunde: mobilde alt menu zaten dikey akista ve orada
 | ikinci sutun okumayi zorlastirirdi.
 |
 | `:has()` desteklemeyen eski bir tarayicida kural hic uygulanmaz
 | ve liste tek sutun kalir — kayip yok, yalnizca uzun durur.
 */
@media (min-width: 992px) {
    .ba-alt-menu:has(> li:nth-child(9)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 8px;
        min-width: 520px;
    }

    .ba-alt-menu:has(> li:nth-child(9)) > .ba-alt-menu__tumu {
        grid-column: 1 / -1;
    }
}

/*
 | Ikincil baglantilar: ayni cubugun sagi.
 |
 | Kategorilerden ince bir dikey cizgiyle ayrildilar. Once hicbir
 | ayrim yoktu: "Hydraulik Mengenteiler" ile "Blog" ayni agirlikta
 | duruyor, goz hangisinin katalog hangisinin sayfa oldugunu
 | anlamiyordu. Cizgi + daha soluk renk bu iki grubu ayiriyor.
 */
.ba-menu--yardimci {
    margin-left: auto;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    padding-left: 14px;
}

.ba-menu--yardimci::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: rgba(255, 255, 255, .16);
}

.ba-menu--yardimci > li > a {
    font-weight: 500;
    color: #a9c4d6;
    font-size: .88rem;
}

.ba-menu--yardimci > li > a:hover { color: #fff; }

/*
 | ------------------------------------------------------------
 | v34 — "B2B / Händler" TURUNCU DUGME
 | ------------------------------------------------------------
 |
 | Bu bir TOPTANCI sitesi: cubuktaki en degerli tiklama bayi
 | basvurusu. Ama en SILIK oge oydu — ikincil listede, #a9c4d6
 | renginde, "Kontakt" ile ayni agirlikta duruyordu. Yani sayfa,
 | asil isini goze carpmayacak bicimde yaziyordu.
 |
 | v33'te ince cerceveli bir dugme yapilmisti; musteriye sunulan
 | uc secenekten DOLU TURUNCU olani secildi.
 |
 | Bu secim, cubuktaki diger her seyin kutusuz olmasiyla birlikte
 | dusunuldugunde tutarli: cubukta baska hicbir yerde zemin yok,
 | dolayisiyla tek dolu oge kendiliginden tek odak noktasi oluyor.
 | Kutulu bir cubukta ayni turuncu, kutulardan biri gibi gorunup
 | kaybolurdu.
 |
 | Kural `.ba-menu--yardimci > li > a`dan SONRA geliyor; `li.b2b`
 | daha ozgul oldugu icin agirlik ve renk galip geliyor.
 |
 | Sinif gorunum dosyasindan basiliyor, adresten okunmuyor: adres
 | dil onekine ve panelden degistirilebilen kisa ada bagli.
 */
/*
 | TON: --vurgu DEGIL --vurgu-koyu. OLCULDU.
 |
 | Beyaz yazi ile karsitlik orani:
 |
 |     --vurgu       #e0701a   3.23 : 1   KALIYOR
 |     --vurgu-koyu  #bc5a0f   4.56 : 1   gecer
 |
 | WCAG AA normal boy yazi icin 4.5 : 1 istiyor. "Buyuk yazi"
 | istisnasi 18.66 px kalin ya da 24 px normalden baslar; buradaki
 | yazi 14 px kalin, yani istisnaya GIRMIYOR.
 |
 | Almanya'da bu bir tercih degil: BFSG (Barrierefreiheits-
 | starkungsgesetz) Haziran 2025'ten beri e-ticaret sitelerini
 | kapsiyor.
 |
 | NOT — AYNI SORUN SITENIN GERI KALANINDA DA VAR: butun turuncu
 | dugmeler (.ba-dugme--vurgu, ornegin "Ersatzteil finden") ayni
 | 3.23 orani ile cikiyor. Oraya DOKUNULMADI, cunku --vurgu
 | degiskenini degistirmek sitedeki her turuncuyu koyulastirir ve
 | bu bir TASARIM kararidir. Isterseniz tek satirla cozulur:
 | :root icinde --vurgu: #bc5a0f.
 */
.ba-menu--yardimci > li.b2b > a {
    color: #fff;
    font-weight: 600;
    background: var(--vurgu-koyu);
    border-radius: 8px;
    transition: background var(--gecis), color var(--gecis);
}

.ba-menu--yardimci > li.b2b > a:hover,
.ba-menu--yardimci > li.b2b.secili > a {
    background: #a94f0c;
    color: #fff;
}

/*
 | MENU OGESI — KURUMSAL
 |
 | Iki sey denendi, ikisi de birakildi:
 |
 |   1. Tam yukseklik dolgu (ilk hali): secili sekme cubugun
 |      TAMAMINI kaplayan acik bir dikdortgendi. Sekmeyi cubuga
 |      civilenmis gosteriyor, eski masaustu yazilimi hissi veriyordu.
 |   2. Turuncu vurgu cubugu: once bir uctan obure uzanan cizgi,
 |      sonra yazinin altinda kisa bir isaret. Musteri bunu
 |      istemedi — "alt cizgili olmasin, kurumsal olsun".
 |
 | Kalan duzen: ALT CIZGI YOK, VURGU RENGI YOK. Durum yalniz
 | ZEMIN ve YAZI RENGIYLE anlatiliyor. Kose yaricapi 12'den 6'ya
 | indirildi; yumusak hap oyuncul duruyordu, 6 px daha olculu.
 | Yaziya hafif harf araligi kondu — sanayi/B2B sitelerinin
 | alisildik tipografik tonu.
 |
 | YUKSEKLIK KORUNDU: 42 px oge + 2x7 px pay = 56 px. Menu tasma
 | olcumu (script.js) canli olctugu icin degisiklige kendiliginden
 | uyum saglar.
 */
.ba-menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

/*
 | v33 — AGIRLIK DUSURULDU, HAVA VERILDI
 |
 | Butun basliklar 600 agirliktaydi ve aralarinda 1 px pay vardi:
 | cubuk, kalin yazilardan orulmus tek bir DUVAR gibi okunuyordu,
 | goz nereye bakacagini secemiyordu. Almanca kategori adlari uzun
 | oldugu icin etki katlaniyordu.
 |
 |   agirlik   600 -> 500
 |
 |   ONCE 550 yazildi, GERI ALINDI. 550 ancak DEGISKEN yazi
 |   tipinde gercek bir agirliktir. Site sistem yigini kullaniyor:
 |   macOS'ta SF degiskendir ve 550 aynen cizilir, ama Windows'ta
 |   aile "Segoe UI" ve degisken degil — CSS kurali 500'un
 |   USTUNDEKI degerler icin once YUKARI bakar, yani 550 tam da
 |   kacinmak istedigimiz 600 olarak cizilirdi. Musterinin
 |   alicilari agirlikli Windows'ta; 500 her yerde ayni.
 |   dolgu      14 -> 15 px
 |   pay         1 ->  2 px  (ogeler birbirinden ayrilsin)
 |   yukseklik  42 -> 40 px  (cubuk toplam 56 -> 54 px)
 |
 | Tasma olcumu (script.js) canli olcum yaptigi icin bu degisiklige
 | kendiliginden uyum saglar: daha genis ogeler daha erken "Daha
 | fazla" listesine tasinir, hicbiri kirpilmaz.
 |
 | OLCULDU — "hava verince kategori kaybeder miyiz?"
 | 1320 ve 1440 px'te eski degerlerle ve yeni degerlerle YAN YANA
 | olculdu: ikisinde de ayni bes baslik gorunuyor, ayni ucu "Daha
 | fazla" listesine gidiyor. Fark 14 px, bir baslik genisligini
 | asmiyor. Yani hava BEDAVA geldi; gerekirse dolguyu 14'e cekmek
 | gorunur baslik sayisini ARTIRMAZ.
 */
.ba-menu > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    /*
     | v34: YAN PAY SIFIR. Hap kalktigi icin ogeleri birbirinden
     | ayiran sey artik bosluk degil, dolgunun kendisi. 2 px'lik
     | yan pay kalsaydi basliklar arasinda gorunmeyen ama olcuye
     | giren bir bosluk kalirdi.
     */
    margin: 7px 0;
    padding: 0 17px;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .012em;
    color: #9fbccc;
    white-space: nowrap;
    position: relative;
    /* Kose yaricapi 0: kutu yok, yuvarlatacak bir sey de yok */
    border-radius: 0;
    transition: color var(--gecis);
}

/*
 | DURUM YALNIZ RENKLE VE KALINLIKLA — kutu YOK, zemin YOK,
 | alt cizgi YOK, vurgu rengi YOK.
 |
 | Buraya uc denemeden sonra gelindi:
 |
 |   1. Tam yukseklik dolgu: secili sekme cubugun tamamini kaplayan
 |      acik bir dikdortgendi, eski masaustu yazilimi hissi verdi.
 |   2. Turuncu alt cizgi: musteri istemedi — "alt cizgili olmasin,
 |      kurumsal olsun".
 |   3. Yuvarlak hap + ince beyaz hat (v33): musteri bunu da
 |      istemedi, uc secenek cizilip gosterildi ve "kutusuz" olan
 |      secildi.
 |
 | Geriye kalan en sade anlatim: pasif baslik soluk mavi-gri,
 | uzerine gelinen ve acik olan bembeyaz, bulunulan sayfa bembeyaz
 | VE KALIN. Koyu zeminde soluk griden bembeyaza gecis gozle
 | rahatca secilir; kutuya gerek yok.
 |
 | Gecis yalniz `color` uzerinde: zemin degismedigi icin baska
 | ozellige gecis vermek bos yere is yaptirirdi.
 */
.ba-menu > li > a:hover,
.ba-menu > li.acik > a {
    color: #fff;
}

.ba-menu > li.secili > a {
    color: #fff;
    font-weight: 700;
}

/*
 | Acilir listesi olan ogenin oku, liste acikken doner. Kucuk bir
 | ayrinti ama menunun "canli" hissini veren sey bu tur geri
 | bildirimler.
 */
.ba-menu__ok {
    width: 11px;
    height: 11px;
    opacity: .55;
    /*
     | Ok, yazinin GOVDESINE hizalansin. 12 px'lik simge satir
     | kutusunun ortasina oturunca yazinin taban cizgisinden 1 px
     | asagida duruyordu; kucuk ama menudeki her baslikta tekrar
     | ettigi icin cubuk hafif "kaymis" gorunuyordu.
     */
    margin-top: -1px;
    flex: 0 0 auto;
    transition: transform var(--gecis), opacity var(--gecis);
}

.ba-menu > li:hover > a .ba-menu__ok,
.ba-menu > li:focus-within > a .ba-menu__ok {
    transform: rotate(180deg);
    opacity: 1;
}

/* Açılır kategori listesi */
/*
 | ACILIR LISTE
 |
 | Once ust koseleri KARE idi (0 0 buyuk buyuk), cunku liste cubuga
 | yapisik duruyordu. Menu ogesi artik yuzen bir hap oldugu icin
 | liste de bagimsiz bir kart gibi gorunmeli: dort kose de yuvarlak.
 |
 | `top: 100%` DEGISMEDI. Aralarina bosluk konsaydi imlec listeye
 | giderken cubugun disina cikar ve liste kapanirdi; gorsel bosluk
 | seffaf bir ust kenar payiyla (padding-top) veriliyor.
 |
 | Acilis hareketi de yumusatildi: yalniz kayma degil, hafif buyume.
 */
/*
 | ACILIR ALT MENU
 |
 | Onceki hal duz beyaz bir kutuydu ve satirlar uzerine gelince
 | ICERI KAYIYORDU (padding-left 12 -> 16). Kayma ucuz duruyor:
 | yazinin yeri degistigi icin goz her seferinde yeniden odaklaniyor.
 |
 | Yerine gelenler:
 |   1. Ust kenarda ince marka seridi — panel, ustundeki menu
 |      cubuguna baglanmis gibi durur; havada asili kalmaz.
 |   2. Satir uzerine gelince YAZI OYNAMAZ; sagdan bir ok kayarak
 |      girer. Hareket var ama okunan sey yerinde duruyor.
 |   3. Uzun listeler iki sutuna iner (asagida).
 |   4. Golge inceltildi ve iki katmana ayrildi: yakin temas + genis
 |      yumusak. Tek kalin golge "yapistirma" hissi veriyordu.
 */
.ba-alt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 284px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--cizgi);

    /*
     | Ust kenardaki marka seridi BORDER ile veriliyor, ::before ile
     | degil. Sebebi asagidaki kaydirma: panel uzun olunca kendi
     | icinde kayiyor ve mutlak konumlu bir ::before yukari kayip
     | gozden kaybolurdu. Kenarlik kayma ile oynamaz.
     */
    border-top: 3px solid var(--marka);
    border-radius: 14px;

    /*
     | Uzun liste ekranin altini asmasin. "Mehr" panelinde dort
     | kategori ve onlarin alt kirilimlari bir araya gelince panel
     | pencereden tasiyordu; alttaki satirlara ulasilamiyordu.
     */
    /*
     | 260 px = ustteki baslik yigini (serit 40 + baslik ~110 +
     | gezinme 56) arti biraz pay. Yalniz `72vh` yazilsaydi panel
     | pencere yuksekligi kadar yer isteyip BASLIGIN ALTINDAN
     | basladigi icin alttan tasardi; olculdu: 800 px'lik pencerede
     | 27 px disarida kaliyordu.
     */
    max-height: min(560px, calc(100vh - 260px));
    overflow-y: auto;
    overscroll-behavior: contain;

    box-shadow:
        0 2px 6px rgba(10, 40, 50, .05),
        0 18px 44px rgba(10, 40, 50, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top left;
    transition: opacity var(--gecis), transform var(--gecis), visibility var(--gecis);
}

/* Izgaraya donustugunde daralmasin diye (gecmiste iki kez yasandi) */
.ba-alt-menu > li { min-width: 0; }

.ba-menu > li:hover > .ba-alt-menu,
.ba-menu > li:focus-within > .ba-alt-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.ba-alt-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    font-size: .9rem;
    font-weight: 500;
    color: var(--metin);
    border-radius: 9px;
    transition: background var(--gecis), color var(--gecis);
}

/*
 | Sagdaki ok. Ayri bir <svg> yerine maske: gorunum dosyasina
 | dokunmadan her satirda cikiyor ve rengi metinden aliyor.
 */
.ba-alt-menu a::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background: currentColor;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity var(--gecis), transform var(--gecis);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ba-alt-menu a:hover {
    background: var(--marka-yumusak);
    color: var(--marka);
}

.ba-alt-menu a:hover::after { opacity: .75; transform: none; }

/*
 | "Tümünü gör" satiri
 |
 | Alt kirilimlar tum urunleri kapsamaz; bir kategoride alt gruba
 | atanmamis urun olabilir. Bu satir ana kategoriye gider.
 | Ustunde ayirici cizgi var, oku hep gorunur.
 */
.ba-alt-menu__tumu {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cizgi);
}

.ba-alt-menu__tumu > a {
    font-size: .86rem;
    font-weight: 650;
    color: var(--marka);
}

.ba-alt-menu__tumu > a::after { opacity: .55; transform: none; }
.ba-alt-menu__tumu > a:hover::after { opacity: 1; transform: translateX(3px); }

/*
 | "Daha fazla" listesi SAĞA hizalı açılır. Sola hizalı olsaydı, menü
 | çubuğun sağ ucundayken liste ekranın dışına taşardı. Kural temel
 | `.ba-alt-menu`den SONRA gelmeli, yoksa `left: 0` galip geliyor.
 */
.ba-menu__daha > .ba-alt-menu--sag { left: auto; right: 0; }

/*
 | Mobil menü düğmesi
 |
 | v33: duz saydam bir yaziydi, cubuk zemininde DUGME oldugu
 | belli olmuyordu. Ince cerceveli bir yuzeye alindi; acikken
 | zemin koyulasip cerceve beliriyor — basili durumu gorunuyor.
 */
.ba-mobil-dugme {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 7px 0;
    padding: 0 14px;
    min-height: 40px;
    font: inherit;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .012em;
    color: #fff;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis);
}

.ba-gezinme.acik .ba-mobil-dugme {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .34);
}

.ba-mobil-dugme svg { width: 19px; height: 19px; flex: 0 0 auto; }

/*
 | Simge degisimi. `display: none` degil, cunku dugmenin genisligi
 | iki simge arasinda oynamasin — ikisi de ayni olcude ve ayni
 | yerde duruyor, yalniz gorunurluk degisiyor.
 */
.ba-mobil-dugme__kapat { display: none; }
.ba-gezinme.acik .ba-mobil-dugme__ac { display: none; }
.ba-gezinme.acik .ba-mobil-dugme__kapat { display: block; }

/* ---------------------------------------------------------------
   7. Düğmeler
   --------------------------------------------------------------- */
.ba-dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 22px;
    font: inherit;
    font-size: .93rem;
    font-weight: 650;
    text-align: center;
    color: #fff;
    background: var(--marka);
    border: 1.5px solid var(--marka);
    border-radius: var(--kose);
    cursor: pointer;
    transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}

.ba-dugme:hover { background: var(--marka-koyu); border-color: var(--marka-koyu); color: #fff; }

.ba-dugme--vurgu {
    background: var(--vurgu);
    border-color: var(--vurgu);
    box-shadow: var(--golge-renkli);
}

.ba-dugme--vurgu:hover {
    background: var(--vurgu-koyu);
    border-color: var(--vurgu-koyu);
    transform: translateY(-1px);
}

.ba-dugme--cizgi { background: transparent; color: var(--marka); }
.ba-dugme--cizgi:hover { background: var(--marka-yumusak); color: var(--marka-koyu); }

.ba-dugme--sessiz {
    background: transparent;
    color: var(--metin-soluk);
    border-color: var(--cizgi);
}

.ba-dugme--sessiz:hover { background: var(--zemin-alt); color: var(--metin); border-color: var(--metin-silik); }

.ba-dugme--genis { width: 100%; }
.ba-dugme--kucuk { min-height: 36px; padding: 0 14px; font-size: .85rem; }
.ba-dugme[disabled], .ba-dugme.pasif { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------
   8. Formlar
   --------------------------------------------------------------- */
.ba-etiket {
    display: block;
    margin-bottom: 5px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--metin-soluk);
}

.ba-alan {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: .93rem;
    color: var(--metin);
    background: #fff;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--kose);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.ba-alan:focus {
    outline: none;
    border-color: var(--marka-acik);
    box-shadow: 0 0 0 3px rgba(0, 105, 134, .14);
}

textarea.ba-alan { min-height: 110px; resize: vertical; }

select.ba-alan {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355636f' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 14px;
}

.ba-alan-grup { margin-bottom: 16px; }

.ba-yardim { margin-top: 4px; font-size: .8rem; color: var(--metin-silik); }

/* Adet seçici */
.ba-adet {
    display: inline-flex;
    align-items: stretch;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--kose);
    overflow: hidden;
    background: #fff;
}

.ba-adet button {
    width: 38px;
    font: inherit;
    font-size: 1.1rem;
    color: var(--metin-soluk);
    background: var(--zemin-alt);
    border: 0;
    cursor: pointer;
    transition: background var(--gecis);
}

.ba-adet button:hover { background: var(--marka-yumusak); color: var(--marka); }

.ba-adet input {
    width: 56px;
    text-align: center;
    font: inherit;
    font-variant-numeric: tabular-nums;
    border: 0;
    border-inline: 1.5px solid var(--cizgi);
    -moz-appearance: textfield;
}

.ba-adet input::-webkit-outer-spin-button,
.ba-adet input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------------------------------------------------------------
   9. Rozetler ve durum
   --------------------------------------------------------------- */
.ba-rozet {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.5;
    border-radius: 100px;
    white-space: nowrap;
}

.ba-rozet--stok { color: var(--olumlu); background: var(--olumlu-yumusak); }
.ba-rozet--yok { color: var(--olumsuz); background: var(--olumsuz-yumusak); }
.ba-rozet--tedarik { color: var(--uyari); background: var(--uyari-yumusak); }
.ba-rozet--yeni { color: var(--marka); background: var(--marka-yumusak); }
.ba-rozet--b2b { color: #fff; background: var(--zemin-koyu); }

.ba-nokta {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------
   10. Ürün kartı
   --------------------------------------------------------------- */
.ba-urun {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.ba-urun:hover {
    border-color: var(--marka-cizgi);
    box-shadow: var(--golge-yuksek);
    transform: translateY(-3px);
}

.ba-urun__gorsel {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--zemin-alt);
    overflow: hidden;
}

.ba-urun__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
    transition: transform .3s ease;
}

.ba-urun:hover .ba-urun__gorsel img { transform: scale(1.04); }

.ba-urun__etiketler {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ba-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px 14px;
    flex: 1;
}

.ba-urun__ust {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--metin-silik);
}

.ba-urun__ad {
    margin: 0;
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.35;
    /* İki satırda kes: kart yükseklikleri hizalı kalsın */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ba-urun__ad a { color: var(--metin); }
.ba-urun__ad a:hover { color: var(--marka); }

.ba-urun__kod {
    font-family: var(--yazi-numara);
    font-size: .76rem;
    color: var(--metin-silik);
}

.ba-urun__alt {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}

.ba-fiyat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.ba-fiyat__tutar {
    font-size: 1.12rem;
    font-weight: 750;
    color: var(--metin);
}

.ba-fiyat__eski {
    font-size: .82rem;
    color: var(--metin-silik);
    text-decoration: line-through;
}

.ba-fiyat__kdv { font-size: .72rem; color: var(--metin-silik); }

.ba-fiyat__sorunuz {
    font-size: .95rem;
    font-weight: 650;
    color: var(--marka);
}

/* ---------------------------------------------------------------
   11. Kategori kartları
   --------------------------------------------------------------- */
.ba-kategori {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis);
}

/* Sol kenardaki marka seridi hover'da buyur */
.ba-kategori::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--marka);
    transform: scaleY(.4);
    transition: transform var(--gecis);
}

.ba-kategori:hover {
    box-shadow: var(--golge);
    transform: translateY(-2px);
    border-color: var(--marka-cizgi);
}

.ba-kategori:hover::before { transform: scaleY(1); }

.ba-kategori__ok {
    width: 18px;
    height: 18px;
    color: var(--metin-silik);
    flex-shrink: 0;
    transition: transform var(--gecis), color var(--gecis);
}

.ba-kategori:hover .ba-kategori__ok { color: var(--marka); transform: translateX(3px); }

.ba-kategori__ad { font-weight: 650; color: var(--metin); line-height: 1.3; }
.ba-kategori__alt { font-size: .78rem; color: var(--metin-silik); }

/* Yan sütundaki kategori ağacı */
.ba-agac { list-style: none; margin: 0; padding: 0; }
.ba-agac li { border-bottom: 1px solid var(--cizgi); }
.ba-agac li:last-child { border-bottom: 0; }

.ba-agac > li > a {
    display: block;
    padding: 9px 2px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--metin);
}

.ba-agac > li > a:hover { color: var(--marka); }
.ba-agac ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 12px; }

.ba-agac ul a {
    display: block;
    padding: 5px 2px;
    font-size: .85rem;
    font-weight: 400;
    color: var(--metin-soluk);
}

.ba-agac ul a:hover { color: var(--marka); }
.ba-agac .secili > a { color: var(--marka); }

/* ---------------------------------------------------------------
   12. Kutular, uyarılar, tablolar
   --------------------------------------------------------------- */
.ba-kutu {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
}

.ba-kutu--alt { background: var(--zemin-alt); }
.ba-kutu--marka { background: var(--marka-yumusak); border-color: var(--marka-cizgi); }

.ba-uyari {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    font-size: .9rem;
    border: 1px solid transparent;
    border-radius: var(--kose);
    margin-bottom: 16px;
}

.ba-uyari--bilgi { color: var(--marka-koyu); background: var(--marka-yumusak); border-color: var(--marka-cizgi); }
.ba-uyari--olumlu { color: var(--olumlu); background: var(--olumlu-yumusak); border-color: #bde3ce; }
.ba-uyari--dikkat { color: var(--uyari); background: var(--uyari-yumusak); border-color: #f0dfae; }
.ba-uyari--hata { color: var(--olumsuz); background: var(--olumsuz-yumusak); border-color: #f2c4c0; }

.ba-tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }

.ba-tablo th, .ba-tablo td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: middle;
}

.ba-tablo th {
    font-size: .78rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--metin-soluk);
    background: var(--zemin-alt);
    white-space: nowrap;
}

.ba-tablo tbody tr:hover { background: var(--zemin-alt); }
.ba-tablo .sag { text-align: right; }

/* Teknik veri tablosu — ürün sayfası */
.ba-teknik { width: 100%; border-collapse: collapse; font-size: .9rem; }

.ba-teknik th, .ba-teknik td {
    padding: 9px 0;
    border-bottom: 1px solid var(--cizgi);
    vertical-align: top;
}

.ba-teknik th {
    width: 42%;
    font-weight: 500;
    color: var(--metin-soluk);
    text-align: left;
}

.ba-teknik td { font-weight: 600; }

/* ---------------------------------------------------------------
   13. Kırıntı yolu
   --------------------------------------------------------------- */
.ba-yol {
    padding: 12px 0;
    font-size: .84rem;
    background: var(--zemin-alt);
    border-bottom: 1px solid var(--cizgi);
}

.ba-yol ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ba-yol li { display: inline-flex; align-items: center; gap: 6px; color: var(--metin-silik); }
.ba-yol li:not(:last-child)::after { content: "›"; color: var(--metin-silik); }
.ba-yol a { color: var(--metin-soluk); }
.ba-yol a:hover { color: var(--marka); }

/* ---------------------------------------------------------------
   14. Ürün detayı
   --------------------------------------------------------------- */
.ba-detay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }

.ba-galeri__ana {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
}

.ba-galeri__ana img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }

.ba-galeri__seritler {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.ba-galeri__kucuk {
    aspect-ratio: 1 / 1;
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--gecis);
}

.ba-galeri__kucuk:hover, .ba-galeri__kucuk.secili { border-color: var(--marka); }
.ba-galeri__kucuk img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.ba-detay__fiyat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 4px 0 2px;
}

.ba-detay__fiyat .tutar { font-size: 1.9rem; font-weight: 750; letter-spacing: -.02em; }

.ba-kunye { list-style: none; margin: 0 0 18px; padding: 0; font-size: .9rem; }

.ba-kunye li {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--cizgi);
}

.ba-kunye li:last-child { border-bottom: 0; }
.ba-kunye .ad { min-width: 140px; color: var(--metin-soluk); }
.ba-kunye .deger { font-weight: 600; }

/* ---------------------------------------------------------------
   15. Sepet ve kasa
   --------------------------------------------------------------- */
.ba-sepet-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }

.ba-ozet {
    position: sticky;
    top: 96px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge);
}

.ba-ozet__satir {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: .92rem;
}

/* Tutar satır sonunda "1.775,72" / "€" diye ikiye bölünmesin */
.ba-ozet__satir .deger { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.ba-ozet__toplam span:last-child { white-space: nowrap; }

.ba-ozet__toplam {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 2px solid var(--marka);
    font-size: 1.1rem;
    font-weight: 750;
}

.ba-sepet-satir {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--cizgi);
}

.ba-sepet-satir__gorsel {
    aspect-ratio: 1 / 1;
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    overflow: hidden;
}

.ba-sepet-satir__gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* Ödeme yöntemi seçenekleri */
.ba-secenek {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    margin-bottom: 9px;
    background: #fff;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--kose);
    cursor: pointer;
    transition: border-color var(--gecis), background var(--gecis);
}

.ba-secenek:hover { border-color: var(--marka-cizgi); background: var(--marka-yumusak); }
.ba-secenek input { margin-top: 3px; accent-color: var(--marka); width: 17px; height: 17px; }
.ba-secenek__ad { font-weight: 600; }
.ba-secenek__not { display: block; font-size: .82rem; color: var(--metin-silik); }
.ba-secenek:has(input:checked) { border-color: var(--marka); background: var(--marka-yumusak); }

/* Kasa adımları */
.ba-adimlar {
    display: flex;
    gap: 6px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex-wrap: wrap;
}

.ba-adimlar li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--metin-silik);
    background: var(--zemin-alt);
    border-radius: 100px;
}

.ba-adimlar li.etkin { color: #fff; background: var(--marka); }
.ba-adimlar li.tamam { color: var(--olumlu); background: var(--olumlu-yumusak); }

/* ---------------------------------------------------------------
   16. Kahraman alanı ve güven şeridi
   --------------------------------------------------------------- */
.ba-kahraman {
    position: relative;
    padding: 64px 0 72px;
    color: #fff;
    background:
        radial-gradient(1100px 520px at 88% 12%, rgba(36, 121, 152, .42) 0%, transparent 62%),
        linear-gradient(125deg, #0b2a34 0%, #11313c 45%, #1c5f77 100%);
    overflow: hidden;
}

/* Teknik çizim hissi veren ince ızgara — görsel dosyası gerekmez */
/* Teknik cizim izgarasi — ustte solarak biter, duz bir blok gibi durmaz */
.ba-kahraman::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(760px 420px at 20% 30%, #000 10%, transparent 78%);
    mask-image: radial-gradient(760px 420px at 20% 30%, #000 10%, transparent 78%);
    pointer-events: none;
}

/* Iki sutun: solda metin ve arama, sagda teknik kart */
.ba-kahraman__duzen {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 48px;
    align-items: center;
}

.ba-kahraman__ic { max-width: 640px; }

.ba-kahraman h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin-bottom: 16px;
}

.ba-kahraman p { color: #c6d7e8; font-size: 1.06rem; max-width: 56ch; }

/* Ustteki kucuk etiket — sayfanin ne oldugunu bir bakista soyler */
.ba-kahraman__etiket {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #9fc6ea;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--kose-tam);
}

.ba-kahraman__etiket .ba-nokta { background: #5bb8f5; }

/* Sag sutun: parca kunyesi gorunumunde cam kart */
.ba-kahraman__kart {
    padding: 22px 24px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--kose-buyuk);
    backdrop-filter: blur(6px);
    box-shadow: 0 18px 44px rgba(3, 20, 36, .34);
}

.ba-kahraman__kart h2 {
    margin: 0 0 4px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9fc6ea;
}

.ba-kahraman__kart .ba-kunye { margin: 10px 0 0; }
.ba-kahraman__kart .ba-kunye li { border-bottom-color: rgba(255, 255, 255, .12); }
.ba-kahraman__kart .ba-kunye .ad { color: #a9c2d8; }
.ba-kahraman__kart .ba-kunye .deger { color: #fff; }

.ba-kahraman__sayilar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ba-kahraman__sayi b {
    display: block;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -.02em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.ba-kahraman__sayi span { font-size: .76rem; color: #a9c2d8; }

.ba-kahraman__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ba-kahraman .ba-dugme--cizgi {
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.ba-kahraman .ba-dugme--cizgi:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ba-guven {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: -34px auto 0;
    position: relative;
    z-index: 2;
}

.ba-guven__oge {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge);
}

.ba-guven__oge svg { width: 26px; height: 26px; color: var(--marka); flex-shrink: 0; }
.ba-guven__ad { font-weight: 650; font-size: .92rem; line-height: 1.25; }
.ba-guven__not { font-size: .8rem; color: var(--metin-silik); }

/* ---------------------------------------------------------------
   17. Alt bilgi

   ZEMİN MARKA RENGİ. Eskiden koyu laciverttir (--zemin-koyu); firmanın
   kendi sitesinden alınan ekran görüntüsündeki zemin ölçüldü ve tam
   olarak #006986 çıktı — yani --marka. Kurumsal renk panelden
   değişirse alt bilgi de onunla döner.
   --------------------------------------------------------------- */
.ba-alt {
    /* margin-top 64px İDİ.
       Bölümlerin kendi alt payı (48px) zaten ayırıyor; ikisi
       toplanınca alt bilgiden önce 112px boş bir bant kalıyordu —
       müşterinin gönderdiği PDF'te sayfanın sonunda görünen boşluk
       buydu. Pay kaldırıldı, ayrımı bölüm payı ve alt bilginin
       kendi koyu zemini yapıyor. */
    margin-top: 0;
    padding: 52px 0 0;
    color: rgba(255, 255, 255, .78);
    background: var(--marka);
    font-size: .9rem;
    position: relative;
}

/* Üstte ince vurgu çizgisi: gövdeden ayrılsın */
.ba-alt::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--vurgu), var(--marka-acik));
}

.ba-alt__izgara {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 36px;
    padding-bottom: 40px;
}

.ba-alt h4 {
    margin-bottom: 16px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #fff;
}

.ba-alt ul { list-style: none; margin: 0; padding: 0; }
.ba-alt a { color: rgba(255, 255, 255, .78); }
.ba-alt a:hover { color: #fff; }

.ba-alt .ba-logo img { max-height: 74px; }
.ba-alt__ozet { max-width: 44ch; margin: 18px 0 0; line-height: 1.7; }

.ba-alt__liste li { margin-bottom: 10px; }

/*
 | ALT BILGI BAGLANTI SUTUNLARI
 |
 | Once butun baglanti uzerine gelince 3 px saga KAYIYORDU. Ust
 | menunun acilir listelerinde ayni kaymayi kaldirdim: yazinin yeri
 | degisince goz her seferinde yeniden odakliyor. Burada da ayni
 | dil — yazi yerinde durur, YALNIZ ISARET oynar ve renk acilir.
 */
.ba-alt__liste a {
    display: inline-block;
    position: relative;
    transition: color var(--gecis);
}

.ba-alt__liste a:hover { color: #fff; }

/*
 | Yasal sutun isareti.
 |
 | Once « » karakteri (\00bb) kullaniliyordu. Yazi tipine gore
 | kalinligi ve dikey hizasi degisen bir noktalama isareti; menudeki
 | oklarla da hicbir akrabaligi yoktu. Yerine acilir menulerde
 | kullanilan okun aynisi kondu — tek bir isaret dili.
 */
.ba-alt__liste--ok a { padding-left: 18px; }

.ba-alt__liste--ok a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    background: currentColor;
    opacity: .45;
    transition: opacity var(--gecis), transform var(--gecis);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

.ba-alt__liste--ok a:hover::before { opacity: 1; transform: translateX(3px); }

.ba-alt__bos { color: rgba(255, 255, 255, .5); }

/* Çerez tercihleri: POST formu, listedeki bağlantılar gibi görünsün */
.ba-alt__liste form { margin: 0; }

/*
 | "Cookie-Einstellungen" bir POST formunun dugmesi ama listedeki
 | baglantilarla AYNI gorunmeli — ziyaretci icin ikisi de bir
 | baglanti. 18 px'lik sol bosluk yasal sutunun ok payiyla ayni ki
 | yazilar alt alta hizali dursun.
 */
.ba-alt__bag-dugme {
    padding: 0 0 0 18px;
    font: inherit;
    font-size: inherit;
    color: rgba(255, 255, 255, .78);
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    transition: color var(--gecis);
}

.ba-alt__bag-dugme:hover { color: #fff; }

/*
 | ALT BİLGİDEN SONRAKİ ÇEREZ FORMU
 |
 | KAYNAĞI BULUNDU: `vitrin/partials/cerez.blade.php` son satırlarında,
 | rıza bandının DIŞINDA, kapsayıcısız bir form basıyor:
 |
 |     <form method="POST" action=".../cerez-rizasi/sifirla"
 |           style="display:inline"> … Çerez tercihleri … </form>
 |
 | Yerleşim onu `</footer>`den hemen sonra çağırdığı için sayfanın en
 | altında beyaz bir şerit ve sola yapışık, altı çizili bir düğme
 | olarak görünüyordu.
 |
 | NEDEN GİZLENİYOR — ve ne zaman gizlenmemeli
 |
 | AYNI DENETİM alt bilginin yasal sütununda zaten var (bu temanın
 | footer.blade.php dosyası, aynı POST rotasına giden bir form).
 | DSGVO md. 7/3 rızanın geri alınabilir olmasını ister; ikinci bir
 | kopyasının bulunmasını değil. Yani burada gizlenen bir hak değil,
 | bir tekrar.
 |
 | !! Alt bilgideki o bağlantı kaldırılırsa BU KURAL DA kaldırılmalı;
 |    aksi hâlde rızayı geri alma yolu tamamen kapanır.
 |
 | Seçici bilerek dar: yalnız alt bilgiden sonra gelen ve rıza sıfırlama
 | rotasına giden form. Başka hiçbir şeye dokunmaz.
 |
 | !! v36.1 — ÜÇ YOL BİRDEN YAZILI, SEBEBİ ŞU:
 |
 | Kural tek başına `cerez-rizasi` arıyordu. Vitrin adresleri
 | Almancaya çevrilince o rota `/cookie-einstellungen/zuruecksetzen`
 | oldu, seçici tutmaz hâle geldi ve kaçak düğme sayfanın en altında
 | BEYAZ BİR ŞERİT olarak geri geldi. Canlıda görüldü.
 |
 | Bu, adrese bağlı bir seçicinin sessizce bozulmasının ders niteliğinde
 | örneği: CSS, rota adını değil YOLU görür; yol değişince kimse haber
 | vermez. Üç dilin yolu da yazıldı ve `almanca_url_denetle.py` artık
 | bu eşleşmeyi denetliyor.
 */
.ba-alt ~ form[action*="cerez-rizasi"],
.ba-alt ~ form[action*="cookie-einstellungen"],
.ba-alt ~ form[action*="cookie-settings"] { display: none !important; }

/*
 | Yine de kapsayıcısız bir şey kalırsa (çekirdek değişirse) beyaz
 | şerit yerine alt bilginin devamı gibi görünsün.
 */
.ba-alt ~ a:not(.ba-yukari) {
    display: block;
    padding: 14px 16px;
    font-size: .8rem;
    text-align: center;
    color: rgba(255, 255, 255, .62);
    background: var(--marka);
    text-decoration: underline;
}

.ba-alt ~ a:not(.ba-yukari):hover { color: #fff; }

/* İletişim: her satır kendi simgesiyle */
.ba-alt__iletisim { font-style: normal; margin-top: 18px; display: grid; gap: 10px; }
.ba-alt__iletisim span { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }

.ba-alt__iletisim svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    margin-top: 1px;
    color: rgba(255, 255, 255, .6);
}

/* Sosyal hesaplar */
.ba-sosyal { display: flex; gap: 8px; margin-top: 20px; }

.ba-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-radius: 50%;
    transition: background var(--gecis), transform var(--gecis);
}

.ba-sosyal a:hover { background: var(--vurgu); transform: translateY(-2px); }
.ba-sosyal svg { width: 18px; height: 18px; }

/* Güven şeridi: güvenli ödeme, sevkiyat, cayma hakkı */
.ba-alt__guven {
    background: rgba(0, 0, 0, .14);
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ba-alt__guven-ic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-block: 22px;
}

.ba-alt__rozet { display: flex; align-items: center; gap: 12px; }

.ba-alt__rozet svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    color: #fff;
    opacity: .85;
}

.ba-alt__rozet b { display: block; color: #fff; font-size: .88rem; font-weight: 650; line-height: 1.3; }
.ba-alt__rozet span { font-size: .8rem; color: rgba(255, 255, 255, .62); }

/* Künye */
.ba-alt__kunye { background: rgba(0, 0, 0, .22); }

.ba-alt__kunye-ic {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 16px;
    font-size: .8rem;
    color: rgba(255, 255, 255, .62);
}

/* ---------------------------------------------------------------
   18. Sayfalama
   --------------------------------------------------------------- */
.ba-sayfalama { display: flex; justify-content: center; margin-top: 28px; }

.ba-sayfalama .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }

.ba-sayfalama .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--metin-soluk);
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
}

.ba-sayfalama .page-link:hover { background: var(--marka-yumusak); color: var(--marka); border-color: var(--marka-cizgi); }
.ba-sayfalama .active .page-link { color: #fff; background: var(--marka); border-color: var(--marka); }
.ba-sayfalama .disabled .page-link { opacity: .45; pointer-events: none; }

/* ---------------------------------------------------------------
   19. Yardımcılar
   --------------------------------------------------------------- */
.ba-gizle { display: none !important; }
.ba-sadece-okuyucu {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.ba-silik { color: var(--metin-silik); }
.ba-kucuk { font-size: .84rem; }
.ba-orta { text-align: center; }
.ba-sag { text-align: right; }
.ba-kalin { font-weight: 650; }
.ba-bosluk-yok { margin: 0 !important; }
.ba-ust-8 { margin-top: 8px; }
.ba-ust-16 { margin-top: 16px; }
.ba-ust-24 { margin-top: 24px; }

.ba-yukari {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 70;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: var(--marka);
    border-radius: var(--kose);
    box-shadow: var(--golge-yuksek);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--gecis), visibility var(--gecis);
}

.ba-yukari.gorunur { opacity: 1; visibility: visible; }
.ba-yukari:hover { background: var(--marka-koyu); color: #fff; }

/* ---------------------------------------------------------------
   20. Mobil
   --------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .ba-alt__izgara { grid-template-columns: 1fr 1fr; }
    .ba-yan-duzen { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .ba-baslik__ic { flex-wrap: wrap; gap: 12px; min-height: 0; padding: 12px 0; }
    .ba-arama { order: 3; flex-basis: 100%; max-width: none; }
    .ba-arama__ipucu { display: none; }
    .ba-eylemler { margin-left: auto; }

    .ba-mobil-dugme { display: inline-flex; }
    .ba-menu { display: none; }

    /*
     | MOBIL MENU — IKI LISTE UST USTE BINIYORDU
     |
     | Baslikta IKI ayri <ul class="ba-menu"> var: kategoriler ve
     | ikincil baglantilar (B2B / Blog / Kontakt). Mobil kuralda
     | `.ba-menu` mutlak konumlandirilip `top: 100%` veriliyordu —
     | ve bu IKISINE BIRDEN uyuyordu.
     |
     | Sonuc: iki panel tam olarak ayni yere ciziliyor, ikincisi
     | birincinin UZERINE biniyordu. Menu acilinca en ustte
     | "B2B / Händler, Blog, Kontakt" goruluyor, onlarin altindan
     | kategoriler sizip duruyor, "Startseite" ve "OEM" ise tamamen
     | kayboluyordu.
     |
     | Cozum: mobilde paneller mutlak konumdan cikariliyor. Cubuk
     | sarilabilir hale geliyor, her liste kendi tam genislikte
     | satirina iniyor ve ikisi SIRAYLA aliniyor. Menu acilinca
     | sayfa asagi kayiyor — mobilde alisildik davranis.
     */
    .ba-gezinme.acik .ba-gezinme__ic { flex-wrap: wrap; }

    .ba-gezinme.acik .ba-menu {
        display: block;
        position: static;
        flex: 0 0 100%;
        max-width: 100%;
        max-height: 60vh;
        overflow-y: auto;
        padding: 6px 0;
        /*
         | Panelin KENDI zemini yok. Zemin verildiginde, kapsayicinin
         | yan bosluklari yuzunden cubugun zemininden biraz dar bir
         | dikdortgen ciziliyor ve iki ton arasinda gorunur bir dikis
         | kaliyordu. Panel zaten cubugun icinde.
         */
    }

    /* Ikincil baglantilar ayni panelin devami; ayirici cizgiyle */
    .ba-gezinme.acik .ba-menu--yardimci {
        margin-left: 0;
        padding: 6px 0 10px;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    /* Dikey listede dikey ayirici cizginin anlami yok */
    .ba-menu--yardimci::before { display: none; }

    /*
     | MASAUSTU HAP DUZENI MOBILDE GERI ALINIR.
     |
     | Masaustunde `.ba-menu > li` bir flex kutusu (hapi dikeyde
     | ortalamak icin). Mobilde menu dikey bir listeye donusuyor ve
     | acilir alt liste, bagliantinin KARDESI olarak ayni li'nin
     | icinde duruyor. li flex kalsaydi alt liste bagliantinin
     | ALTINA degil YANINA dizilirdi — kategori acilinca menu
     | bozulurdu.
     |
     | Hapin yan paylari da sifirlanir; tam genislik satir olmali.
     */
    .ba-menu > li { display: block; }

    /*
     | Satir, kapsayicinin yan bosluklari icinde duran bir hap.
     | Tam genislikte dolgu denendi ama kapsayici bosluğu yuzunden
     | sag kenarda kesilmis gibi duruyordu; yuvarlak kose bunu
     | "kesik" degil "oge" haline getiriyor ve masaustundeki hap
     | diliyle ayni oluyor.
     */
    .ba-gezinme.acik .ba-menu > li > a {
        min-height: 46px;
        width: 100%;
        margin: 2px 0;
        border-radius: 6px;
        padding: 0 14px;
        justify-content: space-between;
    }

    /*
     | v34 — MASAUSTUNDEKI "KUTUSUZ" KARARI MOBILDE GERI ALINIR.
     |
     | Masaustunde ogeler yatay bir cubukta duruyor; aralarindaki
     | dolgu onlari zaten ayiriyor ve durum yalniz renkle
     | anlatilabiliyor. Mobilde ise ayni ogeler tam genislikte
     | SATIRLAR haline geliyor. Zemini olmayan bir satirin nereye
     | kadar dokunulabilir oldugu belli olmuyor: ziyaretci yazinin
     | ustune basmak zorunda kaldigini saniyor.
     |
     | Bu yuzden mobilde dokunma/acik/secili durumlari yine hafif
     | bir zemin aliyor. Gorunum ayni dilde kaliyor (kutu degil,
     | satir vurgusu), ama satirin siniri gorunuyor.
     */
    .ba-gezinme.acik .ba-menu > li > a:hover,
    .ba-gezinme.acik .ba-menu > li.acik > a {
        background: rgba(255, 255, 255, .08);
    }

    .ba-gezinme.acik .ba-menu > li.secili > a {
        background: rgba(255, 255, 255, .13);
    }

    /* Mobilde ok donmesi imlecle degil, acik sinifiyla */
    .ba-menu > li:hover > a .ba-menu__ok { transform: none; }
    .ba-menu > li.acik > a .ba-menu__ok { transform: rotate(180deg); }

    .ba-alt-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        background: rgba(0, 0, 0, .16);
        padding: 2px 0 6px 14px;
        display: none;
    }

    .ba-menu > li.acik > .ba-alt-menu { display: block; }
    .ba-alt-menu a { color: #dbe6f1; }
    .ba-alt-menu a:hover { background: rgba(255, 255, 255, .1); color: #fff; }

    /*
     | Masaustune ait iki ayrinti mobilde geri alinir:
     |
     | 1. Ust marka seridi. Panel burada kart degil, menunun icinde
     |    bir girinti; serit tam genislikte bir cizgi olarak kalirdi.
     | 2. "Tümünü gör" ayiricisi `--cizgi` (acik gri) kullaniyor.
     |    Koyu petrol zeminde bu PARLAK bir cizgi demek olurdu;
     |    yerine seffaf beyaz kondu.
     */
    .ba-alt-menu::before { display: none; }

    .ba-alt-menu__tumu { border-top-color: rgba(255, 255, 255, .16); }
    .ba-alt-menu__tumu > a { color: #fff; }
    .ba-alt-menu__tumu > a::after { opacity: .7; }

    /* Kahraman tek sütuna iner; sağdaki künye kartı gizlenir */
    .ba-kahraman__duzen { grid-template-columns: 1fr; gap: 28px; }
    .ba-kahraman__ic { max-width: none; }

    .ba-detay { grid-template-columns: 1fr; gap: 24px; }
    .ba-detay__gorseller { position: static; }
    .ba-sepet-duzen { grid-template-columns: 1fr; }
    .ba-ozet { position: static; }
    .ba-yan-duzen { grid-template-columns: 1fr; }
    .ba-izgara--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-izgara--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-kahraman h1 { font-size: 1.85rem; }
}

@media (max-width: 767.98px) {
    body { font-size: 14.5px; }

    .ba-bolum { padding: 32px 0; }

    /* Dar ekranda gizlenecek her şey — şeritle sınırlı değil */
    .gizle-mobil { display: none !important; }

    /* Güven şeridi kahramanın üstüne binmesin */
    .ba-guven { margin-top: 20px; }

    .ba-eylem { min-width: 52px; font-size: 0; gap: 0; padding: 8px; }
    .ba-eylem svg { width: 22px; height: 22px; }
    .ba-eylem__sayi { top: -2px; right: 0; }

    /*
     | Tek sütunda alt bilgi telefonda üç ekran boyu uzuyordu. İki
     | sütuna geçiyor; firma sütunu (logo, adres, sosyal) tam genişlik
     | kalıyor çünkü adres satırları ikiye bölünürse okunmuyor.
     */
    .ba-alt__izgara { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
    .ba-alt__firma { grid-column: 1 / -1; }
    .ba-izgara--urun { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ba-urun__govde { padding: 10px 11px 12px; }
    .ba-urun__ad { font-size: .87rem; }
    .ba-fiyat__tutar { font-size: 1rem; }

    .ba-sepet-satir { grid-template-columns: 64px minmax(0, 1fr); }
    .ba-sepet-satir__eylem { grid-column: 1 / -1; }

    .ba-detay__fiyat .tutar { font-size: 1.5rem; }
    .ba-kahraman { padding: 40px 0; }
    .ba-kahraman h1 { font-size: 1.6rem; }
    .ba-kahraman p { font-size: .95rem; }
    .ba-kahraman__dugmeler .ba-dugme { flex: 1 1 100%; }

    .ba-tablo { font-size: .85rem; }
    .ba-tablo th, .ba-tablo td { padding: 8px 9px; }
}

@media (max-width: 479.98px) {
    .ba-izgara--2, .ba-izgara--3, .ba-izgara--4 { grid-template-columns: 1fr; }

    /*
     | Katalog ızgarası dar ekranda da İKİ sütun kalıyor. Tek sütunda
     | sekiz ürün, telefonda altı ekran boyu kaydırma demekti; yedek
     | parça alıcısı listeyi tarayarak ilerler, tek tek incelemez.
     */
    .ba-izgara--urun { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ba-urun__govde { padding: 9px 10px 11px; }
    .ba-urun__alt { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ba-urun__alt .ba-dugme { width: 100%; }
    .ba-logo { font-size: 1.05rem; }
    .ba-logo img { max-height: 44px; max-width: 168px; }
}

/* ---------------------------------------------------------------
   21. Yazdırma — sipariş ve teklif çıktısı
   --------------------------------------------------------------- */
@media print {
    .ba-serit, .ba-gezinme, .ba-alt, .ba-yukari, .ba-arama, .ba-eylemler,
    .ba-kahraman__dugmeler, .ba-mobil-dugme { display: none !important; }

    body { font-size: 11pt; color: #000; background: #fff; }
    .ba-baslik { position: static; border-bottom: 2px solid #000; }
    .ba-kutu, .ba-urun { border-color: #999; box-shadow: none; }
    a { color: #000; text-decoration: none; }
}

/* =====================================================================
   22. ESKİ TEMA UYUMLULUK KATMANI

   Bu temada HER görünüm yeniden yazılmadı; yazılmayanlar çekirdek
   görünümlerden geliyor ve eski şablonun sınıf adlarını kullanıyor
   (product__card--title, primary__btn, kutu__panel…).

   Aşağısı o sınıfları yeni tasarım diline bağlar. Böylece elle
   dokunulmamış sayfalar da (blog, iade, hesap ekranları) bozuk
   görünmez — eski CSS dosyası hiç yüklenmese bile.
   ===================================================================== */
.primary__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    font-weight: 650; font-size: .93rem; color: #fff;
    background: var(--marka); border: 1.5px solid var(--marka);
    border-radius: var(--kose); cursor: pointer; transition: background var(--gecis);
}

.primary__btn:hover { background: var(--marka-koyu); color: #fff; }

.ikincil__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 20px;
    font-weight: 650; font-size: .93rem; color: var(--marka);
    background: transparent; border: 1.5px solid var(--marka-cizgi);
    border-radius: var(--kose); cursor: pointer;
}

.ikincil__btn:hover { background: var(--marka-yumusak); color: var(--marka-koyu); }

.kutu__panel {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    margin-bottom: 20px;
}

.form__etiket {
    display: block; margin-bottom: 5px;
    font-size: .84rem; font-weight: 600; color: var(--metin-soluk);
}

.form__alan {
    display: block; width: 100%; min-height: 44px; padding: 10px 12px;
    font: inherit; font-size: .93rem; color: var(--metin);
    background: #fff; border: 1.5px solid var(--cizgi); border-radius: var(--kose);
}

.form__alan:focus {
    outline: none; border-color: var(--marka-acik);
    box-shadow: 0 0 0 3px rgba(0, 105, 134, .14);
}

.product__card--title { font-size: 1.05rem; font-weight: 650; color: var(--metin); }
.product__card--meta { font-size: .82rem; color: var(--metin-silik); }
.product__card--price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.current__price { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.old__price { font-size: .85rem; color: var(--metin-silik); text-decoration: line-through; }

.section__heading--maintitle { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
.section--padding { padding: 40px 0; }
.icerik__metin { color: var(--metin-soluk); line-height: 1.7; }
.text__secondary { color: var(--marka); }

.breadcrumb__section {
    padding: 22px 0;
    background: var(--zemin-alt);
    border-bottom: 1px solid var(--cizgi);
}

.breadcrumb__content--title { font-size: 1.5rem; margin-bottom: 6px; }

.breadcrumb__content--menu {
    display: flex; gap: 8px; list-style: none; margin: 0; padding: 0;
    font-size: .85rem; color: var(--metin-silik);
}

.breadcrumb__content--menu__items:not(:last-child)::after { content: " ›"; color: var(--metin-silik); }

.durum__rozet {
    display: inline-flex; align-items: center; padding: 4px 11px;
    font-size: .78rem; font-weight: 650; border-radius: 100px;
    color: var(--marka); background: var(--marka-yumusak);
}

.misafir__kutu {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 20px;
    background: var(--marka-yumusak); border: 1px solid var(--marka-cizgi);
    border-radius: var(--kose);
}

.varyant__alan { margin-bottom: 16px; }
.varyant__baslik { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 650; }
.varyant__secenekler { display: flex; flex-wrap: wrap; gap: 8px; }

.varyant__secenek {
    display: inline-flex; align-items: center; padding: 7px 14px;
    font-size: .88rem; font-weight: 600; cursor: pointer;
    border: 1.5px solid var(--cizgi); border-radius: var(--kose); background: #fff;
}

.varyant__secenek:has(input:checked) { border-color: var(--marka); background: var(--marka-yumusak); color: var(--marka); }
.varyant__secenek input { position: absolute; opacity: 0; width: 0; height: 0; }
.varyant__secenek--tukendi { opacity: .45; text-decoration: line-through; cursor: not-allowed; }

.kucuk__gorsel { border: 1px solid var(--cizgi); border-radius: var(--kose); background: var(--zemin-alt); }

/* Bootstrap ile çakışmayan küçük düzeltmeler */
.form-check-input:checked { background-color: var(--marka); border-color: var(--marka); }
.form-check-label { font-size: .92rem; }
.alert { border-radius: var(--kose); font-size: .9rem; }
.table { font-size: .9rem; }
.badge { font-weight: 650; }

/* =====================================================================
   23. SLAYT GÖSTERİSİ (slider)

   Kütüphane yok. Swiper 140 KB, Slick jQuery istiyor; buradaki iş
   CSS scroll-snap ve otuz satır JavaScript ile dönüyor.

   NEDEN scroll-snap:
     · Dokunmatikte parmakla kaydırma bedava gelir
     · JavaScript kapalıysa slaytlar yine yatay kaydırılabilir kalır
     · Tarayıcı kendi eylemsizliğini (momentum) kullanır, daha akıcı

   ERİŞİLEBİLİRLİK: otomatik geçiş, fareyle üzerine gelince ve
   klavye odağı içerideyken durur; "hareketi azalt" diyen ziyaretçide
   hiç başlamaz.
   ===================================================================== */
.ba-slayt {
    position: relative;
    background: var(--marka-koyu);
    overflow: hidden;
}

.ba-slayt__ray {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ba-slayt__ray::-webkit-scrollbar { display: none; }

/*
 | SLAYT YUKSEKLIGI GORSELIN KENDI ORANINDAN GELIR
 |
 | SORUN: kutunun yuksekligi `clamp(320px, 38vw, 560px)` ile
 | belirleniyor, gorsel ise `object-fit: cover` ile o kutuyu
 | DOLDURUYORDU. Kutunun orani gorselin oranini tutmadigi her
 | genislikte gorselin usti ve alti kirpiliyordu:
 |
 |   banner        1920x850  -> oran 2.259
 |   1440 px'de    kutu orani 2.63 -> %14 dikey kirpma
 |   1920 px'de    kutu orani 3.43 -> %34 dikey kirpma
 |
 | Banner'larin yazisi GORSELIN ICINDE (firmanin kendi tanitim
 | gorselleri). Kirpilan yer bos gokyuzu degil, yazinin kendisiydi:
 | alttaki "GERMANY" kilidi ve ustteki sehir etiketi gorunmuyordu.
 |
 | COZUM iki parca:
 |   1. Kutuya gorselin orani veriliyor (aspect-ratio). Ortak
 |      durumda kutu ile gorsel ayni sekilde; ne kirpma ne bosluk.
 |   2. Gorsel `contain`. Panelden BASKA oranda bir gorsel
 |      yuklenirse ya da alt/ust sinir devreye girerse, gorsel
 |      kirpilmak yerine kucultulup ortalanir — yanlarda markanin
 |      koyu tonunda serit kalir. Hicbir kosulda icerik kaybolmaz.
 |
 | max-height: cok genis ekranda dogal oran 2560 px'de 1133 px'lik
 | bir banner demek olurdu; ekranin tamamini kaplardi.
 |
 | SINIR NEDEN 780 PX: iki uc arasinda secildi.
 |   * 850 px (gorselin kendi yuksekligi) 1920 px'de serit
 |     birakmazdi ama 1080 px'lik ekranda basliktan sonra geriye
 |     hicbir sey kalmazdi — kahraman tek basina ekrani doldurur.
 |   * 720 px 1920'de her yanda 147 px serit birakiyordu.
 | 780 px'de 1920 genisliginde serit her yanda 79 px'e iniyor ve
 | yukseklik makul kaliyor. Bu tek sayiyi degistirerek dengeyi
 | kaydirabilirsiniz; gorsel hicbir degerde KIRPILMAZ, yalniz
 | serit kalinligi degisir.
 |
 | MIN-HEIGHT KULLANILMADI — kullanilinca 390 px'lik pencerede
 | kutu 542 px'e cikti ve SAYFA YANA TASTI. `aspect-ratio` ile
 | birlikte bir alt yukseklik verilince tarayici orani korumak
 | icin GENISLIGI buyutuyor. Mobil icin alt sinir asagida, oran
 | kapatilarak ayri veriliyor.
 */
.ba-slayt__oge {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
    aspect-ratio: 1920 / 850;
    max-height: 780px;
    display: flex;
    align-items: center;
}

.ba-slayt__gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/*
 | MOBIL: oran kapatilir, yukseklik dogrudan verilir.
 |
 | 2.259'luk bir banner 390 px'lik telefonda 173 px yuksekliginde
 | ince bir serit olurdu. Burada oran serbest birakilip yukseklik
 | ayrica veriliyor; gorsel yine `contain` oldugu icin TAM gorunur,
 | yalniz alt ve ustunde markanin koyu tonunda ince bir pay kalir.
 |
 | `aspect-ratio: auto` sart: acik kalsaydi yukseklik genisligi
 | buyutur ve sayfa yana tasardi (olculdu: 390 px pencerede kutu
 | 542 px cikiyordu).
 */
@media (max-width: 767.98px) {
    .ba-slayt__oge {
        aspect-ratio: auto;
        height: clamp(200px, 54vw, 300px);
        max-height: none;
    }
}

/*
 | Metin okunaklılığı: banner'ın kendi yazısı zaten görselin
 | içinde. Panelden başlık girilirse sol taraftan koyu bir
 | geçiş bindirilir ki yazı her görselde okunsun.
 */
.ba-slayt__oge--yazili .ba-slayt__gorsel {
    filter: brightness(.82);
}

.ba-slayt__oge--yazili::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(17, 49, 60, .88) 0%, rgba(17, 49, 60, .55) 42%, transparent 72%);
}

.ba-slayt__icerik {
    position: relative;
    z-index: 2;
    max-width: 620px;
    padding: 40px 0;
    color: #fff;
}

.ba-slayt__ust {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 13px;
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #bfe0ea;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--kose-tam);
}

.ba-slayt__baslik {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(1.6rem, 3.6vw, 3rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.025em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.ba-slayt__metin {
    margin: 0 0 22px;
    color: #d5e6ec;
    font-size: clamp(.95rem, 1.3vw, 1.1rem);
    max-width: 48ch;
}

/* --- Gezinme okları --- */
.ba-slayt__ok {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    color: #fff;
    background: rgba(17, 49, 60, .45);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background var(--gecis), transform var(--gecis);
}

.ba-slayt__ok:hover { background: var(--marka); transform: scale(1.06); }
.ba-slayt__ok svg { width: 20px; height: 20px; }
.ba-slayt__ok--geri { left: 16px; }
.ba-slayt__ok--ileri { right: 16px; }

/* --- Noktalar --- */
.ba-slayt__noktalar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.ba-slayt__nokta {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: background var(--gecis), width var(--gecis);
}

.ba-slayt__nokta:hover { background: rgba(255, 255, 255, .62); }
.ba-slayt__nokta[aria-current="true"] { width: 44px; background: #fff; }

/* --- Logo: koyu zeminde beyazlatılır --- */
.ba-alt .ba-logo img,
.ba-serit .ba-logo img {
    filter: brightness(0) invert(1);
    opacity: .92;
}

/* =====================================================================
   24. KATALOG, ÜRÜN DETAYI, SEPET VE KASA

   Bu dört sayfa yeniden yazıldığında ortaya çıkan bileşenler. Yukarıdaki
   14. ve 15. bölümler iskeleti (ızgara, özet kutusu, künye) veriyordu;
   burası onların üzerine oturan parçalar.

   Hepsi aynı iki kurala bağlı:
     · NUMARA OKUNAKLI OLACAK  — ürün kodu, OEM ve IBAN gibi diziler
       tabular-nums ve hafif harf aralığıyla basılır.
     · MOBİLDE SIRA DEĞİŞİR    — katalogda süzgeçler ürünlerin altına
       iner; HTML sırası zaten öyle, masaüstünde ızgarayla sola alınır.
   ===================================================================== */

/* ---- Yan düzen: HTML'de ana içerik önce, süzgeç sonra ---- */
.ba-yan-duzen__ana { grid-column: 2; grid-row: 1; min-width: 0; }
.ba-yan-duzen__yan { grid-column: 1; grid-row: 1; }

.gorunur-mobil { display: none !important; }

/* ---- Liste başlığı ve araç çubuğu ---- */
.ba-liste-basi {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.ba-liste-basi__ad { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.02em; }
.ba-liste-basi__sayi { margin: 4px 0 0; font-size: .86rem; color: var(--metin-silik); }

.ba-araclar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ba-alan--dar { min-width: 190px; width: auto; }

/* ---- Seçili süzgeç çipleri ---- */
.ba-cipler { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.ba-cip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--marka-koyu);
    background: var(--marka-yumusak);
    border: 1px solid var(--marka-cizgi);
    border-radius: 100px;
}

.ba-cip:hover { background: #fff; border-color: var(--marka); color: var(--marka); }
.ba-cip span[aria-hidden] { font-size: 1.05rem; line-height: 1; opacity: .7; }
.ba-cip--temizle { color: var(--metin-silik); background: transparent; border-style: dashed; }

/* ---- Süzgeç kutuları ---- */
.ba-suzgec { padding: 16px; margin-bottom: 16px; }

.ba-suzgec__baslik {
    margin: 0 0 10px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

.ba-suzgec + .ba-suzgec .ba-suzgec__baslik:not(:first-child) { margin-top: 18px; }
.ba-suzgec form + .ba-suzgec__baslik { margin-top: 18px; }

.ba-agac--kaydir { max-height: 320px; overflow-y: auto; }

.ba-onaylar { list-style: none; margin: 0 0 14px; padding: 0; }
.ba-onaylar li { margin-bottom: 2px; }

.ba-onay {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px;
    margin: 0;
    font-size: .88rem;
    border-radius: var(--kose);
    cursor: pointer;
}

.ba-onay:hover { background: var(--marka-yumusak); }
.ba-onay input { accent-color: var(--marka); width: 16px; height: 16px; flex-shrink: 0; }
.ba-onay__gorsel { width: 18px; height: 18px; object-fit: cover; border-radius: 3px; }

.ba-onay__renk {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .2);
    flex-shrink: 0;
}

.ba-aralik { display: flex; align-items: center; gap: 8px; }
.ba-aralik .ba-alan { min-width: 0; }
.ba-aralik > span { color: var(--metin-silik); }

/* ---- Boş durum ---- */
.ba-bos {
    padding: 48px 24px;
    text-align: center;
    background: var(--zemin-alt);
    border: 1px dashed var(--cizgi);
    border-radius: var(--kose-buyuk);
}

.ba-bos svg { width: 44px; height: 44px; color: var(--metin-silik); }
.ba-bos h2 { margin: 12px 0 6px; font-size: 1.15rem; }
.ba-bos p { max-width: 52ch; margin: 0 auto; color: var(--metin-soluk); font-size: .92rem; }
.ba-bos__dugmeler { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* ---- Serbest metin blokları (açıklama, SEO metni) ---- */
.ba-yazi { max-width: 78ch; color: var(--metin-soluk); line-height: 1.75; }
.ba-yazi h2, .ba-yazi h3 { color: var(--metin); margin: 1.4em 0 .5em; }
.ba-yazi ul, .ba-yazi ol { padding-left: 1.2em; }

/* ---- Ürün detayı ---- */
.ba-detay__ad { margin: 6px 0 8px; font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -.02em; }
.ba-detay__satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ba-detay__ozet { margin: 10px 0 16px; color: var(--metin-soluk); line-height: 1.65; }
.ba-detay__eylemler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ba-detay__eylemler form { margin: 0; }

.ba-galeri__kucuk { display: block; padding: 0; }

/* Teknik tablo uzunken galeri ekranda kalsın */
.ba-detay__gorseller { position: sticky; top: 96px; align-self: start; }

/* Numaralar: OEM, stok kodu, barkod, kupon */
.ba-numara { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.ba-yildizlar { display: inline-flex; align-items: center; gap: 2px; color: #d9dee3; font-size: 1rem; }
.ba-yildizlar .dolu { color: #f0a92b; }

.ba-sepete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ba-sepete .ba-dugme--genis { width: auto; flex: 1 1 200px; }
.ba-sepete .ba-alan { flex: 1 1 200px; }

/* Kargo / iade / destek şeridi */
.ba-guvence {
    display: grid;
    gap: 10px;
    margin-top: 20px;
    padding: 14px 16px;
    font-size: .86rem;
    color: var(--metin-soluk);
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
}

.ba-guvence > div { display: flex; align-items: center; gap: 10px; }
.ba-guvence svg { width: 20px; height: 20px; color: var(--marka); flex-shrink: 0; }

/* ---- Sekmeler (Bootstrap eklentisi olmadan) ---- */
.ba-sekmeler {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--cizgi);
}

.ba-sekme {
    padding: 11px 16px;
    font: inherit;
    font-size: .92rem;
    font-weight: 650;
    color: var(--metin-silik);
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.ba-sekme:hover { color: var(--marka); }
.ba-sekme.etkin { color: var(--marka); border-bottom-color: var(--marka); }

.ba-sekme-govde { display: none; }
.ba-sekme-govde.etkin { display: block; }

/*
 | JavaScript yoksa sekme başlıkları iş görmez. O durumda bütün paneller
 | alt alta açılır ve başlık şeridi gizlenir; içerik hiçbir koşulda
 | kaybolmaz. Kuralı ürün detayı kendi <noscript> bloğunda basıyor —
 | böylece JavaScript açıkken bir an için bütün panellerin görünmesi
 | (FOUC) yaşanmıyor.
 */

.ba-ikili { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }

.ba-yorum {
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
}

.ba-yorum p { color: var(--metin-soluk); line-height: 1.6; }
.ba-yorum__kim { font-size: .82rem; color: var(--metin-silik); }
.ba-yorum__kim b { color: var(--metin); }

.ba-yorum__cevap {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--marka-yumusak);
    border-left: 3px solid var(--marka);
    border-radius: 0 var(--kose) var(--kose) 0;
    font-size: .9rem;
}

.ba-yorum__gorsel {
    max-width: 140px;
    margin: 8px 0;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
}

/* ---- Sepet satırı ---- */
.ba-sepet-satir:last-child { border-bottom: 0; }
.ba-sepet-satir__ad { display: block; font-weight: 650; color: var(--metin); line-height: 1.35; }
.ba-sepet-satir__ad:hover { color: var(--marka); }

.ba-sepet-satir__not {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-size: .8rem;
    color: var(--metin-silik);
}

.ba-sepet-satir__birim { margin-top: 3px; font-size: .82rem; color: var(--metin-silik); }
.ba-sepet-satir__eylem { display: flex; align-items: center; gap: 14px; }
.ba-sepet-satir__toplam { min-width: 92px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.ba-cikar {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    font: inherit;
    font-size: .8rem;
    color: var(--metin-silik);
    background: transparent;
    border: 0;
    border-radius: var(--kose);
    cursor: pointer;
}

.ba-cikar:hover { color: var(--olumsuz); background: var(--olumsuz-yumusak); }
.ba-cikar svg { width: 15px; height: 15px; }

.ba-sepet-altlik { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: 16px; }

.ba-bag-dugme {
    padding: 0;
    font: inherit;
    font-size: .8rem;
    color: var(--metin-silik);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}

.ba-bag-dugme:hover { color: var(--olumsuz); }
.ba-olumlu { color: var(--olumlu); }

.ba-teklif-kutu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.ba-teklif-kutu form { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 340px; margin: 0; }
.ba-teklif-kutu .ba-alan { flex: 1 1 200px; }

/* ---- Kasa ---- */
.ba-kasa__baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 1.05rem;
    font-weight: 700;
}

.ba-kasa__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: .82rem;
    color: #fff;
    background: var(--marka);
    border-radius: 50%;
    flex-shrink: 0;
}

.ba-ikili-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* ---- Eski parçaların stilleri (çekirdekten gelen include'lar) ---- */
.form__grup { margin-bottom: 16px; }
.konum-secim { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }

.kargo__cubuk { margin-top: 16px; margin-bottom: 4px; }

.kargo__cubuk--yol {
    height: 7px;
    background: var(--cizgi);
    border-radius: 100px;
    overflow: hidden;
}

.kargo__cubuk--dolu {
    height: 100%;
    background: var(--vurgu);
    border-radius: 100px;
    transition: width var(--gecis);
}

.kargo__cubuk--metin { margin-top: 6px; font-size: .82rem; color: var(--metin-soluk); }
.kargo__cubuk--metin__tamam { color: var(--olumlu); font-weight: 650; }

.sepet__teslimat-ulke { border-top: 1px solid var(--cizgi); }

/* Çekirdek parçası Bootstrap'in küçük seçicisini kullanıyor; tema
   alanlarıyla aynı boyda dursun diye eşitleniyor. */
.sepet__teslimat-ulke .form-select,
.sepet__teslimat-ulke .form-control {
    min-height: 40px;
    font-size: .9rem;
    border: 1.5px solid var(--cizgi);
    border-radius: var(--kose);
}
.sepet__vergi-uyari { font-size: .82rem; color: var(--metin-silik); }

/* ---- Mobil ---- */
@media (max-width: 1199.98px) {
    .ba-ikili { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 991.98px) {
    /* Süzgeçler ürünlerin ALTINA iner: HTML sırası zaten öyle */
    .ba-yan-duzen__ana, .ba-yan-duzen__yan { grid-column: auto; grid-row: auto; }

    .gorunur-mobil { display: inline-flex !important; }

    .ba-ikili { grid-template-columns: 1fr; }
    .ba-guvence { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .ba-liste-basi { align-items: flex-start; }
    .ba-araclar { width: 100%; }
    .ba-araclar form { flex: 1 1 auto; }
    .ba-alan--dar { width: 100%; min-width: 0; }

    .ba-ikili-alan { grid-template-columns: 1fr; }

    /* Sepet satırı: adet ve tutar alta iner, çıkar düğmesi sağda kalır */
    .ba-sepet-satir__eylem { justify-content: space-between; width: 100%; gap: 8px; }
    .ba-sepet-satir__toplam { min-width: 0; }

    .ba-sekmeler { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ba-sekmeler::-webkit-scrollbar { display: none; }
    .ba-sekme { white-space: nowrap; padding: 10px 12px; }

    .ba-bos { padding: 32px 16px; }
    /*
     | Dikey sıraya geçince `flex: 1 1 200px` alanı DİKEYDE uzatıyor
     | ve tek satırlık not kutusu ekran boyu bir dikdörtgene dönüşüyordu.
     */
    .ba-teklif-kutu form { flex-direction: column; }
    .ba-teklif-kutu .ba-alan { flex: 0 0 auto; width: 100%; }
    .ba-teklif-kutu .ba-dugme { width: 100%; }
}

/* =====================================================================
   25. SEGMENT ŞERİDİ VE B2B ÇAĞRISI

   Ana sayfanın iki büyük bloğu.

   SEGMENT ŞERİDİ ziyaretçiyi kategori adından değil makinesinden
   yakalar. Üç dikey kutu: kompakt traktör, tarım makinesi, iş makinesi.
   Kutular 3:4 oranında ve yüksek — referans sitedeki gibi. Fotoğrafın
   üstündeki koyu perdenin bir kısmı görselin İÇİNE basılı (yazı silme
   izlerini örtüyor), buradaki gradyan onun üstüne biniyor.

   B2B ÇAĞRISI eskiden satır içi style'larla kurulmuştu; artık kendi
   bileşeni.
   ===================================================================== */

.ba-segment { padding: 64px 0; background: var(--zemin-alt); }

.ba-segment__basi { max-width: 62ch; margin: 0 auto 36px; text-align: center; }

/* .ba-etiket-ust — aynı hap biçiminin bölümden bağımsız adı.
   OEM bölümünde bu ad kullanılmıştı ama CSS'te KARŞILIĞI YOKTU:
   etiket biçimsiz düz yazı olarak çıkıyordu. Aynı kurallara
   bağlandı ki iki yerde iki farklı etiket görünmesin. */
.ba-etiket-ust,
.ba-segment__etiket {
    display: inline-block;
    padding: 5px 14px;
    margin-bottom: 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marka);
    background: var(--marka-yumusak);
    border: 1px solid var(--marka-cizgi);
    border-radius: 100px;
}

.ba-segment__baslik {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.03em;
    color: var(--marka);
}

/* İkinci satır kalın: referans sitedeki iki satırlı başlığın ritmi */
.ba-segment__baslik em { font-style: normal; font-weight: 750; }

.ba-segment__metin { margin: 16px 0 0; color: var(--metin-soluk); line-height: 1.7; }

.ba-segment__izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.ba-tas {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--kose-buyuk);
    background: var(--marka-koyu);
    box-shadow: var(--golge);
    isolation: isolate;
}

.ba-tas__gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.ba-tas:hover .ba-tas__gorsel { transform: scale(1.06); }

/* Başlığın zemini: görseldeki perdeye ek, alttan yukarı.
   v32 — HAFİFLETİLDİ. Görsel dosyasının İÇİNDE zaten koyu bir
   perde var (silinen İngilizce yazıyı örtmek için basılmıştı);
   CSS bunun üstüne %86'lık ikinci bir perde koyunca makineler
   seçilmez oluyordu — müşterinin "basit duruyor" dediği
   görüntünün bir parçası buydu. Başlık hâlâ okunur, çünkü asıl
   kontrastı görseldeki perde sağlıyor. */
.ba-tas::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 52%;
    background: linear-gradient(to top, rgba(4, 28, 36, .62), rgba(4, 28, 36, 0));
    pointer-events: none;
}

.ba-tas__govde {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    padding: 24px 22px 22px;
    color: #fff;
}

.ba-tas__ust {
    display: block;
    margin-bottom: 7px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8fd2e6;
}

.ba-tas__baslik {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: #fff;
}

.ba-tas__ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 16px;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
}

.ba-tas__ok svg { width: 19px; height: 19px; }

.ba-tas:hover .ba-tas__ok {
    background: var(--vurgu);
    border-color: var(--vurgu);
    transform: translateX(5px);
}

/* ---- B2B çağrısı ---- */
.ba-cagri {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 36px;
    padding: 36px 40px;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(36, 121, 152, .85), transparent 58%),
        var(--marka-koyu);
    border-radius: var(--kose-buyuk);
    overflow: hidden;
}

.ba-cagri__etiket {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 12px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--marka-koyu);
    background: var(--vurgu);
    border-radius: 100px;
}

.ba-cagri__baslik { margin: 0 0 8px; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: #fff; letter-spacing: -.02em; }
.ba-cagri__metin { margin: 0; max-width: 62ch; color: #bcd9e2; line-height: 1.7; }

.ba-cagri__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    font-size: .88rem;
    color: #d8ecf2;
}

.ba-cagri__liste li { display: flex; align-items: center; gap: 8px; }

.ba-cagri__liste li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vurgu);
}

.ba-cagri__dugmeler { display: flex; flex-direction: column; gap: 10px; min-width: 210px; }
.ba-cagri__dugmeler .ba-dugme { width: 100%; }

.ba-cagri .ba-dugme--cizgi {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
    background: transparent;
}

.ba-cagri .ba-dugme--cizgi:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ba-cagri__telefon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-top: 4px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.ba-cagri__telefon svg { width: 17px; height: 17px; opacity: .8; }
.ba-cagri__telefon:hover { color: var(--vurgu); }

/* ---- Mobil ---- */
@media (max-width: 991.98px) {
    .ba-segment { padding: 48px 0; }
    .ba-segment__izgara { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .ba-tas__baslik { font-size: 1.02rem; }
    .ba-tas__govde { padding: 18px 16px 16px; }
    .ba-tas__ok { width: 36px; height: 36px; margin-top: 12px; }

    .ba-cagri { grid-template-columns: 1fr; padding: 28px 24px; gap: 22px; }
    .ba-cagri__dugmeler { flex-direction: row; flex-wrap: wrap; min-width: 0; }
    .ba-cagri__dugmeler .ba-dugme { width: auto; flex: 1 1 180px; }
    .ba-cagri__telefon { flex-basis: 100%; justify-content: flex-start; }

    .ba-alt__guven-ic { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    /*
     | Dar ekranda üç dikey kutu yan yana sığmaz; yatay KAYAN şeride
     | dönüşüyor. Alt alta üç tam boy görsel, telefonda sayfanın
     | tamamını yutuyordu.
     */
    .ba-segment__izgara {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin-inline: -16px;
        padding-inline: 16px;
    }

    .ba-segment__izgara::-webkit-scrollbar { display: none; }

    .ba-tas {
        flex: 0 0 78%;
        scroll-snap-align: start;
        aspect-ratio: 14 / 13;
    }

    .ba-tas__baslik { font-size: 1.1rem; }

    .ba-alt { margin-top: 40px; padding-top: 36px; }
    .ba-alt__guven-ic { grid-template-columns: 1fr; gap: 14px; }
    .ba-alt__kunye-ic { flex-direction: column; gap: 6px; }
}

/* =====================================================================
   26. 2026 KATMANI

   Referans site (blueascend.de) Gambio üzerine kurulu ve tasarım dili
   2019–2021 aralığında: düz beyaz başlık, keskin köşeler, ortalanmış
   büyük başlık banner'ları, hareket yok.

   Bu bölüm siteyi ondan BİR ADIM ÖTEYE taşıyan katman:

     · Bölüm başlıkları  — küçük üst etiket + büyük başlık
     · Marka şeridi      — kesintisiz kayan üretici adları
     · Görünürlük        — bölümler ekrana girerken yumuşak beliriyor
     · Kart etkileşimi   — yükselme, renk sızması, ok kayması

   HAREKET AZALTMA: "prefers-reduced-motion" açıksa hepsi kapanır ve
   içerik olduğu gibi görünür. Aşağıdaki son blok bunu garanti ediyor.
   ===================================================================== */

/* ---- Bölüm başlığı ---- */
.ba-baslik-satir {
    align-items: flex-end;
    margin-bottom: 28px;
    padding-bottom: 16px;
}

.ba-baslik-satir h2 {
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    font-weight: 700;
    letter-spacing: -.03em;
}

/* Vurgu çizgisi: düz blok yerine markadan turuncuya geçiş */
.ba-baslik-satir::after {
    width: 64px;
    height: 3px;
    background: linear-gradient(90deg, var(--marka), var(--vurgu));
}

.ba-baslik-satir a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--marka);
}

.ba-baslik-satir a:hover { color: var(--vurgu); }

/* Üst etiket: segment şeridindekiyle aynı dil, her bölümde kullanılabilir */
.ba-ust-etiket {
    display: inline-block;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--marka-acik);
}

/* ---- Marka şeridi ---- */
.ba-marka-serit {
    padding: 26px 0;
    border-block: 1px solid var(--cizgi);
    background: var(--zemin);
    overflow: hidden;
}

.ba-marka-serit__basi {
    margin-bottom: 14px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--metin-silik);
    text-align: center;
}

/*
 | Kesintisiz kayma: liste iki kez basılıyor ve şerit tam yarısı kadar
 | kaydırılıyor. Döngü başa dönerken görüntü aynı olduğu için sıçrama
 | görünmüyor. Kütüphane yok, JavaScript yok.
 */
.ba-marka-serit__ray {
    display: flex;
    width: max-content;

    /*
     | min-width: 0 ŞART.
     |
     | Bir flex kutusunun kendiliğinden gelen asgari boyutu min-content'tir.
     | İki kopya marka listesi yan yana ~1700 piksel ettiği için bu asgari
     | boyut kutuyu değil SAYFAYI genişletiyordu: gövde pencereden bağımsız
     | olarak 1728 piksel oluyor, tasarım ekrana sığmıyordu.
     |
     | Ölçüldü: 1129 piksellik pencerede gövde 1728 piksel. Şerit
     | gizlenince 1145'e düşüyordu.
     */
    min-width: 0;
    animation: ba-kay 42s linear infinite;
}

/* İki özdeş grup: biri ekrandan çıkarken diğeri yerine geçer */
.ba-marka-serit__grup { display: flex; flex: 0 0 auto; }

.ba-marka-serit:hover .ba-marka-serit__ray,
.ba-marka-serit:focus-within .ba-marka-serit__ray { animation-play-state: paused; }

@keyframes ba-kay {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ba-marka-serit__oge {
    flex: 0 0 auto;
    padding: 0 30px;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--metin-silik);
    white-space: nowrap;
    transition: color var(--gecis);
}

.ba-marka-serit__oge:hover { color: var(--marka); }

/* Kenarlarda yumuşak kayboluş: şerit ekranın dışına süzülsün */
.ba-marka-serit__cerceve {
    position: relative;
    /* Kayan şerit burada kırpılır; dışarı taşıp sayfayı genişletemez */
    overflow: hidden;
    /* Kenarlarda geniş bir sönüm: şeridin ucundaki yarım kelime
       "kesilmiş" değil, "süzülüyor" gibi dursun */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

/* ---- Görünürlük: bölümler ekrana girerken beliriyor ----
 |
 | DİKKAT — BU KURAL VARSAYILAN OLARAK KAPALI.
 |
 | `.ba-gir` tek başına hiçbir şey yapmaz; gizleme yalnız
 | <html class="ba-canlandir"> varken devreye girer. Seçici bilerek
 | `html.` ile başlıyor: KÖK ÖĞEYE AİT bir sınıf, kök öğeye bağlanarak
 | yazılmalı — aksi hâlde aynı adı taşıyan bir bileşen sınıfı sessizce
 | kök öğeyi de biçimlendirir. Tam olarak bu yaşandı. O sınıfı, sayfanın
 | başındaki küçük betik yalnız ŞU ÜÇ KOŞUL sağlanınca ekliyor:
 |   · JavaScript çalışıyor
 |   · IntersectionObserver var
 |   · ziyaretçi "hareketi azalt" demiyor
 |
 | Neden böyle: `.ba-gir { opacity: 0 }` doğrudan yazılsaydı, betiğin
 | çalışmadığı her durumda (hata, eski tarayıcı, betik engelleyici)
 | sayfanın yarısı KALICI OLARAK GÖRÜNMEZ kalırdı. Animasyonun
 | başarısız olması içeriği yok edemez.
 |
 | Ek güvence: script.js üç saniye sonra kalan bölümleri koşulsuz
 | açıyor — gözlemci bir sebeple ateşlemezse bile içerik geliyor.
 */
html.ba-canlandir .ba-gir {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

html.ba-canlandir .ba-gir.gorundu { opacity: 1; transform: none; }

/* ---- Kart etkileşimi ---- */
.ba-urun {
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.ba-urun:hover {
    transform: translateY(-4px);
    border-color: var(--marka-cizgi);
    box-shadow: var(--golge-yuksek);
}

.ba-urun__gorsel img { transition: transform var(--gecis-uzun); }

/* Kategori kartı: ok daha belirgin kaysın */
.ba-kategori { transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis); }
.ba-kategori:hover { transform: translateY(-2px); box-shadow: var(--golge); }
.ba-kategori__ok { transition: transform var(--gecis), color var(--gecis); }

/* Düğmelerde basma geri bildirimi */
.ba-dugme { transition: background var(--gecis), border-color var(--gecis), color var(--gecis), transform var(--gecis); }
.ba-dugme:active { transform: translateY(1px); }

/* ---- Mobil ---- */
@media (max-width: 767.98px) {
    .ba-marka-serit { padding: 20px 0; }
    .ba-marka-serit__oge { padding: 0 20px; font-size: .92rem; }
    .ba-baslik-satir { margin-bottom: 20px; }
}

/* ---- Hareketi azalt ---- */
@media (prefers-reduced-motion: reduce) {
    .ba-marka-serit__ray { animation: none; }
    html.ba-canlandir .ba-gir { opacity: 1; transform: none; transition: none; }
    .ba-urun:hover, .ba-kategori:hover { transform: none; }
}

/* =====================================================================
   27. ÜYELİK VE MÜŞTERİ PANELİ

   Giriş, kayıt, şifre yenileme ve "Hesabım" altındaki yedi ekran.

   İKİ TASARIM KARARI

   1. KENAR MENÜ SOLDA VE YAPIŞKAN. Müşteri panelinde gezinme, içerik
      kadar sık kullanılıyor; uzun sipariş listelerinde menünün ekranın
      dışında kalması her seferinde başa dönmek demekti.

   2. DURUM RENKLERİ ANLAM TAŞIYOR. "Kargoda" ile "İptal edildi" aynı
      gri rozetteydi. Artık altı durumun her biri kendi rengiyle; renk
      tek başına bilgi taşımasın diye metin de her zaman yazılı.
   ===================================================================== */

/* ---- Giriş / kayıt / şifre ---- */
.ba-kimlik {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}

.ba-kimlik--tek { grid-template-columns: minmax(0, 520px); justify-content: center; }
.ba-kimlik--genis { grid-template-columns: minmax(0, 720px); justify-content: center; }

.ba-kimlik__kart {
    padding: 28px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge);
}

.ba-kimlik__baslik { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: -.02em; }
.ba-kimlik__ozet { margin: 0 0 22px; color: var(--metin-soluk); font-size: .92rem; line-height: 1.6; }

.ba-kimlik__alt {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
    font-size: .9rem;
    color: var(--metin-soluk);
    text-align: center;
}

.ba-kimlik__alt a { font-weight: 650; color: var(--marka); }

.ba-kimlik__yan {
    padding: 26px;
    background: var(--marka-yumusak);
    border: 1px solid var(--marka-cizgi);
    border-radius: var(--kose-buyuk);
}

.ba-kimlik__yan h2 { margin: 0 0 18px; font-size: 1.05rem; }

/* Etiket ve "şifremi unuttum" aynı satırda */
.ba-etiket-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ba-etiket-satir .ba-etiket { margin-bottom: 5px; }

/* Alan hatası */
.ba-alan.hatali { border-color: var(--olumsuz); }
.ba-alan.hatali:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, .14); }
.ba-hata { display: block; margin-top: 5px; font-size: .82rem; color: var(--olumsuz); }

/* Hesabın karşılığı listesi */
.ba-fayda { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ba-fayda li { display: flex; gap: 12px; align-items: flex-start; }
.ba-fayda svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--marka); margin-top: 2px; }
.ba-fayda b { display: block; font-size: .92rem; color: var(--metin); }
.ba-fayda span { font-size: .84rem; color: var(--metin-soluk); line-height: 1.5; }

/* Üyelik tipi seçimi */
.ba-tip-secim { margin: 0 0 18px; padding: 0; border: 0; }
.ba-tip-secim legend { padding: 0; }

/* ---- Hesap düzeni ---- */
.ba-hesap {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.ba-hesap__govde { min-width: 0; }
.ba-hesap__baslik { margin: 0 0 20px; font-size: 1.5rem; letter-spacing: -.02em; }

/* ---- Kenar menü ---- */
.ba-hesap-yan {
    position: sticky;
    top: 96px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    box-shadow: var(--golge);
}

.ba-hesap-yan__kim {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cizgi);
}

.ba-hesap-yan__harf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    background: var(--marka);
    border-radius: 50%;
}

.ba-hesap-yan__merhaba { display: block; font-size: .76rem; color: var(--metin-silik); }
.ba-hesap-yan__ad { display: block; font-size: .96rem; line-height: 1.25; }
.ba-hesap-yan__firma { display: block; font-size: .8rem; color: var(--metin-silik); }

.ba-hesap-yan__basi {
    margin: 18px 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--metin-silik);
}

.ba-hesap-menu { list-style: none; margin: 0; padding: 0; }

.ba-hesap-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    font-size: .91rem;
    font-weight: 600;
    color: var(--metin-soluk);
    border-radius: var(--kose);
    transition: background var(--gecis), color var(--gecis);
}

.ba-hesap-menu svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .8; }
.ba-hesap-menu a:hover { background: var(--zemin-alt); color: var(--marka); }

.ba-hesap-menu a.etkin {
    color: var(--marka);
    background: var(--marka-yumusak);
    box-shadow: inset 3px 0 0 var(--marka);
}

.ba-hesap-menu__sayi {
    margin-left: auto;
    padding: 1px 8px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--marka);
    background: var(--marka-yumusak);
    border-radius: 100px;
}

.ba-hesap-menu a.etkin .ba-hesap-menu__sayi { background: #fff; }

.ba-hesap-yan__cikis { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--cizgi); }

.ba-hesap-yan__cikis button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: .91rem;
    font-weight: 600;
    color: var(--metin-silik);
    background: none;
    border: 0;
    border-radius: var(--kose);
    cursor: pointer;
}

.ba-hesap-yan__cikis svg { width: 18px; height: 18px; }
.ba-hesap-yan__cikis button:hover { color: var(--olumsuz); background: var(--olumsuz-yumusak); }

/* ---- Sayı kutuları ---- */
.ba-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }

.ba-sayi {
    display: block;
    padding: 18px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    transition: transform var(--gecis), border-color var(--gecis), box-shadow var(--gecis);
}

.ba-sayi:hover { transform: translateY(-2px); border-color: var(--marka-cizgi); box-shadow: var(--golge); }

.ba-sayi__deger {
    display: block;
    font-size: 1.9rem;
    font-weight: 750;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--marka);
}

.ba-sayi__ad { display: block; margin-top: 2px; font-size: .84rem; color: var(--metin-soluk); }
.ba-sayi__ad small { display: block; font-size: .74rem; color: var(--metin-silik); }

/* ---- Kutu başlığı + yan bağlantı ---- */
.ba-kutu__basi {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

/* ---- Sipariş satırı ---- */
.ba-siparis-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--cizgi);
    color: var(--metin);
}

.ba-siparis-satir:last-of-type { border-bottom: 0; }
.ba-siparis-satir:hover { color: var(--marka); }
.ba-siparis-satir > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ba-siparis-satir__sag { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ba-siparis-satir__ok { width: 16px; height: 16px; color: var(--metin-silik); transition: transform var(--gecis); }
.ba-siparis-satir:hover .ba-siparis-satir__ok { transform: translateX(3px); color: var(--marka); }

/* ---- Durum rozetleri ----
   Altı durum, altı renk. Renk tek başına bilgi taşımıyor: metin
   her zaman yazılı, renk yalnız onu hızlandırıyor. */
.ba-durum {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    font-size: .78rem;
    font-weight: 650;
    white-space: nowrap;
    border-radius: 100px;
    color: var(--metin-soluk);
    background: var(--zemin-alt);
}

.ba-durum--bekliyor { color: var(--uyari); background: var(--uyari-yumusak); }
.ba-durum--onaylandi { color: var(--marka); background: var(--marka-yumusak); }
.ba-durum--hazirlaniyor { color: var(--marka-koyu); background: var(--marka-yumusak); }
.ba-durum--kargoda { color: #fff; background: var(--marka-acik); }
.ba-durum--teslim { color: var(--olumlu); background: var(--olumlu-yumusak); }
.ba-durum--iptal { color: var(--olumsuz); background: var(--olumsuz-yumusak); }

/* Abonelik durumları aynı dili kullanıyor */
.ba-durum--aktif { color: var(--olumlu); background: var(--olumlu-yumusak); }
.ba-durum--duraklatildi { color: var(--uyari); background: var(--uyari-yumusak); }

/* ---- Puan bakiyesi ---- */
.ba-bakiye {
    padding: 24px;
    margin-bottom: 18px;
    text-align: center;
    color: #fff;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(36, 121, 152, .85), transparent 58%),
        var(--marka-koyu);
    border-radius: var(--kose-buyuk);
}

.ba-bakiye__ad { display: block; font-size: .8rem; color: #bcd9e2; }
.ba-bakiye__deger { display: block; font-size: 2.4rem; font-weight: 750; letter-spacing: -.03em; }
.ba-bakiye__not { display: block; font-size: .82rem; color: #bcd9e2; }

/*
 | Puan hareketi satırı. ESKİ ADI `.ba-hareket` İDİ VE AĞIR BİR HATAYA
 | YOL AÇTI: <html> etiketi de canlandırma anahtarı olarak aynı sınıfı
 | taşıyordu (bkz. aşağıdaki not). Kök öğe `display: flex` oluyor,
 | gövde flex öğesi hâline geliyor ve `min-width: auto` yüzünden
 | sayfanın genişliği EN GENİŞ İÇERİĞE kilitleniyordu — tasarım
 | pencereye sığmıyor, sağda beyaz bir şerit kalıyordu.
 */
.ba-puan-satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: .9rem;
}

.ba-puan-satir:last-child { border-bottom: 0; }
.ba-puan-satir > span { display: flex; flex-direction: column; gap: 2px; }

/* ---- Adres defteri ---- */
.ba-adres-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ba-adres { position: relative; }
.ba-adres--varsayilan { border-color: var(--marka-cizgi); box-shadow: inset 3px 0 0 var(--marka); }
.ba-adres__basi { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ba-adres__govde { font-style: normal; font-size: .9rem; line-height: 1.7; color: var(--metin-soluk); }
.ba-adres form { margin-top: 10px; }

/* ---- Bilgilerim ---- */
.ba-profil-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

/* ---- Sipariş detayı ---- */
.ba-siparis-basi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ba-takip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ba-takip svg { width: 26px; height: 26px; color: var(--marka); flex-shrink: 0; }
.ba-takip > div { flex: 1 1 200px; }
.ba-takip b { display: block; }

.ba-iptal { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- Abonelikler ---- */
.ba-abonelik__basi { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ba-abonelik__basi > div:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.ba-abonelik__basi .ba-sepet-satir__gorsel { width: 76px; flex-shrink: 0; }

.ba-abonelik__form {
    display: grid;
    grid-template-columns: 100px 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
}

.ba-abonelik__form .ba-alan-grup { margin-bottom: 0; }

/* Küçük boş durum */
.ba-bos--kucuk { padding: 24px 16px; }

/* ---- Mobil ---- */
@media (max-width: 1199.98px) {
    .ba-kimlik { grid-template-columns: minmax(0, 1fr) 320px; }
    .ba-adres-duzen, .ba-profil-duzen { grid-template-columns: minmax(0, 1fr) 300px; }
}

@media (max-width: 991.98px) {
    /*
     | Kenar menü içeriğin ÜSTÜNE değil, yatay bir şerit hâline geliyor.
     | Alt alta on dört bağlantı, telefonda içerik görünmeden önce iki
     | ekran boyu kaydırma demekti.
     */
    .ba-hesap { grid-template-columns: 1fr; }

    /*
     | min-width: 0 — ızgara öğesinin kendiliğinden gelen asgari boyutu
     | min-content'tir. Yan menü yatay kaydırmaya geçince içindeki
     | bağlantılar toplam ~1900 piksel ediyor ve bu asgari boyut ızgara
     | sütununu o genişliğe kilitliyordu: SAYFA yatay kayıyordu.
     | Ölçüldü: 390 piksellik pencerede belge 1888 piksel.
     */
    .ba-hesap > * { min-width: 0; }
    .ba-hesap-yan { position: static; min-width: 0; }
    .ba-hesap-yan__kim { padding-bottom: 12px; margin-bottom: 10px; }

    .ba-hesap-yan nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
    .ba-hesap-yan nav::-webkit-scrollbar { display: none; }
    .ba-hesap-yan__basi { display: none; }
    .ba-hesap-menu { display: flex; gap: 6px; }
    .ba-hesap-menu a { white-space: nowrap; margin-bottom: 0; }
    .ba-hesap-menu a.etkin { box-shadow: none; }
    .ba-hesap-yan__cikis { margin: 0; padding: 0; border: 0; flex-shrink: 0; }
    .ba-hesap-yan__cikis button { white-space: nowrap; }

    .ba-kimlik, .ba-adres-duzen, .ba-profil-duzen { grid-template-columns: 1fr; }
    .ba-kimlik--tek, .ba-kimlik--genis { justify-content: stretch; }
    .ba-abonelik__form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767.98px) {
    .ba-kimlik__kart { padding: 20px; }
    .ba-sayilar { grid-template-columns: 1fr; gap: 10px; }
    .ba-sayi { display: flex; align-items: baseline; justify-content: space-between; text-align: left; padding: 14px 16px; }
    .ba-sayi__deger { font-size: 1.5rem; }
    .ba-siparis-satir { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ba-siparis-satir__sag { width: 100%; justify-content: space-between; }
    .ba-abonelik__form { grid-template-columns: 1fr; }
    .ba-iptal, .ba-takip { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------
   28. İletişim sayfası
   ---------------------------------------------------------------
   Bu ekranın temada karşılığı yoktu; /kontakt çekirdek görünüme
   düşüyor ve metinleri Türkçe geliyordu. Tema kendi ekranını
   aldı, bu bölüm de onun biçimi.

   İki sütun: solda iletişim bilgileri (dar, yapışkan), sağda
   mesaj formu (geniş). Dar ekranda alt alta iner.
   --------------------------------------------------------------- */
.ba-iletisim__ozet {
    max-width: 62ch;
    margin: 0 0 28px;
    color: var(--metin-soluk);
    line-height: 1.7;
}

.ba-iletisim {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Izgara ogesinin en kucuk boyutu min-content'tir; bu iki koruma
   olmadan uzun bir e-posta adresi sutunu sisirip sayfayi yana
   tasirirdi (ayni hata bu projede iki kez yasandi). */
.ba-iletisim > * { min-width: 0; }

.ba-iletisim__kart,
.ba-iletisim__form { padding: 24px; }

.ba-iletisim__baslik {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--metin);
}

.ba-iletisim__yanit { margin: 0 0 18px; color: var(--metin-silik); }

.ba-iletisim__liste {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.ba-iletisim__liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.ba-iletisim__liste svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--marka);
}

.ba-iletisim__etiket {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-silik);
    margin-bottom: 3px;
}

.ba-iletisim__deger {
    display: block;
    color: var(--metin);
    line-height: 1.55;
    /* Uzun e-posta ve adresler kutuyu tasirmasin */
    overflow-wrap: anywhere;
}

a.ba-iletisim__deger { transition: color var(--gecis); }
a.ba-iletisim__deger:hover { color: var(--marka); }

/* Form: iki sutunlu ust blok, altta tam genislik mesaj alani */
.ba-iletisim__ikili {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.ba-iletisim__ikili > * { min-width: 0; }

@media (max-width: 991.98px) {
    .ba-iletisim { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .ba-iletisim__ikili { grid-template-columns: 1fr; }
    .ba-iletisim__kart,
    .ba-iletisim__form { padding: 20px 16px; }
}

/* =====================================================================
   29. ÖDEME YÖNTEMİ ROZETLERİ — künyenin sağ alt kısmı
   =====================================================================

   Müşteri "footer bölümüne alt sağ kısma ... logoları yerleştir"
   dedi. Künye satırı zaten `space-between`; telif + PAngV metni
   tek bir kutuya alındı (.ba-alt__kunye-yazi), rozetler o satırın
   sağ ucunda duruyor.

   Rozetler logo dosyası varsa <img>, yoksa yazı etiketi olarak
   çıkıyor (bkz. partials/odeme-rozetleri.blade.php). İki hâlin de
   AYNI yükseklikte durması gerekiyor, yoksa dosyalar tek tek
   eklendikçe satır zıplıyor. Bu yüzden yükseklik ögede sabit.
   --------------------------------------------------------------- */
.ba-alt__kunye-yazi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ba-odeme {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    /* Sağa yaslanır; künye `space-between` olduğu için tek başına
       da sağda kalır ama dar pencerede sarınca sola düşmesin. */
    margin-left: auto;
}

.ba-odeme__baslik {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    white-space: nowrap;
}

.ba-odeme__liste {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ba-odeme__oge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* v31: 30 -> 34 px. Gerçek logolar geldikten sonra 20 px'lik
       logo alanı dar kalıyordu; Mastercard'ın iki halkası ve
       Klarna'nın pembe bloğu bu yükseklikte okunmuyordu. */
    height: 34px;
    padding: 0 10px;
    /* Kart markalarının kendi logoları beyaz zemine göre
       tasarlanır; koyu lacivert künye üstünde beyaz kutu
       kullanmak marka kılavuzlarının istediği hâldir. */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

.ba-odeme__oge img {
    display: block;
    /* 22 px, marka kılavuzlarının alt sınırına yakın ama künyeyi
       şişirmeyen yükseklik. max-width kaldırıldı: PayPal ve
       Google Pay yatay logolardır, 58 px'e sıkışınca yükseklikleri
       düşüyor ve yanlarındaki kare logolardan küçük görünüyorlardı
       — "silik" görünmelerinin sebeplerinden biri buydu. */
    height: 22px;
    width: auto;
    object-fit: contain;
}

/* Logo dosyası henüz eklenmemiş yöntem: beyaz kutu yerine
   çerçeveli yazı. Beyaz kutuda çıplak yazı "logo yüklenmedi" gibi
   duruyordu; çerçeveli hâli bilinçli bir etiket gibi duruyor. */
/* Logo dosyası henüz eklenmemiş yöntem.
   v31: müşteri "silik görünüyor" dedi — haklıydı. Yazı %82
   saydam beyaz, zemin %8 saydamdı; koyu künye üstünde ikisi de
   soluk çıkıyordu. Artık tam opak beyaz yazı ve daha belirgin
   çerçeve kullanılıyor, logolu rozetlerle aynı ağırlıkta duruyor. */
.ba-odeme__oge--yazi {
    padding: 0 12px;
    font-size: .76rem;
    font-weight: 650;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: none;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* Dar pencerede künye zaten sütuna dönüyor; rozetler sola
       yaslanmalı, yoksa tek başına sağda asılı kalıyor. */
    .ba-odeme { margin-left: 0; }
}

/* =====================================================================
   30. HESAP PANELİ — aktif sipariş kartı ve hızlı işlemler
   =====================================================================

   Müşteri "müşteri paneli daha kolay anlaşılır ve müşteri odaklı
   olacak" dedi. İki ekleme yapıldı, ikisi de özetin EN ÜSTÜNE:

   1) .ba-aktif — devam eden sipariş. Hesaba giren müşterinin ilk
      sorusu "siparişim nerede"; cevabı artık ilk öğe.
   2) .ba-kisayol — dört iş düğmesi. Panelin kalanı bilgi
      gösteriyordu; burası iş yaptırıyor.
   --------------------------------------------------------------- */
.ba-aktif {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    margin-bottom: 18px;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(180deg, rgba(0, 105, 134, .06), rgba(0, 105, 134, .02));
    border: 1px solid var(--marka-cizgi);
    border-left: 4px solid var(--marka);
    border-radius: var(--kose);
    transition: box-shadow var(--gecis), transform var(--gecis);
}

.ba-aktif:hover {
    box-shadow: 0 6px 18px rgba(15, 32, 45, .1);
    transform: translateY(-1px);
}

.ba-aktif__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    color: var(--marka);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(15, 32, 45, .1);
}

.ba-aktif__ikon svg { width: 24px; height: 24px; }

/* min-width:0 — uzun sipariş numarası esnek kutuyu şişirmesin */
.ba-aktif__govde { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.ba-aktif__ust {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--marka);
}

.ba-aktif__no { font-size: 1.02rem; font-weight: 700; }
.ba-aktif__alt { font-size: .85rem; color: var(--metin-silik); }

.ba-aktif__tutar { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

/* ---- Hızlı işlemler ---- */
.ba-kisayol {
    display: grid;
    /* auto-fit + minmax: 4 sütundan 2'ye, oradan 1'e kendiliğinden
       iner; ayrı kırılma noktası yazmak gerekmiyor. */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.ba-kisayol__oge {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px;
    color: inherit;
    text-decoration: none;
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    transition: border-color var(--gecis), background var(--gecis), transform var(--gecis);
}

.ba-kisayol__oge:hover {
    background: #fff;
    border-color: var(--marka-cizgi);
    transform: translateY(-1px);
}

.ba-kisayol__oge svg { width: 21px; height: 21px; color: var(--marka); margin-bottom: 3px; }
.ba-kisayol__oge b { font-size: .92rem; }
.ba-kisayol__oge span { font-size: .78rem; color: var(--metin-silik); line-height: 1.35; }

@media (max-width: 575.98px) {
    .ba-aktif { flex-wrap: wrap; }
    .ba-aktif__tutar { margin-left: 58px; }
}

/* Dikey kilitli logolar biraz daha yükseklik ister.
   Mastercard'ın işareti iki halka + altında kelime işaretidir;
   22 px'te alt yazı okunmuyor ve rozet yanındakilerden optik
   olarak küçük duruyordu. 28 px'te dengeleniyor. */
.ba-odeme__oge--mastercard img { height: 28px; }

/* Klarna'nın pembe bloğu zaten kendi çerçevesini taşıyor;
   beyaz rozet içinde 24 px'te yanındakilerle aynı ağırlıkta. */
.ba-odeme__oge--klarna img { height: 24px; }

/* =====================================================================
   31. TELEFON ALANI (ülke kodu + bayrak)
   =====================================================================

   ÜÇ HATA DÜZELTİLDİ (müşteri "alan kodları gözükmüyor" dedi):

   1. `background: #fff` KISALTMASI Bootstrap'in ok simgesini
      siliyordu. .form-select oku bir background-image'dır; kısaltma
      yazmak background-image'ı none yapar. Artık background-color
      kullanılıyor ve ok TEMANIN KENDİ simgesi olarak çiziliyor —
      Bootstrap yüklü olsun olmasın görünür.

   2. Seçici ESNEK KÜÇÜLÜYORDU. flex kabında varsayılan
      `flex-shrink: 1` yüzünden kutu 210 px yerine ~100 px'e
      iniyor, metin ok payının altında kalıyordu. Artık
      flex: 0 0 auto ve min-width var.

   3. BOOTSTRAP BAĞIMLILIĞI. Parça d-none / form-select /
      form-control / input-group sınıflarını kullanıyordu. Bunlar
      Bootstrap sınıfıdır; tema onu yüklemezse hiçbiri çalışmaz ve
      alan sessizce bozulur. Tema artık kendi sınıflarını
      (.tel-*) tanımlıyor, Bootstrap sınıfları yalnız uyumluluk
      için yanlarında duruyor.
   --------------------------------------------------------------- */
.telefon-alani {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* Bootstrap yoksa da gizlensin diye temanın kendi gizleme sınıfı */
.telefon-alani .tel-gizli { display: none !important; }

.telefon-alani .tel-bayrak-kutu,
.telefon-alani .tel-kod,
.telefon-alani .tel-no {
    min-height: 46px;
    font: inherit;
    font-size: .95rem;
    color: var(--metin);
    border: 1.5px solid var(--cizgi);
    /* KISALTMA DEĞİL: background-image'a dokunmaz */
    background-color: #fff;
    box-sizing: border-box;
}

.telefon-alani .tel-bayrak-kutu {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-right: 0;
    border-radius: var(--kose) 0 0 var(--kose);
    flex: 0 0 auto;
}

.telefon-alani .tel-bayrak {
    display: block;
    width: 22px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 32, 45, .14);
}

/* ---- Ülke kodu seçici ---- */
.telefon-alani .tel-kod {
    /*
     | GENİŞLİK İÇERİĞE GÖRE, SABİT DEĞİL.
     |
     | Önce 210 px sabitlenmişti. Sunucuda intl eklentisi olmadığı
     | için seçenekler "+91 · IN" gibi KISA metinler; 210 px'in
     | çoğu boş kalıyor ve dar bir form sütununda numara alanına
     | yalnız ~85 px kalıyordu — müşterinin "telefon yazma kısmı
     | çok dar" dediği durum tam olarak buydu.
     |
     | `width: auto` ile seçici EN UZUN seçeneğine göre ölçekleniyor:
     |   ad yoksa  -> ~110 px   (+1268 · AG)
     |   ad varsa  -> 210 px'de kapanır
     | Yani iki kurulumda da doğru davranıyor, elle ayar gerekmiyor.
     */
    flex: 0 0 auto;
    width: auto;
    min-width: 92px;
    max-width: 210px;
    margin-left: -1.5px;
    border-radius: 0;
    padding: 0 30px 0 10px;

    /* Kendi okumuz — Bootstrap'e bağlı değil */
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234A5C6B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
}

/* ---- Numara ---- */
.telefon-alani .tel-no {
    /*
     | Numara alanı ASLA ezilmesin. min-width: 0 idi; esnek kutuda
     | bu "istediğin kadar küçül" demektir ve alan 85 px'e iniyordu.
     | 132 px, uluslararası bir numaranın son hanelerini görmeye
     | yeten en düşük genişlik.
     */
    flex: 1 1 auto;
    min-width: 132px;
    margin-left: -1.5px;
    padding: 0 14px;
    border-radius: 0 var(--kose) var(--kose) 0;
}

.telefon-alani .tel-kod:focus,
.telefon-alani .tel-no:focus {
    outline: none;
    border-color: var(--marka-acik);
    box-shadow: 0 0 0 3px rgba(0, 105, 134, .12);
    position: relative;
    z-index: 1;
}

@media (max-width: 575.98px) {
    /* Dar ekranda kod seçici daralır ama metin yine sığsın diye
       yalnız ülke KODU görünecek kadar: ad kırpılır, kod kalır. */
    /*
     | Çok dar ekranda seçici + numara yan yana sığmıyorsa alan
     | ALT ALTA iner. Sıkıştırmaktansa sarmak doğru: iki satırın
     | ikisi de tam genişlikte ve okunur.
     */
    .telefon-alani { flex-wrap: wrap; }

    .telefon-alani .tel-kod {
        max-width: 160px;
    }

    .telefon-alani .tel-no {
        min-width: 100%;
        margin-left: 0;
        margin-top: -1.5px;
        border-radius: 0 0 var(--kose) var(--kose);
    }

    .telefon-alani .tel-bayrak-kutu { border-radius: var(--kose) 0 0 0; }
    .telefon-alani .tel-kod { border-radius: 0 var(--kose) 0 0; }
}

/* =====================================================================
   32. OEM PARÇA BULMA BÖLÜMÜ
   =====================================================================

   İki sütun: solda anlatı + OEM araması, sağda marka kapsamı
   (hangi makine markalarına parça veriliyor).
   --------------------------------------------------------------- */
.ba-oem {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 40px;
    align-items: start;
}

.ba-oem__baslik {
    margin: 10px 0 12px;
    max-width: 22ch;
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    line-height: 1.22;
    letter-spacing: -.015em;
    /* Son satırda tek kelime kalmasın ("... übernehmen / wir").
       Desteklemeyen tarayıcıda yok sayılır, max-width yine de
       satırları dengeliyor. */
    text-wrap: balance;
}

.ba-oem__ozet {
    margin: 0 0 20px;
    max-width: 58ch;
    color: var(--metin-silik);
    line-height: 1.7;
}

/* ---- Arama ---- */
.ba-oem__form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ba-oem__alan {
    flex: 1 1 260px;
    min-width: 0;
    height: 50px;
    padding: 0 16px;
    font: inherit;
    font-size: .97rem;
    color: var(--metin);
    background: #fff;
    border: 1.5px solid var(--cizgi);
    border-radius: 12px;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.ba-oem__alan::placeholder { color: var(--metin-silik); }

.ba-oem__alan:focus {
    outline: none;
    border-color: var(--marka-acik);
    box-shadow: 0 0 0 4px rgba(0, 105, 134, .12);
}

.ba-oem__form .ba-dugme { height: 50px; padding: 0 26px; border-radius: 12px; }

.ba-oem__not {
    margin: 16px 0 0;
    font-size: .86rem;
    color: var(--metin-silik);
}

.ba-oem__not a { color: var(--marka); font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------
   MARKA KAPSAMI — sağ sütun

   Burada önce numaralı üç adım kutusu vardı ("numarayı okuyun →
   bize iletin → eşdeğerini alın"). Solundaki paragraf aynı şeyi
   zaten anlatıyordu; kutular bölümün yarısını TEKRARLA
   dolduruyordu ve geniş beyaz boşluklar bırakıyordu.

   Yerine, alıcının ilk sorusunun cevabı kondu: hangi makine
   markaları. Veri veritabanında zaten vardı (106 aktif üretici)
   ama hiçbir yerde görünmüyordu — marka şeridi yalnız ÜRÜNÜ OLAN
   markaları gösteriyor ve katalogda şimdilik 4 ürün var.
   --------------------------------------------------------------- */
.ba-oem__kapsam {
    padding: 22px 22px 18px;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose-buyuk);
    box-shadow: 0 1px 2px rgba(15, 32, 45, .04);
}

.ba-oem__kapsam-basi {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--cizgi);
    font-size: .92rem;
    line-height: 1.35;
    color: var(--metin-soluk);
}

.ba-oem__sayi {
    font-family: var(--yazi-numara);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--marka);
    letter-spacing: -.02em;
}

/*
 | Adlar IZGARA değil AKIŞ halinde: marka adlarının uzunluğu çok
 | değişiyor (MF ile WACKER NEUSON yan yana). Sabit sütunlu bir
 | ızgarada kısa adların yanında kocaman boşluklar kalıyor,
 | uzun adlar ise sığmayıp kırpılıyordu.
 */
.ba-oem__marka {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ba-oem__marka a,
.ba-oem__marka span {
    display: inline-block;
    padding: 5px 11px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--metin-soluk);
    background: var(--zemin-alt);
    border: 1px solid var(--cizgi);
    border-radius: 7px;
    white-space: nowrap;
}

/*
 | Ürünü OLAN marka bağlantı, olmayan düz yazı. Bağlantı olanlar
 | marka renginde: tıklanabilir olanla olmayan arasındaki farkı
 | ziyaretçi imleci götürmeden görsün.
 */
.ba-oem__marka a {
    color: var(--marka);
    background: var(--marka-yumusak);
    border-color: var(--marka-cizgi);
    transition: background var(--gecis), border-color var(--gecis);
}

.ba-oem__marka a:hover {
    background: #fff;
    border-color: var(--marka);
}

.ba-oem__kapsam-not {
    margin: 14px 0 0;
    font-size: .84rem;
    color: var(--metin-silik);
}

.ba-oem__kapsam-not a { color: var(--marka); font-weight: 600; }

@media (max-width: 991.98px) {
    .ba-oem { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* =====================================================================
   33. v32 — ANASAYFA YENİDEN TASARIMI
   =====================================================================

   Müşteri "tasarım basit duruyor, tüm sayfayı modern yap" dedi.
   Ölçtüğümde sorun süsleme eksikliği değildi: sayfanın üst üçte
   biri DÜŞÜK KONTRASTLI ve SEYREKTİ. Açık zemin üzerinde açık
   kutular, aralarında geniş boşluk, hiçbir yerde yoğunluk yok.

   Endüstriyel B2B sitelerini "ciddi" gösteren şey süs değil
   YOĞUNLUK ve KONTRAST: bilgi blokları birbirine yapışır, koyu
   bantlar bölümleri ayırır, tipografi sıkı olur.
   --------------------------------------------------------------- */

/* ---- Gerçek şeridi: slaytın altına YAPIŞIK, koyu ---- */
.ba-gercek {
    background: linear-gradient(180deg, var(--marka-koyu), #08313f);
    border-bottom: 3px solid var(--vurgu);
}

.ba-gercek__ic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.ba-gercek__oge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 22px 26px;
    /* Ayırıcı çizgi kenarlıkla değil gölgeyle: ilk öğede fazladan
       çizgi çıkmasın diye :not(:first-child) yazmak gerekmiyor. */
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1);
}

.ba-gercek__oge:first-child { box-shadow: none; }

.ba-gercek__deger {
    font-size: 1.42rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: #fff;
}

.ba-gercek__ad {
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vurgu);
}

.ba-gercek__not { font-size: .82rem; color: rgba(255, 255, 255, .62); line-height: 1.45; }

@media (max-width: 767.98px) {
    .ba-gercek__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ba-gercek__oge:nth-child(-n+2) { box-shadow: inset 1px 0 0 rgba(255,255,255,.1); }
    .ba-gercek__oge:nth-child(odd) { box-shadow: none; }
    .ba-gercek__oge:nth-child(n+3) { box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
    .ba-gercek__oge:nth-child(4) { box-shadow: inset 1px 0 0 rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.1); }
    .ba-gercek__oge { padding: 16px 18px; }
    .ba-gercek__deger { font-size: 1.2rem; }
}

/* ---- Ürün grubu kartı ---- */
.ba-grup {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--cizgi);
    border-radius: var(--kose);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.ba-grup:hover {
    border-color: var(--marka-cizgi);
    box-shadow: 0 6px 18px rgba(15, 32, 45, .09);
    transform: translateY(-1px);
}

.ba-grup__gorsel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--marka-yumusak);
    border-radius: 10px;
}

.ba-grup__gorsel img { width: 100%; height: 100%; object-fit: cover; }

/* Görsel yoksa baş harf — boş gri kutu yerine bilinçli bir amblem */
.ba-grup__gorsel b {
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--marka);
}

/* min-width: 0 — uzun kategori adı esnek kutuyu şişirmesin */
.ba-grup__govde { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

.ba-grup__ad {
    font-size: .95rem;
    font-weight: 650;
    line-height: 1.3;
}

.ba-grup__alt {
    font-size: .8rem;
    color: var(--metin-silik);
    line-height: 1.4;
    /* İki satırda kes: kartlar eşit yükseklikte kalsın */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ba-grup__adet {
    margin-top: 3px;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .04em;
    color: var(--marka);
}

.ba-grup__ok {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--metin-silik);
    transition: transform var(--gecis), color var(--gecis);
}

.ba-grup:hover .ba-grup__ok { color: var(--marka); transform: translateX(3px); }


/* Ürün grubu kartı YATAY bir karttır (amblem + metin + ok); iki
   sütuna sıkıştığında metne ~130 px kalıyor ve ad kırpılıyor.
   576 px altında tek sütuna iniyor — dar ekranda okunur kalması,
   yan yana durmasından önemli. */
@media (max-width: 575.98px) {
    .ba-izgara--3:has(> .ba-grup) { grid-template-columns: minmax(0, 1fr); }
}