/* =============================================
   HEADER MODERN MENU STYLES
   header.php'den taşındı - performans optimizasyonu
   ============================================= */

/* Header wrapper - birleşme çizgisini gider */
#header .header-wrapper{background:#08090e!important;border-radius:14px 14px 0 0;border:1px solid rgba(255,255,255,.04);border-bottom:none}

/* Header-middle - aynı arka plan, border yok */
#header #header-middle{background:#08090e!important;border-radius:0!important;border:none!important;display:flex!important;align-items:center}

/* Menü container - desktop */
@media(min-width:993px){
  #header #header-middle #header-menu{display:flex!important;align-items:center;height:100%}
}
#header #header-middle #header-menu ul{display:flex;align-items:center;gap:1px;padding:0 6px;margin:0;list-style:none;height:100%}

/* Menü öğeleri - küçültülmüş */
#header #header-middle #header-menu ul li{padding:0;margin:0}
#header #header-middle #header-menu ul li a{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 4px;margin:0;
  font-size:12.5px;font-weight:600;letter-spacing:.15px;
  color:rgba(255,255,255,.65);
  border:none!important;border-bottom:none!important;
  border-radius:8px;white-space:nowrap;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  text-decoration:none;position:relative;
  background:transparent
}
#header #header-middle #header-menu ul li a:hover{
  color:#fff;background:transparent
}
#header #header-middle #header-menu ul li.active a,
#header #header-middle #header-menu ul li.actives a{
  color:#fff!important;
  background:transparent!important;
  border-bottom-color:transparent!important
}
#header #header-middle #header-menu ul li.active a::after,
#header #header-middle #header-menu ul li.actives a::after{
  content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:24px;height:3px;border-radius:3px;background:#e53935
}

/* İkon sallanma animasyonu */
@keyframes headerBellshake{
  0%{transform:rotate(0)}
  15%{transform:rotate(5deg)}
  30%{transform:rotate(-5deg)}
  45%{transform:rotate(4deg)}
  60%{transform:rotate(-4deg)}
  75%{transform:rotate(2deg)}
  85%{transform:rotate(-2deg)}
  92%{transform:rotate(1deg)}
  100%{transform:rotate(0)}
}

/* İkon stili */
#header #header-middle #header-menu ul li a svg,
#header #header-middle #header-menu ul li a .mofycon{
  width:14px;height:14px;fill:currentColor;opacity:.7;transition:opacity .2s;
  display:inline-block;flex-shrink:0
}
#header #header-middle #header-menu ul li a .genre-icon{
  display:inline-block;flex-shrink:0;
  transform-origin:top right;backface-visibility:hidden
}
#header #header-middle #header-menu ul li a:hover svg,
#header #header-middle #header-menu ul li a:hover .mofycon{
  opacity:1;
  animation:headerBellshake .5s cubic-bezier(.36,.07,.19,.97) both
}
#header #header-middle #header-menu ul li a:hover .genre-icon{
  animation:headerBellshake .5s cubic-bezier(.36,.07,.19,.97) both
}

/* Yeni badge */
#header #header-middle #header-menu ul li.new a::before{
  width:6px;height:6px;top:6px;right:4px;background:#ff9800;border-radius:50%
}

/* Kullanıcı dropdown */
#header .ui.top.right.pointing.dropdown.user-logged-in{position:relative;z-index:9999999}
#header .ui.top.right.pointing.dropdown.user-logged-in .menu{background:#0d0e14;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.65);z-index:9999999;position:absolute}
#header .ui.top.right.pointing.dropdown.user-logged-in .menu .item{color:#9ca3af;font-weight:600;transition:all .2s}
#header .ui.top.right.pointing.dropdown.user-logged-in .menu .item:hover,
#header .ui.top.right.pointing.dropdown.user-logged-in .menu .item:focus{color:#fff;background:rgba(255,152,0,.1)}
#header .ui.top.right.pointing.dropdown.user-logged-in .menu .divider{border-top:1px solid rgba(255,255,255,.05)}

/* Logo alanı - birleşme çizgisi yok */
#header #logo{display:flex;align-items:center;padding:0 20px;background:#08090e;border-radius:0!important;border:none!important}
#header #logo a{color:#fff;font-weight:700}

/* ===== MOBİL UYUM ===== */
@media(max-width:992px){
  /* Header wrapper mobilde border-radius kaldır */
  #header .header-wrapper{border-radius:0!important;border:none!important}

  /* Mobil menü - tam ekran dikey liste, varsayılan gizli (JS fadeIn/fadeOut ile açılır) */
  #header #header-middle #header-menu{
    display:none;background:#08090e!important
  }
  #header #header-middle #header-menu ul{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:0!important;
    padding:20px 16px!important;margin:0!important;
    width:100%!important;height:auto!important;
    border-top:1px solid rgba(255,255,255,.06)
  }
  #header #header-middle #header-menu ul li{
    display:block!important;width:100%!important;padding:0!important;margin:0!important
  }
  #header #header-middle #header-menu ul li a{
    display:flex!important;align-items:center;gap:12px;
    width:100%!important;white-space:normal!important;
    padding:14px 18px!important;margin:0!important;
    font-size:14px!important;font-weight:600;
    color:rgba(255,255,255,.7)!important;
    border-radius:10px!important;
    border-bottom:none!important;
    position:relative;box-sizing:border-box
  }
  #header #header-middle #header-menu ul li a:hover,
  #header #header-middle #header-menu ul li a:active{
    color:#fff!important;background:rgba(255,255,255,.06)!important
  }
  #header #header-middle #header-menu ul li.active a,
  #header #header-middle #header-menu ul li.actives a{
    color:#fff!important;
    background:rgba(255,152,0,.1)!important
  }
  #header #header-middle #header-menu ul li.active a::after,
  #header #header-middle #header-menu ul li.actives a::after{
    display:none!important
  }
  #header #header-middle #header-menu ul li a svg,
  #header #header-middle #header-menu ul li a .mofycon{
    width:20px!important;height:20px!important;opacity:.8;flex-shrink:0
  }
  /* Mega menü alt menüleri mobilde gizle */
  #header #header-middle #header-menu ul li .parent-sub-menu{display:none!important}
  #header #header-middle #header-menu ul li.only-mobile{display:block!important}
}

@media(max-width:768px){
  #header #header-middle #header-menu ul{
    padding:16px 12px!important
  }
  #header #header-middle #header-menu ul li a{
    padding:12px 14px!important;font-size:13.5px!important
  }
}