@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/* ------------------- Genel Demo Yapısı ------------------- */
div.ruby-menu-demo-header {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    z-index: 99999
}

div.ruby-menu-demo-header-bg {
    background: url(../img/bg.jpg)
}

div.ruby-menu-demo-header-bg div.ruby-menu-demo-download > span {
    color: #efefef
}

div.ruby-menu-demo-header-bg div.ruby-menu-demo-download > span > span {
    color: #efefef
}

div.ruby-menu-demo-description {
    position: relative;
    width: 980px;
    height: 160px;
    margin: 0 auto;
    padding: 0
}

div.ruby-menu-demo-description img {
    max-width: 200px;
    float: left;
    margin: 50px 20px 0 0
}

span.ruby-menu-demo-highlight {
    color: #333
}

div.ruby-menu-demo-bg-light,
div.ruby-menu-demo-bg-dark {
    width: 980px;
    height: auto;
    position: relative;
    background: #ec0b25;
    margin: 0 auto;    
    font-size: 16px
}

div.ruby-menu-demo-bg-dark {
    background: #efefef
}

/* ------------------- Renkler ------------------- */
.ruby-menu-demo-color-1 { background: #1aad86 }
.ruby-menu-demo-color-2 { background: #0c67c2 }
.ruby-menu-demo-color-3 { background: #ce0661 }
.ruby-menu-demo-color-4 { background: #ea7500 }
.ruby-menu-demo-color-5 { background: #74ba27 }
.ruby-menu-demo-color-6 { background: #ff3264 }
.ruby-menu-demo-color-7 { background: #fad814 }
.ruby-menu-demo-color-8 { background: #ccc }
.ruby-menu-demo-color-9 { background: #111; border-color: #ccc }
.ruby-menu-demo-color-10 { background: #036de2; border-color: #489efd }
.ruby-menu-demo-color-11 { background: #f85252; border-color: #444 }
.ruby-menu-demo-color-12 { background: #ca79d0; border-color: #f2def3 }
.ruby-menu-demo-color-13 { background: #efefef; border-color: #222 }
.ruby-menu-demo-color-14 { background: #ccc }

/* ------------------- Tema ------------------- */
div.ruby-wrapper,
div.ruby-wrapper.ruby-vertical {
    background: #f9f9f9;
    color: #222
}

ul.ruby-menu,
ul.ruby-menu li {
    list-style: none !important;
}


ul.ruby-menu > li > a {
    color: #222;
    z-index:999999 !important;
	
}

ul.ruby-menu > li > a:hover,
ul.ruby-menu > li:hover > a,
ul.ruby-menu > li.ruby-active-menu-item > a:hover,
ul.ruby-menu > li.ruby-active-menu-item:hover > a {
    background: #fff;
    color: #800027;
}

ul.ruby-menu > li.ruby-active-menu-item > a {
    background: #efefef;
    color: #222
}

/* ------------------- Ana Menü ------------------- */
div.ruby-wrapper {
    position: relative;
    height: 50px;
    margin: 0 auto;
    background: #333
}

div.ruby-wrapper ul {
    margin: 0;
    padding: 0;
    list-style: none
}

ul.ruby-menu > li {
    float: left;
    font-size: 13px
}

ul.ruby-menu > li > a {
    display: block;
    line-height: 50px;
    padding: 0 18px;
    color:#212422;
    text-decoration: none;
    font-size:16px;
    margin-left:10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

ul.ruby-menu > li > a:hover {
    color:#2e358e;
    background-color:#fff;
}

/* ------------------- Modern Dropdown Kutusu ------------------- */
ul.ruby-menu > li > ul,
ul.ruby-menu > li > ul > li > ul,
ul.ruby-menu > li > ul > li > ul > li > ul {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.35s ease;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 10px 0;
  border-top: none !important;
  z-index: 100;
}

/* Hover ile yumuşak açılış */
ul.ruby-menu > li:hover > ul,
ul.ruby-menu > li > ul > li:hover > ul,
ul.ruby-menu > li > ul > li > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Menü öğeleri */
ul.ruby-menu > li > ul > li > a,
ul.ruby-menu > li > ul > li > ul > li > a,
ul.ruby-menu > li > ul > li > ul > li > ul > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 220px;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  background: #fff;
  transition: all 0.3s ease;
  border-radius: 6px;
  margin-left: 0 !important;
  line-height: normal;
}

/* Hover efekti */
ul.ruby-menu > li > ul > li > a:hover,
ul.ruby-menu > li > ul > li > ul > li > a:hover,
ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover {
  background: #fff;
  color: #2e358e;
  transform: translateX(4px);
}

/* Ok ikonları */
ul.ruby-menu > li > ul > li > a::after,
ul.ruby-menu > li > ul > li > ul > li > a::after,
ul.ruby-menu > li > ul > li > ul > li > ul > li > a::after {
  content: "›";
  font-size: 14px;
  transition: transform 0.3s ease, color 0.3s ease;
  margin-left: auto;
}

/* Hover olduğunda okun hareket etmesi */
ul.ruby-menu > li > ul > li > a:hover::after,
ul.ruby-menu > li > ul > li > ul > li > a:hover::after,
ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover::after {
  transform: translateX(4px);
  color: #ec0b25;
}