/* ==========================================================================
   MERHABOX — Vitrin Tasarım Sistemi
   --------------------------------------------------------------------------
   Bootstrap 5.3.2 (CDN) ÜZERİNE kurulur. Grid, modal, offcanvas, dropdown ve
   collapse Bootstrap'ten gelir; buradaki her şey marka katmanıdır.

   otodevi-modern.css BURAYA import EDİLMEZ — o dosya html/body'ye !important
   ile font ve arka plan basıyor ve Velzon --vz-* değişkenlerini eziyor.
   Vitrin ile panel görsel olarak tamamen ayrıdır.

   Sınıf ön eki: mbx-   (mb- kullanılamaz — Bootstrap margin-bottom ile çakışır)

   İÇİNDEKİLER
     01  Tokenlar
     02  Temel / tipografi
     03  Butonlar
     04  Rozetler
     05  Header + arama + mega menü
     06  Kategori şeridi
     07  Konum (çip, bar, modal)
     08  Ürün kartı + grid
     09  Filtreler + sıralama
     10  Sayfalama
     11  Ürün detay + teklif listesi
     12  Sepet + checkout
     13  Formlar
     14  Boş durum / iskelet / uyarı
     15  Footer
     16  Mobil kabuk
     17  Yardımcılar
     18  Hareket / erişilebilirlik
   ========================================================================== */


/* ==========================================================================
   01  TOKENLAR
   ========================================================================== */

:root {
  /* --- Marka: logodan --------------------------------------------------- */
  --mbx-teal-050: #EAF8F7;
  --mbx-teal-100: #D2F0EF;
  --mbx-teal-200: #B0E5E3;
  --mbx-teal-300: #8AD9D6;
  --mbx-teal-400: #6BCFCB;
  --mbx-teal-500: #4EC5C1;   /* "Merha" — ANA marka rengi */
  --mbx-teal-600: #35A9A5;
  /* Metin/CTA için güvenli ton. ÖNCEKİ DEĞER #248C89 idi ve beyaz üzerinde
     yalnızca 4.04:1 ÖLÇÜLDÜ (Lighthouse) — AA eşiği 4.5:1'in altında.
     #1F7E7A ile ~4.9:1. Tahmin değil, tarayıcıda ölçülmüş değerdir. */
  --mbx-teal-700: #1F7E7A;
  --mbx-teal-800: #16615F;

  --mbx-amber-050: #FDF3E4;
  --mbx-amber-100: #FAE6C6;
  --mbx-amber-300: #F3C57E;
  --mbx-amber-500: #E89B2B;  /* "box" — vurgu / CTA */
  --mbx-amber-600: #CE8419;
  --mbx-amber-700: #A96A11;
  --mbx-amber-800: #7F4F0C;  /* açık amber zemin üzerinde metin (AA) */

  --mbx-ink:      #3A3A38;   /* logo konturu — ana metin */
  --mbx-ink-700:  #55554F;
  /* İkincil metin. ÖNCEKİ #7A7A72 beyaz üzerinde 4.32:1, bg üzerinde 4.13:1
     ÖLÇÜLDÜ — AA altı. .mbx-muted ve .mbx-empty__text her yerde bunu kullanıyor. */
  --mbx-ink-500:  #66665F;
  --mbx-ink-300:  #A8A89F;   /* pasif */
  --mbx-ink-200:  #C9C9C1;

  /* --- Yüzey ------------------------------------------------------------ */
  --mbx-surface:     #FFFFFF;
  --mbx-bg:          #FAFAF8;
  --mbx-bg-alt:      #F4F4F0;
  --mbx-line:        #E7E7E3;
  --mbx-line-strong: #D6D6D0;

  /* --- Anlamsal --------------------------------------------------------- */
  --mbx-success:     #2E9E6B;
  --mbx-success-bg:  #E8F6EF;
  --mbx-warn:        #E8A93B;
  --mbx-warn-bg:     #FDF4E3;
  --mbx-danger:      #E0574B;
  --mbx-danger-bg:   #FCEDEB;
  --mbx-info:        #3E93F2;
  --mbx-info-bg:     #EAF3FE;

  /* --- Yarıçap ---------------------------------------------------------- */
  --mbx-r-xs:   6px;
  --mbx-r-sm:  10px;
  --mbx-r-md:  14px;
  --mbx-r-lg:  20px;
  --mbx-r-xl:  28px;
  --mbx-r-pill: 999px;

  /* --- Gölge: nötr gri değil, ink tonlu (sıcak palete uyum) ------------- */
  --mbx-sh-1: 0 1px 2px rgba(58,58,56,.06);
  --mbx-sh-2: 0 6px 18px rgba(58,58,56,.08);
  --mbx-sh-3: 0 18px 40px -18px rgba(58,58,56,.28);
  --mbx-sh-brand: 0 10px 28px -12px rgba(78,197,193,.55);
  --mbx-sh-amber: 0 10px 26px -12px rgba(232,155,43,.55);
  --mbx-ring: 0 0 0 4px var(--mbx-teal-100);
  --mbx-ring-amber: 0 0 0 4px var(--mbx-amber-100);

  /* --- Tipografi -------------------------------------------------------- */
  --mbx-ff-display: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mbx-ff-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --mbx-fs-2xs: 11px;
  --mbx-fs-xs:  12px;
  --mbx-fs-sm:  13px;
  --mbx-fs-md:  14px;
  --mbx-fs-lg:  16px;
  --mbx-fs-xl:  19px;
  --mbx-fs-2xl: 23px;
  --mbx-fs-3xl: 29px;
  --mbx-fs-4xl: 36px;
  --mbx-fs-5xl: 46px;

  /* --- Boşluk (4px tabanlı) --------------------------------------------- */
  --mbx-s1:  4px;   --mbx-s2:  8px;   --mbx-s3: 12px;  --mbx-s4: 16px;
  --mbx-s5: 20px;   --mbx-s6: 24px;   --mbx-s8: 32px;  --mbx-s10: 40px;
  --mbx-s12: 48px;  --mbx-s16: 64px;  --mbx-s20: 80px;

  /* --- Ölçü / katman ---------------------------------------------------- */
  --mbx-maxw: 1280px;
  --mbx-header-h: 68px;
  --mbx-navbar-h: 48px;   /* kategori nav cubugu */
  --mbx-tabbar-h: 60px;

  --mbx-z-header: 60;
  --mbx-z-mega:   70;
  --mbx-z-tabbar: 80;
  --mbx-z-sheet:  1050;
  --mbx-z-modal:  1055;

  --mbx-ease: cubic-bezier(.22, 1, .36, 1);
}


/* ==========================================================================
   02  TEMEL / TİPOGRAFİ
   ========================================================================== */

body.mbx {
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-md);
  line-height: 1.55;
  color: var(--mbx-ink);
  background: var(--mbx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* ÇİFT DOKUNMA YAKINLAŞTIRMASI KAPALI.
     Tarayıcı, dokunmanın çift dokunma olup olmadığını anlamak için ~300 ms
     bekliyordu; bu hem istemsiz yakınlaştırmaya hem de her dokunuşta gecikme
     hissine yol açıyordu. `manipulation` yalnızca çift dokunma ve basılı tutma
     jestlerini devre dışı bırakır — kaydırma ve PARMAK SIKIŞTIRARAK
     yakınlaştırma ÇALIŞMAYA DEVAM EDER.
     Bilinçli olarak `user-scalable=no` KULLANILMADI: o, görme güçlüğü olan
     kullanıcının sayfayı büyütmesini tamamen engeller (WCAG 1.4.4 ihlali) ve
     iOS 10'dan beri Safari zaten yok sayıyor. */
  touch-action: manipulation;
}

.mbx h1, .mbx h2, .mbx h3, .mbx h4, .mbx h5,
.mbx-display {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--mbx-ink);
  margin: 0 0 var(--mbx-s3);
}

.mbx h1 { font-size: var(--mbx-fs-4xl); line-height: 1.15; }
.mbx h2 { font-size: var(--mbx-fs-3xl); line-height: 1.2; }
.mbx h3 { font-size: var(--mbx-fs-2xl); line-height: 1.25; }
.mbx h4 { font-size: var(--mbx-fs-xl);  line-height: 1.3; }
.mbx h5 { font-size: var(--mbx-fs-lg);  line-height: 1.35; }

.mbx a { color: var(--mbx-teal-700); text-decoration: none; }
.mbx a:hover { color: var(--mbx-teal-800); text-decoration: underline; }

.mbx-muted   { color: var(--mbx-ink-500); }
.mbx-dim     { color: var(--mbx-ink-300); }
.mbx-strong  { font-weight: 700; }

.mbx-container {
  width: 100%;
  max-width: var(--mbx-maxw);
  margin-inline: auto;
  padding-inline: var(--mbx-s4);
}

.mbx-section       { padding-block: var(--mbx-s10); }
.mbx-section--tight{ padding-block: var(--mbx-s6); }

/* akoffice duzeni: baslik ORTADA, "Tumunu gor" sagda.
   3 sutunlu izgara sart -- flex + space-between ile baslik ortalanmis GIBI
   durur ama saga yaslı baglantinin genisligi kadar sola kayar; baglantisiz
   bolumlerle hizasi tutmaz. Bos sol sutun bu kaymayi engelliyor. */
.mbx-sec-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--mbx-s4);
  margin-bottom: var(--mbx-s6);
}
.mbx-sec-head h2 { grid-column: 2; justify-self: center; text-align: center; }
.mbx-sec-head__link { grid-column: 3; justify-self: end; }
.mbx-sec-head h2 { margin: 0; font-size: var(--mbx-fs-2xl); }
.mbx-sec-head__link { font-size: var(--mbx-fs-md); font-weight: 600; white-space: nowrap; }

/* Marka kelime işareti — logo dosyası gelene kadar geçerli fallback */
/* Marka yazımı KÜÇÜK HARF. Tek yerde kural olarak duruyor: markup'taki metin
   ("Merha"/"box") değiştirilmedi ki logo geçtiği her yerde (üst bar, mobil üst
   bar, footer) tek satırla tutarlı kalsın ve biri güncellenip diğeri unutulmasın. */
.mbx-wordmark {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: var(--mbx-fs-2xl);
  letter-spacing: -.02em;
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
}
/* Açık zeminde AA: teal-600 2.85:1 ve amber-500 2.29:1 ölçüldü (Lighthouse),
   19px/800 "büyük metin" eşiği 3:1 bile karşılanmıyordu. Koyu tonlara alındı. */
.mbx-wordmark__a { color: var(--mbx-teal-700); }
.mbx-wordmark__b { color: var(--mbx-amber-700); }
.mbx-wordmark img { height: 34px; width: auto; display: block; }

/* Koyu zemin (footer) — orada parlak marka tonları zaten yeterli kontrasta sahip */
.mbx-wordmark--dark .mbx-wordmark__a { color: var(--mbx-teal-400); }
.mbx-wordmark--dark .mbx-wordmark__b { color: var(--mbx-amber-500); }


/* ==========================================================================
   03  BUTONLAR
   --------------------------------------------------------------------------
   KONTRAST NOTU (atlanamaz) — değerler TARAYICIDA ÖLÇÜLDÜ, tahmin değil:
     beyaz üzerine #4EC5C1 (teal-500)  = 2.1:1   → AA (4.5:1) ALTINDA
     beyaz üzerine #E89B2B (amber-500) = 2.29:1  → AA ALTINDA
     beyaz üzerine #35A9A5 (teal-600)  = 2.85:1  → AA ALTINDA
     beyaz üzerine #248C89 (eski 700)  = 4.04:1  → AA ALTINDA (ilk sürümde kaçmıştı)
     beyaz üzerine #1F7E7A (teal-700)  = ~4.9:1  ✓
   Bu yüzden:
     • Birincil CTA = amber dolgu + KOYU ink metin ✓
     • Metin/link/ikincil CTA = --mbx-teal-700 ✓
     • teal-500/600 yalnızca yüzey, çerçeve, ikon, dekor — metin rengi DEĞİL
   ========================================================================== */

.mbx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mbx-s2);
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--mbx-r-sm);
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-md);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s var(--mbx-ease),
              border-color .18s var(--mbx-ease),
              box-shadow .18s var(--mbx-ease),
              transform .12s var(--mbx-ease);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.mbx-btn:hover { text-decoration: none; }
.mbx-btn:active { transform: translateY(1px); }
.mbx-btn:focus-visible { outline: none; box-shadow: var(--mbx-ring); }
.mbx-btn[disabled], .mbx-btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Birincil — sepete ekle, siparişi tamamla */
.mbx-btn--primary {
  background: var(--mbx-amber-500);
  color: var(--mbx-ink);
  box-shadow: var(--mbx-sh-1);
}
.mbx-btn--primary:hover { background: var(--mbx-amber-600); color: var(--mbx-ink); box-shadow: var(--mbx-sh-amber); }
.mbx-btn--primary:focus-visible { box-shadow: var(--mbx-ring-amber); }

/* İkincil marka — ara, filtrele.
   teal-600 üzerine beyaz 2.85:1 ölçüldü (AA altı); teal-700'e alındı → 4.6:1 */
.mbx-btn--teal {
  background: var(--mbx-teal-700);
  color: #fff;
  font-weight: 700;
}
.mbx-btn--teal:hover { background: var(--mbx-teal-800); color: #fff; box-shadow: var(--mbx-sh-brand); }

.mbx-btn--outline {
  background: var(--mbx-surface);
  border-color: var(--mbx-line-strong);
  color: var(--mbx-ink);
}
.mbx-btn--outline:hover { border-color: var(--mbx-teal-500); background: var(--mbx-teal-050); color: var(--mbx-teal-800); }

.mbx-btn--ghost { background: transparent; color: var(--mbx-ink-700); }
.mbx-btn--ghost:hover { background: var(--mbx-bg-alt); color: var(--mbx-ink); }

.mbx-btn--icon {
  padding: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--mbx-r-sm);
  background: transparent;
  color: var(--mbx-ink-700);
  font-size: 20px;
}
.mbx-btn--icon:hover { background: var(--mbx-bg-alt); color: var(--mbx-ink); }

