.menu-subs{
visibility: hidden;

}





:root {
  --color-black: hsl(0, 0%, 10%);
  --color-white: hsl(0, 0%, 100%);
  --color-darken: hsl(0, 0%, 20%);
  --color-pink-700: rgba(58, 130, 245, 1);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


/*
html {
  font-size: 100%;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  scroll-behavior: smooth;
}


body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  color: var(--color-black);
  background: var(--color-white);
}

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}*/





span#searchbutton{
  background-color: white;
}

a.fuseSearch{
	
	color: inherit !important;	
	font-family: 'Montserrat', sans-serif;
	font-weight: 400 !important;
	font-size: 1em !important;
	color: inherit !important;
	text-decoration:none !important;
	margin-top: 10px !important;
	line-height:1em !important;	
}
a.fuseSearch:hover {

	font-family: 'Montserrat', sans-serif;	
	font-weight: 400;
	font-size: 1em !important;
	color: white !important;
	text-decoration:none !important;
	border:none !important;
	margin-top: 10px !important;
	line-height:1em !important;  
}

.circle {
  display: inline-table;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  
  background-color: #E30A17;
  border-radius: 50%;
}

.checkoutitemnumber {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color:white;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
}

@-webkit-keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}


.brand{
	
	max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
 
}


#addtocartbottom
{
  visibility:collapse;
  position:fixed;
  display: flex;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.75rem 0;
  z-index: 9;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
   
}



#addtocartbottom input {
  width: 90px;
}






.header .menu > ul > li.menu-item-has-children:hover .menu-subs{
	visibility: visible;
    margin-top: 0.5rem;
    opacity: 1;
    
 }
 

.header .menu > ul > li.menu-item-has-children .menu-subs.deactive{
	visibility: hidden;
  
    margin-top: 0.5rem;
    opacity: 0;
    
 }
  
  
  
  
  


.header {
  position:sticky;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.5rem 0;
  z-index: 11;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
}


.header .wrapper2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.header-item-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
}
.header-item-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;


}
.header-item-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  float: right !important;
  
  -webkit-box-flex: 0;
      -ms-flex: 0 0 10%;
          flex: 0 0 10%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.header-item-right .menu-icon {
  font-size: 1.35rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1rem;
  margin-left: 1rem;
  color: var(--color-black);
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
}
.header .menu > ul > li {
  display: inline-block;
  line-height: 3.125rem;
  margin-left: 1.5rem;
}
.header .menu > ul > li > a {
  position: relative;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  border: none;
  outline: none;
  color: var(--color-black);
  text-transform: capitalize;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.header .menu > ul > li .menu-subs{
  visibility: hidden;
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 1.75rem;
  padding: 1rem 2rem;
  z-index: 13;
  opacity: 0;
  background: linear-gradient(white, white) padding-box, linear-gradient(to right, #3b82f6, #06b6d4) border-box;
  border: 2px solid transparent;
  border-radius: 1rem;

  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;


  
}





.header .menu > ul > li .menu-subs.active {
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 1.75rem;
  padding: 1rem 2rem;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  border-radius: 0.25rem;
  border-top: 3px solid var(--color-pink-700);
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
}



.header .menu > ul > li .menu-subs > ul > li {
  line-height: 1;
}
.header .menu > ul > li .menu-subs > ul > li > a {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.75rem 0;
  border: none;
  outline: none;
  color: var(--color-black);
  text-transform: capitalize;
  -webkit-transition: all 0.2s ease !important;
  transition: all 0.2s ease !important;
}
.header .menu > ul > li .menu-column-1 {
  min-width: 16rem;
  max-width: 20rem;
}
.header .menu > ul > li .menu-subs.menu-mega {
 
  left: 50% ;
  -webkit-transform: translateX(-50%) ;
          transform: translateX(-50%) ;
}
.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li {
  display: block;
  line-height: 1;
}
.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a {
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.5rem 0;
  border: none;
  word-wrap: break-word;
  text-align:center;
  outline: none;
  color: var(--color-black);
  text-transform: capitalize;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  
  
}

.header .menu > ol, ul {
	margin-bottom:0px !important;
  padding-left: 0rem !important;
}

.header .menu > ul > li .menu-subs.menu-column-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 68rem;
  width: 100%;
  padding: 1.25rem 1rem;
  align-content:stretch;
}


.header .menu > ul > li .menu-subs.menu-column-4 > .list-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  padding: 0 1rem;
}
.header .menu > ul > li .menu-subs.menu-column-4 > .list-item .title {
  font-family: inherit;
  font-size: 1.2em;
  text-align:center;
  font-weight: 500;
  line-height: 1;
  padding: 0.15rem 0;
  color: var(--color-pink-700);
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease !important;
  transition: all 0.3s ease !important;
}


