/* Ruyapanel - Güvenli Referans Navigation Görünümü
   Sadece üst menü ve 3 giriş kartı hedeflenir. Mobil aç/kapat JS'ine dokunmaz. */

/* Masaüstü menü kapsülü */
@media (min-width: 992px){
  .x-wrap > .x-nav{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:20px 0 12px !important;
    margin:0 auto !important;
  }

  .x-wrap > .x-nav > #xNavList,
  .x-wrap > .x-nav > .x-navlist{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    gap:0 !important;
    width:auto !important;
    max-width:100% !important;
    min-height:54px !important;
    margin:0 auto !important;
    padding:6px 18px !important;
    list-style:none !important;
    border-radius:999px !important;
    background:rgba(20,20,20,.72) !important;
    border:1px solid rgba(255,61,113,.16) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 18px 46px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    overflow:hidden !important;
  }

  .x-wrap > .x-nav > #xNavList > li,
  .x-wrap > .x-nav > .x-navlist > li{
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
  }

  .x-wrap > .x-nav > #xNavList > li:not(:last-child)::after,
  .x-wrap > .x-nav > .x-navlist > li:not(:last-child)::after{
    content:'+' !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 7px !important;
    color:var(--c-chat,#ff3d71) !important;
    opacity:.45 !important;
    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }

  .x-wrap > .x-nav > #xNavList > li > a,
  .x-wrap > .x-nav > .x-navlist > li > a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    min-height:38px !important;
    padding:8px 6px !important;
    border-radius:999px !important;
    background:transparent !important;
    border:0 !important;
    color:rgba(255,255,255,.42) !important;
    text-decoration:none !important;
    font-family:'Syne','DM Sans',sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;
    letter-spacing:.1px !important;
    white-space:nowrap !important;
    transition:color .22s ease, transform .22s ease !important;
  }

  .x-wrap > .x-nav > #xNavList > li > a i,
  .x-wrap > .x-nav > .x-navlist > li > a i{
    color:currentColor !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  .x-wrap > .x-nav > #xNavList > li.active > a,
  .x-wrap > .x-nav > .x-navlist > li.active > a,
  .x-wrap > .x-nav > #xNavList > li > a:hover,
  .x-wrap > .x-nav > .x-navlist > li > a:hover{
    color:var(--c-chat,#ff3d71) !important;
    background:transparent !important;
    box-shadow:none !important;
    transform:translateY(-1px) !important;
  }

  /* Üye paneli varsa küçük gradient pill olarak kalsın */
  .x-wrap > .x-nav > #xNavList .rp-member-headlink,
  .x-wrap > .x-nav > .x-navlist .rp-member-headlink{
    min-height:38px !important;
    padding:8px 18px !important;
    margin-left:4px !important;
    color:#fff !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,var(--c-chat,#ff3d71),var(--c-system,#00c9a7)) !important;
    box-shadow:0 10px 28px rgba(255,61,113,.22) !important;
  }
}

/* Mobilde: çalışan menü mekanizmasını bozma, sadece görünümü yumuşat */
@media (max-width: 991.98px){
  .x-wrap > .x-nav{
    justify-content:center !important;
    align-items:center !important;
    padding:12px 0 !important;
  }

  .x-wrap > .x-nav > #xNavBtn,
  .x-wrap > .x-nav > .x-nav-toggle{
    margin:0 auto !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,var(--c-chat,#ff3d71),var(--c-system,#00c9a7)) !important;
    box-shadow:0 12px 34px rgba(255,61,113,.22) !important;
  }

  .x-wrap > .x-nav > #xNavList,
  .x-wrap > .x-nav > .x-navlist{
    border-radius:20px !important;
    border:1px solid rgba(255,61,113,.28) !important;
    background:rgba(9,10,16,.985) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.55) !important;
  }

  .x-wrap > .x-nav > #xNavList > li > a,
  .x-wrap > .x-nav > .x-navlist > li > a{
    font-family:'Syne','DM Sans',sans-serif !important;
    font-size:13px !important;
    font-weight:700 !important;
    color:#fff !important;
    background:rgba(255,255,255,.045) !important;
    border:1px solid rgba(255,255,255,.075) !important;
  }

  .x-wrap > .x-nav > #xNavList > li.active > a,
  .x-wrap > .x-nav > .x-navlist > li.active > a,
  .x-wrap > .x-nav > #xNavList > li > a:hover,
  .x-wrap > .x-nav > .x-navlist > li > a:hover{
    background:linear-gradient(135deg,var(--c-chat,#ff3d71),var(--c-system,#00c9a7)) !important;
    color:#fff !important;
  }
}

/* 3'lü hızlı giriş kartları: sadece kendi alanında güvenli görünüm */
.x-wrap > .x-cta{
  padding:20px 0 32px !important;
}
.x-wrap > .x-cta .x-cta-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
}
.x-wrap > .x-cta .x-btn{
  min-height:96px !important;
  border-radius:20px !important;
  padding:20px 22px !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  text-decoration:none !important;
  overflow:hidden !important;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.x-wrap > .x-cta .x-btn:hover{
  transform:translateY(-3px) !important;
}
.x-wrap > .x-cta .x-btn-icon{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  border-radius:17px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.x-wrap > .x-cta .x-btn-title{
  font-family:'Syne','DM Sans',sans-serif !important;
  font-size:18px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:.2px !important;
}
.x-wrap > .x-cta .x-btn-sub{
  margin-top:6px !important;
  font-size:12px !important;
  color:rgba(255,255,255,.48) !important;
}
@media (max-width: 991.98px){
  .x-wrap > .x-cta .x-cta-grid{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .x-wrap > .x-cta .x-btn{
    min-height:78px !important;
    padding:14px 16px !important;
    gap:14px !important;
  }
  .x-wrap > .x-cta .x-btn-icon{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
  }
  .x-wrap > .x-cta .x-btn-title{
    font-size:15px !important;
  }
}