.mbx-btn--sm  { padding: 7px 13px;  font-size: var(--mbx-fs-sm); border-radius: var(--mbx-r-xs); }
.mbx-btn--lg  { padding: 15px 28px; font-size: var(--mbx-fs-lg); border-radius: var(--mbx-r-md); }
.mbx-btn--block { width: 100%; }

/* ==========================================================================
   ÖZGÜLLÜK DÜZELTMESİ — buton olarak kullanılan <a> etiketleri
   --------------------------------------------------------------------------
   `.mbx a { color: var(--mbx-teal-700) }` özgüllüğü (0,1,1); buton renk
   kuralları ise (0,1,0). Yani <a class="mbx-btn mbx-btn--primary"> etiketinde
   link rengi kazanıyor ve amber dolgu üzerine TURKUAZ metin çıkıyordu:
   ölçülen kontrast 2.11:1 — okunmaz.

   Aşağıdaki seçiciler (0,2,1) olduğu için link kuralını yener.
   Yeni bir buton varyantı eklenirse BURAYA DA eklenmelidir.
   ========================================================================== */
.mbx a.mbx-btn--primary,
.mbx a.mbx-btn--outline,
.mbx a.mbx-btn--ghost,
.mbx a.mbx-btn--icon      { color: var(--mbx-ink); text-decoration: none; }
.mbx a.mbx-btn--teal      { color: #fff; text-decoration: none; }

.mbx a.mbx-btn--primary:hover { color: var(--mbx-ink); text-decoration: none; }
.mbx a.mbx-btn--outline:hover { color: var(--mbx-teal-800); text-decoration: none; }
.mbx a.mbx-btn--ghost:hover   { color: var(--mbx-ink); text-decoration: none; }
.mbx a.mbx-btn--icon:hover    { color: var(--mbx-ink); text-decoration: none; }
.mbx a.mbx-btn--teal:hover    { color: #fff; text-decoration: none; }


/* ==========================================================================
   04  ROZETLER
   ========================================================================== */

.mbx-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--mbx-r-pill);
  font-size: var(--mbx-fs-2xs);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.4;
  white-space: nowrap;
}
.mbx-badge i { font-size: 13px; }

.mbx-badge--campaign  { background: var(--mbx-amber-050); color: var(--mbx-amber-700); }
.mbx-badge--new       { background: var(--mbx-teal-050);  color: var(--mbx-teal-800); }
.mbx-badge--in-city   { background: var(--mbx-success-bg); color: var(--mbx-success); }
.mbx-badge--other-city{ background: var(--mbx-warn-bg);   color: var(--mbx-amber-700); }
.mbx-badge--no-offer  { background: var(--mbx-bg-alt);    color: var(--mbx-ink-500); }
.mbx-badge--danger    { background: var(--mbx-danger-bg); color: var(--mbx-danger); }


/* ==========================================================================
   05  HEADER + ARAMA + MEGA MENÜ
   ========================================================================== */

.mbx-header {
  position: sticky;
  top: 0;
  z-index: var(--mbx-z-header);
  background: var(--mbx-surface);
  border-bottom: 1px solid var(--mbx-line);
}

.mbx-header__main {
  display: flex;
  align-items: center;
  gap: var(--mbx-s4);
  height: var(--mbx-header-h);
}

.mbx-header__brand { display: flex; align-items: center; flex: 0 0 auto; }

.mbx-header__search { flex: 1 1 auto; min-width: 0; }
.mbx-header__actions { display: flex; align-items: center; gap: var(--mbx-s2); flex: 0 0 auto; }

/* --- Arama kutusu ------------------------------------------------------- */
.mbx-search { position: relative; }

.mbx-search__box {
  display: flex;
  align-items: center;
  background: var(--mbx-bg-alt);
  border: 1.5px solid transparent;
  border-radius: var(--mbx-r-pill);
  transition: border-color .18s var(--mbx-ease), background-color .18s var(--mbx-ease), box-shadow .18s var(--mbx-ease);
}
.mbx-search__box:focus-within {
  background: var(--mbx-surface);
  border-color: var(--mbx-teal-500);
  box-shadow: var(--mbx-ring);
}

.mbx-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 6px 12px 20px;
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
  outline: none;
}
.mbx-search__input::placeholder { color: var(--mbx-ink-300); }

.mbx-search__btn {
  flex: 0 0 auto;
  margin: 4px;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--mbx-teal-600);
  color: #fff;
  font-size: 19px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .18s var(--mbx-ease);
}
.mbx-search__btn:hover { background: var(--mbx-teal-700); }

/* Öneri kutusu */
.mbx-search__panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  box-shadow: var(--mbx-sh-3);
  padding: var(--mbx-s2);
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  z-index: var(--mbx-z-mega);
}
.mbx-search__panel.is-open { display: block; }
.mbx-search__group-title {
  font-size: var(--mbx-fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mbx-ink-300);
  padding: var(--mbx-s3) var(--mbx-s3) var(--mbx-s1);
}
.mbx-search__item {
  display: flex; align-items: center; gap: var(--mbx-s3);
  padding: 10px var(--mbx-s3);
  border-radius: var(--mbx-r-xs);
  color: var(--mbx-ink);
  cursor: pointer;
}
.mbx-search__item:hover, .mbx-search__item.is-active { background: var(--mbx-teal-050); text-decoration: none; color: var(--mbx-ink); }
.mbx-search__item img { width: 34px; height: 34px; object-fit: contain; border-radius: var(--mbx-r-xs); background: var(--mbx-bg-alt); }
.mbx-search__item-code { margin-inline-start: auto; font-size: var(--mbx-fs-xs); color: var(--mbx-ink-300); }

/* --- Sepet rozeti ------------------------------------------------------- */
.mbx-cart-badge { position: relative; }
.mbx-cart-badge__count {
  position: absolute;
  top: 2px; inset-inline-end: 2px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-amber-500);
  color: var(--mbx-ink);
  font-size: var(--mbx-fs-2xs);
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--mbx-surface);
}
.mbx-cart-badge__count:empty,
.mbx-cart-badge__count[data-count="0"] { display: none; }

/* ==========================================================================
   HERO SLIDER (akoffice duzeni) + banner alti serit
   ========================================================================== */

/* Tam genislik: akoffice'te banner kenardan kenara. Onceki .mbx-banner kap
   icinde yuvarlak bir kartti. */
.mbx-hero {
  position: relative;
  overflow: hidden;
  background: var(--mbx-bg-alt);
}
.mbx-hero__viewport { overflow: hidden; }
.mbx-hero__track {
  display: flex;
  /* transform ile kaydiriliyor; margin/left ile degil -- transform GPU'da
     calisiyor ve her karede layout hesabi tetiklemiyor. */
  transition: transform .55s var(--mbx-ease);
  will-change: transform;
}
.mbx-hero__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: clamp(280px, 30vw, 420px);
}

/* Gorsel gelirse degradenin ustune oturur (bkz. _HeroSlider.cshtml). */
.mbx-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Ton varyantlari -- akoffice'in fotografik zeminlerinin karsiligi.
   Gorsel olmadigi icin derinlik radyal isiklarla veriliyor. */
.mbx-hero--teal {
  background:
    radial-gradient(900px 420px at 88% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(700px 380px at 8% 92%, rgba(232,155,43,.20), transparent 62%),
    linear-gradient(120deg, var(--mbx-teal-100), var(--mbx-teal-050) 55%, #FFFDF7);
}
.mbx-hero--amber {
  background:
    radial-gradient(900px 420px at 85% 20%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(720px 400px at 10% 88%, rgba(78,197,193,.22), transparent 62%),
    linear-gradient(120deg, var(--mbx-amber-100), var(--mbx-amber-050) 55%, #FFFDF7);
}
.mbx-hero--ink {
  background:
    radial-gradient(900px 420px at 86% 18%, rgba(78,197,193,.30), transparent 60%),
    radial-gradient(700px 380px at 6% 90%, rgba(232,155,43,.22), transparent 62%),
    linear-gradient(120deg, #35352F, #46463F);
}
/* Koyu slaytta metin acilir; ok/nokta renkleri ayrica ayarlanmiyor cunku
   onlar slaytin DISINDA, kendi zeminleri var. */
.mbx-hero--ink .mbx-hero__title { color: #FFFFFF; }
.mbx-hero--ink .mbx-hero__text { color: #D9D9D3; }
.mbx-hero--ink .mbx-hero__eyebrow { background: rgba(255,255,255,.14); color: #FFFFFF; }
.mbx-hero--ink .mbx-hero__motif { color: rgba(255,255,255,.10); }

.mbx-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--mbx-s6);
  padding-block: var(--mbx-s12);
}
.mbx-hero__body { flex: 1 1 auto; min-width: 0; max-width: 640px; }

.mbx-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--mbx-s3);
  padding: 4px 12px;
  border-radius: var(--mbx-r-pill);
  background: rgba(255,255,255,.7);
  font-size: var(--mbx-fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mbx-teal-800);
}
.mbx-hero__title {
  margin: 0 0 var(--mbx-s3);
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.12;
  color: var(--mbx-ink);
}
.mbx-hero__text {
  margin: 0 0 var(--mbx-s5);
  font-size: clamp(14px, 1.4vw, var(--mbx-fs-lg));
  line-height: 1.55;
  color: var(--mbx-ink-700);
  max-width: 52ch;
}

/* Dekoratif motif -- akoffice'teki urun fotografinin yerini tutar.
   aria-hidden ve pointer-events:none: ekran okuyucuya da fareye de gorunmez. */
.mbx-hero__motif {
  flex: 0 0 auto;
  font-size: clamp(90px, 13vw, 190px);
  line-height: 1;
  color: rgba(58,58,56,.08);
  pointer-events: none;
  user-select: none;
}

/* --- Gezinme -------------------------------------------------------------
   Oklar slaytin USTUNDE, kendi opak zeminleriyle: degrade uzerinde ok
   kayboluyordu. */
.mbx-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mbx-line);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--mbx-ink);
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--mbx-sh-1);
  transition: background .15s, transform .15s;
}
.mbx-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.mbx-hero__arrow--prev { inset-inline-start: var(--mbx-s4); }
.mbx-hero__arrow--next { inset-inline-end: var(--mbx-s4); }

.mbx-hero__dots {
  position: absolute;
  inset-inline: 0;
  bottom: var(--mbx-s4);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.mbx-hero__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(58,58,56,.28);
  cursor: pointer;
  transition: width .25s var(--mbx-ease), background .25s;
}
.mbx-hero__dot.is-active {
  width: 26px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-teal-700);
}

/* Dokunmatik dostu hedef: gorsel nokta 9px ama tiklanabilir alan 24px.
   WCAG 2.5.8 (hedef boyutu) icin sart. */
.mbx-hero__dot::before {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  margin: -7px 0 0 -7px;
}
.mbx-hero__dots { position: absolute; }
.mbx-hero__dot { position: relative; }

/* --- Banner alti ince serit --------------------------------------------- */
.mbx-herobar {
  border-bottom: 1px solid var(--mbx-line);
  background: var(--mbx-surface);
}
.mbx-herobar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--mbx-s2) var(--mbx-s3);
  padding-block: var(--mbx-s3);
}
.mbx-herobar__label {
  font-size: var(--mbx-fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mbx-ink-500);
}
.mbx-herobar__chips { display: flex; flex-wrap: wrap; gap: var(--mbx-s1); }
.mbx-herobar__spacer { flex: 1 1 auto; }

@media (max-width: 720px) {
  .mbx-hero__slide { min-height: 260px; }
  .mbx-hero__inner { padding-block: var(--mbx-s8); }
  .mbx-hero__motif { display: none; }   /* dar ekranda metinle cakisiyor */
  .mbx-hero__arrow { display: none; }   /* kaydirma zaten parmakla */
  .mbx-herobar__label { display: none; }
}

/* Hareket hassasiyeti: otomatik gecis JS tarafinda da duruyor (bkz. initHero),
   burada gecis animasyonu da kapatiliyor. */
@media (prefers-reduced-motion: reduce) {
  .mbx-hero__track { transition: none; }
}

/* ==========================================================================
   05b  UST YARDIMCI SERIT + DUYURU SERIDI  (akoffice.com.tr duzeni)
   ========================================================================== */

/* Islem baglantilari (siparis/iade/odeme) header'in USTUNDE ayri bir seritte.
   Header'a konulsalardi arama kutusu ve kategori menusuyle yer yarisina
   girerlerdi. Serit sticky DEGIL -- sayfa kayinca yukarida kalir. */
.mbx-topbar {
  background: var(--mbx-bg-alt);
  border-bottom: 1px solid var(--mbx-line);
  font-size: var(--mbx-fs-xs);
}
.mbx-topbar__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--mbx-s1) var(--mbx-s5);
  min-height: 34px;
  padding-block: 6px;
}
.mbx .mbx-topbar__row a { color: var(--mbx-ink-500); white-space: nowrap; }
.mbx .mbx-topbar__row a:hover { color: var(--mbx-teal-800); text-decoration: none; }
.mbx .mbx-topbar__accent { color: var(--mbx-amber-700); font-weight: 600; }
.mbx .mbx-topbar__accent:hover { color: var(--mbx-amber-800); }