.header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title {
  text-align: center;
}
.header .menu > ul > li .menu-subs.menu-column-4 > .list-item img {
  /*display: block;*/
  width: 150px;/*example only*/
  height: 100px;/*example only*/
  max-height: 100%;
 
  margin-top: 0.75rem;
  -o-object-fit: contain;
     object-fit: contain;
}

#ievent img{
margin-top:1em;
  box-align:center;
  width: 100%;/*example only*/
  height: auto;/*example only*/
	
	
}
.header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a:hover,
.header .menu > ul > li .menu-subs > ul > li > a:hover {
  color: var(--color-pink-700);
}
.header-item-right a:hover,
.header .menu > ul > li:hover > a {
  color: var(--color-pink-700);
}
.header .menu-mobile-header,
.header .menu-mobile-toggle {
  display: none;
}

.addtocart input {
  width: 30%;
}



#addtocart2
{

  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.75rem 0;
  z-index: 9;
  background: var(--color-white);

  display:flex;
  justify-content: space-evenly;
  align-items: center;
  
}

#divsubmitbutton
{

  width:100%;
  height: auto;
  background: var(--color-white);
  display:flex;
}

#addSubmitBtn{
	width: 100%;
	margin-left:10px;
	margin-right:10px;
  border-width: 0px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(58, 130, 245, 1) 0%, rgba(8, 181, 213, 1) 100%)!important;
  font-size: 1.2em;
}

.divlikebutton{
	min-width:10%;
	
}
  
.numberpiece{

   min-width: 40% !important;
 
	
}

.addtocart input {
  width: 100%;
}


  
.topdown{
	display:none;

}
  
  
.sepetim{
	
	position: relative;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  border: none;
  outline: none;
  color: var(--color-black);
  text-transform: capitalize;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
	
}

  
@media screen and (max-width: 992px) {
	
	
.sepetim{
 display:none;

}
	
.header {
  position:sticky;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.1rem 0 !important;
  z-index: 19;
  background: var(--color-white);
  -webkit-box-shadow: var(--shadow-medium);
          box-shadow: var(--shadow-medium);
}
	
	.menu-subs{
visibility: hidden;
}

.topdown{
	
	font-size:0.75rem;
	margin-left:10px !important;
	display: flex;
	align-items: center;
	justify-content: space-around;
    align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	
}

.icp2{
	margin-left:10px !important;
	display: flex;
	font-size: 1.2rem;
	align-items: center;
	vertical-align:center;
	
}



.divlikebutton{
	min-width:10%;
	
}
	
	
#addtocart2
{
  width: 100%;
  visibility:visible;
  position:fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.75rem 0;
  z-index: 9;

  background: var(--color-white);
	display:flex;
  justify-content: space-evenly;
  align-items: center;
}

#divsubmitbutton
{
  width:50%;
  min-width:100px;
  height: auto;
  z-index: 9;
  background: var(--color-white);
  display:flex;
}

#addSubmitBtn{
	margin-left:10px;
  border-width: 0px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(58, 130, 245, 1) 0%, rgba(8, 181, 213, 1) 100%)!important;
  font-size: 1em;
}




.circle {
  display: inline-table;
  vertical-align: middle;
  width: 1.5rem;
  height: 1.5rem;
  
  background-color: #E30A17;
  border-radius: 50%;
}

