/* =====================================================
   SMM Panel - Header CSS
   ===================================================== */

/* ── HEADER TEMEL ───────────────────────────────────── */
#site-header {
    position:         fixed;
    top:              0;
    left:             0;
    right:            0;
    z-index:          1000;
    background:       rgba(8, 8, 8, 0.7);
    backdrop-filter:  blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom:    1px solid rgba(255, 255, 255, 0.05);
    transition:       background 0.3s ease, border-color 0.3s ease;
}

#site-header.scrolled {
    background:    rgba(8, 8, 8, 0.95);
    border-color:  rgba(255, 77, 77, 0.15);
}

.header-ic {
    display:      flex;
    align-items:  center;
    gap:          24px;
    max-width:    1280px;
    margin:       0 auto;
    padding:      0 24px;
    height:       68px;
}

/* ── LOGO ───────────────────────────────────────────── */
.logo {
    display:      flex;
    align-items:  center;
    gap:          10px;
    flex-shrink:  0;
    text-decoration: none;
}

.logo-ikon {
    width:           38px;
    height:          38px;
    background:      var(--gradient);
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.1rem;
    color:           #000;
    font-weight:     900;
    box-shadow:      0 4px 16px rgba(255, 77, 77, 0.35);
}

.logo-metin {
    font-family:    var(--font-heading);
    font-weight:    800;
    font-size:      1.2rem;
    letter-spacing: -0.5px;
    color:          var(--text-color);
}

.logo-metin em {
    font-style:              normal;
    background:              var(--gradient);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
}

/* ── NAVİGASYON ─────────────────────────────────────── */
.nav-links {
    display:     flex;
    align-items: center;
    gap:         4px;
    flex:        1;
    justify-content: center;
}

.nav-link {
    display:       flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 16px;
    border-radius: var(--radius-pill);
    font-size:     .88rem;
    font-weight:   500;
    color:         var(--text-muted);
    text-decoration: none;
    transition:    var(--transition);
    white-space:   nowrap;
}

.nav-link:hover {
    color:      var(--text-color);
    background: rgba(255, 255, 255, 0.05);
}

.nav-link.aktif {
    background: var(--gradient);
    color:      #000;
    font-weight: 700;
    box-shadow:  0 4px 16px rgba(255, 77, 77, 0.25);
}

/* ── HEADER SAĞ ─────────────────────────────────────── */
.header-sag {
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-shrink: 0;
}

.btn-header-giris {
    font-size:   .88rem;
    font-weight: 600;
    color:       var(--text-muted);
    padding:     8px 16px;
    border-radius: var(--radius-pill);
    transition:  var(--transition);
}

.btn-header-giris:hover { color: var(--text-color); background: rgba(255,255,255,.05); }

.btn-header-pano {
    display:       flex;
    align-items:   center;
    gap:           6px;
    font-size:     .88rem;
    font-weight:   600;
    color:         var(--text-muted);
    padding:       7px 14px;
    border:        1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-pill);
    transition:    var(--transition);
}

.btn-header-pano:hover { color: var(--text-color); border-color: rgba(255,255,255,.18); }

/* Kullanıcı Avatar Menüsü */
.kullanici-menu { position: relative; }

.kullanici-avatar {
    display:         flex;
    align-items:     center;
    gap:             6px;
    background:      rgba(255, 77, 77, 0.1);
    border:          1px solid rgba(255, 77, 77, 0.25);
    border-radius:   var(--radius-pill);
    padding:         6px 12px 6px 6px;
    cursor:          pointer;
    transition:      var(--transition);
    color:           var(--text-color);
}

.kullanici-avatar span {
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--gradient);
    color:           #000;
    font-weight:     800;
    font-size:       .8rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.kullanici-avatar:hover { border-color: rgba(255, 77, 77, 0.5); }

.kullanici-dropdown {
    position:      absolute;
    top:           calc(100% + 8px);
    right:         0;
    min-width:     220px;
    background:    rgba(15, 15, 15, 0.98);
    border:        1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding:       8px;
    backdrop-filter: blur(24px);
    box-shadow:    0 20px 60px rgba(0,0,0,.5);
    opacity:       0;
    transform:     translateY(8px);
    pointer-events: none;
    transition:    var(--transition);
    z-index:       200;
}