/* --- Duyuru seridi ------------------------------------------------------
   Kesintisiz kayma: ayni grup IKI kez basilir, sarma noktasi tam olarak bir
   grup genisligi (-50%) olduğu icin gecis gorunmez. Tek kopyada animasyon
   basa sararken bosluk goze carpar. */
/* Cekmece icinde bolum basligi -- islem baglantilarini kategorilerden ayirir. */
.mbx-drill__sep {
  padding: var(--mbx-s4) var(--mbx-s4) var(--mbx-s2);
  font-size: var(--mbx-fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mbx-ink-500);
  border-top: 1px solid var(--mbx-line);
  margin-top: var(--mbx-s2);
}

.mbx-ticker {
  overflow: hidden;
  background: var(--mbx-teal-700);
  color: #fff;
  /* Serit sayfa yuklenirken sicramasin diye yuksekligi sabit. */
  height: 34px;
  display: flex;
  align-items: center;
}
.mbx-ticker__track {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  animation: mbx-ticker 38s linear infinite;
}
.mbx-ticker__group { display: flex; flex: 0 0 auto; }
.mbx-ticker__item {
  font-size: var(--mbx-fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  padding-inline: var(--mbx-s6);
  position: relative;
}
/* Ogeler arasi ayrac -- nokta, cizgi degil: cizgi metinle karisiyor. */
.mbx-ticker__item::after {
  content: "";
  position: absolute; inset-block: 0; inset-inline-end: 0;
  margin: auto 0;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.45);
}
@keyframes mbx-ticker { to { transform: translateX(-50%); } }

/* Hareket hassasiyeti: WCAG 2.3.3. Surekli kayan metin vestibuler
   rahatsizlik tetikleyebiliyor; tercih bildirmis kullanicida serit
   duruyor ve sabit metin okunuyor. */
@media (prefers-reduced-motion: reduce) {
  .mbx-ticker__track { animation: none; }
}

/* --- Mobil gorunum degistirici + liste duzeni (Avansas) -----------------
   Ayni ISARETLEME iki duzende de kullaniliyor; fark yalnizca CSS. Iki ayri
   partial yazilsaydi her degisiklik iki yerde yapilmak zorunda kalirdi. */
.mbx-viewtoggle {
  display: inline-flex;
  flex: 0 0 auto;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  overflow: hidden;
}
.mbx-viewtoggle__btn {
  width: 36px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  background: var(--mbx-surface);
  color: var(--mbx-ink-500);
  font-size: 17px;
  cursor: pointer;
}
.mbx-viewtoggle__btn + .mbx-viewtoggle__btn { border-inline-start: 1px solid var(--mbx-line); }
/* Aktif durum SAF CSS -- <html> sinifindan tureniyor, JS senkronu yok.
   Toolbar AJAX ile yeniden basildigi icin JS durumu her yenilemede koparadi. */
html:not(.mbx-view-list) .mbx-viewtoggle__btn[data-mbx-view="grid"],
html.mbx-view-list .mbx-viewtoggle__btn[data-mbx-view="list"] {
  background: var(--mbx-teal-100);
  color: var(--mbx-teal-800);
}

/* Adet sayaci -- her iki gorunumde de var. */
.mbx-cardqty {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  overflow: hidden;
  background: var(--mbx-surface);
}
.mbx-cardqty__btn {
  width: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  background: var(--mbx-bg-alt);
  color: var(--mbx-ink);
  font-size: 16px;
  cursor: pointer;
}
.mbx-cardqty__btn:active { background: var(--mbx-line); }
.mbx-cardqty__input {
  width: 38px;
  border: 0;
  border-inline: 1px solid var(--mbx-line);
  text-align: center;
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-md);
  font-weight: 700;
  color: var(--mbx-ink);
  background: var(--mbx-surface);
  min-width: 0;
}
.mbx-cardqty__input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--mbx-teal-300); }

/* Kart (izgara) gorunumu oranı. Onceden partial'da inline stildeydi ve
   liste gorunumunun kare oranini eziyordu. */
.mbx-mobile .mbx-card__media { aspect-ratio: 3 / 2; }

/* Sayac ve buton YAN YANA -- kartta da, listede de.
   Dar izgara sutunu OLCULDU: satirin ic genisligi 158px. Varsayilan sayac
   104px, "Sepete Ekle" 70px istiyor; toplam 174px > 158px, metin tasiyordu.
   Cozum ALT ALTA almak degil, kartta ikisini de DARALTMAK:
     sayac 24+30+24 = 78px  +  bosluk 6px  =  84px
     butona 74px kaliyor -> ikon + kisa etiket ("Ekle") sigiyor.
   Listede kart tam genislikte oldugu icin tam etiket kullanilir. */
.mbx-card__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.mbx-card__add {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  justify-content: center;
  gap: 5px;
  padding-inline: 8px;
}
/* Dar kartta kisa etiket; genis yerlerde tam etiket. */
.mbx-card__add-short { display: none; }

/* Izgara kartinda daraltilmis sayac. */
.mbx-grid--2 .mbx-cardqty__btn,
.mbx-grid--3 .mbx-cardqty__btn,
.mbx-grid--4 .mbx-cardqty__btn { width: 24px; font-size: 14px; }
.mbx-grid--2 .mbx-cardqty__input,
.mbx-grid--3 .mbx-cardqty__input,
.mbx-grid--4 .mbx-cardqty__input { width: 30px; font-size: var(--mbx-fs-sm); }
.mbx-grid--2 .mbx-card__add-long,
.mbx-grid--3 .mbx-card__add-long,
.mbx-grid--4 .mbx-card__add-long { display: none; }
.mbx-grid--2 .mbx-card__add-short,
.mbx-grid--3 .mbx-card__add-short,
.mbx-grid--4 .mbx-card__add-short { display: inline; }

/* LISTE gorunumu: kart tam genislikte, sayac ve tam etiket rahat sigiyor. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-cardqty__btn { width: 30px; font-size: 16px; }
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-cardqty__input { width: 38px; font-size: var(--mbx-fs-md); }
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__add-long { display: inline; }
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__add-short { display: none; }

/* --- LISTE gorunumu -----------------------------------------------------
   SONUC IZGARASINA (.mbx-grid--2) KILITLI. Once yalnizca
   `html.mbx-view-list .mbx-mobile .mbx-card` diye yaziliydi ve mobil
   sayfalardaki HER karti etkiliyordu: urun detayindaki "Benzer urunler"
   izgarasi (.mbx-grid--4, 171px kart) liste olculerini aliyor ve 106px
   tasiyordu (olculdu). */
html.mbx-view-list .mbx-mobile .mbx-grid--2 { grid-template-columns: 1fr; }

html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card {
  display: grid;
  /* gorsel | govde  ·  alt satir eylemler (iki sutunu da kapsar) */
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
}
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--mbx-r-sm);
  margin: var(--mbx-s3) 0 var(--mbx-s3) var(--mbx-s3);
}
/* 104px'lik kutuda varsayilan 12px ic bosluk gorseli 80px'e dusuruyordu. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__media > img { padding: 6px; }

/* ROZET GORSELI EZIYORDU: yigin sol USTTE ve tam genislikte, 104px'lik
   kutuda urunun ustunu kapatiyordu. Liste gorunumunde rozet kucultulup
   ALTA alindi -- urun fotograflarinin alt kismi genelde bos. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__badges {
  top: auto;
  bottom: 3px;
  inset-inline: 3px;
  align-items: stretch;
  gap: 2px;
}
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__badges .mbx-badge {
  padding: 1px 5px;
  font-size: 9px;
  line-height: 1.35;
  text-align: center;
  justify-content: center;
}
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__body {
  grid-column: 2;
  padding: var(--mbx-s3);
}
/* Eylem satiri .mbx-card__body ICINDE duruyor, kartin dogrudan grid cocugu
   DEGIL -- burada `grid-column: 1 / -1` yaziliydi ve hicbir sey yapmiyordu
   (olu kural). Satir bu yuzden sag sutunun genisligiyle sinirli: 358px'lik
   kartta 229px. Olculdu: sayac 110 + bosluk 6 + buton 89 = 205, ama butonun
   icerigi 91px istiyordu, metin 2px tasiyordu. Sayac daraltilarak cozuldu. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__cta {
  padding: var(--mbx-s3) 0 0;
  margin-top: var(--mbx-s2);
  border-top: 1px solid var(--mbx-line);
}
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__title { font-size: var(--mbx-fs-md); }
/* Liste satirinda urun adi 2 satirla sinirli kalmasin -- daha genis alan var. */
html.mbx-view-list .mbx-mobile .mbx-grid--2 .mbx-card__title.mbx-clamp-2 { -webkit-line-clamp: 3; }

/* Sabit alt satin alma bari: fiyat + sayac + Sepete Ekle. 390px'lik ekranda
   ic genislik ~358px; sayac daraltilmazsa buton metni tasiyor. */
.mbx-sticky-buy .mbx-cardqty { flex: 0 0 auto; }
.mbx-sticky-buy .mbx-cardqty__btn { width: 30px; font-size: 15px; }
.mbx-sticky-buy .mbx-cardqty__input { width: 34px; font-size: var(--mbx-fs-md); }
.mbx-sticky-buy [data-mbx-add-cart] { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
/* Cok dar ekranda fiyat blogu kucultulur -- satin alma yolu daralmasin. */
@media (max-width: 360px) {
  .mbx-sticky-buy .mbx-sticky-buy__price { font-size: var(--mbx-fs-md); }
  .mbx-sticky-buy .mbx-cardqty__btn { width: 26px; }
  .mbx-sticky-buy .mbx-cardqty__input { width: 30px; }
}

/* Urun detayindaki eylem satiri: sayac + Sepete Ekle + Sepete git.
   Sayac buton yuksekligine hizalanir; lg butonlarin yaninda kucuk kalmasin. */
.mbx-pdp__actions .mbx-cardqty { align-self: stretch; }
.mbx-pdp__actions .mbx-cardqty__btn { width: 40px; font-size: 18px; }
.mbx-pdp__actions .mbx-cardqty__input { width: 52px; font-size: var(--mbx-fs-lg); }

/* Dar ekranda sayac tam satir olur; yan yana uc oge sigmiyordu. */
@media (max-width: 560px) {
  .mbx-pdp__actions .mbx-cardqty { width: 100%; }
  .mbx-pdp__actions .mbx-cardqty__input { flex: 1 1 auto; width: auto; }
}

/* --- Teslimat gunu/saati paneli (Cicek Sepeti duzeni) -------------------
   Gun cipleri radiogroup: tek secim, klavye ile gezilebilir. */
.mbx-delivery {
  margin-top: var(--mbx-s5);
  padding: var(--mbx-s4);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  background: var(--mbx-surface);
}
.mbx-delivery__head {
  display: flex; align-items: center; gap: var(--mbx-s2);
  margin-bottom: var(--mbx-s3);
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
}
.mbx-delivery__head i { color: var(--mbx-teal-700); font-size: 19px; }

.mbx-delivery__days {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mbx-s2);
}
.mbx-delivery__day {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-surface);
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s, background .15s;
}
.mbx-delivery__day:hover { border-color: var(--mbx-teal-300); background: var(--mbx-teal-050); }
/* Secili gun: teal DOLGU degil -- teal uzerine beyaz 2.1:1, WCAG AA alti. */
.mbx-delivery__day.is-active {
  border-color: var(--mbx-teal-600);
  background: var(--mbx-teal-050);
  box-shadow: inset 0 0 0 1px var(--mbx-teal-600);
}
.mbx-delivery__day-name {
  font-weight: 700; font-size: var(--mbx-fs-md); color: var(--mbx-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.mbx-delivery__day-date { font-size: var(--mbx-fs-xs); color: var(--mbx-ink-500); }

.mbx-delivery__slots { margin-top: var(--mbx-s3); }
.mbx-delivery__slot-label {
  display: block; margin-bottom: 6px;
  font-size: var(--mbx-fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--mbx-ink-500);
}
.mbx-delivery__slot {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-surface);
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
}
.mbx-delivery__slot:focus-visible { outline: none; box-shadow: var(--mbx-ring); border-color: var(--mbx-teal-500); }

.mbx-delivery__countdown {
  display: flex; align-items: flex-start; gap: var(--mbx-s2);
  margin-top: var(--mbx-s3);
  padding: var(--mbx-s3);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-success-bg);
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-700);
}
.mbx-delivery__countdown i { color: var(--mbx-success); font-size: 18px; flex: 0 0 auto; }
.mbx-delivery__countdown b { display: block; color: var(--mbx-ink); }

.mbx-delivery__note {
  display: flex; align-items: flex-start; gap: var(--mbx-s2);
  margin-top: var(--mbx-s3);
  padding: var(--mbx-s3);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-bg-alt);
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-700);
}
.mbx-delivery__note i { color: var(--mbx-info); font-size: 17px; flex: 0 0 auto; }

/* Yasal not kucuk ama GIZLI DEGIL: teslimat suresinin tahmini oldugunu ve
   secimin siparise islenmedigini soyleyen tek yer burasi. */
.mbx-delivery__legal {
  margin: var(--mbx-s3) 0 0;
  font-size: var(--mbx-fs-2xs);
  line-height: 1.5;
  color: var(--mbx-ink-500);
}

/* --- Kategori nav cubugu + mega paneller (akoffice.com.tr duzeni) --------
   Cubuk: ust duzey kategoriler yan yana, her biri kendi TAM GENISLIKTE
   panelini aciyor. Tek bir "Kategoriler" dugmesi + tek panel yerine
   kategori basina panel -- hedefe iki degil bir hamlede varliyor.

   Renkler bilincli olarak akoffice'ten ALINMADI (onlar #f78f1e turuncu /
   #4f4f4f gri). Merhabox'in teal+amber kimligi butonlar, rozetler, footer
   ve mobil yiginin tamamina islemis durumda; menuyu turuncuya cevirmek
   siteyi ikiye bolerdi. Kopyalanan sey DUZEN ve ETKILESIM. */
