/* ============================================================
   PANEL HEADER – Dark + Red (FULL)
   File: panel-header.css
   ============================================================ */

/* ------------------ GLOBAL HEADER WRAPPER ------------------ */
.panel-header{
  background:linear-gradient(145deg,#050404,#090909);
  border-bottom:1px solid #2a2a2a;
  z-index:100;
  padding:0;
}
.panel-header .container-fluid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  padding:.6rem .8rem;
}
.panel-left{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.panel-right{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  flex-shrink:0;
}

/* ============================================================
   CTA BUTTONS (Membership Plans + View My Page) + USER BUTTON
   ============================================================ */

.panel-cta-btn,
.user-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border-radius:8px;
  font-size:.9rem;
  font-weight:500;
  gap:6px;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  transition:.25s ease;
  color:#fff;
  background:rgba(0,0,0,.35);
  border:1px solid #D90404;            /* default border RED */
}

.panel-cta-btn i,
.user-btn i{
  font-size:15px;
  position:relative;
  top:.5px;
}

/* Default icon colors */
.panel-cta-btn i{
  color:#D90404;                       /* default RED icon for CTAs */
}
.user-btn i{
  color:#D90404;
}

/* Membership Plans – default state (dark bg + red border/icon) */
.plans-btn{
  background:rgba(0,0,0,.35);
  border-color:#D90404;
}
.plans-btn i{
  color:#D90404;
}

/* View My Page – default state */
.view-public-btn{
  background:rgba(0,0,0,.35);
  border-color:#D90404;
}
.view-public-btn i{
  color:#D90404;
}

/* View My Page – continuous subtle animation if profile active */
.view-public-btn.attention-ready:not(.disabled){
  background:linear-gradient(135deg,#130000,#3b0000);
  background-size:220% 220%;
  animation:panelViewWave 2.6s ease-in-out infinite;
  border-color:#D90404;
}
.view-public-btn.attention-ready:not(.disabled) i{
  color:#fff;
}

/* Disabled View My Page */
.view-public-btn.disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

/* -------- CTA HOVER (Membership + View My Page) -------- */
/* Hover: red gradient background, white text & icons */
.panel-cta-btn:hover{
  background:linear-gradient(135deg,#D90404,#730707);
  border-color:#D90404;
  color:#fff;
  box-shadow:0 0 12px rgba(217,4,4,.55);
  transform:translateY(-1px);
}
.panel-cta-btn:hover i{
  color:#fff!important;
}

/* Membership hover extra emphasis */
.plans-btn:hover{
  border-color:#D90404;
}

/* User dropdown button – separate hover behavior */
.user-btn:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.25);
  transform:translateY(-1px);
}
.user-btn:hover i{
  color:#D90404!important;
}

/* Continuous wave animation for View My Page */
@keyframes panelViewWave{
  0%{
    background-position:0% 50%;
    box-shadow:0 0 0 0 rgba(217,4,4,0);
    transform:translateY(0) scale(1);
  }
  50%{
    background-position:100% 50%;
    box-shadow:0 0 18px rgba(217,4,4,.7);
    transform:translateY(-1px) scale(1.03);
  }
  100%{
    background-position:0% 50%;
    box-shadow:0 0 0 0 rgba(217,4,4,0);
    transform:translateY(0) scale(1);
  }
}

/* Reduce motion: disable animation */
@media (prefers-reduced-motion: reduce){
  .view-public-btn.attention-ready:not(.disabled){
    animation:none;
    background:rgba(0,0,0,.55);
    box-shadow:none;
  }
}

/* ============================================================
   DROPDOWN MENU (USER MENU)
   ============================================================ */
