/* ==========================================================================
   core-fixes.css — ÇEKİRDEK HATA DÜZELTME KATMANI (2026-10-17, X4-03)
   --------------------------------------------------------------------------
   Tenant'ların core/main.css kopyasına ulaşmayan çekirdek HATA düzeltmeleri.
   Neden: her mağaza ana CSS'in KENDİ kopyasını sunar (site-settings
   themeCSS["core/main.css"] → utils/themeCssSections.js → utils/cssCompiler.js
   → /api/theme-css). public/scss'teki düzeltme yalnız yeni kurulan mağazaya
   gider; canlı mağazalar bu dosyayla düzelir. Mağaza verisine dokunulmaz.

   Kurallar:
   - Yalnız gerçek hata düzeltmesi (tasarım/yeni özellik DEĞİL). Kaynak SCSS de
     aynı işte düzeltilir (public/scss → npm run scss:compile).
   - app/layout.js'te /api/theme-css bağlantısından HEMEN SONRA yüklenir; eşit
     özgüllükte bu dosya kazanır. Tenant özelleştirmesini gereksiz ezmemek için
     seçiciler kaynaktakiyle birebir; özgüllük yalnız tenant kopyasındaki
     !important kuralı geçmek gerektiğinde artırılır.
   - Her eklemede app/layout.js'teki core-fixes.css?v=N → N+1
     (.agent/workflows/bump-css-version.md).
   ========================================================================== */


/* --------------------------------------------------------------------------
   X4-01 — calc() içindeki ' + ' (2026-10-17)
   Eski küçültücü (utils/cssCompiler.js) '+' çevresindeki boşluğu siliyordu:
   calc(100% + 44px) → calc(100%+44px) geçersiz sayılıp atılıyordu. Küçültücü
   düzeltildi; derlenmiş tenant CSS'lerindeki 17 bozuk bildirim, yeniden derlenene
   kadar burada AYNI seçicilerle ve kaynak sırasıyla yeniden bildirilir
   (kaynak: public/css/main.debug.css).
   -------------------------------------------------------------------------- */
.slider-layout-right {
  width: calc(100vw - (100vw - 1440px) / 2 + 30px);
}

.box-nav-ul .menu-item > a::after {
  width: calc(100% + 44px);
}

.box-nav-ul .menu-item-2 .sub-menu {
  left: calc(100% + 23px);
}

.tf-form-search .search-suggests-results {
  top: calc(100% + 5px);
}

.toolbar-shop-mobile .tf-category-link .image::before {
  width: calc(100% + 6px);
  height: calc(100% + 6px);
}

.bg-multiple-color {
  background-size: calc(100% + 10px) calc(100% + 10px) !important;
}

@media (min-width: 768px) {
  .tf-timeline-inner::after, .tf-timeline-inner::before {
    top: calc(50% + 5px);
  }
  .tf-timeline-inner::before {
    left: calc(50% + 20px);
  }
  .tf-timeline-inner::after {
    right: calc(50% + 20px);
  }
}

@media (min-width: 1150px) {
  .tf-timeline-inner::before {
    left: calc(50% + 35px);
  }
  .tf-timeline-inner::after {
    right: calc(50% + 35px);
  }
  .card-product.style-7 .card-product-info::before {
    width: calc(100% + 16px);
    height: calc(100% + 9px);
  }
}

@media (min-width: 1440px) {
  .header-default .box-nav-ul .menu-item > a::after {
    width: calc(100% + 60px);
  }
  .header-default .box-nav-ul.gap-40 .menu-item > a::after {
    width: calc(100% + 60px);
  }
}

.rtl .box-nav-ul .menu-item-2 .sub-menu {
  right: calc(100% + 23px);
}