.mbx-nav {
  position: relative;              /* panellerin top:100% dayanagi */
  border-top: 1px solid var(--mbx-line);
  background: var(--mbx-surface);
}
.mbx-nav__row {
  display: flex;
  align-items: center;
  gap: var(--mbx-s4);
  min-width: 0;
}
.mbx-nav__list {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* position:static ZORUNLU: panel .mbx-nav'a (relative olan) gore konumlanmali.
   li'ye relative verilirse panel o li'nin genisligine hapsolur.

   OLCU KURALLARI BURADA, <a>'DA DEGIL. Daralan sey flex ogesi olan <li>;
   genislik siniri <a>'ya verildiginde li daraliyor ama <a> daralmayip
   disina tasiyor ve komsusunun ustune biniyordu (olculdu: 1280px'te 20px
   tasma, 1000px'te sayfada 5px yatay kaydirma). */
.mbx-nav__item { position: static; min-width: 0; max-width: 200px; }
/* "Tum Kategoriler" tum katalogun kapisi -- daralmaz. */
.mbx-nav__item:first-child { flex: 0 0 auto; max-width: none; }

.mbx .mbx-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--mbx-navbar-h);
  padding-inline: var(--mbx-s3);
  border: 0;
  background-color: transparent;
  color: var(--mbx-ink-700);
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  width: 100%;         /* li daralinca birlikte daralsin (bkz. .mbx-nav__item notu) */
  min-width: 0;
  overflow: hidden;
  cursor: pointer;

  /* akoffice'in alti-cizgi buyume animasyonu: gradyani 0 genislikte bir
     arka plan olarak tutup background-size'i gecise sokuyor. Gercek bir
     border-bottom ile bu yumusaklik elde edilemez. */
  background-image: linear-gradient(0deg, var(--mbx-teal-500), var(--mbx-teal-500));
  background-repeat: no-repeat;
  background-position: 100% calc(100% - 12px);
  background-size: 0 2px;
  transition: background-size .25s var(--mbx-ease), color .15s;
}
.mbx .mbx-nav__link:hover,
.mbx .mbx-nav__link[aria-expanded="true"] {
  color: var(--mbx-teal-800);
  text-decoration: none;
  background-size: calc(100% - var(--mbx-s6)) 2px;
  background-position-x: var(--mbx-s3);
}
/* Flex ogesinin varsayilan min-width:auto'su ellipsis'i engeller. */
.mbx-nav__link > .mbx-truncate { min-width: 0; }
.mbx-nav__caret { font-size: 15px; opacity: .55; transition: transform .2s var(--mbx-ease); }
.mbx-nav__link[aria-expanded="true"] .mbx-nav__caret { transform: rotate(180deg); opacity: 1; }

/* "Tum Kategoriler" -- cubuga sigmayan koklerin tek kapisi, gorsel olarak ayri. */
.mbx .mbx-nav__link--all {
  gap: 7px;
  margin-inline-end: var(--mbx-s2);
  padding-inline: var(--mbx-s4);
  color: var(--mbx-teal-800);
  background-image: none;
  position: relative;
}
.mbx-nav__link--all::after {
  content: "";
  position: absolute; inset-block: 9px; inset-inline-end: 0;
  width: 1px; background: var(--mbx-line);
}
.mbx-nav__link--all i:first-child { font-size: 17px; }
.mbx .mbx-nav__link--all:hover,
.mbx .mbx-nav__link--all[aria-expanded="true"] { background-color: var(--mbx-teal-050); }

.mbx-nav__extra { display: flex; align-items: center; gap: var(--mbx-s1); flex: 0 0 auto; }
.mbx .mbx-nav__pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  border-radius: var(--mbx-r-pill);
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
  color: var(--mbx-ink-700);
  white-space: nowrap;
}
.mbx .mbx-nav__pill:hover { background: var(--mbx-teal-050); color: var(--mbx-teal-800); text-decoration: none; }
.mbx .mbx-nav__pill--accent { color: var(--mbx-amber-700); }
.mbx .mbx-nav__pill--accent:hover { background: var(--mbx-amber-050); color: var(--mbx-amber-800); }

/* --- Panel --------------------------------------------------------------
   display:none DEGIL: display animasyona girmez, akoffice'in yumusak acilisi
   ancak visibility+opacity ile olur. Kapaliyken pointer-events:none de sart --
   aksi halde gorunmez panel altindaki icerigin tiklamasini yutar. */
.mbx-mega {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  width: 100%;
  background: var(--mbx-surface);
  border-top: 1px solid var(--mbx-line);
  box-shadow: var(--mbx-sh-3);
  z-index: var(--mbx-z-mega);
  padding-block: var(--mbx-s8);

  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .22s var(--mbx-ease), transform .22s var(--mbx-ease), visibility .22s;
}
.mbx-mega.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Izgara + sagdaki kart: akoffice'in `flex w-full gap-x-12` duzeni. */
.mbx-mega__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--mbx-s12);
}

/* BOY SINIRI ZORUNLU: en kalabalik kok 23 alt kategori tasiyor ve "Tum
   Kategoriler" paneli 36 grubun tamamini basiyor. Sinirsiz birakilirsa panel
   ekrani bastan asagi kaplar. Tasan kisim panelin KENDI icinde kaydirilir. */
.mbx-mega__cols,
.mbx-mega__tiles {
  max-height: min(62vh, 520px);
  overflow-y: auto;
  /* overflow-x'i ACIKCA hidden yapmak ZORUNLU. CSS'te bir eksen `visible`
     degilse digeri de `auto`ya hesaplanir; yani yalniz overflow-y verince
     overflow-x da `auto` oluyordu ve asagidaki .mbx-mega__link'in
     margin-inline:-10px tasmasi YATAY KAYDIRMA CUBUGU cikariyordu
     (olculdu: scrollWidth - clientWidth = 10px). */
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* Alt kategoriler: sutun sayisini Razor `--mbx-mega-cols` ile veriyor --
   3 alt kategorili kok 6 sutuna dagilip tek satirda kaybolmasin. */
.mbx-mega__cols {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--mbx-mega-cols, 4), minmax(0, 1fr));
  gap: 2px var(--mbx-s6);
  align-content: start;
  /* Link'lerin -10px tasmasina kaydirma kutusunun ICINDE yer ac; negatif
     dis bosluk da bunu geri alsin ki metin kabin kenariyla hizali kalsin. */
  padding-inline: 10px;
  margin-inline: -10px;
}

.mbx .mbx-mega__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mbx-s2);
  padding: 7px 10px;
  margin-inline: -10px;
  border-radius: var(--mbx-r-sm);
  color: var(--mbx-ink-700);
  font-size: var(--mbx-fs-sm);
  line-height: 1.35;
}
.mbx .mbx-mega__link:hover {
  background: var(--mbx-teal-050);
  color: var(--mbx-teal-800);
  text-decoration: none;
}
.mbx .mbx-mega__link--more { color: var(--mbx-teal-700); font-weight: 600; }
.mbx-mega__count {
  flex: 0 0 auto;
  font-size: var(--mbx-fs-2xs);
  font-weight: 600;
  color: var(--mbx-ink-500);
  background: var(--mbx-bg-alt);
  border-radius: var(--mbx-r-pill);
  padding: 1px 7px;
}

/* Sagdaki kart -- ana kategorinin kendi listesine giden yol acik kalsin. */
.mbx-mega__promo {
  flex: 0 0 224px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--mbx-s2);
  padding: var(--mbx-s5);
  border-radius: var(--mbx-r-md);
  background: linear-gradient(160deg, var(--mbx-teal-050), var(--mbx-bg-alt));
  border: 1px solid var(--mbx-line);
}
.mbx-mega__promo-icon {
  width: 44px; height: 44px;
  border-radius: var(--mbx-r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--mbx-surface);
}
.mbx .mbx-mega__promo-title {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
  line-height: 1.25;
}
.mbx-mega__promo-text { font-size: var(--mbx-fs-xs); color: var(--mbx-ink-500); }
.mbx-mega__promo .mbx-btn { margin-top: var(--mbx-s1); }

/* "Tum Kategoriler" paneli -- 36 kokun kutucuk izgarasi.
   Grup basligi + alt kategoriler seklinde basildiginda tek basina 190
   baglanti / ~55 KB ham HTML ediyordu; sunucuda dinamik sikistirma kapali
   oldugu icin bu her sayfa goruntulemede tam bedel demekti. Kutucuk duzeni
   hem daha okunakli hem 5 kat hafif. */
.mbx-mega__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: var(--mbx-s2) var(--mbx-s4);
  align-content: start;
}
.mbx .mbx-mega__tile {
  display: flex;
  align-items: center;
  gap: var(--mbx-s3);
  min-width: 0;
  padding: var(--mbx-s2);
  border-radius: var(--mbx-r-sm);
  border: 1px solid transparent;
  color: var(--mbx-ink);
}
.mbx .mbx-mega__tile:hover {
  background: var(--mbx-surface);
  border-color: var(--mbx-teal-200);
  box-shadow: var(--mbx-sh-1);
  text-decoration: none;
}
.mbx-mega__tile-body { display: flex; flex-direction: column; min-width: 0; }
.mbx .mbx-mega__tile-name {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: var(--mbx-fs-sm);
  line-height: 1.25;
}
.mbx-mega__tile-meta { font-size: var(--mbx-fs-2xs); color: var(--mbx-ink-500); }

.mbx-mega__tile-icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
}

/* Ikon tonlari -- mobil drill-down ile ayni eslestirici (KategoriGorseli.Ton). */
.mbx-mega--t0 { background: var(--mbx-teal-050);  color: var(--mbx-teal-800); }
.mbx-mega--t1 { background: var(--mbx-amber-050); color: var(--mbx-amber-800); }
.mbx-mega--t2 { background: #EDF1FB;              color: #34518F; }
.mbx-mega--t3 { background: #F5EEFB;              color: #6B3E96; }
.mbx-mega--t4 { background: #EAF6EE;              color: #24734A; }
.mbx-mega--t5 { background: #FBECEC;              color: #A03A32; }

/* NOT: Buraya bir `.mbx-mega-backdrop` katmanı eklenmişti, KALDIRILDI.
   Mega menü <header> içinde ve header'ın kendi yığın bağlamı var; body'ye
   eklenen tam ekran katman menünün üstünde kalıyor, şeffaf olduğu için
   görünmüyor ama menünün kaydırmasını ve kategori tıklamasını yutuyordu.
   Dışarı tıklama merhabox.js'teki document dinleyicisiyle çözülüyor;
   panelin sınırını da kendi gölgesi (sh-3) belli ediyor. Perde gereksiz. */


/* --- Kategori kutucuğu (anasayfa şeridi) -------------------------------- */
/* İkon, adın yanında düz bir glif yerine renkli bir kare içinde duruyor —
   kategoriler birbirinden ayrışıyor ve şerit "süslenmiş" görünüyor.
   Renk tonu kategori ADINDAN türetilir (KategoriGorseli.Ton), yani aynı
   kategori her sayfada aynı rengi alır; sıraya bağlı olsaydı sayfa
   değiştikçe renk oynardı. */
.mbx-cattile__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--mbx-r-sm);
  font-size: 19px;
  background: var(--mbx-teal-050);
  color: var(--mbx-teal-700);
}
.mbx-cattile--t0 .mbx-cattile__icon { background: var(--mbx-teal-050);  color: var(--mbx-teal-700); }
.mbx-cattile--t1 .mbx-cattile__icon { background: var(--mbx-amber-050); color: var(--mbx-amber-800); }
.mbx-cattile--t2 .mbx-cattile__icon { background: #EAF1FB;              color: #2C5AA0; }
.mbx-cattile--t3 .mbx-cattile__icon { background: #F0EDFA;              color: #5B4B9E; }
.mbx-cattile--t4 .mbx-cattile__icon { background: #EAF6EE;              color: #24734A; }
.mbx-cattile--t5 .mbx-cattile__icon { background: #FBECEC;              color: #A03A32; }


/* ==========================================================================
   07  KONUM
   ========================================================================== */

.mbx-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-surface);
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
  color: var(--mbx-ink);
  cursor: pointer;
  white-space: nowrap;
}
.mbx-city-chip:hover { border-color: var(--mbx-teal-500); background: var(--mbx-teal-050); color: var(--mbx-ink); text-decoration: none; }
.mbx-city-chip i:first-child { color: var(--mbx-teal-600); font-size: 16px; }
/* İl seçilmemişse dikkat çeksin.
   amber-700/amber-050 4.02:1 ölçüldü (AA altı) → amber-800 ile ~6:1 */
.mbx-city-chip.is-empty {
  border-color: var(--mbx-amber-300);
  background: var(--mbx-amber-050);
  color: var(--mbx-amber-800);
}
.mbx-city-chip.is-empty i:first-child { color: var(--mbx-amber-700); }

/* İlk ziyaret şeridi */
.mbx-locbar {
  display: flex;
  align-items: center;
  gap: var(--mbx-s3);
  padding: 10px 0;
  background: var(--mbx-teal-050);
  border-bottom: 1px solid var(--mbx-teal-100);
  font-size: var(--mbx-fs-sm);
}
.mbx-locbar__text { flex: 1 1 auto; color: var(--mbx-teal-800); font-weight: 600; }
.mbx-locbar__close { margin-inline-start: var(--mbx-s2); }

/* İl seçici içeriği (modal ve bottom-sheet ortak kullanır) */
.mbx-citypick__search { margin-bottom: var(--mbx-s4); }
.mbx-citypick__popular { display: flex; flex-wrap: wrap; gap: var(--mbx-s2); margin-bottom: var(--mbx-s5); }
.mbx-citypick__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
}
.mbx-citypick__item {
  padding: 9px 12px;
  border-radius: var(--mbx-r-xs);
  color: var(--mbx-ink);
  font-size: var(--mbx-fs-md);
  cursor: pointer;
}
.mbx-citypick__item:hover { background: var(--mbx-teal-050); color: var(--mbx-teal-800); text-decoration: none; }
.mbx-citypick__item.is-selected { background: var(--mbx-teal-600); color: #fff; font-weight: 600; }
.mbx-citypick__empty { padding: var(--mbx-s6); text-align: center; color: var(--mbx-ink-500); }


/* ==========================================================================
   08  ÜRÜN KARTI + GRID
   ========================================================================== */

.mbx-grid { display: grid; gap: var(--mbx-s4); }
.mbx-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mbx-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mbx-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mbx-grid--auto { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

@media (max-width: 1100px) { .mbx-grid--4 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px)  { .mbx-grid--4, .mbx-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .mbx-grid--auto { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--mbx-s3); } }

.mbx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  overflow: hidden;
  transition: border-color .18s var(--mbx-ease), box-shadow .18s var(--mbx-ease), transform .18s var(--mbx-ease);
}
.mbx-card:hover {
  border-color: var(--mbx-teal-300);
  box-shadow: var(--mbx-sh-2);
  transform: translateY(-2px);
}

/* İlinde teklifi olmayan ürün — görünür ve sepete eklenebilir, sadece sakinleştirilmiş */
.mbx-card.is-other-city .mbx-card__media { opacity: .82; }

/* GÖRSEL KUTUSU — KATMANLI, FLEX DEĞİL.
   Önceki kurgu `display:flex` idi ve görsel ile rozet konteyneri KARDEŞ flex
   öğesi olarak yan yana diziliyordu: görsel kutuyu doldurmuyor, rozet de
   görselin sağında kalıp `overflow:hidden` ile kırpılıyordu.
   Artık her iki çocuk da `position:absolute; inset:0` ile ÜST ÜSTE binen
   katmanlar — kardeş akışı diye bir şey kalmadığı için görselin oturması
   rozetin var olup olmamasına bağlı değil. */
.mbx-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mbx-bg-alt);
  display: block;
  overflow: hidden;
}
.mbx-card__media > img,
.mbx-card__media > .mbx-card__media-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mbx-card__media > img {
  object-fit: contain;
  object-position: center;
  padding: var(--mbx-s3);
  /* Görsel şeffafsa arkadaki gri değil beyaz görünsün — ürün fotoğrafları
     genelde beyaz fonlu, gri zemin üzerinde kirli duruyordu. */
  background: #fff;
}
/* GÖRSELİ OLMAYAN ÜRÜN: jenerik "kırık resim" ikonu yerine yumuşak marka yazısı.
   Boş kutu ürünü eksik/arızalı gösteriyordu; soluk bir Merhabox imzası
   boşluğu markaya çeviriyor. Kontrast bilerek düşük — kartın asıl içeriği
   olan ad ve fiyatla yarışmamalı. */
.mbx-card__media > .mbx-card__media-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(160deg, var(--mbx-teal-050), var(--mbx-bg-alt));
  user-select: none;
}
.mbx-card__media-empty__mark {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: clamp(15px, 13%, 22px);
  letter-spacing: -.02em;
  line-height: 1;
  opacity: .55;
}
.mbx-card__media-empty__mark b { font-weight: 800; color: var(--mbx-teal-600); }
.mbx-card__media-empty__mark i { font-style: normal; color: var(--mbx-amber-500); }
.mbx-card__media-empty__note {
  font-size: var(--mbx-fs-2xs);
  color: var(--mbx-ink-300);
  letter-spacing: .02em;
}