.checkoutitemnumber {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color:white;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
	
	
.brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -1px;
  text-transform: capitalize;
  width:40vw;

  
}
	
	
	
  .header-item-center {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .header-item-left, .header-item-right {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }

  .wrapper2 {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 auto;
    padding: 0.5rem 0;
  }

  .header .menu-mobile-toggle {
    position: relative;
    display: block;
    cursor: pointer;
    width: 1.75rem;
    height: 1rem;
    border: none;
    outline: none;
    margin-left: 1.25rem;
    margin-top: -0.25rem;
    background: none;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: 0.35s ease-in-out;
    transition: 0.35s ease-in-out;
  }
  .header .menu-mobile-toggle span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    border: none;
    outline: none;
    opacity: 1;
    border-radius: 0.25rem;
    background: var(--color-black);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  .header .menu-mobile-toggle span:nth-child(1) {
    top: 0;
  }
  .header .menu-mobile-toggle span:nth-child(2), .header .menu-mobile-toggle span:nth-child(3) {
    top: 0.5rem;
  }
  .header .menu-mobile-toggle span:nth-child(4) {
    top: 1rem;
  }
  .header-item-right {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .header .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    z-index: 11;
    overflow: hidden;
    background: var(--color-white);
    -webkit-transform: translate(-100%);
            transform: translate(-100%);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }
  .header .menu.active {
    -webkit-transform: translate(0%);
            transform: translate(0%);
			visibility: visible;
  }
  .header .menu > ul > li {
    display: block;
    line-height: 1;
    margin: 0;
  }
  .header .menu > ul > li > a {
    display: block;
    line-height: 3.125rem;
    height: 3.125rem;
    padding: 0 3.125rem 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }


   .header .menu > ul > li > a span.expand-icon3 {
    position: absolute;
    font-size: 1.25rem;
    line-height: 3.125rem;
    top: 0;
    right: 0;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  
  .header .menu .menu-mobile-header {
    position: relative;
    position: sticky;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    top: 0;
    height: 3.125rem;
    z-index: 12;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--color-white);
  }
  .header .menu .menu-mobile-header .menu-mobile-arrow {
    display: none;
    font-size: 1.25rem;
    line-height: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
    cursor: pointer;
    text-align: center;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-black);
  }
  .header .menu .menu-mobile-header.active .menu-mobile-arrow {
    display: block;
    background-color: white;
    border: none;
  }
  .header .menu .menu-mobile-header .menu-mobile-title {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
	text-align:center;
    line-height: inherit;
    color: var(--color-black);
    text-transform: capitalize;
  }
  .header .menu .menu-mobile-header .menu-mobile-close {
    font-size: 2.25rem;
    line-height: 3.125rem;
    cursor: pointer;
    width: 3.125rem;
    height: 3.125rem;
    text-align: center;
    background-color: white;
    border: none;
  }
  .header .menu .menu-section {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .header .menu > ul > li .menu-subs {
    
    position: absolute;
    display: none;
    top: 1em;
    left: 0;
    max-width: none;
    min-width: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem;
    padding-top: 4rem;
    opacity: 1;
    overflow-y: auto;
    visibility: visible;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .header .menu > ul > li .menu-subs.menu-mega {
    
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    max-width: none;
    min-width: auto;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1rem;
    padding-top: 4rem;
    opacity: 1;
    overflow-y: auto;
    visibility: visible;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .header .menu > ul > li .menu-subs.active {
    display: block;
  }
  .header .menu > ul > li .menu-subs.menu-column-4 > .list-item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    padding: 0rem;
  }
  .header .menu > ul > li .menu-subs.menu-column-4 > .list-item img {
    margin-top: 0;
  }
  .header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center .title {
    margin-bottom: 1.25rem;
  }
  .header .menu > ul > li .menu-subs.menu-column-4 > .list-item.text-center:last-child .title {
    margin-bottom: 0rem;
  }
  .header .menu > ul > li .menu-subs > ul > li > a {
    display: block;
  }
  .header .menu > ul > li .menu-subs.menu-mega > .list-item > ul {
    margin-bottom: 1rem;
  }
  .header .menu > ul > li .menu-subs.menu-mega > .list-item > ul > li > a {
    display: block;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.65);
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
  }
  .overlay.active {
    opacity: 1;
    visibility: visible;
  }
}

/* Navbar End*/


body.navlock .header .menu,
body.navlock .header .menu * {
  pointer-events: none !important;
}

body.navlock .header .menu > ul > li .menu-subs,
body.navlock .header .menu > ul > li:hover .menu-subs {
  visibility: hidden !important;
  opacity: 0 !important;
  display: none !important;
}


body.is-transitioning .header .menu > ul > li.menu-item-has-children:hover .menu-subs {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none; /* Üzerindeki tıklamaları da engeller */
}