.panel-dropdown-menu{
  background:linear-gradient(145deg,#292929,#000)!important;
  border:1px solid #444;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.7);
  padding:.5rem 0;
  min-width:240px;
}
.panel-dropdown-menu .dropdown-item{
  color:#fff;
  font-size:.9rem;
  padding:.6rem 1rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  transition:background .25s ease;
}
.panel-dropdown-menu .dropdown-item i{
  color:#D90404;
  background:rgba(0,0,0,.7);
  border-radius:50%;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
}
.panel-dropdown-menu .dropdown-item:hover{
  background:rgba(255,255,255,.08);
}
.panel-dropdown-menu .dropdown-divider{
  border-top:1px solid rgba(255,255,255,.15)!important;
}

/* Mobile dropdown sheet */
@media (max-width:991px){
  .panel-header .container-fluid{
    flex-direction:column;
    align-items:center;
    gap:.8rem;
  }
  .panel-right{
    justify-content:center;
    gap:.8rem;
  }
  .panel-left{
    width:100%;
    justify-content:center;
    margin-bottom:.35rem;
  }
  .panel-user-dropdown .dropdown-menu{
    position:fixed!important;
    top:75px!important;
    right:1rem!important;
    left:1rem!important;
    border-radius:14px;
    background:linear-gradient(145deg,#292929,#000)!important;
    box-shadow:0 12px 35px rgba(0,0,0,.85);
    padding:1rem .5rem 1.5rem;
    z-index:2001;
    animation:dropdownFade .25s ease forwards;
  }
  @keyframes dropdownFade{
    from{ transform:translateY(-10px); opacity:0; }
    to{   transform:translateY(0);      opacity:1; }
  }
  .menu-close{
    position:absolute;
    top:10px;
    right:12px;
    color:#D90404;
    background:linear-gradient(145deg,#292929,#000);
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s ease;
  }
  .menu-close:hover{ background:#111; }
}
@media (min-width:992px){
  .menu-close{ display:none!important; }
}

/* ============================================================
   RAIL (Scrollable chip-style nav) + Arrows
   ============================================================ */
.panel-rail{
  position:relative;
  background:linear-gradient(180deg,#101010,#000000);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:8px 46px;              /* space for arrows */
  box-shadow:0 0 16px rgba(0,0,0,.45);
  width:100%;
  max-width:100%;
}

/* viewport: manual scroll (mouse/trackpad/touch), no auto-scroll JS */
.rail-viewport{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:10px;           /* space for red progress bar */
  white-space:nowrap;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.rail-track{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
  will-change:transform;
}
.rail-track .nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:.42rem .78rem;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-weight:600;
  font-size:.92rem;
  gap:6px;
  white-space:nowrap;
}
.rail-track .nav-link i{
  color:#D90404;
  font-size:15px;
}

/* Hover & active states for rail chips */
.rail-track .nav-link:hover,
.rail-track .nav-link:focus{
  background:linear-gradient(135deg,#D90404,#730707);
  border-color:#D90404;
  color:#fff;
}
.rail-track .nav-link:hover i,
.rail-track .nav-link:focus i{
  color:#fff;
}
.rail-track .nav-link.active{
  background:linear-gradient(135deg,#D90404,#730707);
  border-color:#D90404;
  color:#fff;
}
.rail-track .nav-link.active i{
  color:#fff;
}

/* Fixed red underline bar */
.rail-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:3px;
  background:linear-gradient(90deg,rgba(217,4,4,.18),rgba(217,4,4,.32));
  border-radius:4px;
  pointer-events:none;
}

/* Arrows */
.rail-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  cursor:pointer;
  transition:.2s ease;
}
.rail-arrow:hover{
  background:#000;
  border-color:#fff;
}
.rail-left{ left:8px; }
.rail-right{ right:8px; }
.rail-arrow i{
  font-size:18px;
  color:#fff;
}

/* Compact mode for long labels / many items */
.rail-viewport.compact .nav-link{
  font-size:.86rem;
  padding:.36rem .66rem;
  border-radius:9px;
}
.rail-viewport.compact .nav-link i{
  font-size:14px;
}

/* Accessibility: no smooth scroll if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .rail-viewport{
    scroll-behavior:auto;
  }
}

/* ============================================================
   RESPONSIVE – Membership Plans full-width block on small screens
   ============================================================ */
@media (max-width: 991px){
  /* Sağ taraftaki aksiyon grubu dikey dizilsin */
  .panel-actions{
    flex-direction:column;
    align-items:stretch;     /* butonu tam genişlik aldır */
    gap:.5rem;
  }

  /* Membership Plans: full-width, içeriği ortala */
  .plans-btn{
    width:100%;
    justify-content:center;
  }
}