/* ======================================================================
   2) quick-search.css  (TEK DOSYA / TEK BLOK)
   - Desktop bozulmaz
   - Layer: .active ile açılır (senin JS böyle)
   - Mobil: panel scroll = .qr-body (iOS dahil)
   - Mobil: kategori listesi gizli, select görünür
   ====================================================================== */

/* Layer kapalı */
#aramaLayer{
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    box-sizing: border-box;
  }

    /* Search button */
  .searchBtn{
    cursor:pointer;
    transform: rotateY(180deg) rotateX(0);
  }
  
  /* JS: layer.classList.toggle('active') */
  #aramaLayer.active{ display: block; }
  
  /* Arka plan/blur sende ayrıysa burayı açabilirsin */
  /*
  #aramaLayer.active{
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }
  */
  
  /* Search box: senin input alanın */
  #aramaLayer .search-box{
    position: relative;
    width: min(1100px, calc(100vw - 36px));
    margin: 16px auto 0;
    border-radius: 16px;
    box-sizing: border-box;
  }
  
  /* Close X */
  #closeSearch{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    line-height:1;
    z-index: 5;
  }
  
  /* Scope pill */
  #aramaScopeNote{
    position:absolute;
    right:44px;
    top:50%;
    transform:translateY(-50%);
    display:none;
    white-space:nowrap;
    line-height:1;
    font-size:12px;
    cursor:pointer;
    user-select:none;
    padding:6px 10px !important;
    border-radius:999px;
    background:transparent;
    border:1px solid rgba(0,0,0,.22);
    color:rgba(0,0,0,.75);
  }
  #aramaLayer.scope-on #aramaScopeNote{
    background:#000;
    border-color:#000;
    color:#fff;
  }
  #aramaLayer.scope-on #aramaInput{ padding-right: 260px; }
  
  /* Results panel */
  #aramaLayer #quickResults.quick-results{
    width: min(1100px, calc(100vw - 36px));
    margin: 12px auto 0;
    border-radius: 16px;
    overflow: hidden;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    box-shadow: 0 10px 40px rgba(0,0,0,.12);
    display: none; /* JS openResults() display:block yapıyor */
  }
  #aramaLayer #quickResults.quick-results.is-open{
    display: block;
  }
  
  /* İç iskelet */
  #quickResults .qr-inner{
    display:flex;
    flex-direction: column;
    min-height: 0;
  }
  
  /* Header */
  #quickResults .qr-head{
    flex:0 0 auto;
    padding:10px 12px;
    border-bottom:1px solid rgba(0,0,0,.08);
    background:#fff;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap:10px;
  }
  #quickResults .qr-title{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
  }
  #quickResults .qr-actions{
    display:flex;
    align-items:center;
    gap:8px;
  }
  #quickResults .qr-count{
    height:34px;
    min-width:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    font-size:13px;
    font-weight:600;
    color:rgba(0,0,0,.70);
  }
  
  /* Mobil bar (desktop'ta gizli) */
  #quickResults .qr-mobilebar{ display:none; }
  
  /* Body */
  #quickResults .qr-body{
    flex:1 1 auto;
    min-height: 0;
    padding: 12px;
    box-sizing: border-box;
  }
  
  /* Layout */
  #quickResults .qr-layout{
    display:flex;
    gap:12px;
    align-items: stretch;
    min-height: 0;
  }
  
  /* Sol: cats */
  #quickResults .qr-cats{
    width:260px;
    min-width:240px;
    border-right:1px solid rgba(0,0,0,.08);
    padding-right:10px;
    box-sizing:border-box;
    min-height:0;
  }
  #quickResults .qr-cats-list{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  /* JS class is-active (CSS destek) */
  #quickResults .qr-cat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    text-decoration:none;
    padding:8px 10px;
    border-radius:10px;
    color:rgba(0,0,0,.78);
    border:1px solid rgba(0,0,0,.10);
    background:transparent;
  }
  #quickResults .qr-cat:hover,
  #quickResults .qr-cat.is-active,
  #quickResults .qr-cat.active{
    background:#000;
    color:#fff;
    border-color:#000;
  }
  #quickResults .qr-cat-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    /*max-width: 170px;*/
  }
  #quickResults .qr-cat-count{
    font-size:12px;
    opacity:.85;
  }
  
  /* Sağ: products */
  #quickResults .qr-products{
    flex:1;
    min-width:0;
    min-height:0;
  }
  
  /* Grid (senin kart CSS'in başka yerdeyse dokunmuyoruz) */
  #quickResults .items-grid{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:12px;
  }
  
  /* -------------------------
     DESKTOP: iki kolon kendi içinde scroll
  ------------------------- */
  @media (min-width: 769px){
    #aramaLayer.active{
      padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
      box-sizing: border-box;
    }
  
    #aramaLayer #quickResults.quick-results{
      max-height: calc(100vh - 140px);
    }
  
    #quickResults .qr-inner{
      height: calc(100vh - 140px);
      max-height: calc(100vh - 140px);
    }
  
    /* body scroll değil, kolonlar scroll */
    #quickResults .qr-body{
      overflow: hidden;
    }
  
    #quickResults .qr-cats{
      height: 100%;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
  
    #quickResults .qr-products{
      height: 100%;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
    }
  }
  
  /* -------------------------
     MOBILE: tek panel + scroll = qr-body
     + kategori = SELECT
  ------------------------- */
  @media (max-width: 768px){
  
    /* iOS address bar uyumlu */
    #aramaLayer.active{
      display:flex;
      flex-direction: column;
      height: 100dvh;
      min-height: 100vh;
      padding: 12px 10px calc(10px + env(safe-area-inset-bottom));
      box-sizing: border-box;
      overscroll-behavior: contain;
    }
  
    #aramaLayer .search-box{
      width: 100%;
      margin: 0;
      flex: 0 0 auto;
    }
  
    #aramaLayer.scope-on #aramaInput{ padding-right: 150px; }
  
    #aramaLayer #quickResults.quick-results{
      width: 100%;
      margin: 10px 0 0;
      flex: 1 1 auto;
      min-height: 0;
    }
  
    /* header sabit, body scroll */
    #quickResults .qr-inner{
      display:flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
    }
  
    /* mobil select görünür */
    #quickResults .qr-mobilebar{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(0,0,0,.08);
      background:#fff;
      flex: 0 0 auto;
    }
    #quickResults .qr-catselect{
      flex:1;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(0,0,0,.14);
      padding:0 12px;
      font-size:15px;
      background:#fff;
      color:rgba(0,0,0,.86);
      outline:none;
    }
    #quickResults .qr-mcount{
      height:42px;
      min-width:42px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(0,0,0,.14);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:rgba(0,0,0,.70);
      background:#fff;
    }
  
    /* mobilde sidebar gizli */
    #quickResults .qr-cats{ display:none !important; }
    #quickResults .qr-layout{ display:block; }
  
    /* scroll burası */
    #quickResults .qr-body{
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }
  
    /* mobil grid */
    #quickResults .items-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap:10px;
    }
  }
  
  @media (max-width: 420px){
    #quickResults .items-grid{
      grid-template-columns: 1fr;
    }
  }

  /* ============================================================
   PATCH (EN SONA EKLE)
   - Header chip’ler (Tüm Mağaza + seçili kategori)
   - Input içi scope pill "simsiyah" olmasın
   ============================================================ */