.mbx-card__badges {
  position: absolute;
  top: var(--mbx-s2); inset-inline-start: var(--mbx-s2);
  z-index: 2;                              /* görsel katmanının üstünde */
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none;
  /* Rozet kutunun dışına taşıp kırpılmasın; uzun metin alt satıra insin. */
  max-width: calc(100% - (var(--mbx-s2) * 2));
}
.mbx-card__badges .mbx-badge { max-width: 100%; white-space: normal; text-align: start; }

.mbx-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: var(--mbx-s3); gap: 5px; }

.mbx-card__brand {
  font-size: var(--mbx-fs-2xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mbx-teal-700);
}
/* ÖZGÜLLÜK NOTU: başlık bir <h3> ve `.mbx h3` (0,1,1) tek sınıflı
   `.mbx-card__title`'ı (0,1,0) yeniyordu — kart başlıkları gövde ölçüsü yerine
   2xl boyutunda çıkıyor, `min-height` iki kırpılmış satırdan uzun kaldığı için
   üçüncü satırın tepesi kartta yarım görünüyordu. Seçici `.mbx` ile
   nitelenerek (0,2,0) kural sahibine geri verildi.
   Aynı tuzak daha önce `.mbx a` ile buton renklerinde de yaşandı. */
.mbx .mbx-card__title {
  font-family: var(--mbx-ff-body);
  /* Kırtasiye ürün adları uzun ("ARTDECO AKRİLİK BOYA 140 ML SU YEŞİL 070R-3662").
     Gövde ölçüsünden bir tık küçük + 3 satır, adların büyük çoğunluğunu
     KIRPMADAN sığdırıyor. 2 satırda neredeyse her ad "…" ile bitiyordu. */
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--mbx-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Tam olarak üç satır: line-height ile AYNI çarpan (3 × 1.35).
     Farklı bir değer, kırpılan satırın tepesini kutuda görünür bırakıyordu.
     min ve max birlikte: kısa adlarda da kart yükseklikleri hizalı kalsın. */
  min-height: 4.05em;
  max-height: 4.05em;
  /* Uzun tek parça kodlar kutuyu yatayda zorlamasın. */
  overflow-wrap: anywhere;
}
.mbx .mbx-card:hover .mbx-card__title { color: var(--mbx-teal-800); }
.mbx-card__code { font-size: var(--mbx-fs-xs); color: var(--mbx-ink-300); font-variant-numeric: tabular-nums; }

.mbx-card__meta {
  font-size: var(--mbx-fs-xs);
  color: var(--mbx-ink-500);
  display: flex; align-items: center; gap: 5px;
}
.mbx-card__meta i { font-size: 14px; }
.mbx-card__meta--city { color: var(--mbx-success); font-weight: 600; }
.mbx-card__meta--other { color: var(--mbx-amber-700); font-weight: 600; }

.mbx-card__price-wrap { margin-top: auto; padding-top: var(--mbx-s2); }
.mbx-card__price-from { font-size: var(--mbx-fs-2xs); color: var(--mbx-ink-300); display: block; }
.mbx-card__price {
  font-family: var(--mbx-ff-display);
  font-size: var(--mbx-fs-xl);
  font-weight: 800;
  color: var(--mbx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.mbx-card__price-note { font-size: var(--mbx-fs-2xs); color: var(--mbx-ink-300); }
/* Teklifi olmayan ürün: fiyat yok, 0 TL YAZMA */
.mbx-card__price--none { font-size: var(--mbx-fs-md); font-weight: 600; color: var(--mbx-ink-300); }

.mbx-card__cta { margin-top: var(--mbx-s3); }

/* Kartın tamamını tıklanabilir yapan bağlantı — butonlar üstte kalır */
.mbx-card__link { position: absolute; inset: 0; z-index: 1; }

/* CTA akış içinde duran bir öğe; üste çıkması için `relative` yeterli. */
.mbx-card__cta { position: relative; z-index: 2; }

/* ROZET BURAYA DAHİL EDİLMEZ.
   Eskiden `.mbx-card__cta, .mbx-card__badges { position: relative }` şeklinde
   tek kuralda toplanmıştı; bu satır dosyada daha SONRA geldiği için rozetin
   kendi `position: absolute` kuralını (aynı özgüllük) eziyordu. Sonuç: rozet
   akışa geri dönüp görselle KARDEŞ öğe oluyor, görseli kutunun içinde yana
   itiyor ve kendisi de kırpılıyordu — "resim oturmuyor" şikâyetinin kaynağı.
   Rozet zaten `absolute`; ona sadece yığın sırası gerekiyor. */
.mbx-card__badges { z-index: 2; }


/* ==========================================================================
   09  FİLTRELER + SIRALAMA
   ========================================================================== */

.mbx-layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--mbx-s6);
  align-items: start;
}
@media (max-width: 992px) { .mbx-layout { grid-template-columns: minmax(0,1fr); } .mbx-filters { display: none; } }

.mbx-filters {
  position: sticky;
  top: calc(var(--mbx-header-h) + var(--mbx-s4));
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  padding: var(--mbx-s4);
  max-height: calc(100vh - var(--mbx-header-h) - var(--mbx-s8));
  overflow-y: auto;
}
.mbx-filters__group + .mbx-filters__group { margin-top: var(--mbx-s5); padding-top: var(--mbx-s5); border-top: 1px solid var(--mbx-line); }
.mbx-filters__title {
  font-family: var(--mbx-ff-display);
  font-size: var(--mbx-fs-md);
  font-weight: 800;
  margin-bottom: var(--mbx-s3);
}
.mbx-filters__chips { display: flex; flex-wrap: wrap; gap: var(--mbx-s2); }
.mbx-filters__chip {
  padding: 6px 12px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-pill);
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-700);
  background: var(--mbx-surface);
  cursor: pointer;
}
.mbx-filters__chip:hover { border-color: var(--mbx-teal-500); color: var(--mbx-teal-800); text-decoration: none; }
.mbx-filters__chip.is-active { background: var(--mbx-teal-600); border-color: var(--mbx-teal-600); color: #fff; }

.mbx-filters__range { display: flex; align-items: center; gap: var(--mbx-s2); }
.mbx-filters__range input { width: 100%; }

/* --- Siralama cipleri (akoffice duzeni) ---------------------------------
   Acilir kutu yerine yatay cip serisi: secenekler tiklanmadan gorunuyor.
   Dar ekranda yatay kayar; kaydirma cubugu gizli, sag kenardaki solma
   kesildigini belli ediyor. */
.mbx-sortchips {
  display: flex;
  align-items: center;
  gap: var(--mbx-s1);
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 24px);
          mask-image: linear-gradient(to left, transparent 0, #000 24px);
}
.mbx-sortchips::-webkit-scrollbar { display: none; }
.mbx-sortchips__item {
  flex: 0 0 auto;
  padding: 7px 14px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-surface);
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
  color: var(--mbx-ink-700);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.mbx-sortchips__item:hover {
  background: var(--mbx-teal-050);
  border-color: var(--mbx-teal-300);
  color: var(--mbx-teal-800);
}
/* Secili cip: dolgu + koyu metin. Teal dolgu uzerine beyaz 2.1:1 kaliyor
   (WCAG AA alti) -- bu yuzden acik teal zemin + teal-800 metin. */
.mbx-sortchips__item.is-active {
  background: var(--mbx-teal-100);
  border-color: var(--mbx-teal-600);
  color: var(--mbx-teal-800);
}

.mbx-toolbar {
  display: flex;
  align-items: center;
  gap: var(--mbx-s3);
  flex-wrap: wrap;
  margin-bottom: var(--mbx-s4);
}
.mbx-toolbar__count { font-size: var(--mbx-fs-md); color: var(--mbx-ink-500); }
.mbx-toolbar__count b { color: var(--mbx-ink); font-weight: 700; }
.mbx-toolbar__spacer { flex: 1 1 auto; }

/* Mobilde alt kategori çipleri sayfa gövdesinden filtre sayfasına taşındı;
   bu rozet, o dalın altında kaç kategori olduğunu düğmeden haber verir. */
.mbx-toolbar__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  margin-inline-start: 6px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-teal-600); color: #fff;
  font-size: var(--mbx-fs-2xs); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Alt kategori çipinde ürün sayısı — ad ile yarışmasın diye sessiz. */
.mbx-filters__chip-count {
  margin-inline-start: 6px;
  color: var(--mbx-ink-300);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.mbx-sort:focus-visible { outline: none; border-color: var(--mbx-teal-500); box-shadow: var(--mbx-ring); }

.mbx-active-filters { display: flex; flex-wrap: wrap; gap: var(--mbx-s2); margin-bottom: var(--mbx-s4); }
.mbx-active-filters__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-teal-050);
  color: var(--mbx-teal-800);
  font-size: var(--mbx-fs-sm);
  font-weight: 600;
}
.mbx-active-filters__x { cursor: pointer; opacity: .7; font-size: 15px; }
.mbx-active-filters__x:hover { opacity: 1; }


/* ==========================================================================
   10  SAYFALAMA
   ========================================================================== */

.mbx-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mbx-s1);
  margin-top: var(--mbx-s8);
  flex-wrap: wrap;
}
.mbx-pager__item {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-surface);
  font-size: var(--mbx-fs-md);
  font-weight: 600;
  color: var(--mbx-ink);
  font-variant-numeric: tabular-nums;
}
.mbx-pager__item:hover { border-color: var(--mbx-teal-500); background: var(--mbx-teal-050); color: var(--mbx-teal-800); text-decoration: none; }
.mbx-pager__item.is-active { background: var(--mbx-teal-600); border-color: var(--mbx-teal-600); color: #fff; }
.mbx-pager__item.is-disabled { opacity: .4; pointer-events: none; }
.mbx-pager__gap { padding: 0 6px; color: var(--mbx-ink-300); }

.mbx-loadmore { display: flex; justify-content: center; margin-top: var(--mbx-s6); }


/* ==========================================================================
   11  ÜRÜN DETAY + TEKLİF LİSTESİ
   ========================================================================== */

.mbx-pdp { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mbx-s8); align-items: start; }
@media (max-width: 900px) { .mbx-pdp { grid-template-columns: minmax(0,1fr); gap: var(--mbx-s5); } }

