/* ==========================================================================
   PTX-MEGA-VERSION: 6.1  (mega menü + kontur ikon + logo şeridi — logolar büyütüldü)
   ==========================================================================
   Pietra Technology — Mega menü

   ThemeREX Addons Nav Menu widget'ı (trx_elm_nav_menu) için.
   Menü hiyerarşisi zaten mevcut; bu dosya ikinci seviyeyi yandan açılan
   flyout olmaktan çıkarıp sütun içinde sabit gösterir.

   KURULUM
   Görünüm → Menüler → "Ürünler ve Servisler" öğesini aç →
   "CSS Sınıfları" kutusuna:  ptx-mega
   (Kutu görünmüyorsa sağ üstteki "Ekran Seçenekleri"nden işaretleyin.)
   ========================================================================== */

.ptx-mega{
  --ptx-navy:#0E1F1C;
  --ptx-teal:#1F7A5C;
  --ptx-teal-dark:#155C45;
  --ptx-slate:#5B6B66;
  --ptx-border:#E8EDEA;
  --ptx-mega-max:1180px;
  --ptx-mega-pad:40px;
}

/* --------------------------------------------------------------------------
   Masaüstü mega panel — YALNIZCA 1280 px ve üzeri

   Widget'ın breakpoint ayarı 1279; altında TRX kendi mobil menüsüne
   geçiyor. Kuralları burada hapsetmek mobil menüyü tamamen korur.
   -------------------------------------------------------------------------- */