body.navlock .header .menu > ul > li.menu-item-has-children:hover .menu-subs {
  visibility: hidden !important;
  opacity: 0 !important;
}


#KVKK
{
  position: fixed; 
  bottom: 20px; 
  left: 10px;
  width:90%; 
  max-width: 300px; 
   background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #3b82f6, #06b6d4) border-box;
  border: 1.4px solid transparent;
  padding: 10px; 
  border-radius: 1rem; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.25); 
  z-index: 12;
}

#KVKK button{
  position: absolute; top: -4px; right: 7px; background: none; border: none; font-size: 24px; cursor: pointer; color: #777;
}




/* ===================== OVERLAY ONLY FIX ===================== */
/* 1) Karartma katmanı: TÜM sayfa için, ALTA koy (z-index düşük) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.15);  /* kararma seviyesi */
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9;                /* overlay altta */
}

/* 2) Ne zaman açılsın? Search input odaktayken */
body:has(.ui-autocomplete-input:focus)::before,
body:has(.ui-autocomplete-input:focus-visible)::before{
  opacity: 1;
  pointer-events: auto;
}

/* 3) Search ve sonuç panelini overlay'in ÜSTÜNE çıkar */
.search,                       /* <form class="... search"> */
.search .input-group,
.ui-autocomplete-input,
#acWrap,                       /* senin wrapper'ın */
#acWrap .ui-autocomplete,      /* jQuery UI UL */
.ui-autocomplete.hb-suggest {  /* paneli doğrudan hedeflemek için opsiyonel */
  position: relative;
  z-index: 10;              /* overlay'den büyük → aydınlık kalır */
}

/* 4) Sağdaki buton/text parçaları da üstte kalsın (Bootstrap uyumu) */
.search .input-group-text,
#searchbutton,
.search .btn{
  position: relative;
  z-index: 1;
}

/* 5) Mobil sheet modunda da panel en üstte kalsın */
@media (max-width: 768px){
  body:has(.ui-autocomplete-input:focus) #acWrap,
  body:has(.ui-autocomplete-input:focus-visible) #acWrap{
    z-index: 12; /* overlay üstünde */
  }
}

/* =========================================
   Minimal jQuery UI Autocomplete Styles
   (Sadece arama girişi ve sonuç listesi)
   ========================================= */

   /* =========================================
   Minimal jQuery UI Autocomplete Styles
   (Sadece arama girişi + öneri listesi)
   ========================================= */
/* =========================================
   jQuery UI Autocomplete — Blue&White + Smart Scrollbar
   - Scrollbar: gizli; hover/odak/scroll sırasında görünür
   - Radius: input, dropdown, item hepsi uyumlu
   ========================================= */
:root{
  --ui-blue-1:#3b82f6; --ui-blue-2:#06b6d4; --ui-white:#fff;
  --ui-scroll-track:#f1f5ff; --ui-scroll-thumb:#cfe0ff; --ui-scroll-thumb-hover:#b7d0ff;
  --ui-r:12px; /* tek yerden radius */
}

/* INPUT */
.ui-autocomplete-input{
  font: 14px/1.3 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  width:100%; color:var(--ui-blue-1);
  background:
    linear-gradient(var(--ui-white),var(--ui-white)) padding-box,
    linear-gradient(to right,var(--ui-blue-1),var(--ui-blue-2)) border-box;
  border:1.4px solid transparent; border-radius:var(--ui-r);
  padding:12px 14px; outline:none;
  transition: box-shadow .15s ease;
  
}
.ui-autocomplete-input:focus{
  box-shadow:0 0 0 4px color-mix(in oklab, var(--ui-blue-1) 20%, transparent);
}

/* DROPDOWN (container) */
.ui-autocomplete{
  position:absolute; z-index:12; box-sizing:border-box;
  max-height:320px; overflow-y:auto; margin-top:8px; padding:8px;
  background:
    linear-gradient(var(--ui-white),var(--ui-white)) padding-box,
    linear-gradient(135deg,var(--ui-blue-1),var(--ui-blue-2)) border-box;
  border:1.4px solid transparent; border-radius:var(--ui-r);
  box-shadow:0 16px 32px rgba(59,130,246,.08),0 2px 6px rgba(0,0,0,.06);
  
}