.kullanici-dropdown.acik {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: all;
}

.dropdown-baslik { padding: 10px 12px; }
.dropdown-baslik strong { display:block; font-size:.9rem; }
.dropdown-baslik small  { color:var(--text-muted); font-size:.8rem; }

.dropdown-ayirici { height:1px; background:rgba(255,255,255,.06); margin:6px 0; }

.dropdown-link {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       9px 12px;
    border-radius: var(--radius-md);
    font-size:     .875rem;
    color:         var(--text-muted);
    transition:    var(--transition);
}

.dropdown-link:hover { background:rgba(255,255,255,.05); color:var(--text-color); }
.dropdown-link.cikis:hover { background:rgba(255,77,77,.08); color:var(--accent-1); }

.bakiye-goster {
    margin-left:  auto;
    font-style:   normal;
    font-size:    .78rem;
    font-weight:  700;
    padding:      2px 8px;
    background:   rgba(249,203,40,.1);
    color:        var(--accent-2);
    border-radius: 20px;
}

/* ── MOBİL MENÜ BUTONU ──────────────────────────────── */
.mobil-menu-btn {
    display:        none;
    flex-direction: column;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        8px;
}

.mobil-menu-btn span {
    display:    block;
    width:      22px;
    height:     2px;
    background: var(--text-color);
    border-radius: 2px;
    transition: var(--transition);
}

.mobil-menu-btn.acik span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobil-menu-btn.acik span:nth-child(2) { opacity: 0; }
.mobil-menu-btn.acik span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── MOBİL MENÜ ─────────────────────────────────────── */
.mobil-menu {
    display:      none;
    flex-direction: column;
    gap:          4px;
    padding:      12px 16px 16px;
    border-top:   1px solid rgba(255,255,255,.05);
}

.mobil-menu.acik { display: flex; }

.mobil-link {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       11px 14px;
    border-radius: var(--radius-md);
    font-size:     .92rem;
    font-weight:   500;
    color:         var(--text-muted);
    transition:    var(--transition);
}

.mobil-link:hover       { background:rgba(255,255,255,.05); color:var(--text-color); }
.mobil-link.vurgu       { color:var(--accent-1); font-weight:700; }
.mobil-link.cikis:hover { background:rgba(255,77,77,.08); color:var(--accent-1); }
.mobil-ayirici          { height:1px; background:rgba(255,255,255,.06); margin:4px 0; }

/* ── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 900px) {
    .nav-links { display: none; }
    .mobil-menu-btn { display: flex; }
    .btn-header-giris { display: none; }
    .header-sag { margin-left: auto; }
}

@media (max-width: 480px) {
    .header-ic { padding: 0 16px; }
    .btn-header-pano span { display: none; }
}

/* ── ÜYE ALT MENÜ NAVİGASYON ─────────────────────────── */
.member-sub-nav-container {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    z-index: 990;
    background: rgba(8, 8, 8, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    height: 52px;
    display: flex;
    align-items: center;
    transition: background 0.3s ease;
}

.member-sub-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    padding: 2px 0;
}

.member-sub-nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.sub-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: .84rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    border: 1px solid transparent;
}

.sub-nav-link i {
    font-size: 1rem;
}

.sub-nav-link:hover {
    color: var(--text-color);
    background: rgba(255, 255, 255, 0.04);
}

.sub-nav-link.aktif {
    background: rgba(255, 77, 77, 0.08);
    border-color: rgba(255, 77, 77, 0.2);
    color: var(--accent-1);
    font-weight: 600;
}

.sub-nav-link.admin-btn {
    color: var(--accent-1);
    background: rgba(255, 77, 77, 0.05);
    border-color: rgba(255, 77, 77, 0.2);
}

.sub-nav-link.admin-btn:hover {
    background: rgba(255, 77, 77, 0.12);
    border-color: rgba(255, 77, 77, 0.4);
    color: var(--text-color);
}