@media (min-width:1280px){

  /* Panel viewport genişliğinde konumlanabilsin diye öğe static olmalı;
     aksi halde panel menü öğesinin dar kutusuna hapsolur. */
  .trx-addons-nav-menu > li.ptx-mega,
  li.ptx-mega{
    position:static !important;
  }

  /* --------------------------------------------------------------------------
     Panel
     -------------------------------------------------------------------------- */

  li.ptx-mega > ul.trx-addons-submenu{
    /* border-box olmadan padding genişliğe eklenir ve panel 1180 yerine
       1262 px olur; dar ekranlarda taşmaya yol açar. */
    box-sizing:border-box;
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:6px 34px;
    align-items:start;

    position:absolute !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
    width:min(var(--ptx-mega-max), calc(100vw - 48px));
    max-width:none !important;
    min-width:0 !important;

    padding:34px var(--ptx-mega-pad) 30px !important;
    background:#fff !important;
    border:1px solid var(--ptx-border);
    border-radius:4px;
    box-shadow:0 18px 44px rgba(14,31,28,.13) !important;
    list-style:none;

    /* Kapalı durum AÇIKÇA tanımlanır. `display:grid` zorladığımız için
       temanın kendi gizleme yöntemi (display:none olabilir) devre dışı
       kalıyor; gizlemeyi buradan yönetmezsek panel sayfanın üzerinde
       görünmez ama TIKLANABİLİR halde asılı kalır. */
    /* !important şart: TRX'in kendi JS'i elemanlara inline stil yazıyor
       (style="visibility: inherit; opacity: inherit"), inline stil normal
       kuralları ezer ve panel kapalıyken açık kalır. */
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, visibility .18s ease;
  }

  /* Açık durum — fare veya klavye */
  li.ptx-mega:hover > ul.trx-addons-submenu,
  li.ptx-mega:focus-within > ul.trx-addons-submenu,
  li.ptx-mega.opened > ul.trx-addons-submenu,
  li.ptx-mega.trx-addons-menu-item-hover > ul.trx-addons-submenu,
  li.ptx-mega.trx-addons-submenu-opened > ul.trx-addons-submenu,
  li.ptx-mega.menu-item-hover > ul.trx-addons-submenu{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  /* TRX açılışta transform ile kaydırma yapabiliyor; ortalamayı koru. */
  li.ptx-mega:hover > ul.trx-addons-submenu,
  li.ptx-mega.opened > ul.trx-addons-submenu,
  li.ptx-mega.trx-addons-menu-item-hover > ul.trx-addons-submenu{
    transform:translateX(-50%) !important;
  }

  /* --------------------------------------------------------------------------
     Sütunlar (2. seviye = grup başlıkları)
     -------------------------------------------------------------------------- */

  li.ptx-mega > ul.trx-addons-submenu > li{
    position:static !important;
    display:block !important;
    width:auto !important;
    border:0 !important;
    background:none !important;
    margin:0 0 4px !important;
    padding:0 !important;
  }

  li.ptx-mega > ul.trx-addons-submenu > li > a{
    display:block !important;
    padding:0 0 12px !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.3 !important;
    color:var(--ptx-teal) !important;
    background:none !important;
    white-space:normal !important;
  }
  li.ptx-mega > ul.trx-addons-submenu > li > a:hover{
    color:var(--ptx-teal-dark) !important;
  }

  /* Sütun başlıklarındaki "alt menü var" oku gereksiz — alt menü zaten açık. */
  li.ptx-mega > ul.trx-addons-submenu > li > a > .trx-addons-menu-link-icon,
  li.ptx-mega > ul.trx-addons-submenu > li > a::after,
  li.ptx-mega > ul.trx-addons-submenu > li > .trx-addons-submenu-toggle{
    display:none !important;
  }

  /* --------------------------------------------------------------------------
     Sütun içeriği (3. seviye) — flyout değil, sabit liste
     -------------------------------------------------------------------------- */

  li.ptx-mega ul.trx-addons-submenu ul.trx-addons-submenu{
    position:static !important;
    display:block !important;
    /* DİKKAT: burada `visible` YAZILMAZ. CSS'te çocuk, ebeveynin
       visibility:hidden değerini geçersiz kılar; panel kapalıyken iç
       bağlantılar görünmez ama tıklanabilir kalır ve sayfadaki öğelerin
       üzerine biner. `inherit` panelin durumunu birebir takip eder. */
    visibility:inherit !important;
    pointer-events:inherit !important;
    opacity:1 !important;
    transform:none !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    list-style:none;
  }

  li.ptx-mega ul.trx-addons-submenu ul.trx-addons-submenu > li{
    position:static !important;
    display:block !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
  }

  li.ptx-mega ul.trx-addons-submenu ul.trx-addons-submenu > li > a{
    display:flex !important;
    align-items:flex-start;
    gap:8px;
    padding:6px 0 !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    line-height:1.4 !important;
    color:var(--ptx-navy) !important;
    background:none !important;
    white-space:normal !important;
  }
  li.ptx-mega ul.trx-addons-submenu ul.trx-addons-submenu > li > a:hover{
    color:var(--ptx-teal) !important;
  }

  /* Sol ok işareti — referans tasarımdaki gibi */
  li.ptx-mega ul.trx-addons-submenu ul.trx-addons-submenu > li > a::before{
    content:'';
    flex:none;
    width:5px;
    height:5px;
    margin-top:6px;
    border-right:1.6px solid var(--ptx-teal);
    border-bottom:1.6px solid var(--ptx-teal);
    transform:rotate(-45deg);
  }

  /* --------------------------------------------------------------------------
     Alt bant — "Tümünü Gör"
     -------------------------------------------------------------------------- */

  li.ptx-mega > ul.trx-addons-submenu > li.ptx-mega-all{
    grid-column:1 / -1;
    margin-top:18px !important;
    padding-top:18px !important;
    border-top:1px solid var(--ptx-border) !important;
  }
  li.ptx-mega > ul.trx-addons-submenu > li.ptx-mega-all > a{
    display:inline-flex !important;
    align-items:center;
    gap:7px;
    padding:0 !important;
    font-size:14px !important;
    font-weight:700 !important;
    color:var(--ptx-teal) !important;
  }

}

/* --------------------------------------------------------------------------
   Mobil / dar ekran

   TRX widget'ı 1279 px altında tamamen ayrı bir DOM'a geçiyor
   (.trx-addons-mobile-menu-outer-container, "slide" kayan menü).
   Mega panel kurallarının oraya sızması o menüyü bozar; bu yüzden
   yukarıdaki blokların TAMAMI yalnızca 1280 px ve üzerinde geçerli.
   Mobil menü TRX'in kendi davranışıyla, dokunulmadan çalışır.
   -------------------------------------------------------------------------- */
@media (min-width:1280px) and (max-width:1400px){
  li.ptx-mega > ul.trx-addons-submenu{
    gap:6px 24px;
    padding-left:28px !important;
    padding-right:28px !important;
  }
}

/* ==========================================================================
   Kontur (outline) SVG ikonlar — .ptx-icon
   ==========================================================================
   Elementor'un Icon widget'ı SVG'ye `fill: currentColor` dayatır; kontur
   çizimli ikonlar dolu bir lekeye dönüşür. Dosya içindeki `fill="none"`
   bir ÖZNİTELİKTİR ve CSS kuralı onu ezer.

   Kullanım: Elementor'da ikon widget'ının Gelişmiş → CSS Sınıfları
   alanına  ptx-icon  yazın.

   Yalnızca bu sınıfa uygulanır; Font Awesome gibi dolu ikonlar etkilenmez.
   ========================================================================== */

.ptx-icon svg,
.ptx-icon svg *,
.elementor-widget.ptx-icon .elementor-icon svg,
.elementor-widget.ptx-icon .elementor-icon svg *{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* ==========================================================================
   Referans logo şeridi (.ptxlg)
   ==========================================================================
   Stil ve döngü mantığı BİLEREK burada — Elementor'un HTML widget'ı bazı
   kurulumlarda <style> ve <script> etiketlerini temizliyor, bazı güvenlik
   filtreleri de <script> içeren kaydı hiç geçirmiyor. Tema tarafında
   olunca bu risk tamamen ortadan kalkıyor.

   HTML widget'ına yalnızca <section class="ptxlg"> işaretlemesi konur.
   Kesintisiz döngü için logolar HTML'de İKİ KEZ yazılır (JS yok).
   ========================================================================== */

.ptxlg{
  --ptxlg-h:68px;
  --ptxlg-gap:84px;
  --ptxlg-hiz:50s;

  background:transparent;
  padding:0;
  overflow:hidden;
  display:block;
  width:100%;
  min-width:0;
}

/* Elementor HTML widget'i `elementor-widget__width-initial` ile genisligini
   ICERIGINE gore belirliyor. Seridimiz mutlak konumlu oldugu icin icerik
   genisligi yok -> widget 0 piksele dusuyor ve serit gorunmuyor.
   Widget'i tam genislige zorla: bu, kisir donguyu kirar. */
.elementor-widget-html:has(> .elementor-widget-container > .ptxlg),
.elementor-widget-html:has(.ptxlg){
  width:100% !important;
  max-width:100% !important;
  flex-basis:100% !important;
}

/* :has() desteklemeyen tarayicilar icin yedek — sarmalayicilari
   dogrudan hedefler. */
.ptxlg{
  min-height:var(--ptxlg-h);
}
.elementor-widget-container:has(> .ptxlg){
  width:100%;
}
.ptxlg,
.ptxlg *{ box-sizing:border-box; }

/* Şerit mutlak konumlu: width:max-content olan bir eleman normal akışta
   kalırsa ebeveynini genişletir ve sayfada yatay kaydırma oluşur. */
.ptxlg-strip{
  position:relative;
  height:var(--ptxlg-h);
  overflow:hidden;
  width:100%;
  min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ptxlg-track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--ptxlg-gap);
  margin:0;
  padding:0;
  list-style:none;
  width:max-content;
  animation:ptxlg-kay var(--ptxlg-hiz) linear infinite;
}
.ptxlg-strip:hover .ptxlg-track{ animation-play-state:paused; }

.ptxlg-track li{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
}
.ptxlg-track li::before,
.ptxlg-track li::marker{ content:none; }

/* Logolar farklı oranlarda; sabit yükseklik + contain ile eşit ağırlık. */
.ptxlg-track img{
  height:var(--ptxlg-h);
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.ptxlg-track li:hover img{
  filter:grayscale(0);
  opacity:1;
}

/* Liste iki kez yazıldığı için tam yarısında başa dönmüş olur. */
@keyframes ptxlg-kay{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - var(--ptxlg-gap) / 2)); }
}

@media (max-width:860px){
  .ptxlg{ --ptxlg-h:44px; --ptxlg-gap:46px; --ptxlg-hiz:34s; }
  .ptxlg-track img{ max-width:170px; }
}

@media (prefers-reduced-motion:reduce){
  .ptxlg-strip{
    height:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
  .ptxlg-track{
    position:static;
    animation:none;
    width:auto;
    height:auto;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:28px;
  }
}