.mbx-gallery__main {
  aspect-ratio: 1 / 1;
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mbx-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: var(--mbx-s5); }
.mbx-gallery__thumbs { display: flex; gap: var(--mbx-s2); margin-top: var(--mbx-s3); overflow-x: auto; scrollbar-width: none; }
.mbx-gallery__thumbs::-webkit-scrollbar { display: none; }
.mbx-gallery__thumb {
  flex: 0 0 auto;
  width: 68px; height: 68px;
  border: 1.5px solid var(--mbx-line);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-surface);
  padding: 5px;
  cursor: pointer;
}
.mbx-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mbx-gallery__thumb.is-active { border-color: var(--mbx-teal-500); box-shadow: var(--mbx-ring); }

.mbx-pdp__brand { font-size: var(--mbx-fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mbx-teal-700); }
/* Ürün adı: sabit 29px + h1'in 800 ağırlığı, telefonda çok iriydi. Ürün adları
   veritabanından TAMAMEN BÜYÜK HARF geldiği için satır sayısı da şişiyor ve
   fiyat/sepet alanı ekranın altına itiliyordu ("TANEX A4 180 gr. FOTOĞRAF
   KAĞIDI 25 Lİ" telefonda üç satır sürüyordu).
   Akışkan ölçek: ~390px ekranda 20px, masaüstünde eski 29px'e kadar çıkar;
   ayrı bir mobil kuralı gerektirmez. Ağırlık 800 -> 700, ürün adı bir başlıktan
   çok etikettir; -.015em harf aralığı büyük harflerde sıkışık duruyordu. */
.mbx-pdp__title {
  font-size: clamp(20px, 5vw, var(--mbx-fs-3xl));
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
  margin: var(--mbx-s2) 0;
  overflow-wrap: anywhere;
}
.mbx-pdp__code { font-size: var(--mbx-fs-sm); color: var(--mbx-ink-500); font-variant-numeric: tabular-nums; }

.mbx-pdp__pricebox {
  margin-top: var(--mbx-s5);
  padding: var(--mbx-s5);
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
}
.mbx-pdp__price-from { font-size: var(--mbx-fs-sm); color: var(--mbx-ink-500); }
.mbx-pdp__price {
  font-family: var(--mbx-ff-display);
  font-size: var(--mbx-fs-4xl);
  font-weight: 800;
  color: var(--mbx-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.mbx-pdp__price-tax { font-size: var(--mbx-fs-xs); color: var(--mbx-ink-500); }
.mbx-pdp__offer-count { font-size: var(--mbx-fs-md); color: var(--mbx-ink-700); margin-top: var(--mbx-s2); }

/* Anonim: satıcı unvanı gösterilmez, sadece il özeti */
.mbx-pdp__citysum {
  margin-top: var(--mbx-s4);
  padding: var(--mbx-s4);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-bg-alt);
  font-size: var(--mbx-fs-md);
}
.mbx-pdp__citysum-row { display: flex; align-items: center; gap: var(--mbx-s2); }
.mbx-pdp__citysum-row + .mbx-pdp__citysum-row { margin-top: var(--mbx-s2); }
.mbx-pdp__citysum-row i { font-size: 18px; }
.mbx-pdp__citysum-row--in i { color: var(--mbx-success); }
.mbx-pdp__citysum-row--out i { color: var(--mbx-amber-500); }

.mbx-pdp__actions { display: flex; gap: var(--mbx-s3); margin-top: var(--mbx-s5); }

.mbx-specs { width: 100%; border-collapse: collapse; margin-top: var(--mbx-s5); font-size: var(--mbx-fs-md); }
.mbx-specs th, .mbx-specs td { padding: 11px var(--mbx-s3); border-bottom: 1px solid var(--mbx-line); text-align: start; vertical-align: top; }
.mbx-specs th { width: 38%; font-weight: 600; color: var(--mbx-ink-500); }

.mbx-oem-list { display: flex; flex-wrap: wrap; gap: var(--mbx-s2); }
.mbx-oem-list code {
  padding: 4px 10px;
  border-radius: var(--mbx-r-xs);
  background: var(--mbx-bg-alt);
  color: var(--mbx-ink);
  font-size: var(--mbx-fs-sm);
  font-variant-numeric: tabular-nums;
}

/* Teklif listesi — yalnız giriş yapmış kullanıcı */
.mbx-offers { border: 1px solid var(--mbx-line); border-radius: var(--mbx-r-md); overflow: hidden; background: var(--mbx-surface); }
.mbx-offer-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: var(--mbx-s4);
  padding: var(--mbx-s4);
}
.mbx-offer-row + .mbx-offer-row { border-top: 1px solid var(--mbx-line); }
.mbx-offer-row--best { background: var(--mbx-teal-050); }
.mbx-offer-row--other-city { background: var(--mbx-warn-bg); }
.mbx-offer-row__store { font-weight: 700; }
.mbx-offer-row__city { font-size: var(--mbx-fs-sm); color: var(--mbx-ink-500); }
.mbx-offer-row__price { font-family: var(--mbx-ff-display); font-size: var(--mbx-fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .mbx-offer-row { grid-template-columns: minmax(0,1fr) auto; row-gap: var(--mbx-s2); } }

/* Giriş duvarı */
.mbx-gate {
  margin-top: var(--mbx-s4);
  padding: var(--mbx-s5);
  border: 1px dashed var(--mbx-line-strong);
  border-radius: var(--mbx-r-md);
  text-align: center;
  background: var(--mbx-bg-alt);
}
.mbx-gate__text { color: var(--mbx-ink-500); margin-bottom: var(--mbx-s3); }


/* ==========================================================================
   12  SEPET + CHECKOUT
   ========================================================================== */

.mbx-cart-line {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr) auto auto;
  gap: var(--mbx-s4);
  align-items: center;
  padding: var(--mbx-s4);
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
}
.mbx-cart-line + .mbx-cart-line { margin-top: var(--mbx-s3); }
.mbx-cart-line__img { width: 92px; height: 92px; object-fit: contain; background: var(--mbx-bg-alt); border-radius: var(--mbx-r-sm); padding: 6px; }
.mbx-cart-line__price { font-family: var(--mbx-ff-display); font-weight: 800; font-size: var(--mbx-fs-lg); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .mbx-cart-line { grid-template-columns: 72px minmax(0,1fr); }
  .mbx-cart-line__img { width: 72px; height: 72px; }
}

.mbx-qty { display: inline-flex; align-items: center; border: 1px solid var(--mbx-line-strong); border-radius: var(--mbx-r-sm); overflow: hidden; }
.mbx-qty__btn {
  width: 34px; height: 36px;
  border: 0; background: var(--mbx-surface);
  color: var(--mbx-ink); font-size: 17px; cursor: pointer;
}
.mbx-qty__btn:hover { background: var(--mbx-bg-alt); }
.mbx-qty__input {
  width: 46px; height: 36px;
  border: 0; border-inline: 1px solid var(--mbx-line);
  text-align: center;
  font-size: var(--mbx-fs-md); font-weight: 600;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.mbx-summary {
  position: sticky;
  top: calc(var(--mbx-header-h) + var(--mbx-s4));
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-md);
  padding: var(--mbx-s5);
}
.mbx-summary__row { display: flex; justify-content: space-between; gap: var(--mbx-s3); padding: 7px 0; font-size: var(--mbx-fs-md); }
.mbx-summary__row--total {
  border-top: 1px solid var(--mbx-line);
  margin-top: var(--mbx-s3);
  padding-top: var(--mbx-s3);
  font-family: var(--mbx-ff-display);
  font-size: var(--mbx-fs-xl);
  font-weight: 800;
}
.mbx-summary__note { font-size: var(--mbx-fs-xs); color: var(--mbx-ink-500); margin-top: var(--mbx-s2); }

/* Checkout adımları */
.mbx-steps { display: flex; align-items: center; gap: var(--mbx-s2); margin-bottom: var(--mbx-s6); }
.mbx-steps__item { display: flex; align-items: center; gap: var(--mbx-s2); font-size: var(--mbx-fs-sm); color: var(--mbx-ink-300); font-weight: 600; }
.mbx-steps__num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--mbx-bg-alt); color: var(--mbx-ink-300);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--mbx-fs-xs); font-weight: 800;
}
.mbx-steps__item.is-active { color: var(--mbx-ink); }
.mbx-steps__item.is-active .mbx-steps__num { background: var(--mbx-teal-600); color: #fff; }
.mbx-steps__item.is-done .mbx-steps__num { background: var(--mbx-success); color: #fff; }
.mbx-steps__line { flex: 1 1 auto; height: 1px; background: var(--mbx-line); min-width: 18px; }

/* Sözleşme onay kutuları — ön işaretli OLAMAZ (mevzuat) */
.mbx-consent {
  padding: var(--mbx-s4);
  border: 1px solid var(--mbx-line);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-bg-alt);
}
.mbx-consent + .mbx-consent { margin-top: var(--mbx-s3); }
.mbx-consent.is-invalid { border-color: var(--mbx-danger); background: var(--mbx-danger-bg); }
.mbx-consent__label { display: flex; align-items: flex-start; gap: var(--mbx-s3); cursor: pointer; font-size: var(--mbx-fs-md); }
.mbx-consent__label input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--mbx-teal-600); }


/* ==========================================================================
   13  FORMLAR
   ========================================================================== */

.mbx-field { margin-bottom: var(--mbx-s4); }
.mbx-label { display: block; font-size: var(--mbx-fs-sm); font-weight: 600; color: var(--mbx-ink-700); margin-bottom: 6px; }
.mbx-label .mbx-req { color: var(--mbx-danger); }

.mbx-input, .mbx-select, .mbx-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--mbx-line-strong);
  border-radius: var(--mbx-r-sm);
  background: var(--mbx-surface);
  font-family: var(--mbx-ff-body);
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
  transition: border-color .18s var(--mbx-ease), box-shadow .18s var(--mbx-ease);
}
.mbx-input:focus, .mbx-select:focus, .mbx-textarea:focus {
  outline: none;
  border-color: var(--mbx-teal-500);
  box-shadow: var(--mbx-ring);
}
.mbx-input::placeholder, .mbx-textarea::placeholder { color: var(--mbx-ink-300); }
.mbx-textarea { min-height: 128px; resize: vertical; }

.mbx-input.is-invalid, .mbx-select.is-invalid, .mbx-textarea.is-invalid { border-color: var(--mbx-danger); }
.mbx-error { display: block; font-size: var(--mbx-fs-xs); color: var(--mbx-danger); margin-top: 5px; }
.mbx-hint  { display: block; font-size: var(--mbx-fs-xs); color: var(--mbx-ink-500); margin-top: 5px; }


/* ==========================================================================
   14  BOŞ DURUM / İSKELET / UYARI
   ========================================================================== */

.mbx-empty { text-align: center; padding: var(--mbx-s16) var(--mbx-s4); }
.mbx-empty__icon { font-size: 58px; color: var(--mbx-ink-200); margin-bottom: var(--mbx-s4); }
.mbx-empty__title { font-family: var(--mbx-ff-display); font-size: var(--mbx-fs-xl); font-weight: 800; margin-bottom: var(--mbx-s2); }
.mbx-empty__text { color: var(--mbx-ink-500); margin-bottom: var(--mbx-s5); max-width: 46ch; margin-inline: auto; }

.mbx-notice {
  display: flex; align-items: flex-start; gap: var(--mbx-s3);
  padding: var(--mbx-s4);
  border-radius: var(--mbx-r-sm);
  font-size: var(--mbx-fs-md);
}
.mbx-notice i { font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
.mbx-notice--info   { background: var(--mbx-info-bg);   color: #1B5FA8; }
.mbx-notice--warn   { background: var(--mbx-warn-bg);   color: var(--mbx-amber-700); }
.mbx-notice--danger { background: var(--mbx-danger-bg); color: #A8352B; }
.mbx-notice--ok     { background: var(--mbx-success-bg);color: #1E7350; }

.mbx-skeleton {
  background: linear-gradient(90deg, var(--mbx-bg-alt) 25%, #EDEDE8 37%, var(--mbx-bg-alt) 63%);
  background-size: 400% 100%;
  animation: mbx-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--mbx-r-xs);
}
@keyframes mbx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.mbx-skeleton--card  { height: 300px; border-radius: var(--mbx-r-md); }
.mbx-skeleton--line  { height: 12px; margin-bottom: 8px; }
.mbx-skeleton--title { height: 22px; width: 62%; margin-bottom: 12px; }

.mbx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--mbx-fs-sm); color: var(--mbx-ink-500); margin-bottom: var(--mbx-s4); }
.mbx-breadcrumb a { color: var(--mbx-ink-500); }
.mbx-breadcrumb a:hover { color: var(--mbx-teal-700); }
.mbx-breadcrumb__sep { color: var(--mbx-ink-200); }
.mbx-breadcrumb__current { color: var(--mbx-ink); font-weight: 600; }


/* Dar ekranda uc sutun sikisiyor: baslik sola doner, baglanti altina gecer. */
@media (max-width: 640px) {
  .mbx-sec-head { grid-template-columns: 1fr; gap: var(--mbx-s1); }
  .mbx-sec-head h2 { grid-column: 1; justify-self: start; text-align: start; }
  .mbx-sec-head__link { grid-column: 1; justify-self: start; }
}

/* --- Guven seridi (akoffice: footer'in hemen ustunde, tum sayfalarda) ----
   Cerceveli kart YOK. Onceki hali .mbx-card kutulariydi ve footer'in hemen
   ustunde gereksiz agirlik yapiyordu; akoffice'te cizgisiz, ortalanmis
   ikon + baslik + aciklama var. */
.mbx-trust {
  margin-top: var(--mbx-s16);   /* iceriğin serite yapismasini engeller */
  border-top: 1px solid var(--mbx-line);
  background: var(--mbx-surface);
}
.mbx-trust__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mbx-s8) var(--mbx-s6);
  padding-block: var(--mbx-s12);
  text-align: center;
}
.mbx-trust__item { min-width: 0; }
.mbx-trust__icon {
  display: block;
  font-size: 34px;
  line-height: 1;
  margin-bottom: var(--mbx-s3);
  color: var(--mbx-amber-600);   /* akoffice'te vurgu rengi; bizde amber */
}
.mbx-trust__title {
  font-family: var(--mbx-ff-display);
  font-weight: 800;
  font-size: var(--mbx-fs-md);
  color: var(--mbx-ink);
  margin-bottom: var(--mbx-s1);
}
.mbx-trust__text {
  margin: 0;
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-500);
  line-height: 1.55;
  max-width: 30ch;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .mbx-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--mbx-s8); }
}
@media (max-width: 420px) {
  .mbx-trust__grid { grid-template-columns: 1fr; gap: var(--mbx-s6); }
}