/* --------------------------------------------------------------------------
   X2-01 — 1025–1149 px'te menüye ulaşılamıyor (2026-10-17)
   Hamburger (.tf-lg-hidden) 1150 altında görünür, masaüstü menüsü (.tf-md-hidden)
   gizlidir; tenant kopyasındaki çekmece ise yalnız ≤1024'te açılır. Kaynak
   (public/scss/component/_mobile-nav.scss) 1149'a çekildi; canlı tenant'lar için
   aynı blok yalnız eksik aralıkta. ≤1024 tenant kopyasında zaten var (dokunulmaz).
   Masaüstü .box-navigation bu aralıkta .tf-md-hidden içinde gizli; görünen tek
   .box-navigation body'deki .mobile-portal-nav çekmecesidir.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1149px) {
  /* tenant kopyası: .mobile-portal-nav { display: none !important } → özgüllükle geçilir */
  .box-navigation.mobile-portal-nav {
    display: block !important;
  }
  .mobile-nav-overlay {
    display: block;
  }
  .box-navigation {
    position: fixed;
    top: 0;
    left: -100%;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 999;
    padding: 60px 20px 20px;
    overflow-y: auto;
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }
  .box-navigation.mobile-open {
    left: 0;
  }
  .mobile-menu-close {
    display: block;
  }
  .box-nav-ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100%;
  }
  .box-nav-ul .menu-item {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #eee;
  }
  .box-nav-ul .menu-item > .item-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    width: 100%;
  }
  .box-nav-ul .menu-item > .item-link .icon-arrow-down {
    transition: transform 0.3s ease;
  }
  .box-nav-ul .menu-item.submenu-open > .item-link .icon-arrow-down {
    transform: rotate(90deg);
  }
  .box-nav-ul .sub-menu {
    position: fixed !important;
    top: 0 !important;
    left: 100% !important;
    width: 85%;
    max-width: 320px;
    height: 100vh !important;
    background: #fff;
    z-index: 1000;
    padding: 20px;
    overflow-y: auto;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: left 0.3s ease-in-out;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  }
  .box-nav-ul .sub-menu.submenu-active {
    left: 0 !important;
  }
  .box-nav-ul .mega-menu {
    padding: 20px !important;
  }
  .box-nav-ul .mega-menu .container,
  .box-nav-ul .mega-menu .row,
  .box-nav-ul .mega-menu .row-demo {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .box-nav-ul .mega-menu [class*=col-] {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* tenant kopyası: .submenu-back-btn, .submenu-all-link { display: none !important } → özgüllükle geçilir */
  .mobile-portal-nav .submenu-back-btn {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    font-weight: 600;
    color: var(--main, #333);
  }
  .mobile-portal-nav .submenu-back-btn::before {
    content: "\2190";
    font-size: 18px;
  }
  .mobile-portal-nav .submenu-all-link {
    display: block !important;
    padding: 15px 0;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--primary, #00bcd4);
    font-weight: 600;
    color: var(--primary, #00bcd4);
  }
  .mobile-portal-nav .submenu-all-link:hover {
    color: var(--main, #333);
  }
  .box-nav-ul .menu-list {
    width: 100%;
  }
  .box-nav-ul .menu-list li {
    border-bottom: 1px solid #f5f5f5;
  }
  .box-nav-ul .menu-list li a {
    display: block;
    padding: 12px 0;
  }
  .box-nav-ul .demo-item {
    width: 100% !important;
  }
  .box-nav-ul .collection-item {
    display: none;
  }
  .box-nav-ul .menu-heading {
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
}


/* --------------------------------------------------------------------------
   X2-10 — masaüstü alt/mega menü klavyeyle açılmıyor (2026-10-17)
   Alt menü yalnız .menu-item:hover ile görünürdü; Tab ile gelinen bağlantının
   menüsü kapalı kalıyordu. Odaklı (:focus-visible) bağlantıyı taşıyan öğenin
   alt menüsü açılır — fare tıklamasının bıraktığı odak eşleşmez, fare/dokunmatik
   görünümü değişmez. Yalnız ≥1150 (masaüstü menüsü): çekmecedeki .submenu-active
   düzenine karışmaz. :has() bilmeyen tarayıcı kuralı yok sayar (eski davranış).
   Kaynak: public/scss/component/_header.scss.
   -------------------------------------------------------------------------- */
@media (min-width: 1150px) {
  .box-nav-ul .menu-item:has(:focus-visible) > .sub-menu {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: translateX(0px) translateY(0px);
  }
  .box-nav-ul .menu-item-2:has(:focus-visible) > .sub-menu {
    pointer-events: all;
    opacity: 1;
    visibility: visible;
    transform: translateX(0px) translateY(0px);
  }
}