/*
 * YO Menu v1.2.0
 * Author: iDiY (info@idiy.club)
 * (Görseldeki ikonlu geniş panel tasarımına uyarlanmış TAM CSS)
 */

/*  Default Style  */
.yo-menu{
  font-family: Josefin Sans,Arial,sans-serif;
  margin-bottom: 0px;
  position: relative; /* panelin düzgün konumlanması için */
}

/* ÜST BUTON (Ürünler) - görseldeki mavi butona yakın */
.yo-heading{
  font-family: Josefin Sans,Arial,sans-serif;
  font-size: 14px;
  position: relative;
  padding: 12px 14px;
  cursor: pointer;
  min-width:150px;
  border-radius: 8px;
  background-color:#e07e22; /* mavi */
  color:#fff;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  user-select:none;
  -webkit-user-select:none;
  margin-top:14px;
}

.yo-heading:hover {
   background-color:#333; /* mavi */
  color:#fff;

}

/* buton içindeki sol ikon / yazı hizası için */
.yo-heading .yo-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.yo-heading .yo-left i,
.yo-heading .yo-left svg{
  flex:0 0 auto;
}
.yo-heading .yo-title{
  font-family: Josefin Sans,Arial,sans-serif;
  font-size:17px;
  line-height:1;
}

/* sağ ok */
.yo-heading .yo-caret{
  width: 10px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  margin-left:auto;
  opacity:.95;
}

/* açılınca ok yukarı dönsün */
.yo-heading.yo-open .yo-caret{
  transform: rotate(-135deg);
}

/* eski fa-bars uyumluluk */
.yo-heading i.fa.fa-bars{
  font-size:22px;
  line-height:20px;
  float:none;
  margin-right:8px;
}

/* AÇILAN PANEL (görseldeki geniş beyaz kutu) */
.yo-wrapper{
  margin-left:0;                 /* eski -1px kaydırmayı kapat */
  border: 2px solid #e07e22;     /* açık mavi çerçeve */
  padding: 18px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  width: 360px;                  /* görseldeki genişlik */
  max-width: calc(100vw - 24px); /* taşmayı engelle */
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 9999;
}

/* heading açıkken birleşik dursun istersen */
.yo-heading.yo-open{
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* heading + wrapper radius düzeni */
.yo-heading + .yo-wrapper{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* liste elemanları */
.yo-menu ul.yo-am li{
  border-bottom: 0;  /* çizgiyi kaldır */
  line-height: 20px;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* her satır arası */
.yo-menu ul.yo-am li + li{
  margin-top: 10px;
}

/* linkler “kart/buton” gibi olsun */
.yo-menu ul.yo-am li a{
  font-size: 15px;
  padding: 10px 12px;
  -webkit-transition: all .2s;
     -moz-transition: all .2s;
      -ms-transition: all .2s;
       -o-transition: all .2s;
          transition: all .2s;
  box-sizing: border-box;
  text-decoration: none;
  font-weight: 600;
  color: #2d3a45;
  background-color: #fff;
  border: 1px solid #e9eef5;
  border-radius: 10px;
  display:flex;
  align-items:center;
  gap:12px;
  line-height: 1.25;
}

/* hover (görselde hafif yükselme + border mavi) */
.yo-menu ul.yo-am li a:hover{
  color: #2d3a45;
  background-color: #f7fbff;
  border-color: #b9dcff;
  transform: translateY(-1px);
}

/* active */
.yo-menu ul.yo-am li a.active{
  font-weight: 700;
  color: #2d3a45;
  background-color: #f0f8ff;
  border-color: #86c5ff;
}

/* ikon yuvarlak alan */
.yo-menu ul.yo-am li a .yo-ico{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1f86d8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 44px;
  overflow:hidden;
}

/* ikon içi resim */
.yo-menu ul.yo-am li a .yo-ico img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  border: 0;
  max-width: none !important;
}

/* ---- SENİN ORİJİNAL YO AM GENEL KURALLARIN (aynen) ---- */
ul.yo-am,
ul.yo-am ul{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
ul.yo-am ul{
  display: none;
}
ul.yo-am li{
  position: relative;
  display: block;
  float: none;
}
ul.yo-am li a{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}

/* alt menü ok/parent yapısı aynı kalsın */
ul.yo-am li a.am-item{
  padding-right: 2.6em;
}
ul.yo-am li.active > ul{
  display: block;
}
ul.yo-am li a span{
  position: relative;
  vertical-align: middle;
}
ul.yo-am li a span.am-badge{
  font-size: 85%;
  font-weight: bold;
  margin-left: .4em;
  padding: 2px 6px;
  text-align: center;
  color: #444;
  -webkit-border-radius: 2px;
     -moz-border-radius: 2px;
          border-radius: 2px;
  background-color: #f5f5f5;
}
ul.yo-am li a.am-parent span.am-arrow:after{
  font-family: FontAwesome;
  float: right;
  margin-right: -4px;
  content: '\f105';
}
ul.yo-am li.am-item-open > a.am-parent span.am-arrow:after{
  margin-right: -5px;
  content: '\f107';
}
ul.yo-am li a.am-tb{
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding-right: 14px;
  padding-left: 14px;
  color: #bbb;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
  background: transparent;
  border: none;
}
ul.yo-am li a.am-item:hover + a.am-tb,
ul.yo-am li a.am-tb:hover{
  -webkit-box-shadow: -1px 1px 0 0 rgba(0, 0, 0, .05);
     -moz-box-shadow: -1px 1px 0 0 rgba(0, 0, 0, .05);
          box-shadow: -1px 1px 0 0 rgba(0, 0, 0, .05);
}
ul.yo-am li a.am-tb span:before{
  font-family: FontAwesome;
  font-size: 10px;
  content: '\f067';
}
ul.yo-am li.am-item-open > a.am-tb span:before{
  content: '\f068';
}
ul.yo-am .am-price{
  font-size: 85%;
  float: right;
  margin-left: .4em;
  padding: 0 .6em;
  text-align: center;
  color: #444;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  background-color: #f5f5f5;
}
ul.yo-am li.am-image > a,
ul.yo-am li a.am-image{
  padding: 3px !important;
  text-align: center;
}
ul.yo-am img{
  overflow: hidden;
  max-width: 100% !important;
  height: auto;
  vertical-align: middle;
  border: 0;
}
ul.yo-am img.am-icon{
  margin-right: .7em;
}
ul.yo-am li a img.am-icon + span{
  display: inline;
}
ul.yo-am li li a:first-child{ padding-left: 2.2em; }
ul.yo-am li li li a:first-child{ padding-left: 3.2em; }
ul.yo-am li li li li a:first-child{ padding-left: 4.2em; }
ul.yo-am li li li li li a:first-child{ padding-left: 5.2em; }

/* ---- MOBİL / TAŞMA ÖNLEM (opsiyonel ama CSS içinde) ---- */
@media (max-width: 767px){
  .yo-wrapper{
    position: static;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
  }
}