/* ================================================================
   SNL // PROFILE_STYLE.CSS — Header, Tab Bar, Side Drawer
   ================================================================
   Satır     : ~280
   Değişiklik:
     - header-btn width çift tanım düzeltildi
     - side-close-btn width çift tanım düzeltildi
     - snl-header ve top-header tutarlı hale getirildi
     - Tüm stiller var() kullanıyor
================================================================ */

/* ================================================================
   HEADER & LOGO
================================================================ */

.snl-logo {
    display:     inline-flex;
    align-items: center;
    gap:         10px;
}

.snl-logo-icon {
    width:          36px;
    height:         36px;
    background:     var(--gradient);
    border-radius:  10px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-family:    var(--font-title);
    font-size:      13px;
    font-weight:    900;
    color:          #fff;
    box-shadow:     var(--glow);
    flex-shrink:    0;
}

.snl-logo-text  { display: flex; flex-direction: column; line-height: 1.1; }

.snl-logo-main {
    font-size:     14px;
    font-weight:   900;
    font-family:   var(--font-title);
    background:    var(--gradient2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

.snl-logo-sub {
    font-size:     9px;
    color:         var(--muted);
    letter-spacing: 1px;
}

/* ================================================================
   ÜST HEADER
================================================================ */

.top-header {
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    background:      var(--bg2);
    border-bottom:   1px solid var(--border);
    padding:         10px 14px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    z-index:         200;
    backdrop-filter: blur(20px);
}

.header-right {
    display:     flex;
    align-items: center;
    gap:         6px;
}

/* ✅ Düzeltildi — width tek kez tanımlı */
.header-btn {
    height:          36px;
    border-radius:   50%;
    background:      var(--surface);
    border:          1px solid var(--border);
    color:           var(--muted);
    font-size:       16px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 0.2s;
    position:        relative;
    padding:         0;
    min-width:       36px;
    width:           auto;
}

.header-btn:hover {
    background:  var(--surface2);
    color:       var(--neon);
    box-shadow:  none;
    transform:   none;
}

.header-btn.active {
    background:   rgba(168,85,247,0.15);
    color:        var(--neon);
    border-color: var(--accent);
}

/* ================================================================
   TAB BAR
================================================================ */

.tab-bar {
    position:        fixed;
    top:             56px;
    left:            0;
    right:           0;
    background:      var(--bg2);
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    z-index:         199;
    padding:         6px 4px;
    gap:             4px;
    box-shadow:      0 2px 8px rgba(124,58,237,0.05);
}

.tab-btn {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        6px 4px;
    cursor:         pointer;
    font-family:    var(--font-main);
    font-size:      10px;
    font-weight:    700;
    color:          var(--muted);
    background:     none;
    border:         none;
    transition:     all 0.2s;
    position:       relative;
    width:          auto;
}

.tab-icon-wrap {
    width:         44px;
    height:        44px;
    border-radius: 14px;
    background:    var(--surface2);
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all 0.25s;
}

.tab-icon-wrap.active,
.tab-btn.active .tab-icon-wrap {
    background: var(--gradient);
    box-shadow: 0 6px 16px rgba(124,58,237,0.4);
    transform:  translateY(-3px);
}

.tab-btn.active { color: var(--accent); }

.tab-btn:hover .tab-icon-wrap {
    background: rgba(168,85,247,0.15);
    transform:  translateY(-2px);
}

.tab-badge {
    position:      absolute;
    top:           2px;
    right:         4px;
    background:    var(--pink);
    color:         #fff;
    font-size:     9px;
    font-weight:   700;
    min-width:     16px;
    height:        16px;
    border-radius: 8px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        2px solid var(--bg2);
}

/* ================================================================
   YAN MENÜ (Side Drawer)
================================================================ */

.side-overlay {
    display:          none;
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.6);
    backdrop-filter:  blur(4px);
    z-index:          300;
}

.side-overlay.open { display: block; }

.side-drawer {
    position:       fixed;
    top:            0;
    right:          -280px;
    width:          260px;
    height:         100vh;
    background:     var(--bg3);
    border-left:    1px solid var(--border);
    z-index:        301;
    transition:     right 0.3s ease;
    display:        flex;
    flex-direction: column;
    overflow-y:     auto;
}

.side-drawer.open { right: 0; }

.side-drawer-header {
    padding:         16px;
    border-bottom:   1px solid var(--border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}

.side-drawer-title {
    font-family:    var(--font-title);
    font-size:      12px;
    color:          var(--neon);
    letter-spacing: 2px;
}

/* ✅ Düzeltildi — width tek kez */
.side-close-btn {
    background:      none;
    border:          none;
    color:           var(--muted);
    font-size:       20px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    border-radius:   8px;
    padding:         0 8px;
    height:          32px;
    width:           auto;
}

.side-close-btn:hover {
    color:      var(--text);
    background: var(--surface2);
    box-shadow: none;
    transform:  none;
}

.side-nav         { padding: 12px 8px; flex: 1; }

.side-nav-item {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     12px 14px;
    border-radius: 12px;
    cursor:      pointer;
    font-size:   14px;
    font-weight: 600;
    color:       var(--muted);
    transition:  all 0.15s;
    margin-bottom: 2px;
    border:      none;
    background:  none;
    width:       100%;
    text-align:  left;
}

.side-nav-item:hover {
    background:  rgba(168,85,247,0.1);
    color:       var(--neon);
    box-shadow:  none;
    transform:   none;
}

.side-nav-item.active {
    background: rgba(168,85,247,0.15);
    color:      var(--neon);
}

.side-nav-item .side-icon { font-size: 20px; width: 24px; text-align: center; }

.side-nav-divider {
    height:     1px;
    background: var(--border);
    margin:     8px 14px;
}

.side-nav-footer {
    padding:    12px 8px;
    border-top: 1px solid var(--border);
}

.nav-bar { display: none; }

/* ================================================================
   PROFİL KAPAĞI & AVATAR
================================================================ */

.profile-cover {
    position:      relative;
    height:        140px;
    background:    var(--gradient);
    border-radius: 16px;
    overflow:      visible;
}

.profile-cover-img {
    width:         100%;
    height:        100%;
    border-radius: 16px;
    object-fit:    cover;
}

.profile-cover-overlay {
    position:      absolute;
    inset:         0;
    background:    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.5));
    border-radius: 16px;
}