/* ==========================================================================
   15  FOOTER
   ========================================================================== */

.mbx-footer { background: var(--mbx-ink); color: #D9D9D3; /* margin-top YOK: guven seridi hemen ustunde ve kendi ust bosluguna
     sahip. Burada kalsaydi serit ile footer arasinda 64px bos gri alan
     olusuyordu (olculdu). */ }
/* akoffice duzeni: kunye | 4 baglanti sutunu | iletisim.
   Kunye (6563 ETK) ayri bir sutunda kaliyor -- akoffice'te yok ama bizde
   yasal zorunluluk ve alt serite sikistirilamaz. */
.mbx-footer__grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2.2fr minmax(200px, .9fr);
  gap: var(--mbx-s8);
  padding-block: var(--mbx-s12);
}
/* Kurumsal ve Yardım HER ZAMAN yan yana — mobilde de. Alt alta indiklerinde
   footer gereksiz uzuyor ve sayfa sonu dağınık görünüyordu. */
.mbx-footer__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mbx-s6) var(--mbx-s4);
}

@media (max-width: 860px) {
  .mbx-footer__grid { grid-template-columns: 1fr; gap: var(--mbx-s6); }
  .mbx-footer__links { gap: var(--mbx-s4); }
}

/* Mobilde künye ve bağlantılar sıkılaşsın: satır aralığı ve yazı biraz küçük. */
@media (max-width: 520px) {
  .mbx-footer { padding-block: var(--mbx-s6); }
  .mbx-footer__grid { gap: var(--mbx-s5); }
  .mbx-footer__link { padding-block: 5px; font-size: var(--mbx-fs-sm); }
  .mbx-footer__title { margin-bottom: var(--mbx-s2); }
}

.mbx-footer__title {
  font-family: var(--mbx-ff-display);
  font-size: var(--mbx-fs-md);
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--mbx-s3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* ÖZGÜLLÜK NOTU: `.mbx a` (0,1,1) bu kuralı (0,1,0) eziyordu ve footer linkleri
   koyu zeminde teal-700 kalıyordu → 2.82:1 ölçüldü. `.mbx-footer` ile öne geçirildi. */
.mbx-footer .mbx-footer__link {
  display: block;
  padding: 5px 0;
  color: #C9C9C1;
  font-size: var(--mbx-fs-sm);
}
.mbx-footer .mbx-footer__link:hover { color: var(--mbx-teal-300); text-decoration: underline; }

/* Yasal künye — 6563 sayılı ETK gereği erişilebilir olmalı.
   #96968F koyu zeminde 3.83:1 ÖLÇÜLDÜ (AA altı) → #B8B8B1 ile ~5.6:1.
   Künye zorunlu bilgidir; okunabilirliği isteğe bağlı değil. */
/* Iletisim sutunu -- akoffice'te burada bulten formu var; calisan bir
   abonelik ucumuz olmadigi icin gercekten isleyen kanallar konuldu. */
.mbx-footer__contact { min-width: 0; }
.mbx .mbx-footer__contact-row {
  display: flex;
  align-items: center;
  gap: var(--mbx-s2);
  padding: 5px 0;
  color: #C9C9C1;
  font-size: var(--mbx-fs-sm);
  word-break: break-word;
}
.mbx .mbx-footer__contact-row:hover { color: var(--mbx-teal-300); text-decoration: underline; }
.mbx-footer__cta { margin-top: var(--mbx-s3); }

/* Kart markalari -- koyu zeminde okunur gri, hover'da beyaz degil:
   tiklanabilir degiller, hover geri bildirimi yaniltici olurdu. */
.mbx-footer__pay {
  display: inline-flex;
  align-items: center;
  gap: var(--mbx-s2);
  font-size: 26px;
  line-height: 1;
  color: #B8B8B1;
}

/* Dar ekran: dort sutun ikiye, iletisim tam genislige. */
/* MOBILDE KUNYE EN ALTTA.
   Kunye 9 satirlik bir bilgi blogu (unvan, MERSIS, vergi, sicil, KEP, ETBIS,
   adres, telefon, e-posta). Isaretlemede ILK sirada oldugu icin telefonda
   footer bu duvarla acilyor ve asil gezinme baglantilari (Kesfedin / Destek /
   Bilgi / Yasal) ekranin cok altinda kaliyordu. Yasal olarak erisilebilir
   olmasi yeterli; en ustte olmasi gerekmiyor.
   Masaustunde solda kaldigi icin degisiklik yalnizca dar ekranda. */
@media (max-width: 1100px) {
  .mbx-footer__id      { order: 3; }
  .mbx-footer__links   { order: 1; }
  .mbx-footer__contact { order: 2; }
  /* Kunye tam genislige yayilinca satirlar kisalir, okumasi kolaylasir. */
  .mbx-footer__id { grid-column: 1 / -1; padding-top: var(--mbx-s5); border-top: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 1100px) {
  .mbx-footer__grid { grid-template-columns: 1fr 1.6fr; }
  .mbx-footer__contact { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .mbx-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .mbx-footer__links { grid-template-columns: 1fr; }
}

.mbx-footer__legal { font-size: var(--mbx-fs-xs); color: #B8B8B1; line-height: 1.9; }
.mbx-footer__legal b { color: #C9C9C1; font-weight: 600; }
.mbx-footer__legal .mbx-placeholder {
  background: rgba(232,155,43,.18);
  color: var(--mbx-amber-300);
  padding: 1px 6px;
  border-radius: var(--mbx-r-xs);
  font-weight: 600;
}

.mbx-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: var(--mbx-s4);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--mbx-s3);
  font-size: var(--mbx-fs-xs);
  color: #B8B8B1;
}
/* #96968F 3.83:1 ölçüldü (AA altı). Ayrıca hukuki linkler yalnızca renkle
   ayırt ediliyordu — alt çizgi eklendi (Lighthouse "links rely on color"). */
.mbx-footer .mbx-footer__bottom a {
  color: #C9C9C1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mbx-footer .mbx-footer__bottom a:hover { color: var(--mbx-teal-300); }
.mbx-footer__bottom-spacer { flex: 1 1 auto; }


/* ==========================================================================
   16  MOBİL KABUK
   ========================================================================== */

.mbx-mob-header {
  position: sticky; top: 0; z-index: var(--mbx-z-header);
  background: var(--mbx-surface);
  border-bottom: 1px solid var(--mbx-line);
}
/* Mobil üst bar: logo GERÇEKTEN ortada dursun diye 3 sütunlu grid.
   Flex + spacer ile ortalama, sağdaki öğenin genişliğine göre kayardı
   (konum çipi görünür/gizli olduğunda logo yer değiştiriyordu).
   Yan sütunlar eşit (1fr) olduğu için orta sütun her koşulda tam ortada kalır. */
.mbx-mob-header__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--mbx-s2);
  min-height: 56px;
}
.mbx-mob-header__left  { justify-self: start;  display: flex; align-items: center; }
.mbx-mob-header__brand { justify-self: center; }
.mbx-mob-header__right { justify-self: end;    display: flex; align-items: center; gap: var(--mbx-s2); min-width: 0; }

/* Konum çipi artık logo satırında; dar ekranda logoyu ezmesin diye kısalır. */
.mbx-mob-header__right .mbx-city-chip {
  max-width: 42vw;
  overflow: hidden;
}
.mbx-mob-header__right .mbx-city-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mbx-mob-search { padding: 0 var(--mbx-s4) var(--mbx-s3); }

/* Alt sekme çubuğu */
.mbx-tabbar {
  position: fixed;
  inset-inline: 0; bottom: 0;
  z-index: var(--mbx-z-tabbar);
  display: flex;
  background: var(--mbx-surface);
  border-top: 1px solid var(--mbx-line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 14px rgba(58,58,56,.07);
}
.mbx-tabbar__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  height: var(--mbx-tabbar-h);
  font-size: var(--mbx-fs-2xs);
  font-weight: 600;
  color: var(--mbx-ink-500);
  position: relative;
}
/* ÖZGÜLLÜK DÜZELTMESİ — çubuğun düz görünmesinin sebebi buydu:
   `.mbx a` (0,1,1) kuralı `.mbx-tabbar__item` (0,1,0) kuralını eziyordu, yani
   PASİF sekmeler de link rengiyle (teal-700) çiziliyordu. Aktif sekme de aynı
   renkte olduğu için "neredeyim" bilgisi hiç görünmüyordu. Seçicilere `.mbx`
   eklenerek pasif/aktif ayrımı geri kazanıldı. */
.mbx .mbx-tabbar__item { color: var(--mbx-ink-500); }
.mbx .mbx-tabbar__item:hover { text-decoration: none; color: var(--mbx-ink); }

/* İkon, aktifken arkasında yumuşak bir hap beliren bir kutu içinde durur. */
.mbx-tabbar__item i {
  font-size: 22px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 28px;
  border-radius: var(--mbx-r-pill);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.mbx .mbx-tabbar__item.is-active { color: var(--mbx-teal-800); font-weight: 700; }
.mbx-tabbar__item.is-active i {
  background: var(--mbx-teal-050);
  color: var(--mbx-teal-700);
  transform: translateY(-1px);
}
/* Aktif sekmenin üstünde ince gösterge çizgisi. */
.mbx-tabbar__item.is-active::before {
  content: "";
  position: absolute;
  top: 0; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 30px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--mbx-teal-600);
}
/* Dokunma geri bildirimi. */
.mbx-tabbar__item:active i { transform: scale(.92); }

@media (prefers-reduced-motion: reduce) {
  .mbx-tabbar__item i { transition: none; }
}

.mbx-tabbar__badge {
  position: absolute;
  top: 4px; inset-inline-start: calc(50% + 8px);
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-amber-500);
  color: var(--mbx-ink);
  font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Tabbar'ın içeriği örtmemesi için */
body.mbx-mobile { padding-bottom: calc(var(--mbx-tabbar-h) + env(safe-area-inset-bottom)); }

/* --- Çerez onay şeridi (KVKK) --------------------------------------------
   Masaüstünde sayfanın altına sabitlenir. Mobilde alt sekme çubuğu da
   fixed olduğu için ikisi üst üste binerdi; bu yüzden mobilde tabbar
   yüksekliği kadar yukarı alınır. */
.mbx-cookiebar {
  position: fixed;
  inset-inline: var(--mbx-s4);
  bottom: var(--mbx-s4);
  z-index: 1060;
  align-items: center;
  background: var(--mbx-surface);
  border: 1px solid var(--mbx-line);
  box-shadow: var(--mbx-sh-3);
  max-width: 720px;
  margin-inline: auto;
}
body.mbx-mobile .mbx-cookiebar {
  bottom: calc(var(--mbx-tabbar-h) + env(safe-area-inset-bottom) + var(--mbx-s3));
}

/* Bottom sheet (filtre, il seçici) */
.mbx-sheet__head {
  display: flex; align-items: center; gap: var(--mbx-s3);
  padding: var(--mbx-s4);
  border-bottom: 1px solid var(--mbx-line);
}
/* `.mbx` ile nitelendi: başlık <h2> ve `.mbx h2` (0,1,1) tek sınıfı yeniyordu —
   sheet başlığı lg yerine 3xl çıkıyordu. Bkz. `.mbx .mbx-card__title` notu. */
.mbx .mbx-sheet__title { font-family: var(--mbx-ff-display); font-weight: 800; font-size: var(--mbx-fs-lg); line-height: 1.3; flex: 1 1 auto; margin: 0; }
.mbx-sheet__body { padding: var(--mbx-s4); overflow-y: auto; }
.mbx-sheet__foot {
  padding: var(--mbx-s4);
  border-top: 1px solid var(--mbx-line);
  background: var(--mbx-surface);
  display: flex; gap: var(--mbx-s3);
  padding-bottom: calc(var(--mbx-s4) + env(safe-area-inset-bottom));
}
.mbx-sheet__handle {
  width: 38px; height: 4px;
  border-radius: var(--mbx-r-pill);
  background: var(--mbx-line-strong);
  margin: var(--mbx-s2) auto 0;
}

/* ==========================================================================
   ANA EKRANA EKLE (PWA / A2HS) istemi
   --------------------------------------------------------------------------
   Alttan gelen bir sayfa. Yalnızca mobilde ve yalnızca kurulu değilken
   gösterilir (karar JS'te — kurulu olup olmadığını sunucu bilemez).
   Alt sekme çubuğunun ÜSTÜNDE durur; z-index onu aşar.
   ========================================================================== */
.mbx-a2hs {
  position: fixed; inset: 0;
  z-index: calc(var(--mbx-z-tabbar) + 20);
  display: flex; align-items: flex-end;
}
.mbx-a2hs[hidden] { display: none; }

.mbx-a2hs__back {
  position: absolute; inset: 0;
  background: rgba(58,58,56,.45);
  opacity: 0; transition: opacity .2s ease;
}
.mbx-a2hs.is-open .mbx-a2hs__back { opacity: 1; }

.mbx-a2hs__sheet {
  position: relative;
  width: 100%;
  background: var(--mbx-surface);
  border-radius: var(--mbx-r-lg) var(--mbx-r-lg) 0 0;
  padding: var(--mbx-s3) var(--mbx-s4) calc(var(--mbx-s5) + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 32px rgba(58,58,56,.22);
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(.22,.68,.36,1);
}
.mbx-a2hs.is-open .mbx-a2hs__sheet { transform: translateY(0); }

.mbx-a2hs__head { display: flex; gap: var(--mbx-s4); align-items: flex-start; margin-top: var(--mbx-s3); }
.mbx-a2hs__icon {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: var(--mbx-r-md);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(58,58,56,.16);
}
.mbx-a2hs__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mbx-a2hs__title { font-size: var(--mbx-fs-lg); margin: 0 0 4px; }
.mbx-a2hs__text  { font-size: var(--mbx-fs-sm); color: var(--mbx-ink-500); margin: 0; }

/* iOS yönergeleri: yalnızca iOS'ta (JS .is-ios ekler). */
.mbx-a2hs__ios { display: none; }
.mbx-a2hs.is-ios .mbx-a2hs__ios {
  display: block;
  margin: var(--mbx-s4) 0 0;
  padding-inline-start: var(--mbx-s5);
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-700);
}
.mbx-a2hs.is-ios .mbx-a2hs__ios li { margin-bottom: 6px; }
.mbx-a2hs.is-ios .mbx-a2hs__ios i { color: var(--mbx-teal-700); }

.mbx-a2hs__actions { margin-top: var(--mbx-s5); display: grid; gap: 8px; }
.mbx-a2hs__never {
  background: none; border: 0; padding: 6px;
  font: inherit; font-size: var(--mbx-fs-xs);
  color: var(--mbx-ink-300); cursor: pointer;
}
.mbx-a2hs__never:hover { color: var(--mbx-ink-500); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .mbx-a2hs__sheet, .mbx-a2hs__back { transition: none; }
}

/* ==========================================================================
   BANNER (anasayfa üst alanı)
   --------------------------------------------------------------------------
   Önceden düz bir bölüm + arka plan degradesiydi; sayfanın geri kalanından
   ayrışmıyordu. Artık kendi zemini olan bir KART: marka renginde degrade,
   köşelerde yumuşak ışık lekeleri ve ince bir doku.
   Mobil ve masaüstünde AYNI bileşen kullanılır; ölçüler akışkandır (clamp),
   bu yüzden ayrı bir mobil kuralı gerekmez.
   ========================================================================== */
.mbx-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--mbx-r-lg);
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(78,197,193,.28) 0%, rgba(78,197,193,0) 55%),
    radial-gradient(90% 120% at 100% 10%, rgba(245,182,66,.22) 0%, rgba(245,182,66,0) 60%),
    linear-gradient(160deg, var(--mbx-teal-050) 0%, var(--mbx-surface) 70%);
  border: 1px solid var(--mbx-line);
  padding: clamp(20px, 5vw, 56px) clamp(16px, 4vw, 48px);
}