/* -------- Header: sol grup düzgün hizalansın -------- */
#quickResults .qr-title .qr-head-left{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    min-width:0 !important;
  }
  
  /* -------- Tüm Mağaza butonu: chip gibi -------- */
  #quickResults .qr-back{
    appearance:none;
    -webkit-appearance:none;
  
    height:34px;
    padding:0 12px;
  
    border-radius:999px;
    border:1px solid rgba(0,0,0,.16) !important;
  
    background: rgba(0,0,0,.03) !important;  /* ✅ boş görünmesin */
    color: rgba(0,0,0,.84) !important;
  
    font-size:13px;
    font-weight:600;
    line-height:1;
     
    cursor:pointer;
    gap: 0 !important;
  }
  
  #quickResults .qr-back:hover{
    background:#000 !important;
    border-color:#000 !important;
    color:#fff !important;
  }
  
  /* -------- Seçili kategori linki: chip gibi -------- */
  #quickResults .qr-katlink{
    height:34px !important;
    padding:0 12px !important;
  
    display:inline-flex !important;
    align-items:center !important;
  
    border-radius:999px !important;
    border:1px solid rgba(0,0,0,.16) !important;
  
    background: rgba(0,0,0,.03) !important;  
    color: rgba(0,0,0,.86) !important;
  
    font-size:13px !important;
    font-weight:600 !important;
  
    text-decoration:none !important;
  
    max-width:320px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  
  #quickResults .qr-katlink:hover{
    background:#000 !important;
    border-color:#000 !important;
    color:#fff !important;
  }
  
  /* -------- Input içindeki scope pill: simsiyah olmasın -------- */
  #aramaScopeNote{
    background: rgba(0,0,0,.04) !important;
    border-color: rgba(0,0,0,.22) !important;
  
    color: rgba(0,0,0,.78) !important;
    -webkit-text-fill-color: rgba(0,0,0,.78) !important; /* iOS’ta renk sapıtmasın */
  }
  
  #aramaLayer.scope-on #aramaScopeNote{
    /*background: rgba(0,0,0,.10) !important;*/
    border-color: rgba(0,0,0,.32) !important;
  
    color: rgba(0,0,0,.90) !important;
    -webkit-text-fill-color: rgba(0,0,0,.90) !important;
  
    font-weight:600 !important;
  }
  
  /* Aktifliğe ufak “nokta” (istersen kalsın) */
  #aramaLayer.scope-on #aramaScopeNote::before{
    content:"";
    /*width:6px; height:6px;*/
    border-radius:999px;
    /*background:#000;*/
    display:inline-block;
    /*margin-right:6px;*/
  }
  
  .searchBtnCat {
    border: 0;
    background-color: white;
    color:#000 !important;
  }