.profile-avatar-wrap {
    position:    absolute;
    bottom:      -36px;
    left:        16px;
    display:     flex;
    align-items: flex-end;
    gap:         8px;
}

.profile-avatar-xl {
    width:          80px;
    height:         80px;
    border-radius:  50%;
    border:         4px solid var(--bg);
    background:     var(--surface2);
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      28px;
    font-weight:    900;
    color:          var(--neon);
    overflow:       hidden;
    box-shadow:     var(--glow);
}

.profile-avatar-xl img { width: 100%; height: 100%; object-fit: cover; }

.avatar-edit-btn {
    background:      var(--gradient);
    color:           #fff;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       13px;
    cursor:          pointer;
    margin-bottom:   4px;
    box-shadow:      var(--glow);
}

/* ================================================================
   PROFİL BİLGİLERİ
================================================================ */

.profile-info-wrap {
    padding:       44px 16px 16px;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-top:    none;
    border-radius: 0 0 16px 16px;
    margin-bottom: 10px;
}

.profile-username {
    font-family:   var(--font-title);
    font-size:     16px;
    font-weight:   700;
    color:         var(--text);
    margin-bottom: 4px;
}

.profile-bio-text {
    font-size:   13px;
    color:       var(--muted);
    line-height: 1.4;
    max-width:   280px;
}

.profile-edit-btn {
    background:    var(--surface2);
    color:         var(--neon);
    border:        1px solid var(--border);
    padding:       7px 16px;
    border-radius: 20px;
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     12px;
    cursor:        pointer;
    width:         auto;
}

.profile-follow-btn {
    background:    var(--gradient);
    color:         #fff;
    border:        none;
    padding:       7px 16px;
    border-radius: 20px;
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     12px;
    cursor:        pointer;
    width:         auto;
}

.profile-follow-btn.following {
    background: var(--surface2);
    color:      var(--neon);
    border:     1px solid var(--border);
}

/* ================================================================
   PROFİL İSTATİSTİKLERİ
================================================================ */

.profile-stats {
    display:       flex;
    margin-top:    14px;
    border-top:    1px solid var(--border);
    padding-top:   12px;
}

.profile-stat {
    flex:          1;
    text-align:    center;
    cursor:        pointer;
    padding:       4px 0;
    border-radius: 8px;
    transition:    background 0.15s;
}

.profile-stat:hover { background: var(--surface2); }

.stat-num {
    font-family:  var(--font-title);
    font-size:    18px;
    font-weight:  700;
    color:        var(--neon);
}

.stat-label {
    font-size:      11px;
    color:          var(--muted);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================================
   PROFİL SEKMELERİ
================================================================ */

.profile-tabs {
    display:       flex;
    background:    var(--surface);
    border:        1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 10px;
    overflow:      hidden;
}

.profile-tab {
    flex:          1;
    padding:       10px;
    background:    none;
    border:        none;
    color:         var(--muted);
    font-family:   var(--font-main);
    font-weight:   700;
    font-size:     12px;
    cursor:        pointer;
    transition:    all 0.2s;
    border-bottom: 2px solid transparent;
    width:         auto;
}

.profile-tab.active {
    color:              var(--neon);
    border-bottom-color: var(--accent);
    background:         var(--surface2);
}

.profile-tab:hover:not(.active) {
    color:      var(--text);
    background: var(--surface2);
    box-shadow: none;
    transform:  none;
}

.profile-tab-content        { display: none; }
.profile-tab-content.active { display: block; }