/* LIST & ITEMS */
.ui-menu{ list-style:none; margin:0; padding:0; }
.ui-menu .ui-menu-item{ margin:0; padding:0; }
.ui-menu .ui-menu-item-wrapper{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  width:100%; padding:10px 12px; border-radius:calc(var(--ui-r) - 2px);
  cursor:pointer; user-select:none; transition: background .12s,color .12s;
  background:#fff !important; color:var(--ui-blue-1) !important;
}
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-state-active{
  background:linear-gradient(135deg,var(--ui-blue-1),var(--ui-blue-2)) !important;
  color:#fff !important;
}

/* ---------------------------------
   SCROLLBAR: gizli → hover/odak/scroll’da görünür
   --------------------------------- */

/* Firefox varsayılan: tamamen gizle */
.ui-autocomplete{ scrollbar-width: none; }
/* Hover + klavye odağı (görünsün) */
.ui-autocomplete:hover,
.ui-autocomplete:focus-within,
.ui-autocomplete.is-scrolling{ scrollbar-width: thin; }

/* WebKit (Chrome/Edge/Safari) */
.ui-autocomplete::-webkit-scrollbar{ width:0; height:0; } /* gizle */
.ui-autocomplete:hover::-webkit-scrollbar,
.ui-autocomplete:focus-within::-webkit-scrollbar,
.ui-autocomplete.is-scrolling::-webkit-scrollbar{
  width:10px; height:10px; /* görünür hale getir */
}
.ui-autocomplete::-webkit-scrollbar-track{
  background:var(--ui-scroll-track); border-radius:var(--ui-r);
}
.ui-autocomplete::-webkit-scrollbar-thumb{
  background:
    linear-gradient(var(--ui-white),var(--ui-white)) padding-box,
    linear-gradient(180deg,var(--ui-blue-1),var(--ui-blue-2)) border-box;
  border:2px solid transparent; border-radius:var(--ui-r);
}
.ui-autocomplete::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(var(--ui-white),var(--ui-white)) padding-box,
    linear-gradient(180deg,var(--ui-blue-2),var(--ui-blue-1)) border-box;
}

/* Dokunmatik cihazlarda hover yoksa: scrollbar hep ince görünsün (kullanılabilirlik) */
@media (hover:none){
  .ui-autocomplete{ scrollbar-width: thin; }
  .ui-autocomplete::-webkit-scrollbar{ width:10px; height:10px; }
}

/* ================== Autocomplete Tema ================== */
:root{
  --blue1:#3b82f6; --blue2:#06b6d4; --white:#fff; --text:#111827;
  --muted:#6b7280; --line:#eceff6; --r:14px;
}

/* Input */
.ui-autocomplete-input{
  width:100%;
  font:14px/1.35 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--blue1);
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(90deg,var(--blue1),var(--blue2)) border-box;
  border:1.4px solid transparent; border-radius:var(--r);
  padding:12px 14px; outline:none; transition:box-shadow .15s ease;
}
.ui-autocomplete-input::placeholder{ color:color-mix(in oklab,var(--blue1) 55%, white); }
.ui-autocomplete-input:focus{ box-shadow:0 0 0 4px color-mix(in oklab,var(--blue1) 20%, transparent); }

/* ==== WRAPPER: jQuery UI sonuçlarını buraya append edeceğiz ==== */
.ac-wrap{
  position:absolute; z-index:13; inset:auto auto auto auto;
  /* desktop’ta 2 sütun grid */
  display:grid; grid-template-columns:1fr 360px; gap:16px;
  max-height:460px; margin-top:10px; padding:12px;
  background:
    linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(90deg,var(--blue1),var(--blue2)) border-box;
  border:1.4px solid transparent; border-radius:var(--r);
  box-shadow:0 18px 36px rgba(0,0,0,.08),0 2px 8px rgba(0,0,0,.06);
  background-clip:padding-box;
  scrollbar-gutter:stable both-edges;
}

