/* ============================================================
 * user-settings.css — Discord "User Settings" tam ekran paneli
 * Sunucu Ayarları overlay'iyle (sso-*) ayni gorsel dile uyar.
 * Tum renkler theme.css degiskenlerinden gelir → light/dark uyumlu.
 * Acma: window.openUserSettings()
 * ============================================================ */

/* Tam ekran overlay */
#userSettingsOverlay{
  position:fixed;inset:0;z-index:420;
  background:var(--panel,#313338);display:none;flex-direction:row;
  animation:usSettingsIn .18s ease;
  font-family:var(--font-sans);
}
#userSettingsOverlay.open{display:flex;}
@keyframes usSettingsIn{from{opacity:0;transform:scale(1.01);}to{opacity:1;transform:none;}}

/* Sol kenar — nav */
.us-sidebar{
  width:232px;flex-shrink:0;
  background:var(--panel2,#2b2d31);
  display:flex;flex-direction:column;
  overflow-y:auto;padding:60px 8px 60px 16px;
  align-items:flex-end;
}
.us-sidebar::-webkit-scrollbar{width:3px;}
.us-sidebar::-webkit-scrollbar-thumb{background:var(--scrollbar,rgba(255,255,255,.07));border-radius:3px;}
.us-sidebar-inner{width:192px;display:flex;flex-direction:column;gap:1px;}

.us-group-title{
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted,#949ba4);padding:6px 10px 4px;margin-top:8px;
}
.us-group-title:first-child{margin-top:0;}

.us-nav-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  color:var(--text,#b5bac1);font-size:15px;font-weight:500;
  padding:7px 10px;border-radius:4px;
  transition:background .1s,color .1s;
}
.us-nav-btn:hover{background:var(--hover,rgba(255,255,255,.06));color:var(--head,#dbdee1);}
.us-nav-btn.active{background:var(--hover-active,rgba(88,101,242,.3));color:var(--head,#fff);}
.us-nav-btn.danger{color:var(--danger,#f23f43);}
.us-nav-btn.danger:hover{background:rgba(242,63,67,.1);color:var(--danger,#f23f43);}
.us-nav-btn svg{flex-shrink:0;opacity:.9;}

.us-sep{height:1px;background:var(--border,rgba(0,0,0,.24));margin:8px 0;width:100%;}

/* Sag — icerik */
.us-main{flex:1;display:flex;overflow:hidden;min-width:0;position:relative;}
.us-content{
  flex:1;overflow-y:auto;
  padding:60px 40px 80px;max-width:740px;
}
.us-content::-webkit-scrollbar{width:8px;}
.us-content::-webkit-scrollbar-thumb{background:var(--scrollbar,rgba(255,255,255,.07));border-radius:4px;}

/* ESC kapat butonu */
.us-close{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  margin:60px 40px 0 24px;padding:8px;cursor:pointer;color:var(--muted,#b5bac1);
  transition:color .1s;flex-shrink:0;background:none;border:none;
}
.us-close:hover{color:var(--head,#dbdee1);}
.us-close-circle{
  width:36px;height:36px;border-radius:50%;
  border:2px solid currentColor;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:300;
}
.us-close-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}

/* Basliklar */
.us-h1{font-size:20px;font-weight:700;color:var(--head,#f2f3f5);margin:0 0 18px;}
.us-h2{
  font-size:12px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--muted,#949ba4);margin:24px 0 10px;
}
.us-h2:first-of-type{margin-top:0;}

/* Satir (label + kontrol) */
.us-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.06));
}
.us-row:last-child{border-bottom:none;}
.us-row-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.us-row-title{font-size:15px;font-weight:500;color:var(--head,#f2f3f5);}
.us-row-desc{font-size:13px;color:var(--muted,#949ba4);line-height:1.35;}

/* Hesap karti */
.us-account-card{
  background:var(--bg,#1e1f22);border-radius:8px;overflow:hidden;margin-bottom:24px;
}
.us-account-banner{height:64px;background:var(--accent,#5865f2);}
.us-account-body{display:flex;align-items:center;gap:14px;padding:0 16px 16px;margin-top:-30px;}
.us-account-avatar{
  width:74px;height:74px;border-radius:50%;flex-shrink:0;
  border:6px solid var(--bg,#1e1f22);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#fff;background:var(--accent,#5865f2);overflow:hidden;
}
.us-account-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.us-account-name{flex:1;min-width:0;padding-top:34px;}
.us-account-name b{font-size:20px;font-weight:700;color:var(--head,#f2f3f5);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.us-account-name span{font-size:13px;color:var(--muted,#949ba4);}
.us-account-edit{flex-shrink:0;}

/* Buton */
.us-btn{
  border:none;border-radius:4px;cursor:pointer;
  font-size:14px;font-weight:500;padding:8px 16px;
  background:var(--accent,#5865f2);color:#fff;transition:background .12s;white-space:nowrap;
}
.us-btn:hover{background:var(--accent-hover,#4752c4);}
.us-btn.secondary{background:var(--panel3,#4e5058);color:var(--head,#f2f3f5);}
.us-btn.secondary:hover{filter:brightness(1.1);}
.us-btn.danger{background:var(--danger,#f23f43);}
.us-btn.danger:hover{filter:brightness(1.08);}
.us-btn.ghost{background:none;border:1px solid var(--border,rgba(255,255,255,.18));color:var(--text,#dbdee1);}
.us-btn.ghost:hover{background:var(--hover,rgba(255,255,255,.06));}

/* Toggle (switch) */
.us-toggle{
  position:relative;width:40px;height:24px;flex-shrink:0;cursor:pointer;
  background:var(--offline,#72767d);border-radius:14px;transition:background .15s;border:none;padding:0;
}
.us-toggle::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .15s;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.us-toggle.on{background:var(--online,#23a55a);}
.us-toggle.on::after{transform:translateX(16px);}

/* Tema secimi kartlari */
.us-theme-cards{display:flex;gap:14px;margin-bottom:8px;flex-wrap:wrap;}
.us-theme-card{
  width:130px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:3px solid transparent;transition:border-color .12s;position:relative;
}
.us-theme-card.active{border-color:var(--accent,#5865f2);}
.us-theme-prev{height:74px;display:flex;}
.us-theme-prev .tp-side{width:34%;}
.us-theme-prev .tp-body{flex:1;display:flex;flex-direction:column;gap:5px;padding:9px;}
.us-theme-prev .tp-line{height:7px;border-radius:4px;}
.us-theme-card .tp-label{
  font-size:13px;font-weight:600;text-align:center;padding:7px;
  background:var(--bg,#1e1f22);color:var(--head,#f2f3f5);
}
/* dark preview */
.us-theme-card[data-th="dark"] .tp-side{background:#1e1f22;}
.us-theme-card[data-th="dark"] .tp-body{background:#313338;}
.us-theme-card[data-th="dark"] .tp-line{background:rgba(255,255,255,.18);}
/* light preview */
.us-theme-card[data-th="light"] .tp-side{background:#e3e5e8;}
.us-theme-card[data-th="light"] .tp-body{background:#fff;}
.us-theme-card[data-th="light"] .tp-line{background:rgba(0,0,0,.16);}

/* Accent swatch'lari */
.us-accent-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.us-accent{
  width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;
  transition:transform .1s;display:flex;align-items:center;justify-content:center;
}
.us-accent:hover{transform:scale(1.08);}
.us-accent.active{border-color:var(--head,#fff);}
.us-accent.active::after{content:"✓";color:#fff;font-size:15px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);}
.us-accent-custom{
  width:34px;height:34px;border-radius:50%;cursor:pointer;overflow:hidden;position:relative;
  background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);
  border:3px solid transparent;display:flex;align-items:center;justify-content:center;
}
.us-accent-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.us-accent-custom svg{pointer-events:none;color:#fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}

/* Slider */
.us-slider-wrap{display:flex;align-items:center;gap:12px;width:280px;max-width:50%;}
.us-slider{
  -webkit-appearance:none;appearance:none;flex:1;height:8px;border-radius:4px;
  background:var(--panel3,#4e5058);outline:none;cursor:pointer;
}
.us-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--accent,#5865f2);cursor:pointer;
}
.us-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#fff;
  border:2px solid var(--accent,#5865f2);cursor:pointer;
}
.us-slider-val{font-size:13px;color:var(--muted,#949ba4);min-width:42px;text-align:right;}

/* Select / dropdown */
.us-select{
  background:var(--bg,#1e1f22);color:var(--head,#dbdee1);
  border:1px solid var(--border,rgba(0,0,0,.3));border-radius:4px;
  padding:8px 10px;font-size:14px;min-width:220px;cursor:pointer;outline:none;
}
.us-select:focus{border-color:var(--accent,#5865f2);}

/* Kisayol listesi */
.us-kbd-list{display:flex;flex-direction:column;}
.us-kbd-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.06));
}
.us-kbd-row:last-child{border-bottom:none;}
.us-kbd-label{font-size:14px;color:var(--text,#dbdee1);}
.us-kbd-keys{display:flex;gap:5px;}
.us-kbd{
  background:var(--panel3,#4e5058);color:var(--head,#f2f3f5);
  border-radius:4px;padding:3px 9px;font-size:12px;font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.25);min-width:20px;text-align:center;
}

/* Mobil */
@media (max-width:640px){
  #userSettingsOverlay{flex-direction:column;}
  .us-sidebar{
    width:100%;flex-direction:row;overflow-x:auto;overflow-y:hidden;
    align-items:stretch;padding:8px;flex-shrink:0;
    border-bottom:1px solid var(--border,rgba(0,0,0,.24));
  }
  .us-sidebar-inner{width:auto;flex-direction:row;gap:4px;align-items:center;}
  .us-group-title{display:none;}
  .us-nav-btn{white-space:nowrap;padding:7px 12px;}
  .us-nav-btn span{display:none;}
  .us-nav-btn svg{margin:0;}
  .us-sep{display:none;}
  .us-main{flex:1;min-height:0;}
  .us-content{padding:18px 14px 80px;max-width:none;}
  .us-close{
    position:absolute;top:8px;right:8px;margin:0;padding:4px;z-index:3;flex-direction:row;
  }
  .us-close-label{display:none;}
  .us-close-circle{width:30px;height:30px;font-size:16px;}
  .us-slider-wrap{max-width:none;width:auto;flex:1;}
}