/* ==========================================================================
   vy-menu.css — Ç1 · Menü (mega panel + mobil çekmece)
   14.08.2026 · prototip/vy-prototip.css 3214–3680 arasından taşındı.

   YÜKLEME SIRASI: style.min.css ve vy-duzeltmeler.css'ten SONRA gelir.
   Temanın .sector-mega kurallarını ezmesi gerekiyor; önce yüklenirse
   panel statik konumda kalır ve 130px genişliğe düşer.
   ========================================================================== */

/* ==========================================================================
   Ç1 · MENÜ — mega panel ve mobil alt menü (13.08.2026)
   ==========================================================================
   Katalogda Ç1 zaten vardı; bu, onun genişlemesi. Neden yeniden kuruldu:
   eski menü "Ürünler / Sektörel Çözümler" diye BİZİM sayfa saklama düzenimizi
   soruyordu. Yeni menü ziyaretçinin sorusunu soruyor — hangi ürün ailesi:
   kablosuz çağrı mı, elektronik raf etiketi mi.

   İKİ AİLE ASLA KARIŞMAZ. Çağrı paneli ESL sayfasına, ESL paneli çağrı
   sayfasına link vermez. Menü, iki ayrı işin tek çatı altındaki yüzüdür.

   Masaüstü: üç sütunlu mega panel, ürünlerde gerçek fotoğraf.
   Mobil: alt menü akışı — aile › (Ürünler) › liste. Sektörler ızgarada
   doğrudan görünür, ürünler tek kartın ardındadır.
   ========================================================================== */

/* ---------------------------------------------------------------- MEGA PANEL */
.vyp-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid #E6E6E6;
  box-shadow: 0 18px 40px -22px rgba(16, 32, 48, .28);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 60;
}
.vyp-mega-tetik:hover > .vyp-mega,
.vyp-mega-tetik:focus-within > .vyp-mega,
.vyp-mega.acik { opacity: 1; visibility: visible; transform: translateY(0); }

.vyp-mega-ic {
  max-width: var(--vyp-hat); margin: 0 auto;
  padding: 0 var(--vyp-kenar);
  display: grid; gap: 0;
}
.vyp-mega-ic--cagri { grid-template-columns: 1.15fr 1.3fr 1fr; }
.vyp-mega-ic--esl   { grid-template-columns: 1.2fr 1.2fr 1fr; }