/* İnce nokta dokusu: içeriği bastırmadan yüzeye derinlik verir. */
.mbx-banner::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--mbx-teal-500);
  opacity: .07;
  pointer-events: none;
}
.mbx-banner > * { position: relative; z-index: 1; }

.mbx-banner__title {
  font-size: clamp(24px, 5.2vw, var(--mbx-fs-4xl));
  line-height: 1.18;
  margin: 0 0 var(--mbx-s3);
}
.mbx-banner__text {
  font-size: clamp(14px, 2.2vw, var(--mbx-fs-lg));
  color: var(--mbx-ink-700);
  margin: 0 auto;
  max-width: 62ch;
}
.mbx-banner__chips { margin-top: var(--mbx-s5); }

/* Kategori drill-down
   Kategori adları veritabanından TAMAMEN BÜYÜK HARF geliyor. 600 ağırlık +
   büyük harf + kesme birlikte ağır bir metin bloğu üretiyordu; ağırlık 500'e
   indirildi ve satır yüksekliği artırıldı. Adlar veri olduğu için Title Case'e
   ÇEVRİLMEDİ: tr-TR'de "OEM" -> "Oem", "VE" -> "Ve" gibi bozulmalar olurdu. */
.mbx-drill__row {
  display: flex; align-items: center; gap: var(--mbx-s3);
  padding: 12px var(--mbx-s4);
  min-height: 56px;
  border-bottom: 1px solid var(--mbx-line);
  color: var(--mbx-ink);
  font-size: var(--mbx-fs-sm);
  font-weight: 500;
  letter-spacing: .01em;
}
.mbx-drill__row:hover { background: var(--mbx-teal-050); text-decoration: none; color: var(--mbx-ink); }
.mbx-drill__row i:last-child { color: var(--mbx-ink-300); flex: 0 0 auto; }

/* Ad esnek alanı kaplar; sayaç ve ok sağda sabit kalır. Eskiden hizalama
   `i:last-child { margin-inline-start:auto }` ile yapılıyordu — sayaç varken
   ikisi de auto margin isteyince satır sıkışıyordu. */
.mbx-drill__name { flex: 1 1 auto; min-width: 0; }

/* Kategori ikonu — anasayfa kutucukları ve mega menü ile aynı eşleştirici. */
.mbx-drill__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--mbx-r-md);
  background: var(--mbx-bg-alt);
  color: var(--mbx-ink-500);
  font-size: 18px;
}
.mbx-drill--t0 .mbx-drill__icon { background: var(--mbx-teal-050);  color: var(--mbx-teal-700); }
.mbx-drill--t1 .mbx-drill__icon { background: var(--mbx-amber-050); color: var(--mbx-amber-800); }
.mbx-drill--t2 .mbx-drill__icon { background: #EAF1FB;              color: #2C5AA0; }
.mbx-drill--t3 .mbx-drill__icon { background: #F0EDFA;              color: #5B4B9E; }
.mbx-drill--t4 .mbx-drill__icon { background: #EAF6EE;              color: #24734A; }
.mbx-drill--t5 .mbx-drill__icon { background: #FBECEC;              color: #A03A32; }

/* Açılır ana kategori satırı <button> — tarayıcının varsayılan buton
   görünümü sıfırlanmalı, yoksa <a> kardeşleriyle hizasız durur. */
.mbx-drill__row--parent {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mbx-line);
  text-align: start;
  font-family: inherit;
  cursor: pointer;
}
.mbx-drill__row--parent[aria-expanded="true"] { background: var(--mbx-teal-050); }
.mbx-drill__row--parent[aria-expanded="true"] .mbx-drill__caret { transform: rotate(180deg); }
.mbx-drill__caret { transition: transform .18s ease; }

/* Sayaç artık ÜRÜN sayısı (alt ağaç dahil), alt kategori adedi değil.
   Rozet görünümü (dolgu + pill) bildirim sayacı gibi duruyor ve adla
   yarışıyordu; sade, sessiz bir sayıya indirildi. Tabular rakamlar
   satırlar arasında sayının sağ kenarını hizalı tutar. */
.mbx-drill__count {
  flex: 0 0 auto;
  font-size: var(--mbx-fs-2xs);
  font-weight: 500;
  color: var(--mbx-ink-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.mbx-drill__row--child {
  padding-inline-start: calc(var(--mbx-s4) + 34px + var(--mbx-s3));
  min-height: 46px;
  font-weight: 400;
  font-size: var(--mbx-fs-sm);
  color: var(--mbx-ink-700);
  background: var(--mbx-bg-alt);
}
.mbx-drill__row--child:last-child { border-bottom: 0; }
.mbx-drill__row--all { color: var(--mbx-teal-800); font-weight: 600; }

/* Ürün detayda sabit alt aksiyon barı */
.mbx-sticky-buy {
  position: fixed;
  inset-inline: 0;
  bottom: calc(var(--mbx-tabbar-h) + env(safe-area-inset-bottom));
  z-index: calc(var(--mbx-z-tabbar) - 1);
  display: flex; align-items: center; gap: var(--mbx-s3);
  padding: var(--mbx-s3) var(--mbx-s4);
  background: var(--mbx-surface);
  border-top: 1px solid var(--mbx-line);
  box-shadow: 0 -4px 16px rgba(58,58,56,.09);
}
.mbx-sticky-buy__price { font-family: var(--mbx-ff-display); font-weight: 800; font-size: var(--mbx-fs-xl); font-variant-numeric: tabular-nums; }
.mbx-sticky-buy .mbx-btn { flex: 1 1 auto; }


/* ==========================================================================
   17  YARDIMCILAR
   ========================================================================== */

.mbx-hscroll { display: flex; gap: var(--mbx-s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--mbx-s2); }
.mbx-hscroll::-webkit-scrollbar { display: none; }
.mbx-hscroll > * { flex: 0 0 auto; scroll-snap-align: start; }

.mbx-price { font-variant-numeric: tabular-nums; }
.mbx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbx-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mbx-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.mbx-divider { height: 1px; background: var(--mbx-line); margin-block: var(--mbx-s6); border: 0; }

.mbx-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* İçeriğe atla — klavye erişilebilirliği */
.mbx-skip {
  position: absolute; inset-inline-start: -9999px; top: 0;
  z-index: 9999;
  padding: var(--mbx-s3) var(--mbx-s4);
  background: var(--mbx-ink); color: #fff;
  border-radius: 0 0 var(--mbx-r-sm) 0;
}
.mbx-skip:focus { inset-inline-start: 0; color: #fff; text-decoration: none; }


/* ==========================================================================
   18  HAREKET / ERİŞİLEBİLİRLİK
   ========================================================================== */

.mbx-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--mbx-ease), transform .5s var(--mbx-ease); }
.mbx-reveal.is-in { opacity: 1; transform: none; }

/* Odak halkası her interaktif elemanda görünür olsun */
.mbx a:focus-visible,
.mbx button:focus-visible,
.mbx [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--mbx-ring);
  border-radius: var(--mbx-r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .mbx *, .mbx *::before, .mbx *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mbx-reveal { opacity: 1; transform: none; }
}

/* Mobilde filtre paneli offcanvas çekmecenin içinde yaşar; yukarıdaki
   "max-width:992px → .mbx-filters{display:none}" kuralı orada geçerli olmamalı. */
@media (max-width: 992px) {
  .offcanvas .mbx-filters {
    display: block;
    position: static;
    max-height: none;
    border: 0;
    padding: 0;
    background: transparent;
  }
}

/* ==========================================================================
   DAR PENCEREDE MASAÜSTÜ KABUĞU

   Mobil görünüm User-Agent ile seçiliyor (MobileRedirectAttribute), pencere
   genişliğiyle değil. Yani küçültülmüş bir masaüstü tarayıcısı MASAÜSTÜ
   layout'unu alır. `.mbx-header__main` nowrap olduğu ve çocukları küçülmediği
   için 465px'te sayfa yatayda 171px taşıyordu.

   Çözüm mobil layout'u taklit etmek değil — masaüstü kabuğunun dar pencerede
   de kırılmadan durması. Arama kutusu alt satıra iner, header'daki
   "Kategoriler" düğmesi gizlenir (şeritteki "Tüm kategoriler" aynı menüyü
   açar, ikisi birden gereksiz).
   ========================================================================== */
/* Dar masaustu penceresi: once ikincil kisayollar, sonra "Tum Kategoriler"in
   METNI gider (ikon kalir) -- kategori basliklarindan feragat edilmez. */
/* Kap max-width:1280px'de SABIT -- goruntu bunun ustune ciktiginda satir
   genislemiyor. Bu yuzden kirilim ancak kabin KENDISI daralmaya
   basladiginda (1280 alti) anlamli. */
@media (max-width: 1150px) {
  .mbx-nav__extra { display: none; }
}
@media (max-width: 900px) {
  .mbx-nav__link--all span { display: none; }
  .mbx-nav__link--all { padding-inline: var(--mbx-s3); }
  .mbx-mega__inner { gap: var(--mbx-s6); }
  .mbx-mega__promo { display: none; }
}

@media (max-width: 780px) {
  .mbx-header__main {
    flex-wrap: wrap;
    row-gap: var(--mbx-s2);
    padding-block: var(--mbx-s2);
  }

  /* Arama tam satır kaplar; marka ve aksiyonlar üst satırda kalır. */
  .mbx-header__search {
    order: 10;
    flex: 1 0 100%;
    min-width: 0;
  }
  .mbx-header__actions {
    margin-inline-start: auto;
    min-width: 0;
    gap: var(--mbx-s1);
  }
  /* İl adı uzun olabilir (Afyonkarahisar); çipin kendisi kısalsın. */
  .mbx-city-chip { max-width: 130px; overflow: hidden; }
  .mbx-city-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 560px) {
  /* Bu genişlikte iki ayrı CTA sığmıyor; "Üye Ol" birincil olan, o kalır. */
  .mbx-header__actions .mbx-btn--outline { display: none; }
}

@media print {
  .mbx-header, .mbx-nav, .mbx-tabbar, .mbx-footer,
  .mbx-filters, .mbx-sticky-buy, .mbx-locbar { display: none !important; }
  body.mbx { background: #fff; }
}