/* jQuery UI UL (sol sütun) */
.ac-wrap > .ui-autocomplete.ui-menu{
  list-style:none; margin:0; padding:0; overflow:auto;
  max-height:100%;
}
.ui-menu .ui-menu-item{ margin:0; padding:0; }
.ui-menu .ui-menu-item-wrapper{
  display:flex; align-items:center; gap:10px;
  width:100%; padding:14px 10px;
  border-radius:0px; cursor:pointer; user-select:none;
  background:#fff !important; color:var(--text) !important;
  transition:background .12s ease,color .12s ease;
}
/* hover/klavye */
.ui-menu .ui-menu-item-wrapper:hover,
.ui-menu .ui-state-active{
  background:linear-gradient(135deg,var(--blue1),var(--blue2)) !important;
  color:#fff !important;
}
/* ince ayraç */
.ui-menu .ui-menu-item + .ui-menu-item .ui-menu-item-wrapper{
  border-top:1px solid var(--line);
}
.ui-autocomplete-divider{ height:1px; margin:8px 0; background:var(--line); border-radius:1px; }

/* Sağ sütun (özel ürünler) */
.ui-ac-side{ overflow:auto; padding-left:4px; }
.ui-ac-side h4{ margin:4px 0 10px; font:600 14px/1.2 "Montserrat",system-ui; color:var(--text); }
.p-card{ background:#fff; border:1px solid #eef2ff; border-radius:12px; margin-bottom:10px; overflow:hidden; }
.p-link{ display:grid; grid-template-columns:72px 1fr; gap:12px; padding:10px; color:inherit; text-decoration:none; align-items:center; }
.p-link:hover{ background:#fafbff; }
.p-link + .p-link{ border-top:1px dashed var(--line); } /* kart içi ayraç */
.p-card img{ width:72px; height:72px; border-radius:10px; object-fit:cover; }
.p-title{ font-weight:600; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-meta{ font-size:12px; color:#6b7280; margin-top:2px; }
.p-meta .star::before{ content:"★ "; color:#f59e0b; }
.p-prices{ display:flex; gap:8px; align-items:baseline; margin-top:4px; }
.p-old{ color:#9ca3af; text-decoration:line-through; font-size:12px; }
.p-new{ color:#0a7a34; font-weight:700; }

/* Scrollbar: gizli → hover/odakta görünür */
.ac-wrap > .ui-menu, .ui-ac-side{ scrollbar-width:none; }
.ac-wrap > .ui-menu:hover, .ac-wrap > .ui-menu:focus-within,
.ui-ac-side:hover, .ui-ac-side:focus-within{ scrollbar-width:thin; }
.ac-wrap > .ui-menu::-webkit-scrollbar, .ui-ac-side::-webkit-scrollbar{ width:0; height:0; }
.ac-wrap > .ui-menu:hover::-webkit-scrollbar,
.ac-wrap > .ui-menu:focus-within::-webkit-scrollbar,
.ui-ac-side:hover::-webkit-scrollbar, .ui-ac-side:focus-within::-webkit-scrollbar{ width:10px; height:10px; }
.ac-wrap > .ui-menu::-webkit-scrollbar-track, .ui-ac-side::-webkit-scrollbar-track{ background:#f1f5ff; border-radius:12px; }
.ac-wrap > .ui-menu::-webkit-scrollbar-thumb, .ui-ac-side::-webkit-scrollbar-thumb{
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,var(--blue1),var(--blue2)) border-box;
  border:2px solid transparent; border-radius:12px;
}

/* === Overlay: input odaktayken arka plan kararsın (ek HTML yok) === */
body::before{
  content:""; position:fixed; inset:0; background:rgba(0,0,0,.15);
  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:10;
}
body:has(.ui-autocomplete-input:focus)::before,
body:has(.ui-autocomplete-input:focus-visible)::before{ opacity:1; pointer-events:auto; }

/* === MOBİL (≤768px): tam ekran sheet === */
@media (max-width:768px){
  body:has(.ui-autocomplete-input:focus) .ac-wrap,
  body:has(.ui-autocomplete-input:focus-visible) .ac-wrap{
    position:fixed; left:12px; right:12px; top:12px; bottom:12px;
    margin:0; padding:12px; border-radius:20px; max-height:none; z-index:11;
    grid-template-columns:1fr; gap:12px;
  }
  .ui-autocomplete-input{ position:sticky; top:0; z-index:2; margin:0; border-radius:16px; }
  .ac-wrap, .ac-wrap > .ui-menu, .ui-ac-side{ overflow:auto; }
}

/* Erişilebilirlik */
.ui-helper-hidden-accessible{ position:absolute !important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; }