.vyp-mega-sutun { padding: 26px 28px 30px; min-width: 0; }
.vyp-mega-sutun + .vyp-mega-sutun { border-left: 1px solid #F0F2F5; }
.vyp-mega-sutun h3 {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #7A8592;
}
.vyp-mega-sutun h3 + .vyp-mega-liste + h3 { margin-top: 24px; }

.vyp-mega-liste { list-style: none; margin: 0; padding: 0; }
.vyp-mega-liste > li { margin: 0; }
.vyp-mega-liste a {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 8px; margin-left: -8px; border-radius: 10px;
  color: #282C32; text-decoration: none;
  transition: background .14s ease;
}
.vyp-mega-liste a:hover,
.vyp-mega-liste a:focus-visible { background: #F7FAFD; }
.vyp-mega-gorsel {
  flex: none; width: 42px; height: 42px; border-radius: 8px; overflow: hidden;
  background: #F7FAFD; border: 1px solid #F0F2F5;
}
.vyp-mega-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
/* Sektör görselleri fotoğraf: kırpılır, yüz hizası üstte kalır. */
.vyp-mega-gorsel--kisi img { object-fit: cover; object-position: center 22%; padding: 0; }
/* ESL sahneleri 4:3 mekân fotoğrafı — kareye merkezden kırpılır. */
.vyp-mega-gorsel--sahne img { object-fit: cover; object-position: center; padding: 0; }
.vyp-mega-yazi { font-size: 14.5px; line-height: 1.4; min-width: 0; }
.vyp-mega-yazi i {
  display: block; font-style: normal; font-size: 12px; color: #7A8592; margin-top: 1px;
}

/* "Tüm ürünler →" — A3 metin linkinin menü içindeki hâli */
.vyp-mega-tumu {
  display: inline-block; margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed #E6E6E6; width: 100%;
  font-size: 13px; font-weight: 600; color: #1064A3; text-decoration: none;
}
.vyp-mega-tumu:hover { text-decoration: underline; }

/* ESL hub satırı — çözümlerin başında, vurgulu */
.vyp-mega-hub {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin: 0 0 12px -8px;
  background: #e6f3fd; border-radius: 10px; text-decoration: none;
}
.vyp-mega-hub .vyp-mega-yazi { font-weight: 700; color: #282C32; }
.vyp-mega-hub .vyp-mega-yazi i { font-weight: 400; color: #5A6B7B; }
.vyp-mega-hub .vyp-mega-gorsel { background: #fff; border-color: transparent; }

/* Öne çıkan — sütun altında, küçük yatay kart */
.vyp-mega-one { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #E6E6E6; }
.vyp-mega-one-kart { display: flex; gap: 13px; align-items: flex-start; text-decoration: none; }
.vyp-mega-one-gorsel {
  flex: none; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
  background: #F7FAFD; border: 1px solid #F0F2F5; display: grid; place-items: center;
}
.vyp-mega-one-gorsel img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; }
/* Seçici KARTA bağlıdır, sarmalayıcıya değil: ESL panelinde öne çıkan kart
   `.vyp-mega-one` kutusu olmadan duruyor. Sarmalayıcıya yazılınca oradaki
   başlık ve paragraf tema stiline düşüyordu — mavi ve menüye göre çok iri. */
.vyp-mega-one h4, .vyp-mega-one-kart h4 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #282C32;
}
.vyp-mega-one p, .vyp-mega-one-kart p {
  margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: #5A6B7B;
}
/* Öne çıkan tam sütunu kaplayan varyant — ESL panelinde görsel üstte */
.vyp-mega-one-kart--dikey { flex-direction: column; gap: 12px; }
.vyp-mega-one-kart--dikey .vyp-mega-one-gorsel { width: 100%; height: auto; aspect-ratio: 4/3; }
.vyp-mega-one-kart--dikey .vyp-mega-one-gorsel img { padding: 14px; }

@media (max-width: 1100px) {
  .vyp-mega-ic--cagri, .vyp-mega-ic--esl { grid-template-columns: 1fr 1fr; }
  .vyp-mega-sutun:nth-child(3) { border-left: 0; }
}

/* ---------------------------------------------------------------- MOBİL MENÜ
   Alt menü akışı. Ekranlar yatay kayar: aile ekranı → ürün ekranı.
   Sektörler ızgarada DOĞRUDAN durur (ziyaretçi çoğunlukla işini arıyor),
   ürünler tek kartın ardındadır. Geri oku hep üstte, iki düğme hep altta —
   uzun listede yukarı çıkmaya gerek kalmaz. */
.vyp-mmenu {
  /* z-index temanın .mobile-nav'ından (1000) YÜKSEK olmalı; düşükken çubuk
     çekmecenin üstünde kalıyor ve iki logo, iki düğme üst üste biniyordu
     (13.08.2026). Çubuğu ayrıca gizliyoruz — çekmecenin kendi başlığı var. */
  position: fixed; inset: 0; z-index: 1100;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .24s ease;
  visibility: hidden;
}
.vyp-mmenu.acik { transform: translateX(0); visibility: visible; }

.vyp-mmenu-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 16px 18px; border-bottom: 1px solid #F0F2F5; flex: none;
}
/* Tema header görsellerine kendi ölçüsünü veriyor; logoyu biz sabitliyoruz. */
.vyp-mmenu-bas img { height: 38px !important; width: auto !important; max-width: 170px; display: block; }
.vyp-mmenu-kapat {
  /* Parmak hedefi 44px — logo büyüyünce yanında küçük kalıyordu. */
  border: 0; background: transparent; cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: #282C32; border-radius: 10px;
}
.vyp-mmenu-kapat:hover { background: #F7FAFD; }

/* Ekranların kabı. `overflow: clip` — `hidden` DEĞİL: hidden kutuyu hâlâ
   kaydırılabilir bırakıyor, sağda bekleyen ekran odak alınca tarayıcı kabı
   371px kaydırıp ekranı kalıcı olarak dışarıda bırakıyordu (13.08.2026).
   clip aynı şekilde kırpar ama kutuyu kaydırılamaz yapar. Dikey kaydırma
   ekranların kendisinde. */
.vyp-mmenu-govde { flex: 1; overflow: clip; position: relative; }
/* Kapalı ekran `display: none`. transform ile sağda BEKLETİLMİYOR — beklerse
   kabın kaydırılabilir genişliğini iki katına çıkarıyor ve odak alınca tarayıcı
   kabı oraya kaydırıp ekranı kalıcı olarak dışarıda bırakıyor (13.08.2026 tuzağı).
   Kayma animasyonu keyframe ile: yalnız girerken var, sonra iz bırakmıyor. */
.vyp-mekran {
  position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; display: none;
}
.vyp-mekran--kok { display: block; transition: transform .22s ease; }
.vyp-mekran.acik { display: block; animation: vyp-mekran-gir .22s ease both; }
@keyframes vyp-mekran-gir {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* Kök ekran, üstüne bir ekran açılınca sola kayar — nereden geldiği belli olur. */
.vyp-mmenu[data-derinlik="1"] .vyp-mekran--kok { transform: translateX(-26%); }

/* geri çubuğu */
.vyp-mgeri {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 14px 18px; border: 0; background: transparent; cursor: pointer;
  border-bottom: 1px solid #F0F2F5;
  font: inherit; font-size: 15px; font-weight: 700; color: #282C32; text-align: left;
}
.vyp-mgeri span { font-size: 17px; font-weight: 400; color: #5A6B7B; }

/* aile kartı ve ürün giriş kartı — aynı dil */
.vyp-mkartlar { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 6px; }
.vyp-mkart {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px 11px 14px; border: 1px solid #E6E6E6; border-radius: 14px;
  background: #fff; cursor: pointer; text-align: left; text-decoration: none;
  font: inherit;
}
.vyp-mkart-yazi { flex: 1; min-width: 0; }
.vyp-mkart b { display: block; font-size: 15.5px; font-weight: 700; color: #282C32; }
.vyp-mkart i {
  display: block; font-style: normal; font-size: 11.5px; color: #7A8592; margin-top: 1px;
}
.vyp-mkart-gorsel {
  flex: none; width: 58px; height: 50px; border-radius: 9px; overflow: hidden; background: #F7FAFD;
}
.vyp-mkart-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyp-mkart-ok { flex: none; font-size: 16px; color: #7A8592; }

/* düz satır — Nasıl Çalışır gibi tek sayfalık öğeler */
.vyp-msatir {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid #F0F2F5;
  color: #282C32; text-decoration: none; font-size: 15px; font-weight: 600;
}
.vyp-msatir:first-of-type { border-top: 1px solid #F0F2F5; }
.vyp-msatir span { font-size: 14px; color: #7A8592; font-weight: 400; }

/* açık duran grup — Kurumsal kapalı tutulmuyor, beş satır zaten kısa */
.vyp-mgrup { padding: 16px 18px 4px; font-size: 15px; font-weight: 600; border-top: 1px solid #F0F2F5; }
.vyp-mgrup-liste { list-style: none; margin: 0; padding: 0 18px 14px; }
.vyp-mgrup-liste a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; font-size: 14px; color: #5A6B7B; text-decoration: none;
}
.vyp-mgrup-liste a span { font-size: 13px; color: #7A8592; }

/* bölüm başlığı */
.vyp-mbolum {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 16px 18px 6px;
}
.vyp-mbolum b { font-size: 14px; font-weight: 700; color: #282C32; }
.vyp-mbolum span { font-size: 11.5px; color: #7A8592; }

/* ızgara — sektör (ikonlu) ve ürün (fotoğraflı) aynı kalıbı paylaşır */
.vyp-mizgara { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 10px 18px 18px; }
.vyp-mkutu {
  background: #fff; border: 1px solid #E6E6E6; border-radius: 12px;
  overflow: hidden; text-decoration: none; display: block;
}
/* ürün kutusu — fotoğraf sığdırılır, cihaz kesilmez */
.vyp-mkutu-gorsel { aspect-ratio: 4/3; background: #F7FAFD; display: block; }
.vyp-mkutu-gorsel img { width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; }
.vyp-mkutu b {
  display: block; padding: 8px 10px 10px; font-size: 12px; font-weight: 600;
  line-height: 1.3; color: #282C32;
}
.vyp-mkutu i {
  display: block; font-style: normal; font-weight: 400; font-size: 10.5px;
  color: #7A8592; margin-top: 1px;
}
/* sektör kutusu — görsel, ad TAM yazılır */
.vyp-mkutu--sektor { padding: 13px 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.vyp-mkutu--sektor .vyp-mikon {
  width: 36px; height: 36px; border-radius: 9px; background: #e6f3fd;
  display: grid; place-items: center; overflow: hidden; flex: none;
}
.vyp-mkutu--sektor .vyp-mikon svg { width: 20px; height: 20px; color: #1C92E9; }
/* İkon yuvasına fotoğraf girdiğinde: masaüstüyle aynı dosya, aynı kırpma mantığı. */
.vyp-mkutu--sektor .vyp-mikon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vyp-mkutu--sektor .vyp-mikon--kisi img { object-position: center 22%; }
.vyp-mkutu--sektor .vyp-mikon--sahne img { object-position: center; }
.vyp-mkutu--sektor b { padding: 0; font-size: 12.5px; }

/* ESL hub — sektörel çözümlerin başında, tam genişlik */
.vyp-mhub {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px;
  padding: 12px 13px; border: 1px solid #1C92E9; background: #e6f3fd;
  border-radius: 12px; text-decoration: none;
}
.vyp-mhub b { display: block; font-size: 13.5px; font-weight: 700; color: #282C32; }
.vyp-mhub i {
  display: block; font-style: normal; font-weight: 400; font-size: 11.5px; color: #5A6B7B;
}
.vyp-mhub-ok { margin-left: auto; font-size: 15px; color: #1064A3; }

/* araç satırı */
.vyp-marac {
  display: block; margin: 2px 18px 18px; padding: 13px 15px;
  background: #F7FAFD; border-radius: 11px;
  font-size: 14px; font-weight: 600; color: #282C32; text-decoration: none;
}

/* alt çubuk — iki düğme sabit, dil altında */
.vyp-mmenu-alt { flex: none; border-top: 1px solid #F0F2F5; background: #F7FAFD; padding: 14px 18px 10px; }
.vyp-mdugmeler { display: flex; gap: 9px; }
.vyp-mdugmeler a {
  flex: 1; text-align: center; padding: 11px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.vyp-mdugme-dolu { background: #1C92E9; color: #fff; }
.vyp-mdugme-cizgi { border: 1px solid #1C92E9; color: #1064A3; }
.vyp-mdil { text-align: center; padding: 10px 0 4px; font-size: 12.5px; color: #5A6B7B; }
.vyp-mdil a { color: #5A6B7B; text-decoration: none; }
.vyp-mdil a[aria-current="true"] { color: #1064A3; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .vyp-mmenu, .vyp-mekran { transition: none; }
}

/* Mobil menü masaüstünde HİÇ yaşamaz. Bu satır olmadan: dar ekranda menü
   açıkken pencere genişletilince çekmece tam ekran açık kalıyor ve sayfayı
   örtüyor (13.08.2026'da yakalandı). Hamburger'i gizlemek yetmiyor —
   çekmecenin kendisi position:fixed. */
@media (min-width: 992px) {
  .vyp-mmenu { display: none !important; }
}

/* Temanın `.sector-mega` kabı ortalanmış ve içerik kadar geniş; bizim panel
   tam hat genişliğinde. Yalnız --vyp taşıyan kaplar genişletiliyor, temanın
   öbür mega menüleri etkilenmiyor. */
/* KENDİ KENDİNE YETER. Temanın .sector-mega kuralları <style> bloğu hâlinde
   <ul class="cs_nav_list"> İÇİNDE duruyordu; nav listesini değiştirirken o blok
   da gidiyor ve panel `position: static` kalıp akışa giriyordu (13.08.2026).
   Bu yüzden konumlandırmanın tamamı burada — temadan hiçbir şey beklenmiyor. */
.sector-mega--vyp {
  position: absolute !important;
  top: 100% !important; bottom: auto !important;
  /* Ekranın bir ucundan öbürüne. Çapa header ortasında olduğu için 50%'ye
     oturtup yarım genişlik geri alınıyor — kap ne kadar dar olursa olsun
     panel hep 100vw. Kaydırma çubuğu payı: 100vw yerine clientWidth kadar
     olsun diye body'de overflow-x zaten kapalı. */
  left: 50% !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important; max-width: 100vw !important;
  padding: 0 !important; border-radius: 0 !important;
  z-index: 999;
}
.sector-mega--vyp .vyp-mega-ic { padding-top: 0; padding-bottom: 0; }

/* Çapa: tema `.sector-mega-trigger`i position:static yapıyor, o yüzden panel
   en yakın konumlu ataya tutunur — o ata header olsun ki top:100% "header'ın
   altı" demek olsun ve panel hat boyunca açılsın. */
/* Çapa `.cs_main_header` — DENENDİ VE ÇALIŞIYOR. Header'ın kendisini çapa
   yapmak (position:relative + aradakileri static) panelin viewport'a kaçmasına
   yol açtı; sticky header'ın kendi konumlandırması karışıyor.
   Tam genişlik ayrı yoldan: aşağıda 100vw + translateX. */
header.cs_site_header .cs_main_header { position: relative; }
/* style.min.css `.menu-item-has-children`e position:relative veriyor; o
   kalırsa panel <li>'ye tutunup 130px kalıyor. Temanın silinen <style>
   bloğunda bu satır vardı — geri koyuluyor. */
.cs_nav_list > li.sector-mega-trigger { position: static !important; }
.sector-mega--vyp {
  background: #fff; border-top: 1px solid #E6E6E6;
  box-shadow: 0 18px 40px -22px rgba(16, 32, 48, .28);
}
/* Açılma kontrolü TAMAMEN bizde. Temanın :hover kuralı `!important` taşıdığı
   için iki panel aynı anda açık kalıyordu; panelimiz varsayılan olarak
   gizli — yalnız .acik açar, onu da JS verir (hover + tıklama + klavye). */
.sector-mega--vyp { display: none !important; }
.sector-mega--vyp.acik { display: block !important; }

/* Tema `.cs_nav_list` içindeki her iç <ul>'yi açılır alt menü sanıp gizliyor
   (klasik dropdown kalıbı: konumlandırır, opaklığını sıfırlar, kaydırır).
   Bizim liste o kalıba girmiyor — panelin içindeki her şey görünür kalmalı.
   Kapsam yalnız .sector-mega--vyp; temanın öbür menüleri etkilenmez. */
.sector-mega--vyp ul,
.sector-mega--vyp ul > li {
  display: block !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  width: auto !important; min-width: 0 !important; max-height: none !important;
  margin: 0; padding: 0; list-style: none;
  background: transparent !important; box-shadow: none !important;
  border: 0 !important; pointer-events: auto !important;
}
.sector-mega--vyp ul > li > a {
  display: flex !important; align-items: center; gap: 12px;
  padding: 7px 8px !important; margin-left: -8px;
  border-radius: 10px; color: #282C32 !important;
  font-size: 14.5px; line-height: 1.4; white-space: normal !important;
}
/* Temanın dropdown okları/işaretleri temizlenir — AMA kendi sade listemizin
   oku hariç, o bilinçli konuluyor (aşağıda .vyp-mega-liste--sade). */
.sector-mega--vyp ul > li > a::before { content: none !important; }
.sector-mega--vyp ul:not(.vyp-mega-liste--sade) > li > a::after { content: none !important; }


/* İç ızgara hatta hizalı: panel tam genişlik, içerik sayfa hattında. */
.sector-mega--vyp .vyp-mega-ic {
  max-width: var(--vyp-hat); margin: 0 auto; padding: 0 var(--vyp-kenar);
}

/* 100vw kaydırma çubuğunu da sayar; panel açıkken sayfa yatay taşıyordu.
   `clip` kaydırmayı tamamen kapatır (hidden gibi kırpar ama kaydırılamaz). */
html { overflow-x: clip; }

/* Kurumsal paneli: görselsiz üç sütun (wireframe §04). */
.vyp-mega-ic--kurumsal { grid-template-columns: repeat(3, 1fr); }

/* Görselsiz liste — ikon kutusu yok, satırlar altı çizili ve oklu.
   Yardımcı ürünlerde ve Kurumsal'da kullanılıyor: bunlar doğrudan sayfaya
   giden bağlantılar, kartlaşmalarına gerek yok. */
.vyp-mega-liste--sade a {
  /* Ok metnin HEMEN yanında; space-between ile sütun kenarına savrulunca
     hangi satıra ait olduğu okunmuyordu. */
  justify-content: flex-start; gap: 7px;
  border-bottom: 1px solid #F0F2F5;
  border-radius: 0 !important; margin-left: 0 !important;
}
/* Satır aralığı AYNI yapıda yazılmalı: `.sector-mega--vyp ul > li > a` daha
   özgül olduğu için kısa seçiciye yazılan padding'i eziyor (üçüncü kez). */
.sector-mega--vyp ul.vyp-mega-liste--sade > li > a { padding: 15px 2px !important; }
.vyp-mega-liste--sade li:last-child a { border-bottom: 0; }
.vyp-mega-liste--sade a .vyp-mega-yazi { text-decoration: underline; text-underline-offset: 3px; }
.vyp-mega-liste--sade a::after {
  /* Temanın kendi ok kuralı bu ::after'ı position:absolute yapıp metnin
     ÜSTÜNE bindiriyordu; konumlandırmayı da biz sıfırlıyoruz. */
  content: "\2192" !important;
  position: static !important; inset: auto !important;
  transform: none; margin: 0 !important;
  width: auto !important; height: auto !important;
  background: none !important; border: 0 !important;
  font-size: 13px; color: #7A8592; flex: none; line-height: 1;
  transition: transform .14s ease, color .14s ease;
}
.vyp-mega-liste--sade a:hover { background: transparent !important; }
.vyp-mega-liste--sade a:hover .vyp-mega-yazi { color: #1064A3; }
.vyp-mega-liste--sade a:hover::after { color: #1064A3; transform: translateX(3px); }

/* Yan yana varyant — yardımcı ürünler gibi kısa adlı, az sayıda bağlantı
   için. Alt alta üç satır yer yiyordu; tek satırda ayırıcıyla duruyorlar. */
/* Özgüllük yukarıdaki `.sector-mega--vyp ul > li { display:block !important }`
   kuralını geçmeli — o yüzden seçici panelle birlikte yazılıyor. */
.sector-mega--vyp ul.vyp-mega-liste--yatay {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 9px;
}
.sector-mega--vyp ul.vyp-mega-liste--yatay > li {
  display: inline-flex !important; align-items: center; gap: 9px; width: auto !important;
}
.sector-mega--vyp ul.vyp-mega-liste--yatay > li:not(:last-child)::after {
  content: "·"; color: #C7CFD8; font-size: 15px;
}
.sector-mega--vyp ul.vyp-mega-liste--yatay > li > a {
  border-bottom: 0 !important; padding: 4px 0 !important; gap: 5px;
}

/* Çekmece açıkken temanın mobil çubuğu gizlenir — çekmecenin kendi başlık
   satırı var, ikisi üst üste binmemeli. */
body.vyp-mmenu-acik .mobile-nav { display: none !important; }

/* --------------------------------------------------- Ç1 · hat hizalaması
   Tema menüyü ortalıyor; logo ile menü arasında geniş bir boşluk kalıyor.
   Menü logonun hemen sağına çekiliyor, ENG ve Teklif Alın yerinde kalıyor. */
@media (min-width: 992px) {
  /* ASIL KURAL: kutu genişletilir AMA içindeki liste de sola yaslanır.
     `justify-content` kutuya yazılmazsa tema listeyi kutunun ortasına alır.
     1280 px'te liste kutuyu neredeyse doldurduğu için bu görünmez; 1920–2000
     px'te logo ile menü arasında 180 px'lik boşluk açılır. Tek kural eksikti. */
  header.cs_site_header .cs_main_header_center {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    margin-left: 36px !important; margin-right: auto !important;
    padding-left: 0 !important;
  }
  /* Listenin kendi boşlukları: temanın sol dolgusu ve ilk öğe boşluğu. */
  header.cs_site_header .cs_main_header_center .cs_nav_list {
    justify-content: flex-start !important;
    padding-left: 0 !important; margin-left: 0 !important;
  }
  header.cs_site_header .cs_nav_list > li:first-child { margin-left: 0 !important; }
  /* `.cs_main_header_in` space-between olarak BIRAKILIR — sağ blok (ENG +
     Teklif Alın) kendiliğinden sağ kenara yapışıyor, ayrıca hizalanmaz. */
  header.cs_site_header .cs_main_header_right { flex: none; margin-left: 0 !important; }
}

/* ------------------------------------------- Ç1 · mobil ürün ızgarası
   Ürün kartları iki sütunda gereğinden büyüktü: görsel alanı ekranın yarısını
   yiyordu. Üç sütun + daha kısa görsel alanı. Sektör ızgarası İKİ sütunda
   kalıyor — oradaki adlar tam yazılıyor ve üç sütuna sığmıyor. */
.vyp-mizgara--urun { grid-template-columns: repeat(3, 1fr) !important; gap: 7px; }
.vyp-mizgara--urun .vyp-mkutu-gorsel { aspect-ratio: 1 / 1; }
.vyp-mizgara--urun .vyp-mkutu-gorsel img { padding: 7px; }
.vyp-mizgara--urun .vyp-mkutu b { padding: 6px 7px 8px; font-size: 10.5px; line-height: 1.25; }
.vyp-mizgara--urun .vyp-mkutu i { font-size: 9px; }
@media (max-width: 359px) {
  .vyp-mizgara--urun { grid-template-columns: 1fr 1fr !important; }
}