/* =====================================================================
 * EBR — FRONTEND-ONLY BEHAVIORAL / PERFORMANCE CSS
 *
 * Loads on the real live frontend ONLY. Must NEVER load inside the
 * Elementor editor / Theme Builder preview iframe.
 *
 * Every rule in this file was relocated verbatim from
 * uploads/ebr/ebr-custom-core.css on 2026-08-16, as part of the
 * Elementor editor/live CSS-parity architecture split. Rule text is
 * unchanged from its prior location — see ebr-custom-core.css for the
 * matching "MOVED to ebr-frontend-only.css" stub comment left at each
 * original section number ([03], [04], [07], [21]).
 *
 * Reason these rules must stay frontend-only:
 *  - [03] Header Search: depends on runtime JS toggling `.active`,
 *    uses position:fixed/absolute + z-index:99999.
 *  - [04] Home-mobile sticky/z-index fix: tied to real scroll/sticky
 *    JS state, mobile viewport only.
 *  - [07] UAEL mobile-menu FOUC/overlay-click guard: a first-paint
 *    flash-of-unstyled-content fix, meaningless (and risky) in an
 *    always-rendered editor canvas.
 *  - [21] content-visibility:auto fold-defer: can break Elementor's
 *    editor canvas scrolling and element-selection for off-screen
 *    sections.
 *
 * Do not add editor-safe visual rules here — those belong in
 * ebr-custom-core.css (the single source of truth for shared visual
 * styling, loaded on both frontend and Elementor preview).
 * ===================================================================== */

/* =========================================
   [03] Header Search — FINAL CLEAN
   (relocated from ebr-custom-core.css, unchanged)
   ========================================= */

/* Base hidden-state and static icon/box visual rules (.ebr-search-box,
   .search-icon and its hover/pseudo-element/img rules) moved to
   ebr-custom-core.css (editor-safe, no JS/position dependency of their
   own) — see [03] in that file. This rule (open-on-.active) remains
   here: it is JS-driven and only meaningful once the base state is
   applied. */
#site-search.ebr-search-form.active{
  display: block !important;
  animation: none !important;
}

.ebr-search-input{
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

@media (max-width:767px){
  #site-search.ebr-search-form{
    position: fixed !important;
    top: 150px;
    left: 12px;
    right: 12px;
    width: auto;
    z-index: 99999;
    background: #fff;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
  }

  .ebr-search-input{
    font-size: 16px;
    padding: 12px 16px;
  }
}

@media (min-width:768px) and (max-width:1024px){
  #site-search.ebr-search-form{
    position: fixed !important;
    top: 100px;
    left: 224px;
    right: 24px;
    width: auto;
    max-width: 400px;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 99999;
  }

  .ebr-search-input{
    font-size: 16px;
    padding: 12px 16px;
  }
}

@media (min-width:1025px){
  #site-search.ebr-search-form{
    position: absolute;
    top: 50%;
    right: 38px;
    transform: translateY(-50%);
  }

  .ebr-search-input{
    width: 260px;
  }
}

/* =========================================
   [04] HOME MOBILE — Product card vs sticky header fix
   (relocated from ebr-custom-core.css, unchanged)
   ========================================= */
@media (max-width: 767px){

  body.home .product-card-wrapper{
    position: relative;
    z-index: 1;
  }

  body.home .product-card,
  body.home .products-grid-card{
    position: relative;
    z-index: 1;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    will-change: auto !important;
  }

  body.home .product-card::before,
  body.home .product-card::after,
  body.home .products-grid-card::before,
  body.home .products-grid-card::after{
    z-index: 0 !important;
  }

  body.home .product-card img,
  body.home .product-card .elementor-widget-container,
  body.home .product-card .elementor-image,
  body.home .product-card .elementor-image img,
  body.home .products-grid-card img,
  body.home .products-grid-card .elementor-widget-container,
  body.home .products-grid-card .elementor-image,
  body.home .products-grid-card .elementor-image img{
    position: relative;
    z-index: 1;
  }

  header.elementor-sticky--effects{
    z-index: 99999 !important;
  }
}

/* =========================================
   [07] UAEL mobil menü FOUC + overlay click
   (relocated from ebr-custom-core.css, unchanged)
   ========================================= */
@media (max-width:1024px){
  .header-area .ebr-nav .uael-nav-menu__container:not([aria-hidden="false"]){ display:none!important; }
  .header-area .ebr-nav .uael-nav-menu__container{ width:100vw!important; max-width:100vw!important; left:0!important; right:0!important; margin:0!important; padding:0!important; }
  .header-area .ebr-nav .uael-nav-menu__overlay{ background:transparent!important; }
  .header-area .ebr-nav .uael-nav-menu__container,
  .header-area .ebr-nav .uael-nav-menu__overlay{ transition:none!important; animation:none!important; }
  .header-area .ebr-nav .uael-nav-menu__container[aria-hidden="false"]{ -webkit-overflow-scrolling:touch; overflow-y:auto; }
}
.header-area .ebr-nav .uael-nav-menu__overlay{ pointer-events:none!important; }
.header-area .ebr-nav .uael-nav-menu__container[aria-hidden="false"] ~ .uael-nav-menu__overlay{ pointer-events:auto!important; }

/* =========================================
   [21] Fold altını boya geciktir (mobile+tablet)
   (relocated from ebr-custom-core.css, unchanged)
   ========================================= */
@media (max-width: 1199.98px) {
  /* FOLD-G-002 (2026-09-22): was `.ebr-band:not(:first-of-type)`, which did NOT
     mean "every .ebr-band except the first one". :first-of-type matches the first
     element of its TAG type among its siblings, not the first element carrying the
     class, so an .ebr-band div that is not the first div child still matched
     :not(:first-of-type). Result: the FIRST .ebr-band was deferred too. On the 10
     hub pages whose first band is a zero-height wrapper sitting above the fold, it
     reserved the 800px contain-intrinsic-size placeholder and then collapsed to 0,
     shifting the whole page up by 800px. On the Folding L2 hub that produced a
     mobile CLS of exactly 0.5964605088516806, reproduced byte-identically across
     five PSI runs and unmoved by every image-side fix attempted.
     `.ebr-band ~ .ebr-band` is the correct idiom for "every .ebr-band preceded by
     another .ebr-band sibling". Verified across all 125 .ebr-band elements on all
     17 published pages that use the class: it matches exactly orders 2..n, never
     order-1, and is a strict SUBSET of the old selector, so no page can gain a new
     deferral. See 08_QA/.../band-inventory/EBR_BAND_INVENTORY_2026-09-22.md. */
  .ebr-band ~ .ebr-band,
  .smc-section:not(#smc-hero-mb),
  .smc-product-cards,
  .ebr-acc,
  .smc-faq,
  .smc-cta {
    content-visibility: auto;
    contain-intrinsic-size: 1000px 800px; /* tahmini boy */
  }
}