:root{
  --bg:#070b12;--bg2:#0b101b;--panel:#0f1623;--panel2:#121b2a;--panel3:#172235;
  --border:#202c40;--border2:#2b3b55;--text:#f7f9fd;--muted:#8490a6;--muted2:#637087;
  --purple:#7c4dff;--purple2:#9b6cff;--blue:#4c8dff;--cyan:#48d6ff;--green:#3ed598;--gold:#f4b84f;--danger:#ff6474;
  --shadow:0 20px 60px rgba(0,0,0,.28);--radius:20px;--radius-sm:14px;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 60% -10%,#17233b 0,#0a101b 34%,#070b12 68%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input{font:inherit}button{color:inherit}.hidden{display:none!important}
body{overflow:hidden}.app-shell{display:grid;grid-template-columns:minmax(0,1fr);height:100vh}.app-rail{display:none;background:rgba(6,10,17,.94);border-right:1px solid #182235;padding:12px 9px;flex-direction:column;align-items:center;gap:10px;overflow:hidden;position:relative;height:100vh;min-height:100vh}.shell-main{grid-column:1}.app-shell.servers-mode{grid-template-columns:68px minmax(0,1fr)}.app-shell.servers-mode .app-rail{display:flex;grid-column:1}.app-shell.servers-mode .shell-main{grid-column:2}.server-rail-list,.server-rail-controls{display:none}.app-shell.servers-mode .server-rail-list{display:grid;gap:9px;width:100%;justify-items:center;overflow:auto;scrollbar-width:none;padding:2px 0 132px;max-height:calc(100vh - 24px)}.app-shell.servers-mode .server-rail-list::-webkit-scrollbar{display:none}.app-shell.servers-mode .server-rail-controls{display:grid;gap:8px;justify-items:center;position:absolute;left:9px;right:9px;bottom:12px;z-index:5;padding-top:16px;background:linear-gradient(180deg,rgba(6,10,17,0),rgba(6,10,17,.96) 30%)}.rail-server,.rail-server-action{width:48px;height:48px;border-radius:15px;border:1px solid #1d2a40;background:#101827;color:#d9e2f0;display:grid;place-items:center;cursor:pointer;position:relative;transition:.17s ease;font-weight:900}.rail-server:hover,.rail-server.active{border-color:#7556ff;background:linear-gradient(145deg,#1c2b4b,#2b1e59);color:#fff;transform:translateY(-1px);box-shadow:0 0 22px rgba(124,77,255,.18)}.rail-server.active:before{content:"";position:absolute;left:-9px;width:4px;height:28px;border-radius:0 5px 5px 0;background:#8a68ff;box-shadow:0 0 12px rgba(138,104,255,.7)}.rail-server i{position:absolute;right:4px;bottom:4px;width:7px;height:7px;border-radius:50%;background:#42d698;box-shadow:0 0 9px rgba(66,214,152,.65)}.rail-server-action{color:#9ba9bd;background:#0d1420}.rail-server-action:hover{color:#fff;border-color:#465b7e;background:#162135}.rail-server-action.accent{color:#fff;background:linear-gradient(145deg,#4564df,#753fe9);border-color:#6850ec}.rail-empty{color:#536077;padding-top:14px}.rail-spacer{display:none}.shell-main{min-width:0;display:flex;flex-direction:column}.topbar{height:76px;border-bottom:1px solid #192338;background:rgba(8,13,22,.86);backdrop-filter:blur(18px);display:grid;grid-template-columns:210px minmax(460px,720px) 1fr;align-items:center;padding:0 18px 0 24px;gap:20px}.brand-wordmark{display:flex;align-items:baseline;gap:8px;letter-spacing:.04em}.brand-wordmark strong{font-size:19px}.brand-wordmark span{font-size:11px;color:var(--muted);letter-spacing:.24em}.top-tabs{height:52px;padding:5px;background:#0d1421;border:1px solid #1b2940;border-radius:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.top-tab{border:0;border-radius:14px;background:transparent;color:#929db2;font-weight:750;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}.top-tab.active{color:#fff;background:linear-gradient(180deg,#1c2541,#141d33);box-shadow:inset 0 0 0 1px #3c376d,0 8px 22px rgba(0,0,0,.18)}.tab-icon{color:#8b73ff}.top-actions{justify-self:end;display:flex;align-items:center;gap:9px;min-width:0}.live-pill{padding:8px 11px;border-radius:999px;background:#151b29;border:1px solid #26324a;color:#a3aec1;font-size:12px;white-space:nowrap}.live-pill.online{background:#0f2a22;border-color:#1f5d49;color:#6de0af}.primary-btn,.ghost-btn,.danger-btn,.card-action,.discover-btn{border:0;border-radius:12px;padding:10px 15px;font-weight:800;cursor:pointer}.primary-btn{background:linear-gradient(135deg,#5b77ff,#8146ed);box-shadow:0 10px 24px rgba(91,96,255,.18)}.ghost-btn{background:#151d2e;border:1px solid #26344e;color:#d7deea}.ghost-btn.compact{padding:9px 11px}.danger-btn{background:#34161f;border:1px solid #632936;color:#ff9aa5}.full{width:100%}.icon-top-btn,.square-btn{border:1px solid #25324a;background:#111a29;border-radius:12px;color:#dce4f2;cursor:pointer}.icon-top-btn{width:42px;height:42px}.square-btn{width:40px;height:40px;font-size:19px}.square-btn.small{width:32px;height:32px}.view{display:none;flex:1;min-height:0;overflow:auto;padding:22px}.view.active{display:block}.panel,.feature-card{background:linear-gradient(180deg,rgba(17,25,39,.98),rgba(11,17,28,.98));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.eyebrow,.feature-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#77849a}.panel-title-row,.feature-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.panel-title-row h2,.panel-title-row h3,.feature-head h2{margin:4px 0 0}.compact-row{margin-bottom:14px}
/* PERSONAL */.personal-hero{padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(115deg,#121b2b 0,#101626 55%,#15132a 100%)}.profile-identity{display:flex;align-items:center;gap:18px}.avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#5577ff,#8a4df0);font-weight:900;border:1px solid rgba(255,255,255,.12)}.avatar.xl{width:70px;height:70px;font-size:24px}.avatar.lg{width:54px;height:54px}.avatar.sm{width:38px;height:38px}.profile-identity h1{margin:4px 0 5px;font-size:30px}.profile-identity p{margin:0;color:var(--muted)}.profile-actions{display:flex;gap:10px}.personal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}.feature-card{padding:22px;min-height:255px;position:relative;overflow:hidden}.feature-card:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;top:-90px;filter:blur(8px);opacity:.18}.friends-card:before{background:#4f8dff}.request-card:before{background:#f4b84f}.rok-card:before{background:#46d4d4}.feature-icon{font-size:26px;color:#aeb9cd}.feature-number{font-size:44px;font-weight:900;margin-top:32px}.feature-card p{color:var(--muted);line-height:1.55;min-height:48px}.card-action{position:absolute;left:22px;right:22px;bottom:20px;text-align:left;display:flex;justify-content:space-between;background:#131e31;border:1px solid #263752;color:#dbe5f6}.card-action:disabled{opacity:.6;cursor:not-allowed}.rok-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}.rok-summary .stat{background:#101827;border:1px solid #22314a;border-radius:12px;padding:11px}.rok-summary span{display:block;color:var(--muted);font-size:11px}.rok-summary strong{display:block;margin-top:5px}.empty-inline{color:var(--muted);font-size:13px;grid-column:1/-1;padding:12px 0}.personal-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;margin-top:16px}.dm-dashboard-card,.account-overview{padding:22px}.personal-dm-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.personal-dm{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;background:#111a29;border:1px solid #22304a;cursor:pointer}.personal-dm small{display:block;color:var(--muted);margin-top:2px}.profile-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.profile-overview-grid>div{padding:14px;border:1px solid #22304a;border-radius:14px;background:#101827}.profile-overview-grid span{display:block;color:var(--muted);font-size:11px}.profile-overview-grid strong{display:block;margin-top:5px}
/* SERVERS */.servers-layout{display:block;min-height:calc(100vh - 120px)}.server-workspace{min-width:0;width:100%;display:flex;flex-direction:column;gap:16px}.community-hero{padding:16px 18px;display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:14px}.community-emblem{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#3e2d71,#15284a);border:1px solid #5d4a9e;font-weight:900;font-size:25px}.community-title-block h1{margin:5px 0 5px;font-size:25px}.community-title-block p{margin:0;color:var(--muted)}.community-actions{display:flex;gap:8px}.workspace-grid{display:grid;grid-template-columns:210px minmax(520px,1fr) 240px;gap:16px;min-height:0;flex:1}.rooms-panel,.people-panel{padding:16px;min-height:0;overflow:auto}.channel-list{display:grid;gap:5px}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:10px 11px;border-radius:11px;color:#aab5c8;text-decoration:none}.nav-item:hover{background:#121c2c;color:#fff}.nav-item.active{background:linear-gradient(90deg,#24355e,#1c2743);color:#fff;border:1px solid #334f82}.role-section{border-top:1px solid #1e2a3e;margin-top:18px;padding-top:16px}.role-list{display:flex;flex-wrap:wrap;gap:7px}.role-chip{padding:7px 9px;border-radius:999px;background:#121d2d;border:1px solid #253550;color:#aeb9cb;font-size:11px}.chat-panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;min-height:0}.chat-head{padding:16px 18px;border-bottom:1px solid #1d293d}.chat-head strong{display:block;font-size:17px;margin-top:3px}.chat-head span:last-child{display:block;color:var(--muted);font-size:11px;margin-top:3px}.messages{overflow:auto;padding:16px}.welcome-card{padding:14px 0 18px;border-bottom:1px solid #1b273a;margin-bottom:8px}.welcome-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#1a2740;font-size:22px}.welcome-card h2{margin:10px 0 4px}.welcome-card p{margin:0;color:var(--muted)}.message{display:grid;grid-template-columns:42px 1fr;gap:11px;padding:12px 6px}.message:hover{background:#0d1421;border-radius:13px}.message-meta{display:flex;align-items:center;gap:8px}.message-meta time{font-size:10px;color:var(--muted)}.message-body p{margin:5px 0 0;color:#dce3ef;line-height:1.5}.badge.verified{font-size:10px;padding:3px 6px;border-radius:999px;background:#103729;color:#63dfac;border:1px solid #1b644b}.composer{border-top:1px solid #1d293d;padding:12px;display:grid;grid-template-columns:40px 1fr auto;gap:8px}.composer .plus{border:1px solid #273751;background:#141e30;border-radius:12px;color:#fff}.composer input{background:#111a2b;border:1px solid #24334d;border-radius:12px;padding:0 13px;color:#fff;outline:0}.send-btn{border:0;border-radius:12px;padding:0 16px;background:linear-gradient(135deg,#5a75ff,#7b46ef);font-weight:800;color:#fff}.member-count-badge{padding:5px 8px;border-radius:999px;background:#16223a;color:#9fb0c8;font-size:11px}.member-list{display:grid;gap:6px}.member-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;cursor:pointer}.member-row:hover{background:#121c2c}.member-meta strong{display:block;font-size:13px}.member-meta small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.owner-crown{color:var(--gold)}.rok-check{color:var(--green)}
/* SETTINGS */.settings-layout{display:grid;grid-template-columns:250px minmax(0,760px);gap:16px;max-width:1050px;margin:0 auto}.settings-menu,.settings-content{padding:22px}.settings-menu h2{margin:5px 0 18px}.settings-menu-item{width:100%;text-align:left;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:#8f9bb0;cursor:pointer}.settings-menu-item.active{background:#16223a;color:#fff}.settings-menu-item:disabled{opacity:.45}.settings-content h1{margin:5px 0 18px}.settings-profile-card{display:flex;align-items:center;gap:13px;padding:15px;background:#111a2a;border:1px solid #22304a;border-radius:16px}.settings-profile-card span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.settings-row{margin-top:12px;padding:15px;border:1px solid #22304a;background:#0e1624;border-radius:15px;display:flex;align-items:center;justify-content:space-between;gap:20px}.settings-row strong{display:block}.settings-row span{display:block;color:var(--muted);font-size:12px;margin-top:4px}.settings-row.danger{border-color:#4d2430}.status-chip{padding:6px 9px;border-radius:999px!important;background:#1b2334;color:#9daac0!important}
/* DM + MODAL */.dm-top-wrap{position:relative}.dm-popover{position:absolute;right:0;top:50px;width:290px;background:#0e1624;border:1px solid #27354e;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.4);z-index:30;padding:12px}.dm-popover-head{display:flex;justify-content:space-between;align-items:center;padding:4px 3px 10px}.dm-popover-head button{border:0;background:#202c43;color:#fff;border-radius:8px}.dm-popover-list{display:grid;gap:6px}.dm-item{display:flex;align-items:center;gap:9px;padding:8px;border-radius:11px;text-decoration:none;color:#dce3ef}.dm-item:hover{background:#151f31}.modal-backdrop{position:fixed;inset:0;background:rgba(2,5,10,.72);display:grid;place-items:center;padding:20px;z-index:100}.modal{width:min(440px,94vw);max-height:90vh;overflow:auto;background:#0f1725;border:1px solid #293a56;border-radius:20px;box-shadow:0 30px 100px rgba(0,0,0,.55);padding:24px;position:relative}.modal.wide{width:min(620px,94vw)}.close{position:absolute;right:14px;top:12px;width:34px;height:34px;border-radius:10px;border:1px solid #293951;background:#151e2f;color:#fff}.modal-brand{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#7e50ff,#4e6fe8);font-weight:900}.modal h2{margin:12px 0}.field{width:100%;background:#0a111d;border:1px solid #273852;border-radius:12px;color:#fff;padding:12px 13px;outline:0;margin:6px 0 10px}.field.mini{margin:4px 0}.oauth{display:block;text-decoration:none;text-align:center;padding:12px;border-radius:12px;font-weight:800}.oauth.google{background:#fff;color:#111}.or{display:flex;align-items:center;gap:10px;color:#758299;font-size:11px;margin:15px 0}.or span{height:1px;background:#283750;flex:1}.checks{display:grid;gap:8px;margin:12px 0}.checks label,.permission-defaults label{display:block;padding:9px 10px;background:#111a29;border:1px solid #22304a;border-radius:10px}.invite-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.invite-result,.invite-history{margin-top:12px}.invite-result{padding:14px;background:#101a2a;border:1px solid #243650;border-radius:14px}.invite-result small,.invite-result strong{display:block}.invite-result strong{font-size:20px;margin:6px 0 10px}.invite-history-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1f2a3d;font-size:12px}.member-modal-head{display:flex;align-items:center;gap:12px}.permission-defaults{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:13px}.profile-stat{padding:11px;background:#101827;border:1px solid #22304a;border-radius:12px}.profile-stat span{display:block;color:var(--muted);font-size:10px}.profile-stat b{display:block;margin-top:4px}.role-toggle-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.code-demo{padding:14px;border-radius:14px;background:#0b1422;border:1px dashed #3a4c6e;text-align:center}.code-demo small,.code-demo strong{display:block}.code-demo strong{font-size:22px;margin-top:5px}.success-panel{text-align:center}.success-icon{font-size:42px;color:var(--green)}.toast{position:fixed;right:24px;bottom:24px;z-index:200;background:#111b2b;border:1px solid #2d405f;border-radius:14px;padding:12px 16px;box-shadow:var(--shadow)}
@media(max-width:1250px){.topbar{grid-template-columns:160px minmax(420px,620px) 1fr}.workspace-grid{grid-template-columns:210px minmax(360px,1fr)}.people-panel{display:none}.personal-grid{grid-template-columns:1fr 1fr}.rok-card{grid-column:1/-1}}@media(max-width:900px){body{overflow:auto}.app-shell{grid-template-columns:1fr;height:auto;min-height:100vh}.app-rail{display:none}.topbar{position:sticky;top:0;z-index:40;grid-template-columns:1fr;gap:9px;height:auto;padding:12px}.brand-wordmark,.top-actions{display:none}.top-tabs{width:100%}.view{padding:12px}.workspace-grid{grid-template-columns:1fr}.rooms-panel{max-height:300px}.workspace-grid{grid-template-columns:1fr}.rooms-panel{max-height:300px}.personal-grid,.personal-bottom-grid,.settings-layout{grid-template-columns:1fr}.personal-hero{align-items:flex-start;flex-direction:column}.community-hero{grid-template-columns:58px 1fr}.community-actions{grid-column:1/-1}.profile-overview-grid{grid-template-columns:1fr 1fr}}

/* V0.5.3.3 — desktop server workspace height fix */
@media (min-width:901px){
  .shell-main{height:100vh;overflow:hidden}
  #serversView{overflow:hidden;padding:16px 20px 16px}
  #serversView.view.active{display:block}
  .servers-layout{height:100%;min-height:0}
  .server-workspace{height:100%;min-height:0;gap:14px}
  .community-hero{flex:0 0 auto;min-height:96px;padding:13px 18px;grid-template-columns:58px minmax(0,1fr) auto}
  .community-emblem{width:58px;height:58px}
  .workspace-grid{flex:1;height:0;min-height:0;gap:14px}
  .rooms-panel,.chat-panel,.people-panel{height:100%;min-height:0}
  .chat-panel{overflow:hidden}
  .chat-head{flex:0 0 auto;padding:13px 16px}
  .messages{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px}
  .composer{flex:0 0 auto;min-height:58px;padding:10px 12px;background:rgba(13,20,33,.98)}
  .rooms-panel,.people-panel{overflow-y:auto;overscroll-behavior:contain}
}


/* V0.6.0 — visual identity, avatars, role colors, login polish */
:root{
  --role-gold:#f3bd58;--role-blue:#63a7ff;--role-green:#68d59a;--role-violet:#9b79ff;
  --role-cyan:#55d6e7;--role-rose:#ed7aa7;--role-amber:#f0a65b;
}
body{background:
  radial-gradient(circle at 15% -10%,rgba(91,74,180,.11),transparent 34%),
  radial-gradient(circle at 85% 0%,rgba(28,128,170,.07),transparent 28%),
  #070c14}
.panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 14px 34px rgba(0,0,0,.10)}
.community-hero{background:linear-gradient(110deg,#101827 0%,#0f1725 62%,rgba(73,49,120,.17) 100%)}
.community-emblem{box-shadow:0 10px 30px rgba(92,72,200,.18),inset 0 1px 0 rgba(255,255,255,.08)}
.rooms-panel,.people-panel{background:linear-gradient(180deg,rgba(17,26,42,.98),rgba(12,19,31,.98))}
.chat-panel{background:linear-gradient(180deg,#111a2a 0%,#0d1522 100%)}
.chat-head{background:linear-gradient(180deg,rgba(22,33,53,.74),rgba(15,24,39,.3))}
.nav-item{position:relative;transition:.16s ease}
.nav-item.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:4px;background:#7b6cff;box-shadow:0 0 12px #735cff}
.message{border:1px solid transparent;transition:.16s ease}
.message:hover{background:#111a29;border-color:#1c2940;transform:translateY(-1px)}
.message-meta strong{font-size:13px;letter-spacing:.01em}
.message-body p{font-size:13px}
.avatar-rich{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--avatar-a,#7d5cff),var(--avatar-b,#4e6df3));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 5px 14px rgba(0,0,0,.18)}
.avatar-rich img{width:100%;height:100%;display:block;object-fit:cover}
.avatar-rich span{display:grid;place-items:center;width:100%;height:100%;font-weight:900}
.avatar-rich:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.rok-check{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#0d3c2c;border:1px solid #146546;color:#72edb5;font-size:9px;vertical-align:1px}
.owner-crown{filter:drop-shadow(0 0 4px rgba(243,189,88,.3))}
.role-chip{display:inline-flex;align-items:center;gap:7px;font-weight:700;border-color:color-mix(in srgb,currentColor 28%,transparent);background:color-mix(in srgb,currentColor 9%,#0f1826);color:#aeb9cb}
.role-chip i,.member-group-title i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor}
.role-gold{color:var(--role-gold)!important}.role-blue{color:var(--role-blue)!important}.role-green{color:var(--role-green)!important}.role-violet{color:var(--role-violet)!important}.role-cyan{color:var(--role-cyan)!important}.role-rose{color:var(--role-rose)!important}.role-amber{color:var(--role-amber)!important}
.member-group-title{display:flex;justify-content:space-between;align-items:center;margin:14px 5px 5px;padding-top:9px;border-top:1px solid #1c293c;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.member-group-title:first-child{border-top:0;margin-top:4px;padding-top:0}
.member-group-title span{display:flex;align-items:center;gap:7px}.member-group-title b{font-size:10px;color:#718198}
.member-row{position:relative;border:1px solid transparent;transition:.14s ease}
.member-row:hover{border-color:#22334e;background:#142034}
.member-gold:hover{border-color:rgba(243,189,88,.23)}.member-blue:hover{border-color:rgba(99,167,255,.23)}.member-green:hover{border-color:rgba(104,213,154,.22)}
.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#3dd68c;box-shadow:0 0 8px rgba(61,214,140,.55);margin-right:5px}
.badge.verified{font-weight:800;letter-spacing:.02em}
.composer{box-shadow:0 -10px 24px rgba(5,9,16,.16)}
.composer input:focus,.member-search input:focus,.field:focus{border-color:#576fe0;box-shadow:0 0 0 3px rgba(88,104,224,.10)}
.send-btn{box-shadow:0 8px 20px rgba(94,79,235,.20);transition:.15s ease}.send-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.rail-server{transition:.16s ease}.rail-server:hover{transform:translateY(-1px) scale(1.03)}
.rail-server.active{box-shadow:0 0 0 1px rgba(132,96,255,.52),0 0 20px rgba(109,76,255,.20)}

.login-modal{width:min(470px,94vw);padding:28px}
.login-brand-row{display:flex;align-items:center;gap:14px}.login-brand-row h2{margin:3px 0 0}.login-copy,.modal-copy{color:#98a6bd;line-height:1.55;margin:14px 0 18px}
.oauth.google{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border:1px solid #dce2ec;box-shadow:0 10px 24px rgba(0,0,0,.18);transition:.15s ease}.oauth.google:hover{transform:translateY(-1px);box-shadow:0 13px 30px rgba(0,0,0,.23)}
.google-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid #d4d9e2;color:#4285f4;font-weight:900;background:#fff}
.login-trust{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;color:#7f8da4;font-size:10px;margin:13px 0 2px}.login-trust span{padding:5px 8px;border-radius:999px;background:#101827;border:1px solid #1e2a40}
.dev-only{display:none}.dev-mode .dev-only{display:block}
.field-label{display:block;color:#8493aa;font-size:11px;font-weight:800;margin:0 0 2px}
.rok-link-modal{width:min(560px,94vw)}
.rok-link-modal h2{font-size:26px}.code-demo{background:linear-gradient(145deg,#0c1727,#10182a);border-color:#41557a}.code-demo strong{letter-spacing:.08em;color:#b6c8ff}
.feature-card{transition:.18s ease}.feature-card:hover{transform:translateY(-2px);border-color:#2b3a58}
.personal-hero{background:linear-gradient(105deg,#111b2c 0%,#10192a 58%,rgba(86,54,143,.20) 100%)}
.settings-profile-card{background:linear-gradient(110deg,#111c2e,#101827)}

/* V0.6.1 custom role color support */
.role-color-input{height:46px;padding:5px 7px;cursor:pointer}
.role-color-dot{display:inline-block;width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor;margin-right:5px}
.member-row:hover{border-color:color-mix(in srgb,var(--member-role-color,#50617f) 32%,transparent)}


/* V0.6.2 — Google-first onboarding / explicit ROKSS identity */
.settings-profile-card{display:flex;align-items:center;gap:12px}.settings-profile-main{display:flex;flex-direction:column;gap:3px;flex:1}.settings-profile-main span{color:var(--muted);font-size:11px}
.onboarding-backdrop{z-index:260;background:rgba(3,7,13,.86);backdrop-filter:blur(14px)}
.onboarding-backdrop.required .onboarding-modal{animation:onboardingIn .22s ease both}
.profile-setup-required{overflow:hidden}.profile-setup-required .topbar,.profile-setup-required .view{pointer-events:none;user-select:none}
.onboarding-modal{width:min(720px,94vw);padding:26px;border-color:#314265;background:linear-gradient(155deg,#121c2d 0%,#0d1522 68%,rgba(75,49,125,.24) 100%);box-shadow:0 30px 90px rgba(0,0,0,.48)}
.onboarding-head{display:flex;align-items:center;gap:14px}.onboarding-head h2{margin:3px 0 0;font-size:27px}
.profile-photo-builder{display:grid;grid-template-columns:92px minmax(0,1fr);gap:18px;align-items:center;padding:16px;margin:14px 0;background:#0d1625;border:1px solid #22324c;border-radius:16px}.avatar.xl{width:86px;height:86px;border-radius:24px;font-size:28px}.photo-actions{display:grid;gap:9px}.photo-actions strong{display:flex;align-items:center;gap:8px}.photo-actions strong small,.onboarding-field em{font-style:normal;font-size:10px;color:#7f8ca2;font-weight:600}.photo-action-row{display:flex;gap:8px;flex-wrap:wrap}.file-button{cursor:pointer}.text-btn{border:0;background:transparent;color:#8190aa;font-weight:800;font-size:11px;cursor:pointer;padding:8px}.text-btn:hover{color:#fff}.input-help{color:#6f7f98;font-size:10px}
.onboarding-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.onboarding-field{display:grid;gap:7px;margin-top:11px}.onboarding-field>span{font-size:11px;font-weight:900;color:#dce5f7}.onboarding-field b{color:#8f7aff}.onboarding-field input,.onboarding-field textarea{width:100%;box-sizing:border-box;background:#09111d;border:1px solid #263752;border-radius:12px;color:#fff;padding:12px 13px;outline:0;font:inherit}.onboarding-field textarea{resize:vertical;min-height:78px}.onboarding-field input:focus,.onboarding-field textarea:focus,.username-field:focus-within{border-color:#6678e7;box-shadow:0 0 0 3px rgba(93,107,222,.11)}.onboarding-field small{color:#73839b;font-size:10px}.username-field{display:flex;align-items:center;background:#09111d;border:1px solid #263752;border-radius:12px;overflow:hidden}.username-field i{font-style:normal;color:#71819a;padding-left:12px;font-weight:900}.username-field input{border:0!important;box-shadow:none!important;background:transparent;padding-left:4px}.username-status.good{color:#5fd59a}.username-status.bad{color:#ef7d89}.onboarding-note{margin:15px 0 12px;padding:10px 12px;border-radius:11px;background:rgba(79,104,201,.08);border:1px solid rgba(93,111,211,.18);color:#8e9db7;font-size:10px;line-height:1.5}.onboarding-submit{min-height:48px;font-size:13px}
@keyframes onboardingIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:700px){.onboarding-grid{grid-template-columns:1fr}.profile-photo-builder{grid-template-columns:1fr;text-align:center}.avatar.xl{margin:auto}.photo-action-row{justify-content:center}}


/* =========================================================
   ROK_MULTI_ACCOUNT_UI_V1
   ========================================================= */

.rok-card{
  min-height:330px;
}

.rok-summary{
  display:block;
  margin-top:14px;
  padding-bottom:48px;
}

.rok-account-switcher{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding:1px 1px 8px;
  scrollbar-width:thin;
}

.rok-account-pill{
  flex:0 0 auto;
  border:1px solid #263752;
  background:#101827;
  color:#9fabc0;
  border-radius:10px;
  padding:7px 9px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
}

.rok-account-pill:hover{
  border-color:#40587d;
  color:#fff;
}

.rok-account-pill.active{
  background:linear-gradient(135deg,#23345c,#29204f);
  border-color:#6a58d8;
  color:#fff;
  box-shadow:0 6px 18px rgba(77,61,190,.15);
}

.rok-mini-primary{
  font-size:8px;
  letter-spacing:.08em;
  color:#f3c66c;
}

.rok-current-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:5px 0 10px;
}

.rok-current-head small{
  display:block;
  color:#69778e;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.rok-current-head strong{
  display:block;
  margin-top:2px;
  font-size:13px;
}

.rok-primary-badge{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid #5a4927;
  background:#211c12;
  color:#f3c66c;
  font-size:9px;
  font-weight:900;
}

.rok-stat-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.rok-stat-grid .stat{
  min-width:0;
}

.rok-stat-grid strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rok-manager-heading{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
}

.rok-manager-heading h2{
  margin-bottom:6px;
}

.rok-manager-count{
  color:#8c99af;
  font-size:12px;
}

.rok-manage-list{
  display:grid;
  gap:10px;
  margin:18px 0 14px;
  max-height:430px;
  overflow-y:auto;
  padding-right:3px;
}

.rok-manage-account{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid #26354e;
  border-radius:15px;
  background:#0f1827;
}

.rok-manage-account.primary{
  border-color:#5d4dc0;
  background:
    linear-gradient(135deg,rgba(44,55,93,.75),rgba(30,25,58,.82));
}

.rok-manage-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.rok-manage-title strong{
  font-size:15px;
}

.rok-governor-line{
  display:block;
  color:#8f9db3;
  font-size:11px;
  margin-top:5px;
}

.rok-governor-line b{
  color:#dce4f2;
}

.rok-manage-stats{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.rok-manage-stats span{
  background:#111d2e;
  border:1px solid #24344f;
  border-radius:9px;
  padding:6px 8px;
  color:#78879e;
  font-size:9px;
}

.rok-manage-stats b{
  color:#d9e2f0;
  margin-left:4px;
}

.rok-manage-actions{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:112px;
}

.rok-back-accounts{
  margin-top:8px;
}

#rokStepManage > .primary-btn{
  margin-top:2px;
}

#rokStep1 .primary-btn,
#rokStep2 .primary-btn{
  margin-top:12px;
}

#verificationDevBox{
  margin:13px 0;
}

@media(max-width:700px){
  .rok-card{
    min-height:350px;
  }

  .rok-manage-account{
    grid-template-columns:1fr;
  }

  .rok-manage-actions{
    flex-direction:row;
  }

  .rok-manage-actions button{
    flex:1;
  }

  .rok-current-head{
    align-items:flex-start;
  }
}


/* ROKSS_VOICE_V1 */

.voice-panel{
  margin:12px 0 14px;
  padding:11px;
  border:1px solid #263752;
  border-radius:12px;
  background:#0e1827;
}

.voice-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}

.voice-panel-head small{
  display:block;
  color:#6f8099;
  font-size:8px;
  letter-spacing:.13em;
  font-weight:900;
}

.voice-panel-head strong{
  display:block;
  margin-top:2px;
  font-size:12px;
}

.voice-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#4ade80;
  box-shadow:0 0 10px rgba(74,222,128,.7);
}

.voice-participants{
  display:grid;
  gap:5px;
  margin-bottom:9px;
}

.voice-user{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:27px;
  padding:5px 7px;
  border-radius:8px;
  background:#111e30;
}

.voice-user strong{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
}

.voice-user small{
  font-size:10px;
}

.voice-user-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#68d59a;
}

.voice-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}

.voice-control-btn{
  border:1px solid #2a3d5b;
  background:#142136;
  color:#d9e4f4;
  border-radius:8px;
  padding:7px 6px;
  font-size:9px;
  font-weight:800;
  cursor:pointer;
}

.voice-control-btn:hover,
.voice-control-btn.active{
  border-color:#6c5ce7;
  background:#202449;
}

.voice-control-btn.danger{
  grid-column:1 / -1;
  border-color:#56303b;
  color:#ffabb8;
}

.voice-control-btn.danger:hover{
  background:#351a24;
}

.voice-audio-sink{
  display:none;
}

.nav-item.active span:first-child{
  color:#fff;
}


/* ROKSS_NOISE_SUPPRESSION_V1 */

.voice-control-btn.noise{
  grid-column:1 / -1;
}

.voice-control-btn.noise.active{
  border-color:#39765c;
  background:#173328;
  color:#8ff0bf;
}

.voice-control-btn.noise:not(.active){
  color:#8a98ac;
}


/* ROKSS_VOICE_PRESENCE_V2 */

.voice-user-info{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.voice-user-info strong{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.voice-peer-state{
  color:#72849d;
  font-size:8px !important;
}

.voice-user-icons{
  flex:0 0 auto;
}

.voice-user:has(.voice-peer-state){
  min-height:34px;
}


/* ROKSS_NOISE_LEVELS_V2 */

.voice-control-btn.noise-level{
  grid-column:1 / -1;
  border-color:#31506f;
  background:#13283b;
  color:#a8d7ff;
}

.voice-control-btn.noise-level:hover{
  border-color:#5e8dba;
  background:#193650;
}

.voice-control-btn.noise-level[data-level="2"]{
  border-color:#3d7b62;
  background:#173429;
  color:#98f2c3;
}

.voice-control-btn.noise-level[data-level="3"]{
  border-color:#8b6842;
  background:#39291a;
  color:#ffd39b;
}


/* ROKSS_VOICE_CONTEXT_MENU_V3 */

.voice-user{
  position:relative;
  cursor:default;
  user-select:none;
}

.voice-avatar{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #32445e;
  background:#1b2940;
}

.voice-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #5d61dd,
      #8448d8
    );
}

.voice-user-info{
  flex:1;
  min-width:0;
}

.voice-user-info strong{
  display:block;
  color:#f0f4fa;
  font-size:10px;
  line-height:1.2;
}

.voice-peer-state{
  display:block;
  margin-top:2px;
  color:#73859d;
  font-size:8px!important;
}

.voice-context-menu{
  position:fixed;
  z-index:99999;
  width:260px;
  padding:10px;
  border:1px solid #293b57;
  border-radius:12px;
  background:#0c1523;
  box-shadow:
    0 18px 55px rgba(0,0,0,.55);
}

.voice-context-user{
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 4px 10px;
}

.voice-context-user strong{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
  color:#f5f7fb;
}

.voice-context-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:50%;
  object-fit:cover;
}

.voice-volume-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:7px 4px 5px;
  color:#9aabc1;
  font-size:9px;
  font-weight:800;
}

.voice-volume-head strong{
  color:#d8e5f5;
  font-size:9px;
}

.voice-volume-slider{
  width:100%;
  accent-color:#6f61f6;
  cursor:pointer;
}

.voice-context-separator{
  height:1px;
  margin:9px 0;
  background:#21314a;
}

.voice-moderator-actions{
  display:grid;
  gap:5px;
}

.voice-moderator-actions>small{
  margin:2px 3px;
  color:#61738c;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.voice-moderator-actions button{
  width:100%;
  border:0;
  border-radius:8px;
  padding:8px 9px;
  text-align:left;
  cursor:pointer;
  background:transparent;
  color:#c8d4e4;
  font-size:10px;
  font-weight:700;
}

.voice-moderator-actions button:hover{
  background:#17253a;
  color:#fff;
}

.voice-moderator-actions button.danger{
  color:#ff8999;
}

.voice-moderator-actions button.danger:hover{
  background:#351923;
}



/* ROKSS_VOICE_DISCORD_UI_V4 */


/* -------------------------
   SES KANALI
   ------------------------- */

.voice-channel-group{
  display:block;
  margin:1px 0 5px;
}

.voice-channel-link{
  margin-bottom:1px;
}

.voice-channel-title{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}

.voice-channel-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  opacity:.9;
}

.voice-channel-count{
  min-width:15px;
  text-align:center;
  color:#76879f;
  font-size:9px;
}


/* -------------------------
   SES KANALI ALTINDA UYELER
   ------------------------- */

.voice-channel-members{
  display:grid;
  gap:2px;
  padding:3px 4px 4px 20px;
}

.voice-channel-member{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  min-height:30px;
  padding:3px 7px;
  border-radius:7px;
  color:#aeb9ca;
}

.voice-channel-member:hover{
  background:#162236;
  color:#e7edf6;
}

.voice-channel-member-avatar{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #30435e;
}

.voice-channel-member-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  font-weight:700;
}

.voice-channel-member-state{
  flex:0 0 auto;
  font-size:9px;
}


/* -------------------------
   AKTIF VOICE PANEL
   ------------------------- */

.voice-panel{
  padding:10px !important;
  margin:8px 0 12px !important;
  border-radius:11px !important;
  background:
    linear-gradient(
      180deg,
      #0d1a29,
      #0a1421
    ) !important;
}

.voice-panel-head{
  margin-bottom:7px !important;
}

.voice-panel-head small{
  color:#5f7896 !important;
}

.voice-panel-head strong{
  color:#f1f6fc;
}

.voice-participants{
  max-height:150px;
  overflow:auto;
  padding-right:2px;
}

.voice-user{
  border:0 !important;
  background:#101d2d !important;
  padding:5px 6px !important;
}

.voice-user:hover{
  background:#16273b !important;
}


/* -------------------------
   NOISE SLIDER
   ------------------------- */

.voice-noise-strength{
  grid-column:1 / -1;
  margin-top:2px;
  padding:9px 9px 7px;
  border:1px solid #28425d;
  border-radius:9px;
  background:#0e1b2a;
}

.voice-noise-strength-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:7px;
}

.voice-noise-strength-head span{
  color:#b7c8dc;
  font-size:9px;
  font-weight:800;
}

.voice-noise-strength-head strong{
  color:#72e3af;
  font-size:9px;
  font-weight:900;
}

.voice-noise-strength-slider{
  --noise-strength:72%;

  width:100%;
  height:4px;
  margin:0;
  appearance:none;
  outline:none;
  border-radius:99px;

  background:
    linear-gradient(
      90deg,
      #4ac88d 0,
      #4ac88d var(--noise-strength),
      #24364d var(--noise-strength),
      #24364d 100%
    );
}

.voice-noise-strength-slider::-webkit-slider-thumb{
  appearance:none;
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid #d9f8ea;
  background:#61dca0;
  cursor:pointer;
  box-shadow:
    0 0 0 3px rgba(97,220,160,.12);
}

.voice-noise-strength-slider::-moz-range-thumb{
  width:13px;
  height:13px;
  border-radius:50%;
  border:2px solid #d9f8ea;
  background:#61dca0;
  cursor:pointer;
}

.voice-noise-scale{
  display:flex;
  justify-content:space-between;
  margin-top:5px;
}

.voice-noise-scale small{
  color:#566a83;
  font-size:7px;
  font-weight:800;
}



/* ROKSS_FASTENHANCER_V1 */

.voice-ai-card{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  margin-top:2px;
  border:1px solid #29405c;
  border-radius:9px;
  background:
    linear-gradient(
      135deg,
      #101f31,
      #111a2c
    );
}

.voice-ai-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.04em;
  color:#e9fff5;
  background:
    linear-gradient(
      135deg,
      #25a86c,
      #4f68dc
    );
  box-shadow:
    0 0 16px rgba(48,190,128,.14);
}

.voice-ai-copy{
  min-width:0;
  flex:1;
}

.voice-ai-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
}

.voice-ai-title strong{
  color:#edf5ff;
  font-size:9px;
  font-weight:900;
}

#voiceAiStatus{
  font-size:8px;
  font-weight:900;
  color:#7c91ab;
}

#voiceAiStatus[data-status="active"]{
  color:#68e2a3;
}

#voiceAiStatus[data-status="loading"]{
  color:#e8c56d;
}

#voiceAiStatus[data-status="fallback"]{
  color:#ffb071;
}

#voiceAiStatus[data-status="error"]{
  color:#ff7e8e;
}

.voice-ai-copy small{
  display:block;
  margin-top:2px;
  color:#667b95;
  font-size:7px;
}


/* ===========================================================
   ROKSS_VOICE_DOCK_V5
   =========================================================== */


/* -----------------------------------------------------------
   SOL KOLONU BIRAZ GENISLET
   ----------------------------------------------------------- */

.workspace-grid{
  grid-template-columns:
    275px
    minmax(0,1fr)
    250px !important;
}


/* Sol panel kontrol dock'u i?in flex */
.rooms-panel{
  display:flex !important;
  flex-direction:column !important;
  min-width:0;
}


/* -----------------------------------------------------------
   VOICE CHANNEL ALTINDA KULLANICILAR
   ----------------------------------------------------------- */

.rokss-voice-inline-members{
  display:grid;
  gap:2px;
  margin:
    -1px
    3px
    7px
    15px;
  padding-left:7px;
}

.rokss-voice-inline-user{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  min-height:31px;
  padding:4px 7px;
  border-radius:7px;
  color:#a9b6c9;
  cursor:default;
  user-select:none;
}

.rokss-voice-inline-user:hover{
  background:#162236;
  color:#edf4ff;
}

.rokss-voice-inline-avatar{
  width:23px;
  height:23px;
  flex:0 0 23px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid #31445f;
  background:#18253a;
}

.rokss-voice-inline-fallback{
  display:grid;
  place-items:center;
  color:#fff;
  font-size:8px;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      #5d68db,
      #8548d6
    );
}

.rokss-voice-inline-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  font-weight:700;
}

.rokss-voice-inline-state{
  flex:0 0 auto;
  min-width:13px;
  text-align:center;
  font-size:9px;
}

.rokss-voice-count{
  margin-left:auto;
  color:#708198 !important;
  font-size:8px !important;
  font-weight:800;
}


/* -----------------------------------------------------------
   SES KONTROL DOCK
   ----------------------------------------------------------- */

#voicePanel.rokss-voice-dock{
  position:sticky;
  bottom:0;
  z-index:25;
  order:999;
  margin:
    auto
    -4px
    -4px !important;
  padding:9px !important;
  border:
    1px solid
    #263954 !important;
  border-radius:
    12px !important;
  background:
    rgba(
      8,
      15,
      26,
      .97
    ) !important;
  box-shadow:
    0 -12px 28px
    rgba(4,8,15,.32);
  backdrop-filter:
    blur(14px);
}


/* Kullan?c?n?n kendi sat?r? */
.voice-dock-self{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin-bottom:8px;
  padding:2px 2px 7px;
  border-bottom:
    1px solid
    #1c2a40;
}

.voice-dock-avatar{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:50%;
  object-fit:cover;
  border:
    1px solid
    #3a4d69;
}

.voice-dock-avatar-fallback{
  display:grid;
  place-items:center;
  color:#fff;
  font-size:10px;
  font-weight:900;
  background:
    linear-gradient(
      135deg,
      #5e61df,
      #8647d8
    );
}

.voice-dock-self-copy{
  flex:1;
  min-width:0;
}

.voice-dock-self-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f2f6fc;
  font-size:10px;
  font-weight:850;
}

.voice-dock-self-copy small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#708198;
  font-size:8px;
}

.voice-dock-live-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#4be09d;
  box-shadow:
    0 0 10px
    rgba(75,224,157,.7);
}


/* -----------------------------------------------------------
   BUTTON SATIRI
   ----------------------------------------------------------- */

#voicePanel .voice-controls{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px !important;
  grid-template-columns:none !important;
}

#voicePanel .voice-dock-round{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border-radius:50% !important;
  border:
    1px solid
    #283a55 !important;
  background:#121e30 !important;
  color:#d9e5f5 !important;
  cursor:pointer;
  font-size:0 !important;
}

#voicePanel .voice-dock-round:hover{
  border-color:#526887 !important;
  background:#192941 !important;
}

#voicePanel .voice-dock-round.active{
  border-color:#4a7f67 !important;
  background:#173629 !important;
  color:#72e5aa !important;
}


/* Mic */
#voiceMuteBtn::before{
  content:"??";
  font-size:15px;
}

#voiceMuteBtn.active::before{
  content:"??";
}


/* Headset */
#voiceDeafenBtn::before{
  content:"??";
  font-size:15px;
}


/* Ayr?l */
#voiceLeaveBtn.voice-dock-leave{
  border-color:#64303a !important;
  background:#321821 !important;
  color:#ff91a0 !important;
}

#voiceLeaveBtn::before{
  content:"?";
  font-size:16px;
  transform:rotate(135deg);
}

#voiceLeaveBtn:hover{
  background:#4a1c29 !important;
}


/* -----------------------------------------------------------
   SES DALGASI AI BUTONU
   ----------------------------------------------------------- */

.voice-noise-wave-btn svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}


/* -----------------------------------------------------------
   GURULTU AZALTMA POPOVER
   ----------------------------------------------------------- */

.voice-noise-popover{
  position:absolute;
  left:8px;
  right:8px;
  bottom:54px;
  z-index:100;
  padding:10px;
  border:
    1px solid
    #2c405d;
  border-radius:11px;
  background:#0b1523;
  box-shadow:
    0 18px 45px
    rgba(0,0,0,.55);
}

.voice-noise-popover-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:
    1px
    2px
    9px;
}

.voice-noise-popover-head strong{
  display:block;
  color:#eef4fb;
  font-size:10px;
}

.voice-noise-popover-head small{
  display:block;
  margin-top:2px;
  color:#697d98;
  font-size:7px;
}

.voice-ai-mini-badge{
  display:grid;
  place-items:center;
  width:27px;
  height:23px;
  border-radius:7px;
  color:#e8fff5;
  background:
    linear-gradient(
      135deg,
      #239e67,
      #5264dc
    );
  font-size:8px;
  font-weight:1000;
}

.voice-ai-toggle-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px;
  border:
    1px solid
    #20314a;
  border-radius:9px;
  background:#101c2c;
  color:#dce6f3;
  text-align:left;
  cursor:pointer;
}

.voice-ai-toggle-row:hover{
  background:#15243a;
}

.voice-ai-toggle-row span:first-child{
  flex:1;
  min-width:0;
}

.voice-ai-toggle-row strong{
  display:block;
  font-size:9px;
}

.voice-ai-toggle-row small{
  display:block;
  margin-top:3px;
  color:#71849e;
  font-size:7px;
  line-height:1.35;
}


/* Toggle */
.voice-switch{
  position:relative;
  width:31px;
  height:17px;
  flex:0 0 31px;
  border-radius:999px;
  background:#29384c;
  transition:.16s ease;
}

.voice-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#91a0b4;
  transition:.16s ease;
}

.voice-switch.on{
  background:#246f50;
}

.voice-switch.on::after{
  left:17px;
  background:#70e4aa;
}


/* -----------------------------------------------------------
   ESKI BUYUK VOICE UI ARTIK KULLANILMIYOR
   ----------------------------------------------------------- */

#voicePanel .voice-ai-card,
#voicePanel #voiceNoiseBtn,
#voicePanel .voice-noise-strength,
#voicePanel #voiceNoiseLevelBtn{
  display:none !important;
}


/* -----------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------- */

@media(max-width:1400px){

  .workspace-grid{
    grid-template-columns:
      255px
      minmax(0,1fr)
      235px !important;
  }
}

@media(max-width:1100px){

  .workspace-grid{
    grid-template-columns:
      235px
      minmax(0,1fr)
      220px !important;
  }
}



/* ===========================================================
   ROKSS_VOICE_DOCK_FIX_V6
   =========================================================== */


/*
 * Eski ::before emoji ikonlar?n? tamamen iptal et.
 * ?? sorununun kayna?? bunlard?.
 */

#voiceMuteBtn::before,
#voiceDeafenBtn::before,
#voiceLeaveBtn::before{
  content:none !important;
  display:none !important;
}


/* Yeni SVG iconlar? */

#voicePanel .voice-dock-round svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}


/* Mikrofon veya kulakl?k kapal? */

#voicePanel .voice-dock-round.voice-control-off{
  border-color:#70404a !important;
  background:#351c25 !important;
  color:#ff9cab !important;
}


/*
 * AI a?/kapa esnas?nda kullan?c?y?
 * kanaldan ??karm?yoruz.
 *
 * Sadece switch ge?ici olarak pasif olur.
 */

#voiceAiToggleRow:disabled{
  opacity:.65;
  cursor:wait;
}


/* Alt dock sabit ve temiz */

#voicePanel.rokss-voice-dock{
  overflow:visible !important;
}


/*
 * Ses dalgas? aktifken ye?il.
 */

#voiceNoiseMenuBtn.active{
  border-color:#36785b !important;
  background:#17372a !important;
  color:#6ee3a8 !important;
}


/*
 * Kapal?yken normal gri.
 */

#voiceNoiseMenuBtn:not(.active){
  border-color:#293a52 !important;
  background:#121e30 !important;
  color:#9aa9bd !important;
}


/*
 * Eski text'ler yanl??l?kla buton i?inde
 * kalsa bile g?r?nmesin.
 */

#voicePanel .voice-dock-round{
  line-height:0 !important;
  overflow:hidden;
}


/* Avatar / kendi kullan?c? alan? hi?bir AI
   switch i?leminde gizlenmesin */

#voiceDockSelf{
  display:flex !important;
}



/* ROKSS_VOICE_DUPLICATE_FIX_V7 */

.voice-channel-members{
  display:none !important;
}
/* ================================
   ROKSS_UNIFIED_LAYOUT_V1
   Ayr� kart hissini azalt�r,
   tek b�t�n hissi verir.
================================ */

/* �st blok ile alt blok aras� bo�lu�u k���lt */
:is(
  .community-header,
  .server-header,
  .community-hero,
  .server-hero,
  .active-community-card,
  .active-server-card
){
  margin-bottom: 8px !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

/* Alt ana 3 kolon alan� */
:is(
  .community-layout,
  .server-layout,
  .community-grid,
  .server-grid,
  .community-body,
  .server-body,
  .community-shell,
  .server-shell
){
  gap: 6px !important;
  align-items: stretch !important;
}

/* Sol - Orta - Sa� paneller ortak g�r�n�m */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar,
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel,
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  box-shadow: none !important;
  background:
    linear-gradient(
      180deg,
      rgba(12,20,42,0.98) 0%,
      rgba(8,15,32,0.98) 100%
    ) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Sol panel */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
){
  border-radius: 22px 10px 10px 22px !important;
  margin-right: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}

/* Orta panel */
:is(
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel
){
  border-radius: 10px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Sa� panel */
:is(
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  border-radius: 10px 22px 22px 10px !important;
  margin-left: 0 !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* �� kartlar� da biraz birle�tir */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar,
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
) > *{
  box-shadow: none !important;
}

/* Sol panel i�indeki ses alan� ile roller aras�na daha do�al ak�� */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
) hr{
  opacity: 0.18 !important;
  margin: 12px 0 !important;
}

/* �� paddingler biraz daha tek par�a hissi versin */
:is(
  .channel-sidebar,
  .rooms-sidebar,
  .community-sidebar,
  .server-sidebar
){
  padding-right: 10px !important;
}

:is(
  .chat-main,
  .community-main,
  .server-main,
  .chat-panel
){
  padding-left: 12px !important;
  padding-right: 12px !important;
}

:is(
  .members-sidebar,
  .community-members,
  .server-members,
  .people-sidebar
){
  padding-left: 10px !important;
}

/* Banner ile alt g�vde ayn� aileden g�r�ns�n */
:is(
  .community-header,
  .server-header,
  .community-hero,
  .server-hero,
  .active-community-card,
  .active-server-card
){
  border: 1px solid rgba(255,255,255,0.05) !important;
  background:
    linear-gradient(
      90deg,
      rgba(12,20,42,0.98) 0%,
      rgba(15,24,50,0.98) 55%,
      rgba(18,20,48,0.98) 100%
    ) !important;
}

/* D�� taraftaki a��r� bo�luklar� biraz azalt */
:is(
  .community-page,
  .server-page,
  .community-view,
  .server-view
){
  gap: 8px !important;
}

/* =========================================================
   ROKSS_UNIFIED_LAYOUT_V2
   Community hero + rooms + chat + people = tek panel
   ========================================================= */

@media (min-width:901px){

  /*
   * B�t�n sunucu alan�n�n d�� kabu�u.
   * �ocuklar aras�ndaki 2px alan ayra� g�revi g�r�yor.
   */
  .server-workspace{
    gap:2px !important;
    padding:1px !important;
    box-sizing:border-box;

    background:#1b2940 !important;

    border:1px solid #263650 !important;
    border-radius:20px !important;

    overflow:hidden !important;
  }


  /*
   * �st Chatter Hall banner art�k ayr� kart de�il.
   */
  .community-hero{
    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        110deg,
        #111a2b 0%,
        #101827 62%,
        rgba(73,49,120,.20) 100%
      ) !important;
  }


  /*
   * Alt 3 kolon birbirine �ok yak�n.
   * 2px aral�k tek ince �izgi gibi g�r�necek.
   */
  .workspace-grid{
    gap:2px !important;

    background:#1b2940 !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;
  }


  /*
   * Sol panel
   */
  .rooms-panel{
    margin:0 !important;
    padding:16px !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(17,26,42,.99),
        rgba(12,19,31,.99)
      ) !important;
  }


  /*
   * Orta chat paneli
   */
  .chat-panel{
    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        #111a2a 0%,
        #0d1522 100%
      ) !important;
  }


  /*
   * Sa� ki�iler paneli
   */
  .people-panel{
    margin:0 !important;
    padding:16px !important;

    border:0 !important;
    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        rgba(17,26,42,.99),
        rgba(12,19,31,.99)
      ) !important;
  }


  /*
   * Chat ba�l��� da kart hissi vermesin.
   * Sadece a�a��da ince ayra�.
   */
  .chat-head{
    border-bottom:
      1px solid
      rgba(94,113,145,.20) !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,33,53,.48),
        rgba(15,24,39,.14)
      ) !important;
  }


  /*
   * Sol panel ile chat aras�nda,
   * chat ile ki�i paneli aras�nda
   * daha do�al ince �izgi.
   */
  .rooms-panel{
    border-right:
      1px solid
      rgba(255,255,255,.025) !important;
  }

  .people-panel{
    border-left:
      1px solid
      rgba(255,255,255,.025) !important;
  }


  /*
   * �nceki patch'ten kalan yuvarlak k��eleri kesin ez.
   */
  .community-hero,
  .rooms-panel,
  .chat-panel,
  .people-panel{
    outline:none !important;
  }

}


/* =========================================================
   ROKSS_THEME_TUNE_V3
   Daha uyumlu panel tonlar� + online/offline stilleri
   ========================================================= */

:root{
  --workspace-divider:#1e2c43;
  --workspace-surface:#101828;
  --workspace-surface-2:#101a2b;
  --workspace-surface-3:#0d1523;
  --workspace-soft:#132036;
}

.community-hero{
  background:linear-gradient(110deg,#111b2c 0%,#10192a 58%,#16233b 100%) !important;
}

.server-workspace,
.workspace-grid{
  background:var(--workspace-divider) !important;
}

.rooms-panel,
.people-panel{
  background:linear-gradient(180deg,#101829 0%,#0d1523 100%) !important;
}

.chat-panel{
  background:linear-gradient(180deg,#10192b 0%,#0d1523 100%) !important;
}

.chat-head{
  background:linear-gradient(180deg,rgba(19,31,49,.92),rgba(15,24,39,.70)) !important;
  border-bottom:1px solid rgba(92,108,135,.18) !important;
}

.composer{
  background:rgba(14,22,35,.96) !important;
  border-top:1px solid rgba(92,108,135,.18) !important;
}

.rooms-panel,
.chat-panel,
.people-panel,
.community-hero{
  box-shadow:none !important;
}

.member-row{
  border:1px solid transparent;
  transition:.14s ease;
}

.member-row:hover{
  background:#142036 !important;
  border-color:#22334d !important;
}

.member-section-sub{
  margin:-2px 0 8px;
  padding-left:2px;
  color:#7f8ea7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.03em;
}

.online-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.online-dot.online{
  background:#4fd89d;
  box-shadow:0 0 10px rgba(79,216,157,.42);
}

.online-dot.offline{
  background:#667486;
}

.presence-text.online{
  color:#79e2b3;
}

.presence-text.offline{
  color:#9aa7b8;
}

.member-meta small{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:wrap;
}



/* ===========================================================
   ROKSS_THEME_PRESENCE_V4
   =========================================================== */

@media (min-width:901px){

  /*
   * Tek panel hissini koru ama tonlar? birbirine yakla?t?r.
   */

  .server-workspace{
    background:#1d2a40 !important;
    border-color:#273750 !important;
  }


  .workspace-grid{
    background:#1d2a40 !important;
  }


  .community-hero{
    background:
      linear-gradient(
        110deg,
        #111a2a 0%,
        #101827 58%,
        #111a2c 100%
      ) !important;
  }


  .rooms-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .chat-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .people-panel{
    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1523 100%
      ) !important;
  }


  .chat-head{
    background:
      linear-gradient(
        180deg,
        #121d30 0%,
        #101929 100%
      ) !important;

    border-bottom:
      1px solid
      #1d2b42 !important;
  }


  .composer{
    background:#0e1726 !important;

    border-top:
      1px solid
      #1d2b42 !important;
  }
}


/* ===========================================================
   MEMBER GROUP
   =========================================================== */

.member-presence-group-title{

  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-top:12px;
  padding:
    8px
    3px
    3px;

  border-top:
    1px solid
    rgba(78,96,124,.20);

  color:
    var(
      --presence-role-color,
      #72d8ae
    );
}


.member-presence-group-title:first-child{
  margin-top:0;
  border-top:0;
  padding-top:1px;
}


.member-presence-group-title span{

  display:flex;
  align-items:center;
  gap:6px;

  font-size:9px;
  font-weight:950;

  letter-spacing:.13em;
}


.member-presence-group-title span i{

  width:7px;
  height:7px;

  border-radius:50%;

  background:currentColor;

  box-shadow:
    0 0 9px
    color-mix(
      in srgb,
      currentColor 65%,
      transparent
    );
}


.member-presence-group-title b{

  color:#8290a6;

  font-size:9px;
  font-weight:900;
}


/* ===========================================================
   ONLINE/OFFLINE SUMMARY
   =========================================================== */

.member-presence-summary{

  display:flex;
  align-items:center;
  gap:5px;

  padding:
    1px
    3px
    5px;

  font-size:8px;
  font-weight:750;
}


.member-presence-summary .summary-online{
  color:#58cfa0;
}


.member-presence-summary .summary-offline{
  color:#65758c;
}


.member-presence-summary i{
  color:#405069;
  font-style:normal;
}


/* ===========================================================
   MEMBER ROW
   =========================================================== */

.member-row{

  min-height:48px;

  padding:
    8px
    7px !important;

  border:
    1px solid
    transparent;

  border-radius:11px;

  transition:
    background .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}


.member-row:hover{

  background:#142137 !important;

  border-color:
    color-mix(
      in srgb,
      var(
        --member-role-color,
        #4f607d
      ) 25%,
      #24334c
    ) !important;
}


/* ===========================================================
   AVATAR STATUS
   =========================================================== */

.member-avatar-presence{

  position:relative;

  flex:
    0
    0
    auto;
}


.member-status-dot{

  position:absolute;

  right:-1px;
  bottom:0;

  width:8px;
  height:8px;

  border:
    2px solid
    #101929;

  border-radius:50%;
}


.member-status-dot.online{

  background:#48d69a;

  box-shadow:
    0 0 8px
    rgba(72,214,154,.60);
}


.member-status-dot.offline{
  background:#5c6879;
}


/* ===========================================================
   MEMBER META
   =========================================================== */

.member-meta{
  min-width:0;
}


.member-meta strong{

  display:flex !important;
  align-items:center;
  gap:4px;

  white-space:nowrap;
}


.member-meta small{

  display:flex !important;
  align-items:center;
  gap:4px;

  margin-top:3px !important;

  white-space:nowrap;
}


.presence-label{

  font-size:9px;
  font-weight:800;
}


.presence-label.online{
  color:#5ed6a4;
}


.presence-label.offline{
  color:#748196;
}


.member-meta-separator{
  color:#46556c;
}


/* ===========================================================
   OFFLINE UYEYI HAFIF SOLUK GOSTER
   =========================================================== */

.member-row.presence-offline{

  opacity:.62;
}


.member-row.presence-offline:hover{

  opacity:.90;
}


.member-row.presence-offline .avatar-rich{

  filter:
    saturate(.55)
    brightness(.82);
}


.member-row.presence-online{

  opacity:1;
}



/* =========================================================
   ROK_RISE_ACCOUNT_DELETE_STYLE_V1
   ========================================================= */

.rok-delete-btn{

  border-color:
    rgba(224,78,97,.42) !important;

  background:
    rgba(111,28,42,.17) !important;

  color:
    #ff8998 !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .15s ease;
}


.rok-delete-btn:hover{

  border-color:
    rgba(255,93,113,.75) !important;

  background:
    rgba(142,34,50,.30) !important;

  color:
    #ffb1ba !important;
}


.rok-delete-btn:active{

  transform:
    translateY(1px);
}


.rok-delete-btn:disabled{

  opacity:.50;

  cursor:wait;
}


/*
 * 3 buton oldu?unda sa? taraf
 * d?zg?n dikey hizalans?n.
 */

.rok-manage-actions{

  min-width:132px;
}


@media(max-width:700px){

  .rok-manage-actions{

    min-width:0;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .rok-delete-btn{

    grid-column:
      1 / -1;
  }
}


/* =========================================================
   ROKSS_HIDDEN_SCROLLBARS_V1
   Scroll devam eder, scrollbar g�r�nmez.
   Mouse wheel + mobil touch destekli.
   ========================================================= */

/*
 * Sunucu ekran�ndaki scroll alanlar�.
 */
.rooms-panel,
.channel-list,
.messages,
.people-panel,
.member-list,
.rok-manage-list{

  overflow-y:auto !important;

  /* Firefox */
  scrollbar-width:none !important;

  /* Eski Edge / IE */
  -ms-overflow-style:none !important;

  /* Mobilde ak�c� parmak scroll */
  -webkit-overflow-scrolling:touch;

  /* Dikey parmak hareketine izin ver */
  touch-action:pan-y;

  /*
   * Bir panelin sonuna gelince
   * t�m sayfan�n istemeden z�plamas�n� azalt.
   */
  overscroll-behavior-y:contain;
}


/*
 * Chrome / Edge / Safari
 */
.rooms-panel::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
.people-panel::-webkit-scrollbar,
.member-list::-webkit-scrollbar,
.rok-manage-list::-webkit-scrollbar{

  width:0 !important;
  height:0 !important;
  display:none !important;
}


/*
 * Chat alan�nda sa� taraftaki bo� scrollbar
 * pay�n� da kald�r.
 */
.messages{
  scrollbar-gutter:auto !important;
}


/*
 * Sa� kullan�c� paneli ayn� �ekilde.
 */
.people-panel{
  scrollbar-gutter:auto !important;
}


/*
 * Mobilde parmakla rahat kayd�rma.
 */
@media(max-width:900px){

  .rooms-panel,
  .channel-list,
  .messages,
  .people-panel,
  .member-list,
  .rok-manage-list{

    overflow-y:auto !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }
}


/* =========================================================
   ROKSS_PERSONAL_UNIFIED_V1
   Profil ekran� = tek b�t�n panel
   ========================================================= */

@media (min-width:901px){

  /*
   * ORTAK RENK / AYRA�
   */
  .personal-hero,
  .personal-grid,
  .personal-bottom-grid{
    --personal-bg:#101929;
    --personal-bg-deep:#0d1523;
    --personal-divider:#1d2b42;
    --personal-border:#273750;
  }


  /* =======================================================
     �ST PROF�L BANNER
     Sadece �st k��eleri yuvarlak.
     ======================================================= */

  .personal-hero{
    margin:0 !important;

    border:
      1px solid
      var(--personal-border) !important;

    border-bottom:0 !important;

    border-radius:
      20px 20px 0 0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        110deg,
        #111a2a 0%,
        #101827 58%,
        #151a31 100%
      ) !important;
  }


  /* =======================================================
     ORTA 3 KART
     Arkada�lar / Gelen �stekler / Rise
     ======================================================= */

  .personal-grid{
    margin-top:0 !important;

    padding:0 1px !important;

    gap:2px !important;

    background:
      var(--personal-divider) !important;

    border-left:
      1px solid
      var(--personal-border);

    border-right:
      1px solid
      var(--personal-border);

    /*
     * Hero ile aras�ndaki tek ince �izgi.
     */
    border-top:
      1px solid
      var(--personal-divider);
  }


  .personal-grid > .feature-card{
    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        var(--personal-bg) 0%,
        var(--personal-bg-deep) 100%
      ) !important;
  }


  /*
   * Renkli glowlar kals�n ama daha yumu�ak olsun.
   */
  .personal-grid > .feature-card::before{
    opacity:.10 !important;
  }


  /* =======================================================
     ALT 2 KART
     Direkt Mesajlar / ROKSS Profili
     ======================================================= */

  .personal-bottom-grid{
    margin-top:0 !important;

    padding:2px 1px 1px !important;

    gap:2px !important;

    background:
      var(--personal-divider) !important;

    border-left:
      1px solid
      var(--personal-border);

    border-right:
      1px solid
      var(--personal-border);

    border-bottom:
      1px solid
      var(--personal-border);

    border-radius:
      0 0 20px 20px !important;

    overflow:hidden;
  }


  .personal-bottom-grid > .dm-dashboard-card,
  .personal-bottom-grid > .account-overview{
    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    box-shadow:none !important;

    background:
      linear-gradient(
        180deg,
        var(--personal-bg) 0%,
        var(--personal-bg-deep) 100%
      ) !important;
  }


  /*
   * Sadece en alttaki d�� k��eler yuvarlak.
   */

  .personal-bottom-grid > .dm-dashboard-card{
    border-radius:
      0 0 0 18px !important;
  }


  .personal-bottom-grid > .account-overview{
    border-radius:
      0 0 18px 0 !important;
  }


  /* =======================================================
     �� ELEMANLARI DA AYNI RENK A�LES�NE TOPLA
     ======================================================= */

  .card-action{
    background:#121e31 !important;

    border-color:
      #263750 !important;
  }


  .personal-dm{
    background:#111b2b !important;

    border-color:
      #22334d !important;
  }


  .profile-overview-grid > div{
    background:#0f1929 !important;

    border-color:
      #22334d !important;
  }


  .rok-summary .stat{
    background:#0f1929 !important;

    border-color:
      #22334d !important;
  }

}


/* =========================================================
   MOB�L
   Tek kolon ama b�t�n g�r�n�m korunur.
   ========================================================= */

@media(max-width:900px){

  .personal-hero{
    margin-bottom:0 !important;

    border-radius:
      18px 18px 0 0 !important;

    border-bottom:0 !important;
  }


  .personal-grid{
    margin-top:0 !important;

    gap:2px !important;

    padding:2px 1px 0 !important;

    background:#1d2b42 !important;

    border-left:
      1px solid #273750;

    border-right:
      1px solid #273750;
  }


  .personal-grid > .feature-card{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }


  .personal-bottom-grid{
    margin-top:0 !important;

    gap:2px !important;

    padding:
      2px 1px 1px !important;

    background:#1d2b42 !important;

    border:
      1px solid #273750;

    border-top:0;

    border-radius:
      0 0 18px 18px !important;

    overflow:hidden;
  }


  .personal-bottom-grid > .dm-dashboard-card,
  .personal-bottom-grid > .account-overview{
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }


  .personal-bottom-grid > .account-overview{
    border-radius:
      0 0 17px 17px !important;
  }
}


/* =========================================================
   ROKSS_PERSONAL_COLOR_HARMONY_V2
   Profil ekran�ndaki b�t�n paneller ayn� renk ailesi.
   ========================================================= */

@media (min-width:901px){

  /*
   * ANA RENKLER
   */
  #personalView{
    --personal-main:#101929;
    --personal-main-deep:#0d1624;
    --personal-inner:#111c2d;
    --personal-divider:#223149;
    --personal-border:#2a3a54;
    --personal-soft:#162238;
  }


  /* =======================================================
     �ST PROF�L
     ======================================================= */

  .personal-hero{

    background:
      linear-gradient(
        110deg,
        #111b2c 0%,
        #101929 60%,
        #121a2d 100%
      ) !important;

    border-color:
      var(--personal-border) !important;
  }


  /* =======================================================
     ORTA 3 PANEL
     Art�k mavi / sar� / turkuaz ayr� glow yok.
     ======================================================= */

  .personal-grid{
    background:
      var(--personal-divider) !important;
  }


  .personal-grid > .feature-card{

    background:
      linear-gradient(
        180deg,
        var(--personal-main) 0%,
        var(--personal-main-deep) 100%
      ) !important;

    color:#eaf0fa !important;
  }


  /*
   * Eski renkli b�y�k glow efektlerini kald�r.
   */
  .friends-card::before,
  .request-card::before,
  .rok-card::before{

    opacity:0 !important;
    display:none !important;
  }


  /* =======================================================
     ALT PANELLER
     ======================================================= */

  .personal-bottom-grid{

    background:
      var(--personal-divider) !important;
  }


  .dm-dashboard-card,
  .account-overview{

    background:
      linear-gradient(
        180deg,
        var(--personal-main) 0%,
        var(--personal-main-deep) 100%
      ) !important;
  }


  /* =======================================================
     �� KARTLAR
     ======================================================= */

  .personal-dm{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  .personal-dm:hover{

    background:
      #16243a !important;

    border-color:
      #354b6a !important;
  }


  .profile-overview-grid > div{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  .rok-summary .stat{

    background:
      #111c2d !important;

    border-color:
      #263750 !important;
  }


  /* =======================================================
     ALTTAK� UZUN AKS�YON BUTONLARI
     ======================================================= */

  .card-action{

    background:
      #121f32 !important;

    border-color:
      #293b58 !important;

    color:
      #dce6f5 !important;
  }


  .card-action:hover:not(:disabled){

    background:
      #172740 !important;

    border-color:
      #405777 !important;

    color:#fff !important;
  }


  /* =======================================================
     BA�LIKLAR / A�IKLAMALAR
     ======================================================= */

  .feature-card p,
  .profile-identity p,
  .personal-dm small,
  .profile-overview-grid span{

    color:
      #8796ad !important;
  }


  .feature-kicker,
  .eyebrow{

    color:
      #8190a8 !important;
  }


  /*
   * �� kart�n ikonlar� yine birbirinden ay�rt
   * edilebilir ama ba��rmas�n.
   */
  .friends-card .feature-icon{
    color:#83a7e8 !important;
  }

  .request-card .feature-icon{
    color:#b7a77d !important;
  }

  .rok-card .feature-icon{
    color:#7fb7c7 !important;
  }

}


/* =========================================================
   MOB�LDE DE AYNI TON
   ========================================================= */

@media(max-width:900px){

  .personal-hero,
  .personal-grid > .feature-card,
  .dm-dashboard-card,
  .account-overview{

    background:
      linear-gradient(
        180deg,
        #101929 0%,
        #0d1624 100%
      ) !important;
  }


  .friends-card::before,
  .request-card::before,
  .rok-card::before{

    display:none !important;
  }


  .personal-dm,
  .profile-overview-grid > div,
  .rok-summary .stat{

    background:#111c2d !important;
    border-color:#263750 !important;
  }
}



/* =========================================================
   ROKSS_FRIEND_SYSTEM_STYLE_V1
   ========================================================= */

.profile-rokss-id{

  display:flex;
  align-items:center;
  gap:7px;

  margin-top:6px;

  color:#7f91aa;

  font-size:11px;
}


.profile-rokss-id b{

  color:#c8d5e8;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.08em;
}


.rokss-id-copy{

  display:grid;
  place-items:center;

  width:25px;
  height:25px;

  padding:0;

  border:
    1px solid
    #2b3b56;

  border-radius:8px;

  background:#111d30;

  color:#8fa2bd;

  cursor:pointer;

  transition:.15s ease;
}


.rokss-id-copy:hover{

  border-color:#596aeb;

  background:#192641;

  color:#fff;
}


/* =========================
   SOCIAL MODAL
   ========================= */

.social-modal{

  width:
    min(
      650px,
      calc(100vw - 30px)
    );

  max-height:
    min(
      720px,
      calc(100vh - 30px)
    );

  overflow-y:auto;

  scrollbar-width:none;
}


.social-modal::-webkit-scrollbar{
  display:none;
}


.social-modal-head{

  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  margin-bottom:18px;
}


.social-modal-head h2{
  margin:
    4px
    0
    5px;
}


.social-modal-head p{

  margin:0;

  color:#8998af;

  font-size:12px;
}


/* =========================
   MY ID
   ========================= */

.my-rokss-code-box{

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  margin-bottom:12px;

  padding:
    13px
    14px;

  border:
    1px solid
    #273850;

  border-radius:13px;

  background:#101b2d;
}


.my-rokss-code-box > div{

  display:grid;
  gap:3px;
}


.my-rokss-code-box small{

  color:#7688a2;

  font-size:8px;
  font-weight:900;

  letter-spacing:.13em;
}


.my-rokss-code-box strong{

  color:#edf3fc;

  font-size:18px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.12em;
}


/* =========================
   ADD FRIEND
   ========================= */

.friend-add-box{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap:8px;

  padding-bottom:18px;

  border-bottom:
    1px solid
    #223149;
}


.friend-add-box .field{

  margin:0;
}


.social-list-head{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin:
    17px
    2px
    8px;

  color:#dce5f2;
}


.social-list-head span{

  display:grid;
  place-items:center;

  min-width:24px;
  height:24px;

  border-radius:8px;

  background:#17243a;

  color:#8fa1bb;

  font-size:10px;
}


/* =========================
   LIST
   ========================= */

.friend-list,
.friend-request-list{

  display:grid;
  gap:7px;
}


.friend-row,
.friend-request-row{

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:12px;

  min-height:68px;

  padding:
    10px
    12px;

  border:
    1px solid
    #23344d;

  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      #111c2e,
      #0f1929
    );
}


.friend-row:hover,
.friend-request-row:hover{

  border-color:#344a69;

  background:
    linear-gradient(
      180deg,
      #142137,
      #111c2e
    );
}


.friend-person{

  display:flex;
  align-items:center;

  min-width:0;

  gap:10px;
}


.friend-person-meta{

  display:grid;

  min-width:0;

  gap:2px;
}


.friend-person-meta strong{

  display:flex;
  align-items:center;

  gap:4px;

  color:#eef3fb;

  font-size:12px;
}


.friend-person-meta small{

  color:#8293ad;

  font-size:10px;
}


.friend-person-meta > span{

  color:#657891;

  font-size:9px;
}


.friend-person-meta > span b{

  color:#9babc1;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;

  letter-spacing:.05em;
}


.friend-request-actions{

  display:flex;

  flex:
    0
    0
    auto;

  gap:6px;
}


.danger-soft{

  border-color:
    rgba(224,78,97,.35) !important;

  background:
    rgba(110,29,42,.13) !important;

  color:#ee8b98 !important;
}


.danger-soft:hover{

  background:
    rgba(133,34,49,.28) !important;

  border-color:
    rgba(235,90,107,.60) !important;
}


/* =========================
   EMPTY
   ========================= */

.social-empty{

  display:grid;
  place-items:center;

  gap:5px;

  min-height:110px;

  padding:20px;

  border:
    1px dashed
    #293a54;

  border-radius:13px;

  color:#8999b0;

  text-align:center;

  font-size:12px;
}


.social-empty small{

  max-width:350px;

  color:#60728c;

  line-height:1.45;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:650px){

  .friend-add-box{

    grid-template-columns:
      1fr;
  }


  .friend-add-box .primary-btn{
    width:100%;
  }


  .friend-row,
  .friend-request-row{

    align-items:flex-start;

    flex-direction:column;
  }


  .friend-row > button{

    width:100%;
  }


  .friend-request-actions{

    width:100%;
  }


  .friend-request-actions button{

    flex:1;
  }


  .my-rokss-code-box strong{
    font-size:16px;
  }
}


/* ROKSS MEMBER SEARCH DARK V1 */

input[placeholder="Kişi ara..."],
input[placeholder="Search people..."] {
  width: 100%;
  box-sizing: border-box;

  background: transparent !important;
  color: #e9edf5 !important;

  border: 1px solid #243249 !important;
  border-radius: 8px !important;

  outline: none !important;

  padding: 8px 10px !important;

  font: inherit;
  font-size: 12px;
}

input[placeholder="Kişi ara..."]::placeholder,
input[placeholder="Search people..."]::placeholder {
  color: #66758b !important;
  opacity: 1;
}

input[placeholder="Kişi ara..."]:focus,
input[placeholder="Search people..."]:focus {
  background: rgba(255,255,255,.015) !important;
  border-color: rgba(123, 97, 255, .55) !important;

  box-shadow:
    0 0 0 2px
    rgba(123, 97, 255, .08) !important;
}

/* ROKSS MEMBER SEARCH DARK V1 END */


/* ROKSS SERVER QUICK MENU V1 */

/*
 * Eski create/join butonlar?
 * handler olarak DOM'da duruyor
 * fakat kullan?c?ya g?r?nm?yor.
 */
.serverLegacyAction{
  display:none !important;
}

.serverMenuLauncher{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:
    1px solid
    rgba(139,112,255,.75)
    !important;

  border-radius:
    13px !important;

  outline:none !important;

  background:
    linear-gradient(
      145deg,
      #6256f4,
      #7542df
    ) !important;

  color:#fff !important;

  box-shadow:
    0 8px 22px
    rgba(62,43,170,.24)
    !important;

  cursor:pointer !important;

  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease
    !important;
}

.serverMenuLauncher span{
  display:block;

  font-size:24px !important;
  font-weight:400 !important;

  line-height:1 !important;

  transform:
    translateY(-1px);

  transition:
    transform .18s ease;
}

.serverMenuLauncher:hover{
  filter:
    brightness(1.09);

  transform:
    translateY(-1px);
}

.serverMenuLauncher.isOpen{
  box-shadow:
    0 0 0 3px
    rgba(118,83,244,.13),
    0 10px 28px
    rgba(62,43,170,.3)
    !important;
}

.serverMenuLauncher.isOpen span{
  transform:
    rotate(45deg);
}


/* MENU */

.serverQuickMenu{
  position:fixed;

  z-index:9999;

  width:236px;

  box-sizing:border-box;

  padding:7px;

  border:
    1px solid
    #28364d;

  border-radius:
    13px;

  background:
    linear-gradient(
      180deg,
      #111a29,
      #0c1421
    );

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.42);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transform:
    translateX(-5px)
    scale(.98);

  transform-origin:
    left bottom;

  transition:
    opacity .14s ease,
    transform .14s ease,
    visibility .14s ease;
}

.serverQuickMenu.isOpen{
  opacity:1;

  visibility:visible;

  pointer-events:auto;

  transform:
    translateX(0)
    scale(1);
}

.serverQuickMenuTitle{
  padding:
    6px 9px 8px;

  color:#667892;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.8px;
}


/* MENU ITEM */

.serverQuickMenuItem{
  width:100%;

  box-sizing:border-box;

  display:flex;

  align-items:center;

  gap:10px;

  padding:10px;

  border:
    1px solid
    transparent;

  border-radius:9px;

  background:
    transparent;

  color:#e9eef7;

  text-align:left;

  cursor:pointer;

  transition:
    background .14s ease,
    border-color .14s ease;
}

.serverQuickMenuItem:hover{
  border-color:
    rgba(112,92,235,.22);

  background:
    rgba(102,80,230,.09);
}

.serverQuickMenuIcon{
  width:31px;
  height:31px;

  flex:0 0 31px;

  display:grid;

  place-items:center;

  border:
    1px solid
    #2b3a52;

  border-radius:8px;

  background:
    #111c2c;

  color:
    #a99aff;

  font-size:17px;

  font-weight:700;
}

.serverQuickMenuText{
  min-width:0;

  display:flex;

  flex-direction:column;

  gap:2px;
}

.serverQuickMenuText strong{
  color:#f4f6fb;

  font-size:11px;

  font-weight:800;
}

.serverQuickMenuText small{
  color:#6f7f95;

  font-size:9px;

  font-weight:500;
}


/* ROKSS SERVER QUICK MENU V1 END */

/* ROKSS_PROFILE_UI_V1 */

#memberModal .modal.wide{
  width:min(680px,94vw);
  max-height:92vh;
  padding:0 !important;
  overflow:auto;
  border:1px solid #2b3d59;
  border-radius:20px;
  background:#0c1421;
}

#memberModal .close{
  z-index:20;
  top:13px;
  right:13px;
  background:rgba(12,20,33,.9);
  backdrop-filter:blur(8px);
}

.profile-card{
  position:relative;
  overflow:hidden;
  min-height:520px;
}

.profile-cover{
  position:relative;
  height:190px;
  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(105,82,255,.34),
      transparent 26%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(33,107,190,.22),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #17233a,
      #10192b 48%,
      #221848
    );
  background-size:cover;
  background-position:center;
}

.profile-cover::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:80px;
  background:linear-gradient(
    transparent,
    #0c1421
  );
}

.profile-avatar-wrap{
  position:relative;
  z-index:5;
  width:max-content;
  margin:-58px auto 0;
}

.profile-avatar-wrap .avatar.xl{
  width:104px;
  height:104px;
  border:5px solid #0c1421;
  box-shadow:
    0 0 0 3px #7258ff,
    0 12px 34px rgba(0,0,0,.4);
}

.profile-avatar-wrap .avatar.xl span{
  font-size:34px;
}

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

.profile-online{
  position:absolute;
  right:2px;
  bottom:8px;
  width:19px;
  height:19px;
  border:4px solid #0c1421;
  border-radius:50%;
  background:#2bd477;
  box-sizing:border-box;
  box-shadow:0 0 12px rgba(43,212,119,.5);
}

.profile-content{
  padding:9px 38px 30px;
}

.profile-identity{
  text-align:center;
}

.profile-identity h2{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:7px;
  margin:6px 0 3px !important;
  color:#f4f6fb;
  font-size:27px;
}

.profile-identity>span{
  color:#8999bd;
  font-size:12px;
}

.profile-identity p{
  max-width:460px;
  margin:8px auto 0;
  color:#7f8fa7;
  font-size:10px;
  line-height:1.5;
}

.profile-vip-badge{
  padding:3px 6px;
  border-radius:5px;
  background:linear-gradient(
    135deg,
    #5d6dff,
    #9147ed
  );
  color:#fff;
  font-size:7px;
  letter-spacing:.6px;
}

.profile-rok-empty{
  margin:13px 0 17px;
  color:#c6d0df;
  text-align:center;
  font-size:11px;
}

.profile-rok-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin:16px 0;
}

.profile-rok-grid>div{
  padding:9px;
  border:1px solid #223149;
  border-radius:10px;
  background:#09111d;
}

.profile-rok-grid span{
  display:block;
  color:#65758c;
  font-size:7px;
  text-transform:uppercase;
}

.profile-rok-grid b{
  display:block;
  margin-top:4px;
  color:#eaf0f8;
  font-size:10px;
}

.profile-vip-box{
  min-height:65px;
  display:flex;
  align-items:center;
  gap:11px;
  box-sizing:border-box;
  margin:14px 0 18px;
  padding:11px 13px;
  border:1px solid rgba(133,87,255,.34);
  border-radius:12px;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(137,72,255,.13),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(99,63,189,.12),
      rgba(15,18,39,.72)
    );
}

.profile-vip-box.active{
  border-color:rgba(146,91,255,.58);
  box-shadow:
    inset 0 0 28px rgba(108,62,220,.08);
}

.profile-vip-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(155,112,255,.5);
  border-radius:50%;
  background:rgba(104,63,214,.16);
  color:#d7c9ff;
  font-size:19px;
}

.profile-vip-text{
  min-width:0;
  flex:1;
}

.profile-vip-text strong{
  display:flex;
  align-items:center;
  gap:6px;
  color:#f1f3f8;
  font-size:13px;
}

.profile-vip-text strong i{
  padding:2px 5px;
  border-radius:4px;
  background:#744eff;
  color:#fff;
  font-size:7px;
  font-style:normal;
}

.profile-vip-text p{
  margin:3px 0 0;
  color:#9293b5;
  font-size:9px;
}

.profile-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.profile-info-grid article{
  min-height:52px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  box-sizing:border-box;
  border:1px solid #1e2b3e;
  border-radius:10px;
  background:#111a28;
}

.profile-info-grid b{
  display:block;
  color:#edf1f7;
  font-size:10px;
}

.profile-info-grid small{
  display:block;
  margin-top:2px;
  color:#65758b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.7px;
}

.profile-crown{
  color:#f2b82b;
  font-size:16px;
}

.profile-user-icon{
  color:#8998b6;
  font-size:17px;
}

.profile-status-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#2bd270;
  box-shadow:0 0 10px rgba(43,210,112,.5);
}

.profile-role-tags{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}

.profile-role-tag{
  padding:4px 7px;
  border:1px solid #26354b;
  border-radius:999px;
  background:#09111d;
  color:#7889a0;
  font-size:8px;
}

.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid #1e2b3e;
}

.profile-actions button{
  min-height:43px;
  border-radius:10px;
  font-size:10px;
  font-weight:900;
  cursor:pointer;
}

.profile-secondary{
  border:1px solid #2c3c57;
  background:#09111d;
  color:#a2b1d5;
}

.profile-secondary:hover{
  background:#101a2a;
}

.profile-primary{
  border:1px solid #715aff;
  background:linear-gradient(
    135deg,
    #5f74ff,
    #8c42ed
  );
  color:#fff;
  box-shadow:0 8px 22px rgba(92,64,214,.18);
}

.profile-primary:hover{
  filter:brightness(1.08);
}

.profile-full{
  grid-column:1/-1;
}

.profile-admin{
  margin-top:9px;
}

.profile-admin-toggle{
  width:100%;
  min-height:31px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:#65758b;
  font-size:8px;
  cursor:pointer;
}

.profile-admin-toggle:hover{
  border-color:#223149;
  background:#09111d;
  color:#98a8bd;
}

.profile-role-editor{
  margin-top:7px;
  padding:11px;
  border:1px solid #233249;
  border-radius:10px;
  background:#09111d;
}

.profile-role-editor .role-toggle-grid{
  margin:8px 0 10px;
}

@media(max-width:650px){

  #memberModal .modal.wide{
    width:95vw;
  }

  .profile-cover{
    height:155px;
  }

  .profile-content{
    padding:8px 17px 22px;
  }

  .profile-avatar-wrap{
    margin-top:-50px;
  }

  .profile-avatar-wrap .avatar.xl{
    width:88px;
    height:88px;
  }

  .profile-rok-grid{
    grid-template-columns:1fr 1fr;
  }

  .profile-info-grid{
    grid-template-columns:1fr;
  }

  .profile-actions{
    grid-template-columns:1fr;
  }
}

/* ROKSS_PROFILE_UI_V1 END */


/* ROKSS VIP BANNER CONTROLS V1 */

.profile-vip-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.profile-vip-cover-btn{
  min-height:30px;
  padding:0 9px;
  border:1px solid rgba(138,104,255,.38);
  border-radius:7px;
  background:rgba(100,72,190,.14);
  color:#cfc5ff;
  font-size:8px;
  font-weight:900;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease;
}

.profile-vip-cover-btn:hover{
  background:rgba(109,77,213,.25);
  border-color:rgba(154,121,255,.58);
}

.profile-vip-cover-btn:disabled{
  opacity:.55;
  cursor:wait;
}

.profile-vip-cover-btn.danger{
  border-color:rgba(225,83,112,.25);
  background:rgba(128,42,63,.08);
  color:#dc8fa0;
}

.profile-vip-cover-btn.danger:hover{
  background:rgba(159,48,74,.16);
}

@media(max-width:650px){
  .profile-vip-controls{
    width:100%;
    margin-left:53px;
  }

  .profile-vip-cover-btn{
    flex:1;
  }
}

/* ROKSS VIP BANNER CONTROLS V1 END */



/* ROKSS PROFILE SETTINGS V3 */

/*
 * Profil kartinda banner degistirme
 * butonlari artik gosterilmez.
 */

#memberModal
.profile-vip-controls{
  display:none !important;
}


/* SETTINGS BANNER */

.vip-profile-banner-panel{
  margin:14px 0;

  padding:15px;

  border:
    1px solid
    #273850;

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      #0c1524,
      #11182a
    );
}


.vip-profile-banner-head{
  display:flex;

  align-items:flex-start;

  justify-content:
    space-between;

  gap:12px;

  margin-bottom:
    11px;
}


.vip-profile-banner-head
span{
  display:block;

  margin-bottom:3px;

  color:#9c85ff;

  font-size:8px;

  font-weight:900;

  letter-spacing:1.3px;
}


.vip-profile-banner-head
strong{
  display:block;

  color:#eef2f8;

  font-size:13px;
}


.vip-profile-banner-head
p{
  margin:4px 0 0;

  color:#75859b;

  font-size:9px;
}


.vip-profile-banner-head>b{
  padding:4px 7px;

  border-radius:6px;

  background:
    linear-gradient(
      135deg,
      #6173ff,
      #9144ef
    );

  color:#fff;

  font-size:7px;
}


.vip-profile-banner-preview{
  position:relative;

  height:145px;

  overflow:hidden;

  border:
    1px solid
    #293a55;

  border-radius:
    11px;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(105,78,255,.26),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #17243a,
      #191633
    );

  background-size:cover;

  background-position:center;
}


.vip-profile-banner-placeholder{
  position:absolute;

  inset:0;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:4px;

  color:#77879e;
}


.vip-profile-banner-preview.has-image
.vip-profile-banner-placeholder{
  display:none;
}


.vip-profile-banner-placeholder
span{
  color:#a08cff;

  font-size:21px;
}


.vip-profile-banner-placeholder
strong{
  color:#9facbf;

  font-size:10px;
}


.vip-profile-banner-placeholder
small{
  font-size:8px;
}


.vip-profile-banner-locked{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:9px;

  padding:9px 10px;

  border:
    1px solid
    rgba(127,92,229,.23);

  border-radius:9px;

  background:
    rgba(100,68,190,.07);
}


.vip-profile-banner-locked>span{
  color:#a18dff;
}


.vip-profile-banner-locked
strong,
.vip-profile-banner-locked
small{
  display:block;
}


.vip-profile-banner-locked
strong{
  color:#c7bcff;

  font-size:9px;
}


.vip-profile-banner-locked
small{
  margin-top:2px;

  color:#738098;

  font-size:8px;
}


.vip-profile-banner-actions{
  display:flex;

  justify-content:flex-end;

  gap:7px;

  margin-top:10px;
}


.vip-profile-banner-actions
button{
  min-height:33px;

  padding:0 11px;
}


.vip-profile-banner-remove{
  border:
    1px solid
    rgba(220,80,109,.3);

  border-radius:8px;

  background:
    rgba(130,39,61,.09);

  color:#de8b9d;

  font-size:9px;

  font-weight:900;

  cursor:pointer;
}

/* ROKSS PROFILE SETTINGS V3 END */

/* ROKSS_STREAM_UI_V9 */

.rokss-stream-inline-actions{
  margin-top:3px !important;
  gap:6px !important;
}

.rokss-stream-inline-actions > b{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(255,70,90,.12);
  border:1px solid rgba(255,70,90,.26);
  color:#ff6675 !important;
  letter-spacing:.3px;
}

.rokss-stream-inline-actions button{
  border:1px solid rgba(126,104,255,.35) !important;
  background:rgba(110,88,255,.16) !important;
  color:#c8c0ff !important;
  transition:.15s ease;
}

.rokss-stream-inline-actions button:hover{
  background:rgba(110,88,255,.30) !important;
  transform:translateY(-1px);
}

/* ROKSS_STREAM_UI_V9 END */


/* ROKSS_AI_STRENGTH_UI_V1 */

.rokss-ai-strength-box{
  padding:10px 12px 12px;
  margin-top:8px;
  border-top:1px solid rgba(255,255,255,.07);
}

.rokss-ai-strength-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:11px;
}

.rokss-ai-strength-head span{
  color:#b9c3d6;
  font-weight:700;
}

.rokss-ai-strength-head b{
  color:#7fe3ba;
  font-size:11px;
}

#voiceAiStrengthSlider{
  --rokss-ai-value:72%;
  width:100%;
  height:5px;
  appearance:none;
  border:0;
  border-radius:999px;
  outline:none;
  cursor:pointer;
  background:
    linear-gradient(
      to right,
      #41c994 0%,
      #41c994 var(--rokss-ai-value),
      #263247 var(--rokss-ai-value),
      #263247 100%
    );
}

#voiceAiStrengthSlider::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#eaf2ff;
  border:3px solid #48ce9b;
  box-shadow:0 0 0 3px rgba(72,206,155,.12);
}

#voiceAiStrengthSlider::-moz-range-thumb{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#eaf2ff;
  border:3px solid #48ce9b;
}

.rokss-ai-strength-scale{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  color:#65738b;
  font-size:9px;
}

/* ROKSS_AI_STRENGTH_UI_V1 END */


/* ROKSS_AI_SLIDER_UI_V2 */

#rokssAiSliderV2{
  display:block !important;
  padding:10px 12px 12px;
  margin-top:7px;
  border-top:1px solid rgba(255,255,255,.07);
}

#voiceAiStrengthSliderV2{
  --rokss-ai-value:72%;
  display:block;
  width:100%;
  height:5px;
  margin:8px 0 0;
  appearance:none;
  border:0;
  border-radius:999px;
  cursor:pointer;
  outline:none;
  background:linear-gradient(
    to right,
    #45cf9b 0%,
    #45cf9b var(--rokss-ai-value),
    #263247 var(--rokss-ai-value),
    #263247 100%
  );
}

#voiceAiStrengthSliderV2::-webkit-slider-thumb{
  appearance:none;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#f5f8ff;
  border:3px solid #45cf9b;
  cursor:grab;
}

.rokss-ai-strength-head,
.rokss-ai-strength-scale{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.rokss-ai-strength-head{
  font-size:10px;
  font-weight:800;
}

.rokss-ai-strength-head b{
  color:#62d9aa;
}

.rokss-ai-strength-scale{
  margin-top:6px;
  font-size:8px;
  color:#708099;
}

.voice-noise-popover{
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
}

/* ROKSS_AI_SLIDER_UI_V2 END */


/* ROKSS_TOP_VIP_UI_V2 */

#livePill{
  display:none !important;
}

.rokss-top-vip-badge{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;

  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.7px;

  color:#ffeaa7;

  background:
    linear-gradient(
      135deg,
      rgba(107,83,255,.95),
      rgba(167,91,255,.95) 58%,
      rgba(216,169,65,.95)
    );

  border:1px solid rgba(255,213,105,.48);

  box-shadow:
    0 0 14px rgba(129,83,255,.32),
    inset 0 1px 0 rgba(255,255,255,.18);

  vertical-align:middle;
}

/* ROKSS_TOP_VIP_UI_V2 END */


/* ROKSS_TOP_VIP_FINAL_UI_V6 */

.brand-wordmark{
  display:flex;
  align-items:center;
}

#rokssTopVipBadge{
  align-items:center !important;
  justify-content:center !important;

  margin-left:8px !important;
  padding:4px 8px !important;

  border-radius:999px !important;

  font-size:9px !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.7px !important;

  color:#ffe9a6 !important;

  background:
    linear-gradient(
      135deg,
      #624cff,
      #a65bff 58%,
      #d9a641
    ) !important;

  border:
    1px solid rgba(255,211,100,.58) !important;

  box-shadow:
    0 0 15px rgba(128,82,255,.42) !important;
}

/* ROKSS_TOP_VIP_FINAL_UI_V6 END */


/* ROKSS_VIP_CENTER_UI_V1 */

.rokss-vip-center-backdrop{
  position:fixed;
  inset:0;
  z-index:120000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(3,6,14,.78);
  backdrop-filter:blur(9px);
}

.rokss-vip-center-backdrop.hidden{
  display:none !important;
}

.rokss-vip-center{
  position:relative;
  width:min(780px,94vw);
  max-height:88vh;
  overflow:auto;
  padding:24px;
  border-radius:22px;
  background:#0e1726;
  border:1px solid rgba(125,103,255,.32);
  box-shadow:0 35px 100px rgba(0,0,0,.65);
}

.rokss-vip-close{
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid #29364c;
  background:#121d2e;
  color:#c7d1e3;
  cursor:pointer;
}

.rokss-vip-hero{
  display:flex;
  align-items:center;
  gap:16px;
  padding:15px 48px 22px 2px;
}

.rokss-vip-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  flex:0 0 58px;
  border-radius:17px;
  font-size:25px;
  color:#ffe8a2;
  background:linear-gradient(135deg,#5c49ff,#a85eff,#d4a446);
  box-shadow:0 0 28px rgba(126,83,255,.38);
}

.rokss-vip-hero-copy{
  flex:1;
}

.rokss-vip-kicker{
  display:block;
  margin-bottom:3px;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.8px;
  color:#9d90ff;
}

.rokss-vip-hero h2{
  margin:0;
  font-size:27px;
}

.rokss-vip-hero p{
  max-width:470px;
  margin:6px 0 0;
  color:#8491a8;
  font-size:12px;
  line-height:1.55;
}

.rokss-vip-price{
  display:flex;
  align-items:flex-end;
  gap:4px;
}

.rokss-vip-price strong{
  font-size:27px;
  color:#ffe09a;
}

.rokss-vip-price span{
  padding-bottom:4px;
  color:#818da3;
  font-size:11px;
}

.rokss-vip-status{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 15px;
  margin-bottom:14px;
  border-radius:13px;
}

.rokss-vip-status.active{
  background:rgba(55,199,139,.10);
  border:1px solid rgba(55,199,139,.27);
}

.rokss-vip-status.locked{
  background:rgba(137,103,255,.10);
  border:1px solid rgba(137,103,255,.27);
}

.rokss-vip-status > span{
  font-size:18px;
}

.rokss-vip-status strong,
.rokss-vip-status small{
  display:block;
}

.rokss-vip-status small{
  margin-top:2px;
  color:#8592a7;
  font-size:10px;
}

.rokss-vip-features{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.rokss-vip-feature{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:12px;
  border-radius:13px;
  border:1px solid #26344b;
  background:#111c2c;
}

.rokss-vip-feature.featured{
  border-color:rgba(143,108,255,.42);
  background:
    linear-gradient(
      135deg,
      rgba(102,78,255,.12),
      #111c2c
    );
}

.rokss-vip-feature-icon{
  font-size:19px;
}

.rokss-vip-feature div{
  flex:1;
}

.rokss-vip-feature strong,
.rokss-vip-feature small{
  display:block;
}

.rokss-vip-feature small{
  margin-top:3px;
  color:#7f8ca4;
  font-size:10px;
}

.rokss-vip-feature > b{
  padding:3px 6px;
  border-radius:6px;
  font-size:8px;
  color:#ffe9a5;
  background:rgba(174,112,255,.15);
  border:1px solid rgba(222,176,82,.28);
}

.rokss-vip-main-btn{
  width:100%;
  margin-top:14px;
  padding:13px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#604cff,#a55bff);
  box-shadow:0 12px 30px rgba(99,74,255,.24);
}

@media(max-width:700px){
  .rokss-vip-features{
    grid-template-columns:1fr;
  }

  .rokss-vip-price{
    display:none;
  }
}

/* ROKSS_VIP_CENTER_UI_V1 END */


/* ROKSS_PROFILE_VIP_OPTIONS_UI_V1 */

.rokss-profile-vip-options{
  margin-top:14px;
  padding:14px;
  border-radius:15px;
  border:1px solid #26354d;
  background:#101a2a;
}

.rokss-profile-vip-options-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.rokss-profile-vip-options-head div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.rokss-profile-vip-options-head span{
  font-size:8px;
  font-weight:900;
  letter-spacing:1.5px;
  color:#9e8cff;
}

.rokss-profile-vip-options-head strong{
  font-size:13px;
}

.rokss-profile-vip-options-head > b{
  padding:3px 7px;
  border-radius:6px;
  font-size:8px;
  color:#ffe7a2;
  border:1px solid rgba(229,181,79,.35);
  background:rgba(143,95,255,.16);
}

.rokss-profile-vip-grid{
  display:grid;
  gap:7px;
}

.rokss-profile-vip-option{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;

  border:1px solid #283750;
  border-radius:11px;

  background:#111c2c;
  color:#eaf0fa;

  text-align:left;
  cursor:pointer;

  transition:
    border-color .15s,
    background .15s,
    transform .15s;
}

.rokss-profile-vip-option:hover{
  transform:translateY(-1px);
  border-color:rgba(134,105,255,.55);
  background:#142035;
}

.rokss-profile-vip-icon{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  flex:0 0 30px;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(100,76,255,.22),
      rgba(177,91,255,.12)
    );
}

.rokss-profile-vip-option > span:nth-child(2){
  flex:1;
}

.rokss-profile-vip-option strong,
.rokss-profile-vip-option small{
  display:block;
}

.rokss-profile-vip-option strong{
  font-size:11px;
}

.rokss-profile-vip-option small{
  margin-top:2px;
  color:#7e8ca5;
  font-size:9px;
}

.rokss-profile-vip-option em{
  padding:3px 6px;
  border-radius:6px;

  font-size:7px;
  font-style:normal;
  font-weight:900;
}

.rokss-profile-vip-option em.locked{
  color:#ffe49b;
  border:1px solid rgba(226,176,73,.32);
  background:rgba(149,94,255,.15);
}

.rokss-profile-vip-option em.active{
  color:#78e4b4;
  border:1px solid rgba(67,203,144,.28);
  background:rgba(67,203,144,.10);
}

/* ROKSS_PROFILE_VIP_OPTIONS_UI_V1 END */

/* ROKSS_SETTINGS_VIP_MENU_V1 */
.rokss-settings-menu-item{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}

.rokss-settings-menu-item:hover{
  filter:brightness(1.08);
}

.rokss-settings-vip-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  color:#ffd98a;
  background:linear-gradient(135deg,rgba(104,91,255,.22),rgba(181,94,255,.18));
  border:1px solid rgba(174,138,255,.45);
  box-shadow:0 0 18px rgba(135,92,255,.16);
  flex:none;
}
/* ROKSS_SETTINGS_VIP_MENU_V1 END */


/* ROKSS STREAM MINI PLAYER V1 */

.rokss-stream-mini{
  position:fixed !important;
  width:min(380px,calc(100vw - 28px)) !important;
  height:235px !important;
  max-width:none !important;
  max-height:none !important;
  z-index:100000 !important;
  box-shadow:0 20px 60px rgba(0,0,0,.62) !important;
  border-radius:14px !important;
  overflow:hidden !important;
  touch-action:none;
}

.rokss-stream-mini video{
  max-height:calc(100% - 42px) !important;
}

.rokss-mini-expand{
  display:none;
}

.rokss-stream-mini .rokss-mini-expand{
  display:flex;
  position:absolute;
  right:52px;
  top:8px;
  width:34px;
  height:34px;
  z-index:100002;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:#121c2e;
  color:#fff;
  cursor:pointer;
  font-size:18px;
}

@media(max-width:700px){

  .rokss-stream-mini{
    width:min(320px,calc(100vw - 20px)) !important;
    height:200px !important;
  }

}

/* ROKSS STREAM MINI PLAYER V1 END */


/* ROKSS NUMERIC VERIFY INPUT V1 */

.rok-code-input-wrap{
  display:flex;
  align-items:stretch;
  width:100%;
  margin:10px 0;
  overflow:hidden;
  border:1px solid #293852;
  border-radius:12px;
  background:#0b1423;
}

.rok-code-input-wrap:focus-within{
  border-color:#7664ff;
  box-shadow:0 0 0 3px rgba(118,100,255,.12);
}

.rok-code-prefix{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-right:1px solid #293852;
  background:rgba(118,100,255,.10);
  color:#a99dff;
  font-weight:900;
  letter-spacing:.04em;
  user-select:none;
}

.rok-code-input-wrap .rok-code-number{
  flex:1;
  min-width:0;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;
  font-weight:800;
  letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}

/* ROKSS NUMERIC VERIFY INPUT V1 END */


/* =========================================================
   ROKSS SERVER SETTINGS V1
========================================================= */

.server-settings-modal{
  width:min(1040px,95vw)!important;
  min-height:650px;
  max-height:92vh;
  overflow:hidden!important;
  padding:0!important;
}

.server-settings-head{
  min-height:92px;
  display:flex;
  align-items:center;
  padding:24px 28px 18px;
  border-bottom:1px solid #23314a;
  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(121,82,255,.16),
      transparent 40%
    );
}

.server-settings-head h2{
  margin:5px 0 0;
}

.server-settings-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  min-height:540px;
}

.server-settings-nav{
  padding:18px 12px;
  border-right:1px solid #23314a;
  background:#0b1320;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.server-settings-tab{
  border:0;
  background:transparent;
  color:#aebbd0;
  text-align:left;
  border-radius:11px;
  padding:12px 13px;
  cursor:pointer;
  font-weight:700;
  font-size:13px;
}

.server-settings-tab:hover{
  background:#151f31;
  color:#fff;
}

.server-settings-tab.active{
  background:
    linear-gradient(
      90deg,
      rgba(126,80,255,.22),
      rgba(78,111,232,.14)
    );
  color:#fff;
}

.server-settings-content{
  overflow:auto;
  max-height:calc(92vh - 92px);
  padding:26px 28px 40px;
}

.server-settings-page{
  display:none;
}

.server-settings-page.active{
  display:block;
}

.server-settings-page h3{
  margin:6px 0 20px;
  font-size:22px;
}

.server-settings-page h4{
  margin:0 0 14px;
}

.server-settings-create-card{
  margin-bottom:18px;
  padding:18px;
  border-radius:16px;
  border:1px solid #263750;
  background:#101a29;
}

.server-settings-form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 125px;
  gap:12px;
  align-items:end;
}

.channel-create-grid{
  grid-template-columns:minmax(0,1fr) 220px;
}

.server-settings-color{
  height:46px;
  padding:5px!important;
  cursor:pointer;
}

.server-settings-permission-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:4px 0 15px;
}

.server-settings-permission-grid label{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border:1px solid #273650;
  border-radius:11px;
  background:#0c1523;
  color:#d6dfed;
  font-size:12px;
}

.server-settings-list{
  display:grid;
  gap:10px;
}

.server-settings-item{
  padding:15px;
  border-radius:15px;
  border:1px solid #263650;
  background:#0f1827;
}

.server-settings-item-top,
.server-settings-channel-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.server-settings-role-identity,
.server-settings-channel-type{
  display:flex;
  align-items:center;
  gap:11px;
}

.server-settings-role-identity strong,
.server-settings-channel-type strong{
  display:block;
}

.server-settings-role-identity small,
.server-settings-channel-type small{
  display:block;
  color:#7f8da4;
  margin-top:3px;
}

.server-settings-role-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}

.server-settings-channel-icon{
  min-width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#18243a;
  color:#dce6f6;
  font-weight:900;
}

.server-settings-channel-actions{
  display:flex;
  gap:7px;
}

.compact-danger{
  padding:8px 11px!important;
  font-size:11px!important;
}

.compact-permissions{
  margin-top:2px;
}

.server-settings-default-perms{
  margin:10px 0 18px;
}

.server-settings-role-permissions label{
  display:flex;
  align-items:center;
  gap:9px;
}

.server-settings-empty{
  padding:18px;
  text-align:center;
  border:1px dashed #2a3a54;
  border-radius:13px;
  color:#76859d;
}

.server-settings-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

@media(max-width:760px){
  .server-settings-modal{
    width:96vw!important;
    min-height:0;
  }

  .server-settings-layout{
    grid-template-columns:1fr;
  }

  .server-settings-nav{
    border-right:0;
    border-bottom:1px solid #23314a;
    flex-direction:row;
    overflow-x:auto;
  }

  .server-settings-tab{
    white-space:nowrap;
  }

  .server-settings-form-grid,
  .channel-create-grid{
    grid-template-columns:1fr;
  }

  .server-settings-permission-grid{
    grid-template-columns:1fr;
  }

  .server-settings-channel-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .server-settings-channel-actions{
    width:100%;
  }
}

/* =========================================================
   ROKSS MEMBER ROLE UI V1
   - Sol panel rol listesini gizle
   - Kullanici adini ana rol rengine boya
   - Kisi ara ile rol gruplari arasina ayirici ekle
========================================================= */

/* Roller artık Sunucu Ayarları > Roller içinden yönetiliyor */
.rooms-panel .role-section{
  display:none !important;
}

/* Sağ panel: kişi adı ana rolün rengini kullanır */
.people-panel .member-row .member-meta strong{
  color:var(--member-role-color,#ffffff) !important;
  transition:color .15s ease;
}

/* Kişi ara ile ilk rol grubu arasına boşluk + çizgi */
.people-panel .member-list{
  margin-top:14px !important;
  padding-top:14px !important;
  border-top:1px solid #1e2a3e;
}


/* ROKSS MEMBER SEARCH ICON V2
   Eski soldaki büyüteci gizle, input sağ içine taşı
*/
.people-panel .member-search{
  position:relative;
  font-size:0;
}

.people-panel .member-search input{
  width:100%;
  padding-right:34px !important;
  font-size:11px;
}

.people-panel .member-search::after{
  content:"⌕";
  position:absolute;
  right:11px;
  top:50%;
  transform:translateY(-50%);
  color:#8fa0bb;
  font-size:16px;
  line-height:1;
  pointer-events:none;
}


/* =========================================================
   ROKSS CHANNEL UNREAD V1
========================================================= */

.channel-nav-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
}

.channel-name-wrap{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Bildirim olan oda */
.nav-item.has-unread{
  color:#ffffff !important;
  background:rgba(236,188,74,.055) !important;
  border:1px solid rgba(239,190,70,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,214,102,.04),
    0 0 12px rgba(231,176,49,.055);
}

/* Kanal ismi beyaz */
.nav-item.has-unread .channel-name-wrap{
  color:#ffffff !important;
  font-weight:700;
}

/* Sari bildirim sayaci */
.channel-unread-badge{
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:7px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:#e8b640;
  border:1px solid #f3ca69;

  color:#ffffff !important;
  font-size:10px;
  font-weight:900;
  line-height:1;

  box-shadow:0 0 9px rgba(232,182,64,.25);
}

/* Aktif kanalda badge zaten temizleniyor */
.nav-item.active .channel-unread-badge{
  display:none;
}


/* =========================================================
   ROKSS CHAT CLEAN V1
   Sohbet içindeki ikinci kanal başlığını kaldır
========================================================= */

.chat-panel .welcome-card{
  display:none !important;
}

/* Welcome kartı kalkınca mesajlar üstten boşluk bırakmasın */
.chat-panel .messages{
  padding-top:12px;
}



/* =========================================================
   ROKSS COMMUNITY MEDIA CSS V2
========================================================= */

.community-emblem.has-community-avatar{
  padding:0 !important;
  overflow:hidden;
}

.community-emblem.has-community-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}


.community-hero.has-community-banner{
  background-image:
    linear-gradient(
      90deg,
      rgba(7,12,24,.88) 0%,
      rgba(7,13,27,.62) 45%,
      rgba(7,13,27,.82) 100%
    ),
    var(--community-banner) !important;

  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}


.community-media-settings{
  margin:22px 0 18px;
}

.community-media-separator{
  height:1px;
  background:#25334b;
  margin-bottom:20px;
}

.community-media-grid{
  display:grid;
  grid-template-columns:
    minmax(230px,.75fr)
    minmax(360px,1.25fr);
  gap:14px;
  margin-top:11px;
}

.community-media-card{
  padding:15px;
  border-radius:15px;
  border:1px solid #273750;
  background:#0d1728;
}

.community-media-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.community-media-card-head strong{
  display:block;
  font-size:13px;
  color:#fff;
}

.community-media-card-head small{
  display:block;
  margin-top:4px;
  font-size:10px;
  color:#8293b1;
}

.community-media-free,
.community-media-vip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:900;
}

.community-media-free{
  color:#72e6ae;
  background:rgba(61,210,147,.10);
  border:1px solid rgba(61,210,147,.32);
}

.community-media-vip{
  color:#fff;
  background:
    linear-gradient(
      135deg,
      #7558ff,
      #b849ee
    );
  border:1px solid #815cff;
}

.community-avatar-edit{
  display:flex;
  align-items:center;
  gap:14px;
}

.community-avatar-preview{
  width:76px;
  height:76px;
  flex:0 0 76px;

  display:grid;
  place-items:center;

  border-radius:22px;
  overflow:hidden;

  background:
    linear-gradient(
      145deg,
      #3e2d71,
      #15284a
    );

  border:1px solid #5d4a9e;

  font-size:25px;
  font-weight:900;
  color:#fff;
}

.community-avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.community-media-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.community-banner-preview{
  width:100%;
  aspect-ratio:7.4 / 1;
  min-height:72px;

  display:grid;
  place-items:center;

  margin-bottom:12px;

  overflow:hidden;
  border-radius:11px;

  border:1px dashed #384a68;

  background:
    linear-gradient(
      135deg,
      #111b30,
      #172541
    );

  background-size:cover;
  background-position:center;

  color:#71829f;
  font-size:10px;
}

.community-banner-preview.has-image{
  border-style:solid;
}

.community-banner-vip-info{
  display:block;
  margin-top:9px;
  color:#dfb557;
  font-size:10px;
}

.community-banner-vip-info.active{
  color:#64dca6;
}

.community-media-actions button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

@media(max-width:850px){
  .community-media-grid{
    grid-template-columns:1fr;
  }
}

/* ROKSS COMMUNITY MEDIA CSS V2 END */


/* =========================================================
   ROKSS SERVER VIP CSS V2
========================================================= */

.server-vip-card{
  margin:0 0 20px;
  padding:17px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:22px;

  border-radius:17px;

  border:
    1px solid
    rgba(115,90,255,.38);

  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(118,75,255,.18),
      transparent 46%
    ),
    #0d1728;

  transition:
    border-color .18s ease,
    box-shadow .18s ease;
}


.server-vip-card.active{
  border-color:
    rgba(236,185,75,.58);

  box-shadow:
    inset 0 0 35px
    rgba(236,185,75,.035);
}


.server-vip-main{
  display:flex;
  align-items:center;
  gap:15px;

  min-width:0;
}


.server-vip-logo{
  width:62px;
  height:62px;
  flex:0 0 62px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #6859ff,
      #9e48ed 55%,
      #e1a44d
    );

  color:#fff;

  font-size:13px;
  font-weight:1000;

  box-shadow:
    0 10px 30px
    rgba(106,79,255,.25);
}


.server-vip-copy h3{
  margin:
    4px 0 5px;

  color:#fff;

  font-size:17px;
}


.server-vip-copy p{
  max-width:440px;

  margin:0;

  color:#91a1bd;

  font-size:11px;
  line-height:1.5;
}


.server-vip-features{
  display:flex;
  flex-wrap:wrap;

  gap:
    5px 12px;

  margin-top:10px;
}


.server-vip-features span{
  color:#abb8ce;
  font-size:10px;
}


.server-vip-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;

  gap:8px;

  flex:0 0 auto;
}


.server-vip-price{
  display:flex;
  align-items:baseline;
  gap:4px;
}


.server-vip-price strong{
  color:#fff;

  font-size:26px;
  font-weight:1000;
}


.server-vip-price small{
  color:#8d9cb7;
  font-size:10px;
}


.server-vip-status{
  color:#d9ad51;

  font-size:10px;
  font-weight:700;
}


.server-vip-card.active
.server-vip-status{
  color:#63dfa7;
}


.server-vip-card
button:disabled{
  opacity:.70;
  cursor:default;
}


@media(max-width:800px){

  .server-vip-card{
    flex-direction:column;
    align-items:flex-start;
  }

  .server-vip-side{
    width:100%;
    align-items:flex-start;
  }
}

/* ROKSS SERVER VIP CSS V2 END */


/* =========================================================
   ROKSS SHOWROOM CSS V1
========================================================= */

.showroom-layout-hidden{
  display:none !important;
}


/* SOL MENÜ */

.showroom-nav-wrap{
  margin-top:18px;
  padding-top:14px;

  border-top:
    1px solid
    rgba(255,255,255,.07);
}

.showroom-nav-label{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 4px;
  margin-bottom:8px;

  color:#77869e;

  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.showroom-nav-label b{
  padding:3px 6px;

  border-radius:6px;

  background:
    rgba(240,187,78,.12);

  color:#edb94f;

  font-size:8px;
}

.showroom-nav-btn{
  width:100%;
  height:43px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:0 10px;

  border:
    1px solid
    transparent;

  border-radius:10px;

  background:
    rgba(255,255,255,.025);

  color:#a5b1c5;

  cursor:pointer;

  font-weight:750;

  text-align:left;
}

.showroom-nav-btn:hover{
  background:
    rgba(255,255,255,.05);

  color:#fff;
}

.showroom-nav-btn.active{
  border-color:
    rgba(237,184,75,.30);

  background:
    rgba(237,184,75,.08);

  color:#fff;
}

.showroom-nav-icon{
  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  border-radius:8px;

  background:
    linear-gradient(
      135deg,
      rgba(115,85,255,.35),
      rgba(231,176,68,.22)
    );

  color:#efbd55;
}


/* SHOWROOM */

.showroom-panel{
  grid-column:2 / 4;

  min-width:0;
  min-height:620px;

  overflow:hidden;

  padding:0 !important;
}

.showroom-head{
  min-height:80px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:16px 20px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);

  background:
    linear-gradient(
      90deg,
      rgba(116,78,255,.08),
      rgba(238,182,71,.04),
      transparent
    );
}

.showroom-head h2{
  margin:3px 0 2px;

  color:#fff;

  font-size:21px;
}

.showroom-head p{
  margin:0;

  color:#8291a9;

  font-size:10px;
}


/* ÜRÜNLER */

.showroom-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:15px;

  padding:18px;

  max-height:
    calc(100vh - 265px);

  overflow:auto;
}

.showroom-card{
  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius:16px;

  background:#0c1524;

  transition:
    transform .16s ease,
    border-color .16s ease;
}

.showroom-card:hover{
  transform:
    translateY(-2px);

  border-color:
    rgba(235,183,76,.3);
}

.showroom-card-image{
  aspect-ratio:4 / 3;

  overflow:hidden;

  background:#070d17;
}

.showroom-card-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}

.showroom-card-body{
  padding:15px;
}

.showroom-card-price{
  display:block;

  margin-bottom:9px;

  color:#efbb50;

  font-size:23px;
  font-weight:950;
}

.showroom-card-body p{
  min-height:50px;

  margin:0 0 14px;

  color:#a5b1c5;

  font-size:11px;
  line-height:1.55;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}

.showroom-card-link{
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:7px;

  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #7158ff,
      #8c59dd
    );

  color:#fff;

  font-size:11px;
  font-weight:850;

  text-decoration:none;
}

.showroom-card-link:hover{
  filter:brightness(1.08);
}

.showroom-card-admin{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:7px;

  margin-top:8px;
}

.showroom-card-admin button{
  height:34px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:9px;

  background:
    rgba(255,255,255,.035);

  color:#b4c0d2;

  cursor:pointer;

  font-size:10px;
}

.showroom-card-admin button:hover{
  color:#fff;

  border-color:
    rgba(238,183,74,.35);
}

.showroom-card-admin button.danger:hover{
  color:#ff8585;

  border-color:
    rgba(255,90,90,.35);
}


/* EMPTY */

.showroom-empty{
  min-height:420px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  color:#7d8ca5;

  text-align:center;
}

.showroom-empty > div{
  width:62px;
  height:62px;

  display:grid;
  place-items:center;

  margin-bottom:13px;

  border-radius:18px;

  background:
    rgba(118,82,255,.11);

  color:#c6a8ff;

  font-size:27px;
}

.showroom-empty strong{
  color:#dfe6f1;

  font-size:15px;
}

.showroom-empty span{
  margin-top:5px;

  font-size:10px;
}


/* MODAL */

.showroom-modal-backdrop{
  position:fixed;

  inset:0;

  z-index:99999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:25px;

  background:
    rgba(3,7,15,.80);

  backdrop-filter:
    blur(8px);
}

.showroom-modal-backdrop.hidden{
  display:none !important;
}

.showroom-modal{
  width:min(580px,100%);

  max-height:
    calc(100vh - 40px);

  overflow:auto;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius:20px;

  background:#0d1625;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.5);
}

.showroom-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:19px 21px;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.showroom-modal-head h2{
  margin:3px 0 0;

  font-size:20px;
}

#showroomModalClose{
  width:36px;
  height:36px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:10px;

  background:
    rgba(255,255,255,.035);

  color:#bdc8d8;

  cursor:pointer;

  font-size:21px;
}

.showroom-form{
  display:grid;

  gap:15px;

  padding:20px;
}

.showroom-form label{
  display:grid;

  gap:7px;
}

.showroom-form label > span{
  color:#bbc6d6;

  font-size:10px;
  font-weight:800;
}

.showroom-form input,
.showroom-form textarea{
  width:100%;

  padding:11px 12px;

  border:
    1px solid
    rgba(255,255,255,.1);

  border-radius:10px;

  outline:none;

  background:#09111e;

  color:#fff;
}

.showroom-form input:focus,
.showroom-form textarea:focus{
  border-color:
    rgba(122,92,255,.55);
}

.showroom-form textarea{
  min-height:105px;

  resize:vertical;
}

.showroom-form small{
  color:#74839a;

  font-size:9px;
  line-height:1.45;
}

.showroom-image-preview{
  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:13px;

  background:#080e17;
}

.showroom-image-preview img{
  width:100%;

  max-height:280px;

  display:block;

  object-fit:contain;
}

.showroom-price-field{
  position:relative;
}

.showroom-price-field input{
  padding-right:40px;
}

.showroom-price-field b{
  position:absolute;

  right:13px;
  top:50%;

  transform:
    translateY(-50%);

  color:#ecb84d;
}

.showroom-modal-actions{
  display:flex;
  justify-content:flex-end;

  gap:8px;

  padding-top:4px;
}


@media(max-width:1100px){

  .showroom-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


@media(max-width:760px){

  .showroom-panel{
    grid-column:1 / -1;
  }

  .showroom-grid{
    grid-template-columns:1fr;
  }

  .showroom-head{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ROKSS SHOWROOM CSS V1 END */


/* ROKSS_SHOWROOM_POLISH_V1 */

/* Sol panelde showroom yukarı taşınmış blok */
.rooms-panel [data-rokss-showroom-block="1"]{
  margin-bottom:18px;
}

/* Sol blok içinde showroom daha temiz görünsün */
.rooms-panel [data-rokss-showroom-block="1"] .nav-item,
.rooms-panel [data-rokss-showroom-block="1"] a,
.rooms-panel [data-rokss-showroom-block="1"] button{
  border-radius:14px;
}

/* Ana showroom alanı */
[data-rokss-showroom-panel="1"] [data-rokss-showroom-grid="1"]{
  display:flex !important;
  flex-wrap:wrap;
  gap:18px;
  align-items:flex-start;
}

/* Ürün kartı daha kompakt */
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"]{
  width:320px !important;
  max-width:320px !important;
  min-width:320px !important;
  background:linear-gradient(180deg,#0d1626 0%, #0a1220 100%);
  border:1px solid #223553;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  padding-bottom:14px;
}

/* Resim alanı daha zarif */
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] [data-rokss-showroom-image="1"]{
  display:block;
  width:auto !important;
  max-width:86% !important;
  height:360px !important;
  max-height:360px !important;
  object-fit:contain !important;
  margin:16px auto 10px auto !important;
  border-radius:14px;
  background:#0a111d;
}

/* Fiyat ve yazılar */
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] h1,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] h2,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] h3,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] h4,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] strong{
  padding-left:14px;
  padding-right:14px;
}

[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] p,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] small,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] span{
  padding-left:14px;
  padding-right:14px;
}

/* Alt butonlar */
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] a,
[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] button{
  border-radius:12px;
}

[data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] a{
  min-height:42px;
}

@media (max-width: 900px){
  [data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"]{
    width:100% !important;
    max-width:360px !important;
    min-width:unset !important;
  }

  [data-rokss-showroom-panel="1"] [data-rokss-showroom-card="1"] [data-rokss-showroom-image="1"]{
    height:300px !important;
    max-height:300px !important;
  }
}


/* =========================================================
   ROKSS SHOWROOM COMPACT CARDS V2
========================================================= */


/* SHOWROOM SOLDA EN ÜSTTE */

#showroomNavWrap{
  order:-100 !important;

  margin:
    0 0 18px !important;

  padding:
    0 0 16px !important;

  border-top:0 !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;
}

.rooms-panel{
  display:flex !important;
  flex-direction:column !important;
}

.rooms-panel > .panel-title-row{
  order:0;
}

.rooms-panel > #channelList{
  order:1;
}

.rooms-panel > #showroomNavWrap{
  order:-10 !important;
}


/* SHOWROOM GRID DAHA SIKI */

.showroom-grid{
  display:grid !important;

  grid-template-columns:
    repeat(
      auto-fill,
      270px
    ) !important;

  justify-content:start !important;
  align-items:start !important;

  gap:16px !important;

  padding:
    18px !important;
}


/* KART */

.showroom-card{
  width:270px !important;
  min-width:270px !important;
  max-width:270px !important;

  border-radius:
    15px !important;

  overflow:hidden !important;

  background:
    #0b1422 !important;

  border:
    1px solid
    rgba(255,255,255,.09) !important;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.20) !important;
}


/* RESİM ALANI:
   dikey fotoğrafı kırpma,
   tamamını göster
*/

.showroom-card-image{
  width:100% !important;

  height:320px !important;

  aspect-ratio:auto !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:
    12px !important;

  background:
    #070d17 !important;

  overflow:hidden !important;
}


/* FOTOĞRAFIN TAMAMI GÖRÜNSÜN */

.showroom-card-image img{
  width:auto !important;
  height:100% !important;

  max-width:100% !important;
  max-height:100% !important;

  object-fit:contain !important;
  object-position:center !important;

  display:block !important;

  margin:auto !important;

  border-radius:
    9px !important;
}


/* ALT KISIM DAHA KOMPAKT */

.showroom-card-body{
  padding:
    13px !important;
}


/* FİYAT */

.showroom-card-price{
  margin:
    0 0 10px !important;

  padding:0 !important;

  color:
    #f0bc50 !important;

  font-size:
    19px !important;

  line-height:
    1.15 !important;

  font-weight:
    950 !important;
}


/* AÇIKLAMA VARSA */

.showroom-card-body p{
  min-height:0 !important;

  margin:
    0 0 11px !important;

  padding:0 !important;

  color:
    #9caac0 !important;

  font-size:
    10px !important;

  line-height:
    1.5 !important;
}


/* AÇIKLAMA BOŞSA BOŞLUK BIRAKMA */

.showroom-card-body p:empty{
  display:none !important;
}


/* BAĞLANTI */

.showroom-card-link{
  height:
    37px !important;

  min-height:
    37px !important;

  border-radius:
    9px !important;

  font-size:
    10px !important;
}


/* DÜZENLE / SİL */

.showroom-card-admin{
  gap:
    6px !important;

  margin-top:
    7px !important;
}

.showroom-card-admin button{
  height:
    31px !important;

  min-height:
    31px !important;

  border-radius:
    8px !important;

  font-size:
    9px !important;
}


/* SHOWROOM HEADER DAHA HASSAS */

.showroom-head{
  min-height:
    70px !important;

  padding:
    14px 20px !important;
}

.showroom-head h2{
  font-size:
    19px !important;
}

.showroom-head .primary-btn{
  min-height:
    36px !important;

  padding:
    0 15px !important;

  border-radius:
    10px !important;

  font-size:
    10px !important;
}


/* LAPTOP */

@media(max-width:1100px){

  .showroom-grid{
    grid-template-columns:
      repeat(
        auto-fill,
        250px
      ) !important;
  }

  .showroom-card{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
  }

  .showroom-card-image{
    height:300px !important;
  }
}


/* TELEFON */

@media(max-width:650px){

  .showroom-grid{
    grid-template-columns:
      1fr !important;
  }

  .showroom-card{
    width:100% !important;
    min-width:0 !important;
    max-width:340px !important;
  }

  .showroom-card-image{
    height:340px !important;
  }
}

/* ROKSS SHOWROOM COMPACT CARDS V2 END */


/* =========================================================
   ROKSS SHOWROOM TITLE V6
========================================================= */

.showroom-card-body{
  display:flex !important;
  flex-direction:column !important;
}

.showroom-card-title{
  order:1;

  display:block !important;

  margin:0 0 7px !important;
  padding:0 !important;

  color:#f4f7fd !important;

  font-size:17px !important;
  font-weight:900 !important;

  line-height:1.25 !important;
  letter-spacing:-.015em;

  overflow-wrap:anywhere;
}

.showroom-card-description{
  order:2;

  min-height:0 !important;

  margin:0 0 10px !important;
  padding:0 !important;

  color:#a9b6ca !important;

  font-size:10px !important;
  line-height:1.55 !important;

  white-space:pre-wrap;
}

.showroom-card-description:empty{
  display:none !important;
}

.showroom-card-price{
  order:3;
  margin:0 0 11px !important;
}

.showroom-card-link{
  order:4;
}

.showroom-card-admin{
  order:5;
}

#showroomTitleInput{
  font-weight:700 !important;
}

/* ROKSS SHOWROOM TITLE V6 END */


/* =========================================================
   ROKSS_TOP_RECENT_DMS_CSS_V1
========================================================= */


/* Desktop header artık:
   LOGO | NAV | SON DM'LER | ACTIONS
*/

@media(min-width:1251px){

  .topbar{
    grid-template-columns:
      210px
      minmax(460px,720px)
      minmax(260px,1fr)
      auto !important;

    gap:16px !important;
  }
}


@media(min-width:901px) and (max-width:1250px){

  .topbar{
    grid-template-columns:
      160px
      minmax(420px,620px)
      minmax(140px,1fr)
      auto !important;

    gap:10px !important;
  }

  .top-recent-dm-text{
    display:none !important;
  }

  .top-recent-dm{
    width:38px !important;
    padding:3px !important;
  }
}


/* SON DM BAR */

.top-recent-dms{
  min-width:0;

  display:flex;
  justify-content:flex-end;
  align-items:center;

  gap:7px;

  overflow:hidden;
}

.top-recent-dms.is-empty{
  pointer-events:none;
}


/* HER DM */

.top-recent-dm{
  position:relative;

  min-width:0;
  max-width:145px;

  height:42px;

  display:flex;
  align-items:center;

  gap:7px;

  padding:
    4px 9px 4px 5px;

  border:
    1px solid transparent;

  border-radius:
    13px;

  background:
    transparent;

  color:
    #c8d1df;

  cursor:pointer;

  transition:
    .15s ease;

  text-align:left;
}


.top-recent-dm:hover{
  background:
    #111a29;

  border-color:
    #263650;
}


.top-recent-dm.has-unread{
  background:
    linear-gradient(
      135deg,
      rgba(87,105,255,.12),
      rgba(127,70,238,.10)
    );

  border-color:
    rgba(112,92,241,.42);
}


.top-recent-dm .avatar.sm{
  flex:
    0 0 auto;

  width:
    32px;

  height:
    32px;
}


.top-recent-dm-text{
  min-width:0;

  display:flex;
  flex-direction:column;

  gap:1px;
}


.top-recent-dm-text strong{
  max-width:83px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:
    #e8edf6;

  font-size:
    11px;

  line-height:
    1.2;
}


.top-recent-dm-text small{
  max-width:83px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:
    #718099;

  font-size:
    8px;

  line-height:
    1.2;
}


.top-recent-dm.has-unread
.top-recent-dm-text small{
  color:
    #9d8cff;

  font-weight:
    800;
}


/* KİŞİ BAŞINA UNREAD */

.top-recent-dm-badge{
  position:absolute;

  top:-3px;
  right:-3px;

  min-width:
    17px;

  height:
    17px;

  padding:
    0 4px;

  display:grid;
  place-items:center;

  border-radius:
    999px;

  background:
    #ef5265;

  color:
    #fff;

  border:
    2px solid #080d16;

  font-size:
    8px;

  line-height:
    1;

  box-shadow:
    0 3px 10px
    rgba(239,82,101,.30);
}


/* MEKTUP BUTONU */

.dm-top-button{
  position:relative;
}


.dm-top-button.has-unread{
  border-color:
    rgba(239,82,101,.52);

  background:
    rgba(239,82,101,.08);
}


.dm-top-badge{
  position:absolute;

  top:-6px;
  right:-6px;

  min-width:
    18px;

  height:
    18px;

  padding:
    0 4px;

  display:grid;
  place-items:center;

  border-radius:
    999px;

  border:
    2px solid #080d16;

  background:
    #ef5265;

  color:white;

  font-size:
    8px;

  font-weight:
    900;
}


/* POPOVER */

.dm-item{
  position:relative;
}


.dm-item.has-unread{
  background:
    rgba(91,101,240,.09);

  border:
    1px solid
    rgba(99,91,225,.22);
}


.dm-item-unread{
  margin-left:auto;

  min-width:
    18px;

  height:
    18px;

  padding:
    0 5px;

  display:grid;
  place-items:center;

  border-radius:
    999px;

  background:
    #ef5265;

  color:white;

  font-size:
    8px;
}


/* PROFİL DM KARTLARI */

.personal-dm{
  position:relative;
}


.personal-dm.has-unread{
  border-color:
    rgba(113,94,242,.48);

  background:
    linear-gradient(
      135deg,
      rgba(82,103,242,.08),
      rgba(117,67,222,.08)
    );
}


.personal-dm-unread{
  margin-left:auto;

  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  display:grid;
  place-items:center;

  border-radius:
    999px;

  background:
    #ef5265;

  color:white;

  font-size:
    8px;
}


/* Mobilde üst şeridi sakla.
   Mevcut mektup menüsü kullanılmaya devam eder.
*/

@media(max-width:900px){

  .top-recent-dms{
    display:none !important;
  }
}

/* ROKSS_TOP_RECENT_DMS_CSS_V1 END */


/* =========================================================
   ROKSS_DEDICATED_DM_WORKSPACE_CSS_V2
========================================================= */


/*
 * Topbarın altında komple DM alanı.
 */

#dmView{
  overflow:hidden !important;

  padding:
    16px 20px !important;
}


#dmView.view.active{
  display:block !important;
}


.dm-dedicated-layout{
  width:100%;
  height:100%;

  min-width:0;
  min-height:0;

  display:grid;

  grid-template-columns:
    270px minmax(0,1fr);

  gap:
    14px;
}


/* =========================================================
   SOL DM LİSTESİ
========================================================= */

.dm-dedicated-sidebar{
  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  padding:
    16px;

  background:
    linear-gradient(
      180deg,
      #111a2a,
      #0c1421
    );
}


.dm-dedicated-sidebar-head{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:
    12px;

  padding:
    2px 2px 15px;

  border-bottom:
    1px solid #1f2b40;
}


.dm-dedicated-sidebar-head h2{
  margin:
    4px 0 0;

  font-size:
    18px;
}


.dm-dedicated-list{
  min-height:0;

  flex:1;

  overflow-y:auto;

  display:flex;
  flex-direction:column;

  gap:
    5px;

  padding-top:
    12px;

  scrollbar-width:
    thin;
}


/* =========================================================
   DM KİŞİ SATIRI
========================================================= */

.dm-workspace-item{
  width:100%;

  min-width:0;

  display:flex;

  align-items:center;

  gap:
    10px;

  padding:
    9px;

  border:
    1px solid transparent;

  border-radius:
    13px;

  background:
    transparent;

  color:
    #aab5c8;

  text-align:left;

  cursor:pointer;

  transition:
    .15s ease;
}


.dm-workspace-item:hover{
  background:
    #131e30;

  border-color:
    #263650;

  color:
    #fff;
}


.dm-workspace-item.active{
  background:
    linear-gradient(
      90deg,
      #24355e,
      #1c2743
    );

  border-color:
    #3a5384;

  color:
    #fff;
}


.dm-workspace-item.has-unread{
  border-color:
    rgba(
      123,
      91,
      255,
      .45
    );
}


.dm-workspace-item
.avatar.sm{
  flex:
    0 0 38px;
}


.dm-workspace-item-copy{
  min-width:0;

  flex:1;
}


.dm-workspace-item-copy strong{
  display:block;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #eef2fa;

  font-size:
    12px;
}


.dm-workspace-item-copy small{
  display:block;

  margin-top:
    3px;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #76859d;

  font-size:
    9px;
}


.dm-workspace-item.has-unread
.dm-workspace-item-copy small{
  color:
    #a18cff;

  font-weight:
    800;
}


.dm-workspace-unread{
  min-width:
    19px;

  height:
    19px;

  padding:
    0 5px;

  display:grid;

  place-items:center;

  border-radius:
    999px;

  background:
    #ef5265;

  color:#fff;

  font-size:
    8px;

  font-weight:
    900;
}


.dm-workspace-empty{
  padding:
    18px 7px;

  color:
    #718098;

  font-size:
    11px;

  line-height:
    1.5;
}


/* =========================================================
   BÜYÜK CHAT ALANI
========================================================= */

.dm-dedicated-chat-host{
  min-width:0;
  min-height:0;

  height:100%;
}


.dm-dedicated-chat-host
.chat-panel{
  width:
    100% !important;

  height:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  border-radius:
    18px !important;

  overflow:
    hidden !important;
}


/*
 * DM ekranındaki chat artık
 * normal server grid ölçülerine bağlı değil.
 */

.dm-dedicated-chat-host
.messages{
  min-height:0;
}


@media(min-width:901px){

  #dmView{
    height:
      calc(100vh - 76px);

    min-height:
      0;
  }


  .dm-dedicated-layout{
    height:
      100%;
  }
}


/* =========================================================
   MOBİL
========================================================= */

@media(max-width:900px){

  #dmView{
    padding:
      12px !important;
  }


  .dm-dedicated-layout{
    grid-template-columns:
      1fr;

    height:auto;
  }


  .dm-dedicated-sidebar{
    max-height:
      230px;
  }


  .dm-dedicated-chat-host{
    min-height:
      560px;
  }
}


/* =========================================================
   ROKSS_DEDICATED_DM_WORKSPACE_CSS_V2 END
========================================================= */



/* =========================================================
   ROKSS_CHAT_MEDIA_CSS_V2
========================================================= */

.composer{
  position:relative !important;
  overflow:visible !important;
}


#attachmentBtn{
  position:relative;
  z-index:5;
}


#attachmentBtn:hover{
  border-color:
    #745eff !important;

  color:
    #fff !important;

  background:
    rgba(110,86,244,.12) !important;
}


/* + MENÜ */

.chat-attach-menu{
  position:absolute;

  left:8px;
  bottom:54px;

  z-index:100;

  width:170px;

  padding:7px;

  display:grid;
  gap:4px;

  border:
    1px solid #293954;

  border-radius:
    13px;

  background:
    #0c1524;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.42);
}


.composer.has-attachment
.chat-attach-menu{
  bottom:137px;
}


.chat-attach-menu button{
  width:100%;
  height:38px;

  display:flex;
  align-items:center;

  gap:10px;

  padding:
    0 10px;

  border:
    0;

  border-radius:
    9px;

  background:
    transparent;

  color:
    #cbd4e3;

  cursor:pointer;

  text-align:left;
}


.chat-attach-menu button:hover{
  background:
    #172338;

  color:#fff;
}


.chat-attach-menu button span{
  width:21px;

  font-size:
    15px;

  text-align:center;
}


.chat-attach-menu button b{
  font-size:
    11px;

  font-weight:
    700;
}


/* SEÇİLEN MEDYA */

.chat-attachment-preview{
  position:absolute;

  left:8px;
  bottom:54px;

  z-index:90;

  width:
    min(
      340px,
      calc(100vw - 50px)
    );

  height:76px;

  padding:8px;

  display:flex;
  align-items:center;

  gap:10px;

  border:
    1px solid #2b3b57;

  border-radius:
    14px;

  background:
    #0c1524;

  box-shadow:
    0 16px 40px
    rgba(0,0,0,.38);
}


.chat-attachment-preview img,
.chat-attachment-preview video{
  width:58px;
  height:58px;

  flex:
    0 0 58px;

  object-fit:cover;

  border-radius:
    9px;

  background:
    #060b13;
}


.chat-attachment-preview-copy{
  flex:1;
  min-width:0;
}


.chat-attachment-preview-copy strong{
  display:block;

  color:
    #eef3fb;

  font-size:
    11px;
}


.chat-attachment-preview-copy small{
  display:block;

  margin-top:4px;

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

  color:
    #74839a;

  font-size:
    9px;
}


#removeChatAttachment{
  width:28px;
  height:28px;

  flex:
    0 0 28px;

  border:
    1px solid #34445f;

  border-radius:
    8px;

  background:
    #121d2f;

  color:
    #b9c4d5;

  cursor:pointer;
}


#removeChatAttachment:hover{
  color:#fff;

  border-color:
    #647799;
}


/* MESAJ İÇİNDE MEDYA */

.message-attachment{
  width:fit-content;

  max-width:
    min(
      520px,
      100%
    );

  margin-top:
    8px;
}


.message-attachment-image img{
  display:block;

  width:auto;

  max-width:
    420px;

  max-height:
    390px;

  object-fit:contain;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    12px;

  background:
    #070d16;

  cursor:
    zoom-in;
}


.message-attachment-video video{
  display:block;

  width:
    min(
      520px,
      100%
    );

  max-height:
    390px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius:
    12px;

  background:
    #05080d;
}


.message-attachment-name{
  display:block;

  max-width:
    420px;

  margin-top:
    5px;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #718099;

  font-size:
    8px;
}


@media(max-width:700px){

  .message-attachment-image img,
  .message-attachment-video video{
    width:100%;

    max-width:100%;
  }
}


/* ROKSS_CHAT_MEDIA_CSS_V2 END */


/* =========================================================
   ROKSS_REACTION_CSS_V3
========================================================= */

.reaction-menu{
  position:fixed;

  z-index:650;

  display:grid;

  grid-template-columns:
    repeat(8,36px);

  gap:4px;

  padding:7px;

  border:
    1px solid #30415f;

  border-radius:
    13px;

  background:
    #0c1524;

  box-shadow:
    0 18px 55px
    rgba(0,0,0,.50);

  user-select:none;
}


.reaction-menu button{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  padding:0;

  border:
    1px solid transparent;

  border-radius:
    9px;

  background:
    transparent;

  font-size:
    19px;

  cursor:pointer;

  transition:
    .12s ease;
}


.reaction-menu button:hover{
  background:
    #19263d;

  border-color:
    #405779;

  transform:
    scale(1.09);
}


.message-reactions{
  display:flex;

  flex-wrap:wrap;

  align-items:center;

  gap:5px;

  margin-top:7px;
}


.reaction-chip{
  min-width:38px;
  height:27px;

  display:inline-flex;

  align-items:center;
  justify-content:center;

  gap:5px;

  padding:
    0 8px;

  border:
    1px solid #2c3b55;

  border-radius:
    8px;

  background:
    #111b2b;

  color:
    #aebaca;

  cursor:pointer;

  transition:
    .12s ease;
}


.reaction-chip:hover{
  border-color:
    #50688d;

  background:
    #19263a;
}


.reaction-chip.mine{
  border-color:
    #715df2;

  background:
    rgba(106,81,239,.17);

  color:#fff;

  box-shadow:
    inset 0 0 0 1px
    rgba(128,101,255,.12);
}


.reaction-chip span{
  font-size:
    14px;

  line-height:1;
}


.reaction-chip b{
  font-size:
    9px;

  line-height:1;

  font-weight:
    900;
}


@media(max-width:700px){

  .reaction-menu{
    grid-template-columns:
      repeat(4,38px);
  }
}


/* ROKSS_REACTION_CSS_V3 END */


/* ROKSS_SHOWROOM_DESC_FIX_V1 */
.showroom-card-description{
  margin-top: 10px !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
  white-space: pre-line !important;
  font-size: 15px !important;
  line-height: 1.60 !important;
  letter-spacing: .01em !important;
  color: rgba(235,240,255,.88) !important;
}

.showroom-card-title{
  margin-bottom: 8px !important;
}

.showroom-card-body{
  gap: 10px !important;
}


/* ROKSS_SHOWROOM_TITLE_SPACING_V2 */
.showroom-card-body{
  gap: 6px !important;
}

.showroom-card-title{
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1.18 !important;
}

.showroom-card-description{
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
  white-space: pre-line !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.showroom-card-description p{
  margin: 0 !important;
}

.showroom-card-description:empty{
  display: none !important;
}


/* =========================================================
   ROKSS_CHANNEL_NOTIFY_CSS_V1
========================================================= */

#channelList
.nav-item{
  display:flex;

  align-items:center;

  gap:6px;
}


#channelList
.nav-item > span{
  min-width:0;

  flex:1;
}


#channelList
.nav-item.has-unread:not(.active){
  color:#f1f4fb !important;

  background:
    rgba(100,83,235,.07);
}


#channelList
.nav-item.has-unread:not(.active)
> span{
  font-weight:800;
}


.channel-unread-badge{
  flex:0 0 auto;

  min-width:18px;
  height:18px;

  padding:
    0 5px;

  display:grid;
  place-items:center;

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #735cff,
      #9d4ee8
    );

  color:#fff;

  font-size:8px;

  font-weight:900;

  line-height:1;

  box-shadow:
    0 3px 10px
    rgba(111,87,245,.30);
}


/* ROKSS_CHANNEL_NOTIFY_CSS_V1 END */


/* =========================================================
   ROKSS_SERVER_DISCOVERY_CSS_V1
========================================================= */


/* =========================================================
   SOL RAIL HOME
========================================================= */

.rail-home{
  width:48px;
  height:48px;

  flex:0 0 48px;

  display:grid;
  place-items:center;

  border:
    1px solid #26344c;

  border-radius:
    16px;

  background:
    #101827;

  color:
    #dbe4f2;

  font-size:
    24px;

  font-weight:
    900;

  cursor:pointer;

  transition:
    .16s ease;
}


.rail-home:hover,
.rail-home.active{
  color:#fff;

  border-color:
    #7556ff;

  background:
    linear-gradient(
      145deg,
      #24365b,
      #362064
    );

  box-shadow:
    0 0 22px
    rgba(124,77,255,.22);

  transform:
    translateY(-1px);
}


.rail-home.active:before{
  content:"";

  position:absolute;

  left:0;

  width:4px;
  height:28px;

  border-radius:
    0 5px 5px 0;

  background:
    #8a68ff;

  box-shadow:
    0 0 12px
    rgba(138,104,255,.7);
}


.rail-home-divider{
  width:34px;
  height:1px;

  flex:0 0 1px;

  background:
    #202c40;

  margin:
    1px 0 0;
}


/* =========================================================
   SERVER DISCOVERY PAGE
========================================================= */

#serverDiscoverView{
  overflow-y:auto;

  padding:
    16px 20px 30px;
}


.server-discover-shell{
  width:100%;

  display:grid;

  gap:16px;
}


.server-discover-head{
  min-height:110px;

  padding:
    22px 26px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  background:
    radial-gradient(
      circle at 72% 0%,
      rgba(112,74,255,.16),
      transparent 37%
    ),
    linear-gradient(
      115deg,
      #111a2a,
      #0d1522
    );
}


.server-discover-head h1{
  margin:
    5px 0 5px;

  font-size:
    30px;
}


.server-discover-head p{
  margin:0;

  color:
    #8391a7;

  font-size:
    12px;
}


.server-discover-actions{
  display:flex;

  align-items:center;

  gap:9px;
}


/* =========================================================
   DISCOVERY SECTIONS
========================================================= */

.server-discover-section{
  padding:
    20px;

  overflow:hidden;
}


.server-discover-section.sponsored{
  border-color:
    rgba(239,174,62,.34);

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(244,184,79,.09),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(19,26,40,.99),
      rgba(12,18,29,.99)
    );
}


.server-discover-section.public{
  border-color:
    rgba(76,141,255,.25);

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(76,141,255,.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      rgba(17,25,39,.99),
      rgba(11,17,28,.99)
    );
}


.server-discover-section-head{
  min-height:62px;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;

  margin-bottom:
    16px;
}


.server-discover-section-head h2{
  margin:
    4px 0 4px;

  font-size:
    21px;
}


.server-discover-section-head p{
  margin:0;

  color:
    #78879e;

  font-size:
    11px;
}


.discover-count{
  min-width:
    30px;

  height:
    30px;

  padding:
    0 8px;

  display:grid;

  place-items:center;

  border-radius:
    999px;

  background:
    #152138;

  border:
    1px solid #263752;

  color:
    #aab7cc;

  font-size:
    11px;

  font-weight:
    900;
}


.server-discover-section.sponsored
.discover-count{
  border-color:
    rgba(244,184,79,.32);

  color:
    #f4c35d;

  background:
    rgba(244,184,79,.07);
}


/* =========================================================
   SERVER CARDS
========================================================= */

.server-discover-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(250px,1fr)
    );

  gap:
    12px;
}


.discover-server-card{
  min-width:0;

  padding:
    15px;

  border:
    1px solid #24334c;

  border-radius:
    16px;

  background:
    linear-gradient(
      180deg,
      #111b2c,
      #0c1522
    );

  transition:
    .16s ease;
}


.discover-server-card:hover{
  transform:
    translateY(-2px);

  border-color:
    #3b5278;

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.18);
}


.discover-server-card.vip{
  border-color:
    rgba(244,184,79,.34);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(244,184,79,.10),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #151b29,
      #0d1521
    );
}


.discover-server-card-top{
  display:flex;

  align-items:center;

  gap:12px;
}


.discover-server-avatar{
  width:54px;
  height:54px;

  flex:0 0 54px;

  overflow:hidden;

  display:grid;

  place-items:center;

  border:
    1px solid #51428a;

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      #3e2d71,
      #15284a
    );

  color:#fff;

  font-size:
    18px;

  font-weight:
    900;
}


.discover-server-avatar img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
}


.discover-server-identity{
  min-width:0;

  flex:1;
}


.discover-server-name-row{
  display:flex;

  align-items:center;

  gap:7px;

  min-width:0;
}


.discover-server-name-row strong{
  min-width:0;

  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    14px;
}


.discover-server-identity > span{
  display:block;

  margin-top:
    4px;

  color:
    #77869d;

  font-size:
    10px;
}


.discover-vip-badge{
  flex:0 0 auto;

  padding:
    3px 6px;

  border:
    1px solid
    rgba(244,184,79,.34);

  border-radius:
    999px;

  background:
    rgba(244,184,79,.10);

  color:
    #f5c65e;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.discover-server-card-meta{
  min-height:
    45px;

  display:flex;

  align-items:center;

  gap:6px;

  flex-wrap:wrap;

  margin:
    14px 0;
}


.discover-server-card-meta span{
  padding:
    5px 8px;

  border:
    1px solid #22324b;

  border-radius:
    999px;

  background:
    #0e1725;

  color:
    #8190a6;

  font-size:
    9px;
}


.discover-server-card.vip
.discover-server-card-meta span:last-child{
  border-color:
    rgba(244,184,79,.24);

  color:
    #e2b95f;
}


.discover-server-join{
  min-height:
    38px;
}


.discover-empty,
.discover-loading{
  grid-column:
    1 / -1;

  min-height:
    115px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  gap:8px;

  border:
    1px dashed #293950;

  border-radius:
    14px;

  color:
    #6e7d94;

  font-size:
    11px;
}


.discover-empty span{
  font-size:
    22px;
}


/* =========================================================
   PRIVACY CREATE / SETTINGS
========================================================= */

.server-create-privacy,
.server-privacy-settings{
  margin:
    7px 0 16px;

  padding:
    14px;

  border:
    1px solid #263650;

  border-radius:
    14px;

  background:
    #0d1624;
}


.server-privacy-settings{
  margin-top:
    10px;

  margin-bottom:
    18px;
}


.server-privacy-head{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

  margin-bottom:
    10px;
}


.server-privacy-head strong{
  display:block;

  margin-top:
    4px;

  font-size:
    13px;
}


.server-privacy-options{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    8px;
}


.server-privacy-option{
  min-width:0;

  display:grid;

  grid-template-columns:
    auto 30px minmax(0,1fr);

  align-items:flex-start;

  gap:
    8px;

  padding:
    11px;

  border:
    1px solid #24334c;

  border-radius:
    12px;

  background:
    #101a2a;

  cursor:pointer;

  transition:
    .14s ease;
}


.server-privacy-option:hover{
  border-color:
    #40577f;

  background:
    #132035;
}


.server-privacy-option:has(input:checked){
  border-color:
    #725cf0;

  background:
    rgba(106,82,235,.10);

  box-shadow:
    inset 0 0 0 1px
    rgba(124,95,255,.10);
}


.server-privacy-option input{
  margin-top:
    3px;

  accent-color:
    #785fff;
}


.server-privacy-icon{
  font-size:
    20px;

  line-height:
    1;
}


.server-privacy-option b{
  display:block;

  font-size:
    11px;
}


.server-privacy-option small{
  display:block;

  margin-top:
    4px;

  color:
    #74839a;

  font-size:
    9px;

  line-height:
    1.45;
}


.server-privacy-status{
  padding:
    5px 8px;

  border:
    1px solid #3b4354;

  border-radius:
    999px;

  background:
    #151b27;

  color:
    #9aa5b7;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.server-privacy-status.public{
  border-color:
    rgba(63,214,151,.28);

  background:
    rgba(63,214,151,.08);

  color:
    #66dda9;
}


.server-privacy-hint{
  margin:
    10px 1px 0;

  color:
    #8492a8;

  font-size:
    10px;

  line-height:
    1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(min-width:901px){

  #serverDiscoverView{
    height:
      calc(100vh - 76px);
  }

}


@media(max-width:900px){

  .server-discover-head{
    align-items:flex-start;

    flex-direction:column;
  }


  .server-discover-actions{
    width:100%;

    flex-direction:column;
  }


  .server-discover-actions button{
    width:100%;
  }


  .server-discover-grid{
    grid-template-columns:
      1fr;
  }


  .server-privacy-options{
    grid-template-columns:
      1fr;
  }
}


/* ROKSS_SERVER_DISCOVERY_CSS_V1 END */


/* =========================================================
   ROKSS_SERVER_HOME_ICON_FIX_V2
========================================================= */

#serverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  flex:0 0 48px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  overflow:hidden !important;

  border-radius:50% !important;

  border:
    1px solid #30405d !important;

  background:
    linear-gradient(
      145deg,
      #121d30,
      #0b1321
    ) !important;

  background-image:
    none !important;

  color:
    #cbd6e8 !important;

  cursor:pointer !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04) !important;
}


#serverHomeBtn img{
  display:none !important;
}


#serverHomeBtn::after{
  display:none !important;
}


#serverHomeBtn:hover{
  color:#fff !important;

  border-color:
    #725cff !important;

  background:
    linear-gradient(
      145deg,
      #1c2b49,
      #2b1d55
    ) !important;

  transform:
    translateY(-1px);
}


#serverHomeBtn.active{
  color:#fff !important;

  border-color:
    #795fff !important;

  background:
    linear-gradient(
      145deg,
      #24365e,
      #352064
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(126,94,255,.26),
    0 0 20px
    rgba(112,75,255,.20) !important;
}


.server-home-symbol{
  display:grid;

  place-items:center;

  width:100%;
  height:100%;

  font-size:27px;

  line-height:1;

  font-weight:900;

  transform:
    translateY(-1px);

  pointer-events:none;
}


/*
 * HOME ile sunucuların arasındaki ayırıcı
 */
.rail-home-divider{
  width:32px !important;

  height:1px !important;

  flex:0 0 1px !important;

  background:
    #243047 !important;

  margin:
    1px 0 2px !important;
}


/* ROKSS_SERVER_HOME_ICON_FIX_V2 END */


/* =========================================================
   ROKSS_RAIL_AVATAR_HOME_FIX_V3
========================================================= */


/* HOME tamamen bağımsız */

#serverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  flex:0 0 48px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  overflow:visible !important;

  border-radius:16px !important;

  border:
    1px solid #293a56 !important;

  background:
    #101827 !important;

  background-image:
    none !important;

  color:#fff !important;
}


/*
 * Eski JS içine resim veya span koysa bile
 * içerideki her şeyi gizle.
 */
#serverHomeBtn > *{
  display:none !important;
}


/*
 * Ev ikonu pseudo element olduğu için
 * herhangi bir sunucu avatarıyla değiştirilemez.
 */
#serverHomeBtn::after{
  content:"🏠" !important;

  position:static !important;

  width:100% !important;
  height:100% !important;

  display:grid !important;
  place-items:center !important;

  font-size:22px !important;

  line-height:1 !important;

  filter:
    none !important;

  background:
    transparent !important;

  pointer-events:none !important;
}


#serverHomeBtn:hover,
#serverHomeBtn.active{
  border-color:
    #755cff !important;

  background:
    linear-gradient(
      145deg,
      #1e2d4c,
      #30205d
    ) !important;

  box-shadow:
    0 0 20px
    rgba(117,92,255,.22) !important;
}


/* =========================================================
   GERÇEK SUNUCU AVATARLARI
========================================================= */

.rail-server{
  overflow:visible !important;
}


.rail-server-avatar{
  width:100%;
  height:100%;

  overflow:hidden;

  display:grid;
  place-items:center;

  border-radius:
    inherit;

  pointer-events:none;
}


.rail-server-avatar img{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:
    cover !important;
}


.rail-server-initials{
  background:
    linear-gradient(
      145deg,
      #3d2d70,
      #16294b
    );

  color:#fff;

  font-weight:900;
}


/*
 * Online noktası resmin üstünde kalsın.
 */
.rail-server > i{
  z-index:3;
}


/* ROKSS_RAIL_AVATAR_HOME_FIX_V3 END */


/* =========================================================
   ROKSS_HOME_SVG_FIX_V4
========================================================= */

#serverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  flex:0 0 48px !important;

  padding:0 !important;

  display:grid !important;
  place-items:center !important;

  overflow:hidden !important;

  border:
    1px solid #2c3d59 !important;

  border-radius:
    16px !important;

  background:
    #101827 !important;

  background-image:
    none !important;

  color:
    #b9c7dc !important;

  cursor:pointer !important;
}


/* Önceki pseudo-iconları tamamen kapat */

#serverHomeBtn::before,
#serverHomeBtn::after{
  content:none !important;

  display:none !important;

  background:
    none !important;

  background-image:
    none !important;
}


/*
 * Home içinde sadece SVG göster.
 * Herhangi bir JS <img> eklerse görünmez.
 */

#serverHomeBtn > *{
  display:none !important;
}


#serverHomeBtn > .server-home-svg{
  width:23px !important;
  height:23px !important;

  display:block !important;

  flex:0 0 23px !important;

  color:
    currentColor !important;

  pointer-events:none !important;
}


#serverHomeBtn > img{
  display:none !important;
}


#serverHomeBtn:hover{
  color:#fff !important;

  border-color:
    #715cff !important;

  background:
    linear-gradient(
      145deg,
      #1c2b49,
      #30205c
    ) !important;
}


#serverHomeBtn.active{
  color:#fff !important;

  border-color:
    #755cff !important;

  background:
    linear-gradient(
      145deg,
      #273a63,
      #382169
    ) !important;

  box-shadow:
    0 0 20px
    rgba(117,92,255,.25) !important;
}


/*
 * Önceki home emoji sınıfı artık kullanılmıyor.
 */

.server-home-symbol{
  display:none !important;
}


/* ROKSS_HOME_SVG_FIX_V4 END */


/* =========================================================
   ROKSS_SERVER_DISCOVERY_HOME_FINAL_V6
========================================================= */

#serverDiscoverHomeBtn{
  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  flex:0 0 48px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  border:
    1px solid #293a55 !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      #111a2a,
      #0c1421
    ) !important;

  color:#fff !important;

  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif !important;

  font-size:22px !important;

  line-height:1 !important;

  cursor:pointer !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.04) !important;

  transition:
    .15s ease !important;

  position:relative !important;

  overflow:hidden !important;

  user-select:none !important;
}


#serverDiscoverHomeBtn:hover{
  transform:
    translateY(-1px);

  border-color:
    #755cff !important;

  background:
    linear-gradient(
      145deg,
      #1c2b4a,
      #2e205d
    ) !important;
}


#serverDiscoverHomeBtn.active{
  border-color:
    #795fff !important;

  background:
    linear-gradient(
      145deg,
      #283b65,
      #382168
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(124,94,255,.25),
    0 0 20px
    rgba(119,87,255,.22) !important;
}


#serverDiscoverHomeBtn.active::before{
  content:"" !important;

  position:absolute !important;

  left:-9px !important;

  width:4px !important;
  height:28px !important;

  border-radius:
    0 5px 5px 0 !important;

  background:
    #8a68ff !important;

  box-shadow:
    0 0 12px
    rgba(138,104,255,.7) !important;
}


/*
 * Sunucu listesi bundan sonra ayrı başlıyor.
 */
#serverDiscoverHomeBtn
+ .rail-home-divider{
  display:block !important;

  width:34px !important;
  height:1px !important;

  flex:0 0 1px !important;

  margin:
    1px 0 0 !important;

  background:
    #253147 !important;
}


/* ROKSS_SERVER_DISCOVERY_HOME_FINAL_V6 END */

/* =========================================================
   ROKSS HOME FORCE ICON V7
   Home içine ne yazılırsa yazılsın sadece ev göster.
========================================================= */

#serverDiscoverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  flex:0 0 48px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  overflow:hidden !important;

  border:
    1px solid #293a55 !important;

  border-radius:
    15px !important;

  background:
    linear-gradient(
      145deg,
      #101a2a,
      #0b1422
    ) !important;

  background-image:none !important;

  color:#ffffff !important;

  font-size:0 !important;

  cursor:pointer !important;
}


/*
 * İçine img/span/svg eklenirse TAMAMINI gizle.
 */
#serverDiscoverHomeBtn > *{
  display:none !important;
}


/*
 * Düz text olarak 🏠 varsa da font-size:0 ile gizlenir.
 * Gerçek görünen ikon sadece bu.
 */
#serverDiscoverHomeBtn::after{
  content:"🏠" !important;

  position:static !important;

  display:block !important;

  width:auto !important;
  height:auto !important;

  background:none !important;
  background-image:none !important;

  color:#fff !important;

  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif !important;

  font-size:23px !important;
  line-height:1 !important;

  pointer-events:none !important;
}


#serverDiscoverHomeBtn::before{
  content:none !important;
  display:none !important;
}


#serverDiscoverHomeBtn:hover{
  border-color:
    #755cff !important;

  background:
    linear-gradient(
      145deg,
      #1d2c4c,
      #30205d
    ) !important;

  background-image:none !important;
}


#serverDiscoverHomeBtn.active{
  border-color:
    #795fff !important;

  background:
    linear-gradient(
      145deg,
      #273b65,
      #382168
    ) !important;

  background-image:none !important;

  box-shadow:
    0 0 20px
    rgba(117,92,255,.23) !important;
}


/* ROKSS HOME FORCE ICON V7 END */



/* ROKSS_RAIL_VISUAL_FINAL_V8 */


/* =========================================================
   HOME
   Altta hangi resim olursa olsun TAMAMEN kapat.
========================================================= */

#serverDiscoverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  flex:0 0 48px !important;

  padding:0 !important;
  margin:0 !important;

  overflow:hidden !important;

  border:
    1px solid #2b3a54 !important;

  border-radius:
    15px !important;

  background:
    #101827 !important;

  background-image:
    none !important;

  font-size:0 !important;

  cursor:pointer !important;
}


/*
 * Button içindeki eski img / emoji / vs.
 */
#serverDiscoverHomeBtn > *{
  visibility:hidden !important;
  opacity:0 !important;
}


/*
 * Bu katman alttaki ROKSS resmini fiziksel olarak örter.
 */
#serverDiscoverHomeBtn::after{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  display:block !important;

  z-index:100 !important;

  border-radius:
    14px !important;

  background:
    linear-gradient(
      145deg,
      #131d2e,
      #0b1320
    ) !important;

  background-image:
    none !important;

  pointer-events:none !important;
}


/*
 * Ev ikonu en üst katman.
 */
#serverDiscoverHomeBtn::before{
  content:"🏠" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:101 !important;

  display:grid !important;

  place-items:center !important;

  width:100% !important;
  height:100% !important;

  background:
    transparent !important;

  color:#fff !important;

  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif !important;

  font-size:
    21px !important;

  line-height:1 !important;

  pointer-events:none !important;
}


#serverDiscoverHomeBtn:hover::after{
  background:
    linear-gradient(
      145deg,
      #1b2944,
      #2d1d57
    ) !important;
}


#serverDiscoverHomeBtn.active{
  border-color:
    #795fff !important;

  box-shadow:
    0 0 0 1px
    rgba(121,95,255,.22),
    0 0 18px
    rgba(121,95,255,.20) !important;
}


#serverDiscoverHomeBtn.active::after{
  background:
    linear-gradient(
      145deg,
      #26385f,
      #382065
    ) !important;
}


/* =========================================================
   GERÇEK SUNUCU İKONLARI
   Button'ın default padding'i resmi küçültmesin.
========================================================= */

#serverRailList .rail-server{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  padding:0 !important;

  overflow:hidden !important;

  box-sizing:
    border-box !important;

  border-radius:
    15px !important;
}


#serverRailList .rail-server-avatar{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  display:grid !important;

  place-items:center !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  border-radius:
    14px !important;

  box-sizing:
    border-box !important;
}


#serverRailList .rail-server-avatar img{
  position:absolute !important;

  inset:0 !important;

  width:100% !important;
  height:100% !important;

  max-width:none !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  display:block !important;

  object-fit:
    cover !important;

  border-radius:
    14px !important;
}


#serverRailList .rail-server-initials{
  font-size:
    16px !important;

  font-weight:
    900 !important;
}


/*
 * Online noktası avatarın üzerinde kalsın.
 */
#serverRailList .rail-server > i{
  position:absolute !important;

  right:3px !important;
  bottom:3px !important;

  z-index:20 !important;

  width:7px !important;
  height:7px !important;
}


/*
 * Aktif sunucunun sol mor çizgisi avatarın üstünde kalsın.
 */
#serverRailList .rail-server.active::before{
  z-index:25 !important;
}


/* ROKSS_RAIL_VISUAL_FINAL_V8 END */

/* =========================================================
   ROKSS HOME ACTIVE ICON FIX V9
========================================================= */

/*
 * Aktif veya pasif fark etmez:
 * HOME pseudo-element her zaman ev olacak.
 */

#serverDiscoverHomeBtn::before,
#serverDiscoverHomeBtn.active::before,
#serverDiscoverHomeBtn:hover::before{
  content:"🏠" !important;

  position:absolute !important;

  inset:0 !important;

  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;

  width:100% !important;
  height:100% !important;

  display:grid !important;

  place-items:center !important;

  z-index:200 !important;

  border-radius:14px !important;

  background:transparent !important;

  color:#fff !important;

  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif !important;

  font-size:21px !important;

  line-height:1 !important;

  pointer-events:none !important;

  box-shadow:none !important;

  transform:none !important;
}


/*
 * Eski aktif sol çizgi kuralı HOME'a uygulanmasın.
 */

#serverDiscoverHomeBtn.active::before{
  margin:0 !important;
}


/*
 * Home'un alt kaplaması.
 */

#serverDiscoverHomeBtn::after,
#serverDiscoverHomeBtn.active::after{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;

  z-index:190 !important;

  display:block !important;

  border-radius:14px !important;

  background:
    linear-gradient(
      145deg,
      #121c2d,
      #0b1421
    ) !important;

  pointer-events:none !important;
}


#serverDiscoverHomeBtn.active::after{
  background:
    linear-gradient(
      145deg,
      #25375f,
      #382168
    ) !important;
}


/*
 * Aktif durumda sadece kutu vurgulansın,
 * ikon ASLA kaybolmasın.
 */

#serverDiscoverHomeBtn.active{
  border-color:#7b61ff !important;

  box-shadow:
    0 0 0 1px rgba(123,97,255,.30),
    0 0 18px rgba(123,97,255,.20) !important;
}


/* ROKSS HOME ACTIVE ICON FIX V9 END */


/* =========================================================
   ROKSS_GAME_ACCOUNTS_HUB_CSS_V1
========================================================= */


/*
 * Eski Rise'a özel görünümü sakla.
 * Eski çalışan buton DOM'da yaşamaya devam ediyor.
 */

.game-accounts-panel
.game-account-legacy-ui{
  display:none !important;
}


/*
 * Kartın mevcut profil grid yüksekliğine düzgün oturması.
 */

.game-accounts-panel{
  position:relative;

  padding:0 !important;

  overflow:hidden;
}


.game-accounts-hub{
  width:100%;
  height:100%;

  min-height:306px;

  padding:
    24px 22px 20px;

  display:flex;

  flex-direction:column;

  box-sizing:
    border-box;
}


/* =========================================================
   HEADER
========================================================= */

.game-accounts-head{
  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:14px;

  margin-bottom:
    17px;
}


.game-accounts-head h2{
  margin:
    5px 0 5px;

  font-size:
    24px;

  line-height:
    1.1;
}


.game-accounts-head p{
  margin:0;

  color:
    #8190a7;

  font-size:
    11px;

  line-height:
    1.45;
}


.game-accounts-head-icon{
  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:
    1px solid #253650;

  border-radius:
    11px;

  background:
    #111c2d;

  font-size:
    17px;
}


/* =========================================================
   LIST
========================================================= */

.game-account-list{
  display:grid;

  gap:9px;
}


/* =========================================================
   GAME CARD
========================================================= */

.game-account-card{
  padding:
    12px;

  border:
    1px solid #263752;

  border-radius:
    13px;

  background:
    rgba(13,22,36,.72);

  transition:
    .15s ease;
}


.game-account-card.supported:hover{
  border-color:
    #415a85;

  background:
    #101c2e;
}


.game-account-card-top{
  display:flex;

  align-items:center;

  gap:10px;

  min-width:0;
}


.game-account-icon{
  width:39px;
  height:39px;

  flex:
    0 0 39px;

  display:grid;

  place-items:center;

  border:
    1px solid #2d3d59;

  border-radius:
    11px;

  background:
    #152136;

  font-size:
    19px;
}


.game-account-icon.rok{
  border-color:
    rgba(214,163,57,.35);

  background:
    linear-gradient(
      145deg,
      rgba(183,120,23,.20),
      rgba(22,30,46,.9)
    );
}


.game-account-info{
  min-width:0;

  flex:1;
}


.game-account-title-row{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:6px;
}


.game-account-title-row strong{
  color:#f4f6fb;

  font-size:
    12px;
}


.game-account-info small{
  display:block;

  margin-top:
    4px;

  color:
    #74849b;

  font-size:
    9px;

  line-height:
    1.35;
}


.game-account-supported-badge,
.game-account-soon-badge{
  padding:
    3px 6px;

  border-radius:
    999px;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


.game-account-supported-badge{
  border:
    1px solid rgba(70,214,153,.30);

  background:
    rgba(70,214,153,.08);

  color:
    #65d9aa;
}


.game-account-soon-badge{
  border:
    1px solid #34445e;

  background:
    #172235;

  color:
    #8392a8;
}


.game-account-status{
  flex:0 0 auto;

  padding:
    5px 7px;

  border:
    1px solid #36445a;

  border-radius:
    999px;

  color:
    #8997ab;

  font-size:
    8px;

  font-weight:
    800;
}


.game-account-status.connected{
  border-color:
    rgba(62,214,149,.30);

  background:
    rgba(62,214,149,.08);

  color:
    #64dca7;
}


/* =========================================================
   RISE ACTION
========================================================= */

.game-account-action{
  width:100%;

  height:35px;

  margin-top:
    10px;

  padding:
    0 11px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  border:
    1px solid #2d405e;

  border-radius:
    10px;

  background:
    #132036;

  color:
    #edf1f8;

  font-size:
    10px;

  font-weight:
    850;

  cursor:pointer;

  transition:
    .14s ease;
}


.game-account-action:hover{
  border-color:
    #6959de;

  background:
    linear-gradient(
      135deg,
      rgba(80,103,235,.20),
      rgba(117,63,220,.18)
    );
}


.game-account-action span{
  color:
    #9f8dff;

  font-size:
    13px;
}


/* =========================================================
   COMING SOON
========================================================= */

.game-account-card.upcoming{
  opacity:
    .76;
}


.game-account-coming-soon{
  margin-top:
    9px;

  padding:
    8px 10px;

  display:flex;

  align-items:center;

  gap:9px;

  border:
    1px dashed #2b3b55;

  border-radius:
    9px;

  background:
    rgba(10,17,28,.45);
}


.game-account-coming-soon > span{
  width:25px;
  height:25px;

  flex:
    0 0 25px;

  display:grid;

  place-items:center;

  border-radius:
    8px;

  background:
    #172337;

  color:
    #8492a8;
}


.game-account-coming-soon strong{
  display:block;

  color:
    #b1bdcf;

  font-size:
    9px;
}


.game-account-coming-soon small{
  display:block;

  margin-top:
    2px;

  color:
    #66758b;

  font-size:
    8px;
}


/* =========================================================
   TOP BUTTON HIGHLIGHT
========================================================= */

.game-accounts-panel{
  transition:
    box-shadow .25s ease,
    border-color .25s ease;
}


.game-accounts-panel.game-accounts-highlight{
  border-color:
    #745cff !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(116,92,255,.23),
    0 0 28px
    rgba(116,92,255,.12) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .game-accounts-hub{
    min-height:0;
  }


  .game-account-status{
    display:none;
  }

}


/* ROKSS_GAME_ACCOUNTS_HUB_CSS_V1 END */


/* =========================================================
   ROKSS_GAME_ACCOUNTS_POLISH_CSS_V2
========================================================= */

.game-account-icon.rokss-game-real-icon{
  padding:0 !important;

  overflow:hidden !important;

  background:
    transparent !important;

  border-color:
    rgba(221,165,54,.45) !important;

  box-shadow:
    0 0 14px
    rgba(221,165,54,.12) !important;
}


.rokss-game-mini-svg{
  width:100% !important;
  height:100% !important;

  display:block !important;

  border-radius:
    10px !important;
}


/* ROKSS_GAME_ACCOUNTS_POLISH_CSS_V2 END */

/* =========================================================
   ROKSS REAL ROK IMAGE CSS V1
========================================================= */

.game-account-icon.rokss-real-rok-image{
  padding:0 !important;

  overflow:hidden !important;

  background:
    #0b111b !important;

  border:
    1px solid rgba(232,181,65,.48) !important;

  border-radius:
    10px !important;

  box-shadow:
    0 0 14px rgba(221,165,54,.12) !important;
}


.game-account-icon.rokss-real-rok-image img{
  width:100% !important;
  height:100% !important;

  display:block !important;

  object-fit:cover !important;

  object-position:center !important;

  border-radius:
    9px !important;
}


/* ROKSS REAL ROK IMAGE CSS V1 END */


/* =========================================================
   ROKSS_PROFILE_HERO_TIGHTEN_V1
   - Sol üst profil yazılarını avatara yaklaştır
   - Sağ üst butonlar yanındaki/üstündeki çizgi görünümünü kaldır
========================================================= */

.personal-hero{
  align-items:center !important;
}

.personal-hero .profile-identity{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  align-items:center !important;
  column-gap:14px !important;
  row-gap:0 !important;
  min-width:0 !important;
}

.personal-hero .profile-identity > div:last-child{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:2px !important;
  margin:0 !important;
  padding:0 !important;
  min-width:0 !important;
}

.personal-hero .profile-identity .eyebrow{
  margin:0 0 2px 0 !important;
}

.personal-hero .profile-identity h1,
.personal-hero .profile-identity #profileDisplayName{
  margin:0 !important;
  line-height:1.02 !important;
}

.personal-hero .profile-identity p,
.personal-hero .profile-identity #profileHandle,
.personal-hero .profile-identity .profile-subline,
.personal-hero .profile-identity .profile-meta,
.personal-hero .profile-identity .profile-id-row,
.personal-hero .profile-identity .profile-meta-row{
  margin:0 !important;
}

.personal-hero .profile-identity #profileHandle{
  margin-top:1px !important;
}

.personal-hero .profile-identity .profile-id-row,
.personal-hero .profile-identity .profile-meta-row{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:5px !important;
}

.personal-hero .profile-identity .avatar.xl,
.personal-hero .profile-identity #profileAvatar{
  margin:0 !important;
  flex:0 0 auto !important;
}

/* Sağ üst buton alanı */
.personal-hero .profile-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:auto !important;
  position:relative !important;
}

/* Çizgi / dash / ayırıcı / pseudo element temizliği */
.personal-hero .profile-actions::before,
.personal-hero .profile-actions::after,
.personal-hero .profile-actions hr{
  content:none !important;
  display:none !important;
  border:0 !important;
  width:0 !important;
  height:0 !important;
}

.personal-hero .profile-actions > .divider,
.personal-hero .profile-actions > .line,
.personal-hero .profile-actions > .separator,
.personal-hero .profile-actions > [class*="divider"],
.personal-hero .profile-actions > [class*="separator"],
.personal-hero .profile-actions > [class*="line"]{
  display:none !important;
}

.personal-hero .profile-actions > *{
  margin:0 !important;
}

/* Eğer butonları saran ek container varsa onu da temizle */
.personal-hero .profile-actions-wrap,
.personal-hero .hero-actions,
.personal-hero .profile-right{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

.personal-hero .profile-actions-wrap::before,
.personal-hero .profile-actions-wrap::after,
.personal-hero .hero-actions::before,
.personal-hero .hero-actions::after,
.personal-hero .profile-right::before,
.personal-hero .profile-right::after{
  content:none !important;
  display:none !important;
}

@media (max-width:900px){
  .personal-hero .profile-identity{
    grid-template-columns:70px minmax(0,1fr) !important;
    column-gap:12px !important;
  }

  .personal-hero .profile-actions{
    width:100% !important;
    justify-content:flex-start !important;
    margin-top:12px !important;
  }
}

/* ROKSS_PROFILE_HERO_TIGHTEN_V1 END */

/* =========================================================
   ROKSS_PROFILE_IDENTITY_TIGHT_V2
========================================================= */

.personal-hero .profile-identity{
  display:flex !important;

  align-items:center !important;

  justify-content:flex-start !important;

  gap:8px !important;

  column-gap:8px !important;

  row-gap:0 !important;

  margin:0 !important;
  padding:0 !important;
}


.personal-hero
.profile-identity
> div:last-child{
  display:flex !important;

  flex-direction:column !important;

  align-items:flex-start !important;

  justify-content:center !important;

  gap:0 !important;

  margin:0 !important;
  padding:0 !important;

  transform:
    translateX(-2px);
}


.personal-hero
.profile-identity
.avatar.xl,
.personal-hero
.profile-identity
#profileAvatar{
  margin:0 !important;

  padding:0 !important;

  flex:
    0 0 auto !important;
}


.personal-hero
.profile-identity
.eyebrow{
  margin:
    0 0 2px 0 !important;

  padding:0 !important;

  line-height:
    1.05 !important;
}


.personal-hero
.profile-identity
h1,
.personal-hero
.profile-identity
#profileDisplayName{
  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    1.02 !important;
}


.personal-hero
.profile-identity
#profileHandle{
  margin:
    3px 0 0 0 !important;

  padding:
    0 !important;

  line-height:
    1.1 !important;
}


.personal-hero
.profile-identity
.profile-id-row,
.personal-hero
.profile-identity
.profile-meta-row{
  margin:
    5px 0 0 0 !important;

  padding:
    0 !important;

  gap:
    5px !important;

  line-height:
    1.05 !important;
}


/* ROKSS_PROFILE_IDENTITY_TIGHT_V2 END */

/* =========================================================
   ROKSS_TOP_VIP_SHORTCUT_CSS_V1
========================================================= */

.top-actions
.top-vip-shortcut{
  color:#fff !important;

  border-color:
    rgba(137,93,255,.52) !important;

  background:
    linear-gradient(
      135deg,
      #5e6cff,
      #8a42eb
    ) !important;

  box-shadow:
    0 8px 22px
    rgba(106,78,239,.20) !important;
}


.top-actions
.top-vip-shortcut:hover{
  transform:
    translateY(-1px);

  box-shadow:
    0 10px 27px
    rgba(106,78,239,.30) !important;
}


/* ROKSS_TOP_VIP_SHORTCUT_CSS_V1 END */

/* =========================================================
   ROKSS_SERVER_VIP_COMPARE_CSS_V1
========================================================= */


/* DAVET SOLUNDAKI BUTTON */

.server-vip-shortcut-btn{
  height:40px;

  padding:
    0 14px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:7px;

  border:
    1px solid rgba(223,172,61,.36);

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      rgba(190,130,28,.15),
      rgba(111,71,25,.10)
    );

  color:
    #f3c65a;

  font-weight:
    850;

  cursor:pointer;

  transition:
    .15s ease;
}


.server-vip-shortcut-btn span{
  font-size:
    13px;
}


.server-vip-shortcut-btn:hover{
  transform:
    translateY(-1px);

  border-color:
    rgba(243,195,82,.60);

  background:
    linear-gradient(
      135deg,
      rgba(209,149,34,.23),
      rgba(120,72,28,.16)
    );

  box-shadow:
    0 8px 24px
    rgba(209,149,34,.10);
}


/* =========================================================
   MODAL
========================================================= */

.server-vip-compare-backdrop{
  position:fixed;

  inset:0;

  z-index:5000;

  display:grid;

  place-items:center;

  padding:
    28px;

  background:
    rgba(3,7,13,.78);

  backdrop-filter:
    blur(10px);
}


.server-vip-compare-backdrop.hidden{
  display:none !important;
}


.server-vip-compare-modal{
  width:
    min(920px,96vw);

  max-height:
    92vh;

  overflow:auto;

  border:
    1px solid #2b3851;

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      #111b2b,
      #0a111d
    );

  box-shadow:
    0 34px 100px
    rgba(0,0,0,.48);
}


/* HEADER */

.server-vip-compare-head{
  padding:
    24px 26px;

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:20px;

  border-bottom:
    1px solid #202e43;

  background:
    radial-gradient(
      circle at 78% 0%,
      rgba(137,86,255,.12),
      transparent 35%
    );
}


.server-vip-compare-head h2{
  margin:
    5px 0 5px;

  font-size:
    28px;
}


.server-vip-compare-head p{
  margin:0;

  max-width:
    570px;

  color:
    #8190a7;

  font-size:
    11px;

  line-height:
    1.5;
}


.server-vip-close{
  width:38px;
  height:38px;

  flex:
    0 0 38px;

  display:grid;

  place-items:center;

  border:
    1px solid #2b3b55;

  border-radius:
    11px;

  background:
    #111a2a;

  color:
    #aeb9ca;

  font-size:
    20px;

  cursor:pointer;
}


/* =========================================================
   PLANS
========================================================= */

.server-vip-compare-grid{
  padding:
    22px;

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    16px;
}


.server-vip-plan{
  position:relative;

  padding:
    21px;

  border:
    1px solid #293850;

  border-radius:
    17px;

  background:
    #0f1827;
}


.server-vip-plan.vip{
  border-color:
    rgba(227,174,57,.48);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(235,174,46,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #171b25,
      #101620
    );

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.20);
}


.server-vip-popular{
  position:absolute;

  right:16px;
  top:16px;

  padding:
    5px 8px;

  border:
    1px solid rgba(241,191,75,.35);

  border-radius:
    999px;

  background:
    rgba(241,191,75,.08);

  color:
    #f2c458;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.server-vip-plan-head{
  display:flex;

  align-items:center;

  gap:
    11px;
}


.server-vip-plan-icon{
  width:42px;
  height:42px;

  display:grid;

  place-items:center;

  border:
    1px solid #314159;

  border-radius:
    12px;

  background:
    #152033;

  color:
    #9eabc0;

  font-size:
    19px;
}


.server-vip-plan-icon.vip{
  border-color:
    rgba(239,185,61,.35);

  background:
    rgba(219,158,31,.10);

  color:
    #f2c250;
}


.server-vip-plan-kicker{
  color:
    #718098;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .13em;
}


.server-vip-plan h3{
  margin:
    3px 0 0;

  font-size:
    18px;
}


.server-vip-price{
  height:
    56px;

  margin:
    20px 0 16px;

  display:flex;

  align-items:flex-end;

  gap:
    5px;

  color:
    #f4c55b;
}


.server-vip-price strong{
  font-size:
    34px;

  line-height:
    1;
}


.server-vip-price span{
  padding-bottom:
    4px;

  color:
    #7f8da1;

  font-size:
    11px;
}


.server-vip-price.free{
  align-items:center;

  color:
    #d7dfeb;

  font-size:
    26px;

  font-weight:
    900;
}


/* FEATURES */

.server-vip-feature-list{
  display:grid;

  gap:
    7px;
}


.server-vip-feature-list > div{
  min-height:
    35px;

  padding:
    8px 9px;

  display:grid;

  grid-template-columns:
    22px minmax(0,1fr);

  align-items:center;

  gap:
    7px;

  border:
    1px solid #202e43;

  border-radius:
    10px;

  background:
    #0d1624;

  color:
    #9aa8ba;

  font-size:
    10px;
}


.server-vip-feature-list i{
  width:20px;
  height:20px;

  display:grid;

  place-items:center;

  border-radius:
    7px;

  font-style:normal;

  font-weight:
    900;
}


.server-vip-feature-list .ok i{
  background:
    rgba(62,210,145,.10);

  color:
    #5cdaa4;
}


.server-vip-feature-list .no{
  opacity:
    .52;
}


.server-vip-feature-list .no i{
  background:
    rgba(255,90,110,.08);

  color:
    #d06a78;
}


.server-vip-feature-list .premium{
  border-color:
    rgba(231,177,54,.16);
}


/* BUY */

.server-vip-buy-button{
  width:100%;

  min-height:
    46px;

  margin-top:
    16px;

  padding:
    0 14px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:
    8px;

  border:
    1px solid rgba(240,187,62,.42);

  border-radius:
    12px;

  background:
    linear-gradient(
      135deg,
      #d49a26,
      #7651ef
    );

  color:#fff;

  font-weight:
    900;

  cursor:pointer;

  box-shadow:
    0 12px 28px
    rgba(166,113,43,.18);
}


.server-vip-buy-button b{
  margin-left:
    auto;

  font-size:
    10px;
}


/* FOOTER */

.server-vip-compare-footer{
  padding:
    0 22px 22px;

  text-align:center;

  color:
    #65748b;

  font-size:
    9px;
}


.server-vip-purchase-highlight{
  border-color:
    #d8a838 !important;

  box-shadow:
    0 0 0 1px
    rgba(216,168,56,.25),
    0 0 28px
    rgba(216,168,56,.16) !important;
}


@media(max-width:750px){

  .server-vip-compare-grid{
    grid-template-columns:
      1fr;
  }

}


/* ROKSS_SERVER_VIP_COMPARE_CSS_V1 END */

/* =========================================================
   ROKSS_LOCKED_SHOWROOM_CSS_V1
========================================================= */

.locked-showroom-nav-wrap{
  order:-100;

  padding:
    13px 10px 14px;

  margin:
    0 0 10px;

  border-bottom:
    1px solid #202c40;
}


.locked-showroom-title-row{
  min-height:
    17px;

  margin:
    0 2px 7px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;

  color:
    #718098;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .13em;
}


.locked-showroom-vip-badge{
  padding:
    3px 6px;

  border:
    1px solid
    rgba(237,181,55,.30);

  border-radius:
    999px;

  background:
    rgba(237,181,55,.08);

  color:
    #eebd4d;

  font-size:
    7px;

  letter-spacing:
    .08em;
}


.locked-showroom-nav-button{
  width:100%;

  min-height:
    43px;

  padding:
    0 10px;

  display:grid;

  grid-template-columns:
    27px minmax(0,1fr) 28px;

  align-items:center;

  gap:
    7px;

  border:
    1px solid
    rgba(235,180,55,.23);

  border-radius:
    11px;

  background:
    linear-gradient(
      135deg,
      rgba(216,157,40,.08),
      rgba(18,27,42,.85)
    );

  color:
    #aab4c4;

  text-align:left;

  cursor:pointer;

  transition:
    .15s ease;
}


.locked-showroom-nav-button:hover{
  border-color:
    rgba(239,186,66,.48);

  background:
    linear-gradient(
      135deg,
      rgba(222,160,38,.14),
      rgba(25,33,50,.95)
    );

  color:
    #edf1f7;

  transform:
    translateY(-1px);
}


.locked-showroom-symbol{
  width:25px;
  height:25px;

  display:grid;

  place-items:center;

  border-radius:
    8px;

  background:
    linear-gradient(
      145deg,
      rgba(214,156,41,.24),
      rgba(116,77,203,.22)
    );

  color:
    #e9b84f;

  font-size:
    11px;
}


.locked-showroom-name{
  overflow:hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    13px;

  font-weight:
    850;
}


.locked-showroom-lock{
  width:26px;
  height:26px;

  display:grid;

  place-items:center;

  justify-self:end;

  border:
    1px solid
    rgba(239,185,58,.22);

  border-radius:
    8px;

  background:
    rgba(232,170,38,.07);

  font-size:
    11px;

  filter:
    grayscale(.15);
}


.locked-showroom-nav-button:hover
.locked-showroom-lock{
  border-color:
    rgba(239,185,58,.42);

  background:
    rgba(232,170,38,.12);
}


/* ROKSS_LOCKED_SHOWROOM_CSS_V1 END */

/* =========================================================
   ROKSS STORE CSS V1
========================================================= */

.rokss-store-view{
  overflow-y:auto;
}


.rokss-store-shell{
  display:grid;

  gap:18px;
}


/* HERO */

.rokss-store-hero{
  min-height:125px;

  padding:
    24px 27px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(122,82,255,.16),
      transparent 35%
    ),
    linear-gradient(
      115deg,
      #121b2b,
      #101726
    );
}


.rokss-store-hero h1{
  margin:
    5px 0 5px;

  font-size:
    30px;
}


.rokss-store-hero p{
  margin:0;

  color:
    #8290a5;

  font-size:
    11px;
}


.rokss-store-hero-icon{
  width:55px;
  height:55px;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(126,94,255,.34);

  border-radius:
    17px;

  background:
    rgba(111,78,225,.10);

  color:
    #a88cff;

  font-size:
    27px;
}


/* SECTION */

.rokss-store-section{
  padding:
    21px;

  border:
    1px solid #23324a;

  border-radius:
    17px;

  background:
    linear-gradient(
      180deg,
      rgba(17,25,39,.98),
      rgba(11,17,28,.98)
    );
}


.rokss-store-section-head{
  margin-bottom:
    16px;
}


.rokss-store-section-head h2{
  margin:
    4px 0;

  font-size:
    21px;
}


.rokss-store-section-head p{
  margin:0;

  color:
    #78879e;

  font-size:
    10px;
}


/* GRID */

.rokss-store-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(230px,1fr)
    );

  gap:
    12px;
}


/* PRODUCT */

.rokss-store-product{
  min-width:0;

  overflow:hidden;

  border:
    1px solid #283852;

  border-radius:
    15px;

  background:
    #0e1725;

  transition:
    .15s ease;
}


.rokss-store-product:hover{
  transform:
    translateY(-2px);

  border-color:
    #40577d;
}


.rokss-store-product-preview{
  min-height:
    125px;

  padding:
    17px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  background:
    radial-gradient(
      circle,
      rgba(111,83,218,.10),
      transparent 65%
    );
}


.rokss-store-product-body{
  padding:
    14px;

  border-top:
    1px solid #202e43;
}


.rokss-store-category{
  color:
    #738198;

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .13em;
}


.rokss-store-product h3{
  margin:
    5px 0 5px;

  font-size:
    14px;
}


.rokss-store-product p{
  min-height:
    34px;

  margin:
    0;

  color:
    #75849a;

  font-size:
    9px;

  line-height:
    1.45;
}


.rokss-store-product-footer{
  margin-top:
    13px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;
}


.rokss-store-price{
  color:
    #f3c55c;

  font-size:
    18px;
}


.rokss-store-buy{
  height:
    34px;

  padding:
    0 13px;

  border:
    1px solid #664fe2;

  border-radius:
    9px;

  background:
    linear-gradient(
      135deg,
      #5268ed,
      #8147e9
    );

  color:#fff;

  font-size:
    9px;

  font-weight:
    900;

  cursor:pointer;
}


/* =========================================================
   FRAMES
========================================================= */

.rokss-store-avatar-preview{
  width:77px;
  height:77px;

  padding:5px;

  display:grid;

  place-items:center;

  border-radius:
    22px;
}


.rokss-store-avatar-inner{
  width:100%;
  height:100%;

  display:grid;

  place-items:center;

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      #10255a,
      #070b18
    );

  color:#fff;

  font-size:
    31px;

  font-weight:
    900;
}


.rokss-store-frame-neon{
  background:
    linear-gradient(
      135deg,
      #6959ff,
      #c34cff,
      #36b9ff
    );

  box-shadow:
    0 0 21px
    rgba(135,75,255,.35);
}


.rokss-store-frame-gold{
  background:
    linear-gradient(
      135deg,
      #805319,
      #ffd66c,
      #b9781d,
      #fff1a0
    );

  box-shadow:
    0 0 21px
    rgba(226,171,56,.25);
}


.rokss-store-frame-ice{
  background:
    linear-gradient(
      135deg,
      #256bd9,
      #93eaff,
      #6d84ff
    );

  box-shadow:
    0 0 21px
    rgba(77,173,255,.27);
}


/* =========================================================
   NAME COLORS
========================================================= */

.rokss-name-color-preview{
  font-size:
    24px;

  font-weight:
    900;

  text-shadow:
    0 0 14px
    currentColor;
}


.rokss-name-color-preview.name-red{
  color:#ff5f68;
}


.rokss-name-color-preview.name-purple{
  color:#b273ff;
}


.rokss-name-color-preview.name-blue{
  color:#61a8ff;
}


.rokss-name-color-preview.name-gold{
  color:#f0bd4e;
}


.rokss-name-color-preview.name-green{
  color:#55daa0;
}


.rokss-store-color-example{
  margin-top:
    7px;

  color:
    #65748a;

  font-size:
    8px;
}


/* NOTE */

.rokss-store-note{
  padding:
    13px 15px;

  display:flex;

  align-items:center;

  gap:9px;

  border:
    1px solid #263650;

  border-radius:
    12px;

  background:
    #0d1624;

  color:
    #8290a6;

  font-size:
    9px;
}


.rokss-store-note p{
  margin:0;
}


@media(max-width:800px){

  .rokss-store-grid{
    grid-template-columns:
      1fr;
  }

}


/* ROKSS STORE CSS V1 END */

/* =========================================================
   ROKSS_STORE_TOPBAR_POSITION_CSS_V2
========================================================= */


/*
 * Ana nav + ayrı Mağaza butonu
 */

.top-nav-store-wrap{
  min-width:0;

  display:grid;

  grid-template-columns:
    minmax(0,1fr) auto;

  align-items:center;

  gap:9px;
}


/*
 * Eski 3'lü navigasyon bozulmasın.
 */

.top-nav-store-wrap
.top-tabs{
  width:100%;

  min-width:0;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;
}


/* =========================================================
   AYRI MAĞAZA KUTUSU
========================================================= */

.top-store-shortcut{
  width:auto !important;

  min-width:112px !important;

  height:52px !important;

  padding:
    0 15px !important;

  flex:none !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:8px !important;

  border:
    1px solid #283852 !important;

  border-radius:
    16px !important;

  background:
    linear-gradient(
      180deg,
      #121b2a,
      #0e1624
    ) !important;

  color:
    #aab5c6 !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;

  white-space:
    nowrap !important;

  cursor:pointer !important;

  box-shadow:
    none !important;

  transition:
    .15s ease !important;
}


.top-store-bag{
  display:inline-grid !important;

  place-items:center !important;

  width:21px !important;
  height:21px !important;

  color:
    #9a82ff !important;

  font-family:
    "Segoe UI Emoji",
    "Apple Color Emoji",
    sans-serif !important;

  font-size:
    16px !important;

  line-height:
    1 !important;
}


.top-store-shortcut:hover{
  color:#fff !important;

  border-color:
    #574b91 !important;

  background:
    linear-gradient(
      180deg,
      #192238,
      #151d31
    ) !important;

  transform:
    translateY(-1px);
}


.top-store-shortcut.active{
  color:#fff !important;

  border-color:
    #6756bc !important;

  background:
    linear-gradient(
      180deg,
      #211f3c,
      #171c31
    ) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(125,97,255,.12) !important;
}


/*
 * Mağaza artık top-tabs grid hücresi değil.
 */
.top-tabs
.top-store-shortcut{
  display:none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1150px){

  .top-store-shortcut{
    min-width:52px !important;

    width:52px !important;

    padding:0 !important;
  }


  .top-store-shortcut > span:last-child{
    display:none !important;
  }

}


@media(max-width:900px){

  .top-nav-store-wrap{
    grid-template-columns:
      minmax(0,1fr) 52px;
  }

}


/* ROKSS_STORE_TOPBAR_POSITION_CSS_V2 END */

/* =========================================================
   ROKSS_STORE_ICON_CSS_V3
========================================================= */

.top-store-shortcut{
  height:52px !important;

  min-width:112px !important;

  padding:
    0 15px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:8px !important;

  cursor:pointer !important;

  pointer-events:auto !important;

  user-select:none !important;
}


.top-store-icon{
  width:20px !important;
  height:20px !important;

  flex:
    0 0 20px !important;

  display:grid !important;

  place-items:center !important;

  color:
    #8176ff !important;

  pointer-events:none !important;
}


.top-store-icon svg{
  width:19px !important;
  height:19px !important;

  display:block !important;

  overflow:visible !important;

  pointer-events:none !important;
}


.top-store-label{
  display:inline-block !important;

  color:
    inherit !important;

  pointer-events:none !important;
}


/*
 * Ayarlar ikonuna yakın sade görünüm
 */

.top-store-shortcut:hover
.top-store-icon{
  color:
    #9b8cff !important;
}


.top-store-shortcut.active
.top-store-icon{
  color:
    #a18cff !important;
}


/*
 * Eski emoji ikonunu tamamen kaldır.
 */

.top-store-bag{
  display:none !important;
}


@media(max-width:1150px){

  .top-store-shortcut{
    min-width:52px !important;
    width:52px !important;

    padding:0 !important;
  }


  .top-store-label{
    display:none !important;
  }

}


/* ROKSS_STORE_ICON_CSS_V3 END */

/* =========================================================
   ROKSS_STORE_STABLE_VISUAL_V5
========================================================= */

.top-store-shortcut{
  width:112px !important;
  height:48px !important;

  min-width:112px !important;

  padding:
    0 14px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  gap:8px !important;

  transform:
    none !important;

  cursor:
    pointer !important;

  pointer-events:
    auto !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


.top-store-shortcut:hover,
.top-store-shortcut.active{
  transform:
    none !important;
}


/* Ayarlar ikonuna yakın mavi/mor çizgi icon */

.top-store-icon-stable{
  width:19px !important;
  height:19px !important;

  flex:
    0 0 19px !important;

  display:grid !important;

  place-items:center !important;

  color:
    #756cff !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  pointer-events:
    none !important;
}


.top-store-icon-stable svg{
  width:18px !important;
  height:18px !important;

  display:block !important;

  opacity:
    1 !important;

  visibility:
    visible !important;

  overflow:
    visible !important;

  pointer-events:
    none !important;
}


.top-store-label-stable{
  display:inline-block !important;

  color:
    inherit !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;

  white-space:
    nowrap !important;

  pointer-events:
    none !important;
}


/*
 * Önceki mağaza icon sürümlerini gizle.
 */

.top-store-bag,
.top-store-icon,
.top-store-label{
  display:
    none !important;
}


/* ROKSS_STORE_STABLE_VISUAL_V5 END */


/* =========================================================
   ROKSS_HOME_LINE_ICON_V10
========================================================= */

#serverDiscoverHomeBtn{
  position:relative !important;

  width:48px !important;
  height:48px !important;

  min-width:48px !important;
  min-height:48px !important;

  flex:0 0 48px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:
    1px solid #29384f !important;

  border-radius:
    15px !important;

  background:
    #0f1725 !important;

  background-image:
    none !important;

  color:
    #8390a8 !important;

  font-size:0 !important;

  overflow:hidden !important;

  cursor:pointer !important;

  box-shadow:none !important;

  transition:
    .15s ease !important;
}


/*
 * Önceki 🏠 pseudo elementlerini tamamen kapat.
 */
#serverDiscoverHomeBtn::before,
#serverDiscoverHomeBtn::after,
#serverDiscoverHomeBtn.active::before,
#serverDiscoverHomeBtn.active::after,
#serverDiscoverHomeBtn:hover::before,
#serverDiscoverHomeBtn:hover::after{
  content:none !important;
  display:none !important;
}


/*
 * Sadece yeni SVG görünsün.
 */
#serverDiscoverHomeBtn > *{
  display:none !important;
}


#serverDiscoverHomeBtn
> .server-home-line-icon{
  display:block !important;

  width:21px !important;
  height:21px !important;

  fill:none !important;

  stroke:
    currentColor !important;

  stroke-width:
    1.8 !important;

  stroke-linecap:
    round !important;

  stroke-linejoin:
    round !important;

  pointer-events:none !important;
}


/* Hover */

#serverDiscoverHomeBtn:hover{
  color:
    #a896ff !important;

  border-color:
    rgba(117,92,255,.55) !important;

  background:
    rgba(108,82,225,.08) !important;
}


/* Ana sayfa seçiliyken */

#serverDiscoverHomeBtn.active{
  color:
    #8f72ff !important;

  border-color:
    #725cff !important;

  background:
    linear-gradient(
      145deg,
      rgba(90,81,180,.20),
      rgba(78,48,150,.17)
    ) !important;

  box-shadow:
    0 0 0 1px
    rgba(117,92,255,.12),
    0 0 17px
    rgba(117,92,255,.12) !important;
}


/* ROKSS_HOME_LINE_ICON_V10 END */

/* =========================================================
   ROKSS HOME LINE ICON VISIBILITY FIX V11
========================================================= */

/*
 * Eski V8'de kalan visibility:hidden / opacity:0
 * kurallarını sadece gerçek HOME SVG için eziyoruz.
 */

#serverDiscoverHomeBtn
> .server-home-line-icon{
  display:block !important;

  visibility:visible !important;
  opacity:1 !important;

  position:relative !important;
  z-index:50 !important;

  width:21px !important;
  height:21px !important;

  margin:0 !important;
  padding:0 !important;

  fill:none !important;

  stroke:currentColor !important;
  stroke-width:1.8 !important;

  stroke-linecap:round !important;
  stroke-linejoin:round !important;

  transform:none !important;

  pointer-events:none !important;
}


/*
 * Home aktif/pasif her durumda SVG görünür.
 */

#serverDiscoverHomeBtn.active
> .server-home-line-icon,

#serverDiscoverHomeBtn:hover
> .server-home-line-icon{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/*
 * Eski background/avatar kesinlikle geri gelmesin.
 */

#serverDiscoverHomeBtn{
  background-image:none !important;
}


/* ROKSS HOME LINE ICON VISIBILITY FIX V11 END */

/* ROKSS HOME ICON SIZE V12 */

#serverDiscoverHomeBtn > .server-home-line-icon,
#serverDiscoverHomeBtn.active > .server-home-line-icon,
#serverDiscoverHomeBtn:hover > .server-home-line-icon{
  width:25px !important;
  height:25px !important;

  stroke-width:1.9 !important;
}

/* ROKSS HOME ICON SIZE V12 END */


/* =========================================================
   ROKSS_TEXT_COLOR_CSS_V2
========================================================= */


/* STORE PREVIEW */

.rokss-text-color-preview{
  min-height:76px;

  display:flex;

  align-items:center;
  justify-content:center;

  padding:0 18px;

  font-size:17px;
  font-weight:800;

  text-align:center;
}


/* KIRMIZI */

.rokss-text-color-preview.red,
.rokss-text-color-preview.name-red,
.rokss-text-color-preview.text-red,
.message-text-red{
  color:#ff626d !important;

  text-shadow:
    0 0 11px
    rgba(255,98,109,.24);
}


/* MOR */

.rokss-text-color-preview.purple,
.rokss-text-color-preview.name-purple,
.rokss-text-color-preview.text-purple,
.message-text-purple{
  color:#aa70ff !important;

  text-shadow:
    0 0 11px
    rgba(170,112,255,.24);
}


/* MAVİ */

.rokss-text-color-preview.blue,
.rokss-text-color-preview.name-blue,
.rokss-text-color-preview.text-blue,
.message-text-blue{
  color:#62adff !important;

  text-shadow:
    0 0 11px
    rgba(98,173,255,.22);
}


/* ALTIN */

.rokss-text-color-preview.gold,
.rokss-text-color-preview.name-gold,
.rokss-text-color-preview.text-gold,
.message-text-gold{
  color:#f7c64b !important;

  text-shadow:
    0 0 11px
    rgba(247,198,75,.22);
}


/* YEŞİL */

.rokss-text-color-preview.green,
.rokss-text-color-preview.name-green,
.rokss-text-color-preview.text-green,
.message-text-green{
  color:#52dda5 !important;

  text-shadow:
    0 0 11px
    rgba(82,221,165,.22);
}


/*
 * Renk SADECE mesaj metnine uygulanır.
 * Kullanıcı adı normal rol rengini kullanmaya devam eder.
 */

.message-body > p.message-text{
  transition:
    color .15s ease,
    text-shadow .15s ease;
}


/* ROKSS_TEXT_COLOR_CSS_V2 END */


/* =========================================================
   ROKSS_APPEARANCE_SETTINGS_CSS_V1
========================================================= */

.rokss-appearance-settings{
  align-self:start;
}


.rokss-appearance-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;

  margin-bottom:26px;
}


.rokss-appearance-head h1{
  margin:8px 0 7px;

  font-size:30px;
}


.rokss-appearance-head p,
.rokss-appearance-section-head p{
  margin:0;

  color:#7d8ba3;

  font-size:11px;

  line-height:1.5;
}


.rokss-appearance-vip{
  padding:7px 12px;

  border:
    1px solid rgba(245,192,74,.35);

  border-radius:999px;

  background:
    rgba(245,192,74,.08);

  color:#f4c04d;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;
}


.rokss-appearance-section{
  padding-top:21px;

  margin-top:21px;

  border-top:
    1px solid #25334a;
}


.rokss-appearance-section:first-of-type{
  margin-top:0;
}


.rokss-appearance-section-head{
  margin-bottom:14px;
}


.rokss-appearance-section-head h2{
  margin:5px 0 5px;

  font-size:18px;
}


.rokss-appearance-grid{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:11px;
}


.rokss-appearance-grid.color-grid{
  grid-template-columns:
    repeat(6,minmax(0,1fr));
}


.rokss-appearance-card{
  min-width:0;

  padding:13px;

  border:
    1px solid #283951;

  border-radius:13px;

  background:#0f1929;

  color:#fff;

  text-align:left;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    opacity .15s ease,
    transform .15s ease;
}


.rokss-appearance-card:hover{
  transform:
    translateY(-1px);

  border-color:#6555cf;

  background:#131e31;
}


.rokss-appearance-card.locked{
  opacity:.42;

  filter:
    grayscale(.55);
}


.rokss-appearance-card.locked:hover{
  opacity:.68;

  filter:
    grayscale(.25);
}


.rokss-appearance-card.selected{
  border-color:#735cff;

  background:
    linear-gradient(
      145deg,
      rgba(92,77,190,.18),
      rgba(29,37,63,.95)
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(116,92,255,.14),
    0 0 20px
    rgba(116,92,255,.08);
}


.rokss-appearance-preview{
  min-height:82px;

  display:grid;

  place-items:center;

  margin-bottom:11px;
}


.rokss-appearance-preview
.rokss-store-avatar-preview{
  transform:
    scale(.86);
}


.rokss-appearance-card-info{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:8px;
}


.rokss-appearance-card-info strong{
  font-size:11px;
}


.rokss-appearance-card-info span{
  color:#8c9ab0;

  font-size:8px;

  white-space:nowrap;
}


.rokss-appearance-card.selected
.rokss-appearance-card-info span{
  color:#a998ff;
}


.rokss-appearance-default-preview{
  min-height:82px;

  display:grid;
  place-items:center;

  margin-bottom:11px;

  border:
    1px dashed #34445b;

  border-radius:12px;

  color:#76859c;

  font-size:25px;
}


.rokss-appearance-color-preview{
  min-height:70px;

  display:grid;

  place-items:center;

  text-align:center;

  font-size:12px;

  font-weight:800;
}


.rokss-appearance-color-preview.text-red{
  color:#ff626d;
}


.rokss-appearance-color-preview.text-purple{
  color:#aa70ff;
}


.rokss-appearance-color-preview.text-blue{
  color:#62adff;
}


.rokss-appearance-color-preview.text-gold{
  color:#f7c64b;
}


.rokss-appearance-color-preview.text-green{
  color:#52dda5;
}


.rokss-appearance-note{
  margin-top:22px;

  padding:13px 15px;

  display:flex;

  gap:11px;

  align-items:center;

  border:
    1px solid rgba(117,92,255,.22);

  border-radius:12px;

  background:
    rgba(117,92,255,.055);
}


.rokss-appearance-note > span{
  color:#927cff;

  font-size:20px;
}


.rokss-appearance-note strong{
  display:block;

  font-size:10px;
}


.rokss-appearance-note p{
  margin:3px 0 0;

  color:#7d8ba3;

  font-size:9px;
}


.rokss-settings-vip-item{
  position:relative;
}


.rokss-store-product-highlight{
  border-color:#725cff !important;

  box-shadow:
    0 0 0 1px
    rgba(114,92,255,.22),
    0 0 30px
    rgba(114,92,255,.20) !important;
}


@media(max-width:1200px){

  .rokss-appearance-grid,
  .rokss-appearance-grid.color-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


@media(max-width:760px){

  .rokss-appearance-grid,
  .rokss-appearance-grid.color-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ROKSS_APPEARANCE_SETTINGS_CSS_V1 END */


/* =========================================================
   ROKSS_FINAL_MOBILE_APP_V1
   En sonda bilerek duruyor.
   Eski responsive katmanların üstüne yazar.
========================================================= */

@media (max-width:900px){

  html,
  body{
    width:100%;
    max-width:100%;
    min-width:0 !important;
    overflow-x:hidden !important;
  }

  *{
    box-sizing:border-box;
  }


  /* ==============================
     ANA SHELL
  ============================== */

  .app-shell,
  .app-shell.servers-mode{
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    height:auto !important;
    min-height:100dvh !important;
  }


  /*
   * Desktop sunucu rail'i mobilde
   * kesinlikle görünmeyecek.
   */

  .app-rail,
  .app-shell.servers-mode .app-rail{
    display:none !important;
  }


  .shell-main,
  .app-shell.servers-mode .shell-main{
    display:flex !important;
    flex-direction:column !important;

    grid-column:1 !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }


  /* ==============================
     TOP BAR
  ============================== */

  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:80 !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap:8px !important;

    padding:
      max(8px,env(safe-area-inset-top))
      10px
      8px !important;

    overflow:visible !important;

    background:
      rgba(8,13,22,.96) !important;

    backdrop-filter:
      blur(18px) !important;
  }


  .brand-wordmark{
    max-width:210px;
    min-width:0;
  }


  /*
   * Desktop action butonları mobilde
   * üst barı şişirmesin.
   */

  .top-actions{
    display:none !important;
  }


  /* ==============================
     3 ANA SEKME + MAĞAZA
  ============================== */

  .top-nav-store-wrap{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      48px !important;

    align-items:stretch !important;

    gap:7px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
  }


  .top-tabs{
    display:grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    width:100% !important;
    min-width:0 !important;

    height:48px !important;

    padding:4px !important;
    gap:3px !important;

    border-radius:16px !important;
  }


  .top-tab{
    width:100% !important;
    min-width:0 !important;

    height:40px !important;

    padding:0 4px !important;

    gap:4px !important;

    font-size:
      clamp(
        11px,
        3.15vw,
        13px
      ) !important;

    line-height:1.05 !important;

    text-align:center !important;

    white-space:normal !important;

    overflow:hidden !important;
  }


  .top-tab .tab-icon,
  .tab-icon{
    flex:0 0 auto;

    font-size:15px !important;

    margin:0 !important;
  }


  .top-store-shortcut{
    display:grid !important;
    place-items:center !important;

    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:48px !important;

    padding:0 !important;
    margin:0 !important;

    border-radius:15px !important;
  }


  .top-store-label,
  .top-store-label-stable,
  .top-store-shortcut > span:last-child{
    display:none !important;
  }


  .top-store-icon,
  .top-store-icon-stable{
    margin:0 !important;
  }


  /* ==============================
     VIEW
  ============================== */

  .view{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    padding:
      10px
      10px
      76px !important;

    overflow-x:hidden !important;
  }


  .view.active{
    max-width:100% !important;
  }


  /* ==============================
     GENEL KART KURALLARI
  ============================== */

  .panel,
  .feature-card,
  .personal-hero,
  .settings-menu,
  .settings-content,
  .community-hero,
  .rooms-panel,
  .chat-panel,
  .people-panel,
  .rokss-store-shell,
  .rokss-store-section,
  .rokss-store-product{
    min-width:0 !important;
    max-width:100% !important;
  }


  /* ==============================
     KİŞİSEL / PROFİL
  ============================== */

  .personal-hero{
    display:block !important;

    padding:18px !important;

    border-radius:20px !important;
  }


  .personal-hero .profile-identity,
  .profile-identity{
    display:grid !important;

    grid-template-columns:
      auto minmax(0,1fr) !important;

    align-items:center !important;

    gap:14px !important;

    width:100% !important;
    min-width:0 !important;
  }


  .personal-hero
  .profile-identity
  > div:last-child{
    min-width:0 !important;
  }


  .profile-identity h1,
  #profileDisplayName{
    max-width:100% !important;

    font-size:
      clamp(
        25px,
        8vw,
        34px
      ) !important;

    overflow-wrap:anywhere;
  }


  .personal-hero
  .profile-actions{
    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    width:100% !important;

    gap:9px !important;

    margin-top:18px !important;
  }


  .personal-hero
  .profile-actions > *{
    width:100% !important;
    min-width:0 !important;
  }


  .personal-grid,
  .personal-bottom-grid{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap:10px !important;
  }


  .feature-card,
  .dm-dashboard-card,
  .account-overview{
    width:100% !important;

    padding:18px !important;
  }


  .personal-dm-list{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:8px !important;
  }


  .personal-dm{
    min-width:0 !important;
  }


  .profile-overview-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  /* ==============================
     SUNUCULAR
  ============================== */

  .servers-layout,
  .server-workspace{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }


  .server-workspace{
    gap:10px !important;
  }


  .community-hero{
    display:grid !important;

    grid-template-columns:
      54px minmax(0,1fr) !important;

    gap:12px !important;

    padding:15px !important;
  }


  .community-emblem{
    width:54px !important;
    height:54px !important;

    border-radius:16px !important;
  }


  .community-title-block{
    min-width:0 !important;
  }


  .community-title-block h1{
    font-size:22px !important;

    overflow-wrap:anywhere;
  }


  .community-actions{
    grid-column:1/-1 !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    width:100% !important;

    gap:8px !important;
  }


  .community-actions button{
    min-width:0 !important;
  }


  .workspace-grid{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:10px !important;
  }


  /*
   * Kanal listesi artık dar desktop
   * sidebar değil, mobil kart.
   */

  .rooms-panel{
    width:100% !important;

    max-height:44dvh !important;

    overflow:auto !important;

    padding:14px !important;
  }


  .channel-list{
    width:100% !important;
    min-width:0 !important;
  }


  .nav-item{
    min-height:44px !important;

    padding:
      10px
      12px !important;

    font-size:14px !important;
  }


  .chat-panel{
    width:100% !important;

    min-height:62dvh !important;
    height:auto !important;

    border-radius:18px !important;
  }


  .people-panel{
    display:none !important;
  }


  .messages{
    min-height:40dvh !important;

    padding:
      12px
      10px !important;
  }


  .message{
    grid-template-columns:
      36px minmax(0,1fr) !important;

    gap:9px !important;

    padding:
      10px
      4px !important;
  }


  .composer{
    position:sticky;

    bottom:
      env(
        safe-area-inset-bottom
      );

    z-index:10;

    grid-template-columns:
      38px minmax(0,1fr) auto !important;

    padding:10px !important;

    background:#0d1523;
  }


  /* ==============================
     AYARLAR
  ============================== */

  .settings-layout{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    width:100% !important;
    max-width:100% !important;

    gap:10px !important;
  }


  .settings-menu,
  .settings-content{
    width:100% !important;

    padding:16px !important;
  }


  /*
   * Ayarlar menüsü mobilde yatay.
   */

  .settings-menu{
    overflow-x:auto !important;

    scrollbar-width:none;
  }


  .settings-menu::-webkit-scrollbar{
    display:none;
  }


  .settings-menu h2{
    margin-bottom:10px !important;
  }


  .settings-menu-item,
  .rokss-settings-menu-item{
    min-height:44px !important;
  }


  .settings-profile-card{
    width:100% !important;

    flex-wrap:wrap !important;

    padding:13px !important;
  }


  .settings-row{
    width:100% !important;

    gap:12px !important;

    padding:14px !important;
  }


  /* ==============================
     MAĞAZA
  ============================== */

  .rokss-store-view,
  .rokss-store-shell{
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
  }


  .rokss-store-hero{
    width:100% !important;

    padding:20px 18px !important;

    border-radius:20px !important;
  }


  .rokss-store-hero h1{
    font-size:
      clamp(
        32px,
        10vw,
        45px
      ) !important;
  }


  .rokss-store-section{
    width:100% !important;

    padding:
      18px
      14px !important;

    border-radius:20px !important;
  }


  .rokss-store-grid{
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr) !important;

    gap:12px !important;
  }


  .rokss-store-product{
    width:100% !important;

    margin:0 !important;
  }


  .rokss-store-product-preview{
    min-height:190px !important;
  }


  .rokss-store-product-body{
    padding:16px !important;
  }


  .rokss-store-product-footer{
    gap:10px !important;
  }


  /* ==============================
     MODALLAR
  ============================== */

  .modal-backdrop{
    align-items:center !important;

    padding:
      max(
        12px,
        env(safe-area-inset-top)
      )
      10px
      max(
        72px,
        env(safe-area-inset-bottom)
      ) !important;

    overflow:auto !important;
  }


  .modal,
  .modal.wide,
  .login-modal,
  .onboarding-modal,
  .rok-link-modal,
  .server-settings-modal,
  .server-vip-compare-modal,
  .showroom-modal,
  .social-modal{
    width:100% !important;

    max-width:
      calc(100vw - 20px) !important;

    max-height:
      calc(100dvh - 90px) !important;

    margin:auto !important;

    padding:18px !important;

    border-radius:20px !important;

    overflow:auto !important;
  }


  .login-brand-row h2{
    font-size:28px !important;
  }


  .login-copy,
  .modal-copy{
    font-size:14px !important;

    line-height:1.45 !important;
  }


  .oauth{
    min-height:50px !important;

    display:grid !important;
    place-items:center !important;
  }


  .checks{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  /* ==============================
     TOAST
  ============================== */

  .toast{
    left:10px !important;
    right:10px !important;

    bottom:
      calc(
        68px +
        env(safe-area-inset-bottom)
      ) !important;

    width:auto !important;

    text-align:center !important;
  }

}


/* =========================================
   DAHA DAR TELEFONLAR
========================================= */

@media (max-width:560px){

  .topbar{
    padding-left:7px !important;
    padding-right:7px !important;
  }


  .top-nav-store-wrap{
    grid-template-columns:
      minmax(0,1fr)
      44px !important;

    gap:5px !important;
  }


  .top-store-shortcut{
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;

    height:46px !important;
  }


  .top-tabs{
    height:46px !important;

    padding:3px !important;
  }


  .top-tab{
    height:40px !important;

    font-size:
      clamp(
        10px,
        3vw,
        12px
      ) !important;

    gap:2px !important;
  }


  .tab-icon{
    font-size:13px !important;
  }


  .view{
    padding-left:8px !important;
    padding-right:8px !important;
  }


  .personal-hero{
    padding:15px !important;
  }


  .personal-hero
  .profile-identity{
    grid-template-columns:
      72px minmax(0,1fr) !important;
  }


  .personal-hero
  .profile-identity
  .avatar.xl,
  .personal-hero
  #profileAvatar{
    width:72px !important;
    height:72px !important;
  }


  .personal-dm-list,
  .profile-overview-grid{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .community-actions{
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  .settings-row{
    align-items:flex-start !important;

    flex-direction:column !important;
  }


  .rokss-store-product-footer{
    align-items:center !important;
  }


  .rokss-store-price{
    font-size:24px !important;
  }


  .rokss-store-buy{
    min-height:44px !important;

    padding:
      0
      16px !important;
  }

}

/* ROKSS_FINAL_MOBILE_APP_V1 END */


/* =========================================================
   ROKSS_FINAL_MOBILE_APP_V2
   Mobil sıkılaştırma / polish
========================================================= */

@media(max-width:900px){

  /*
   * Sayfanın tamamı scroll olsun.
   * Böylece global header sticky kalır.
   */

  body{
    overflow-y:auto !important;
  }

  .app-shell,
  .shell-main{
    overflow:visible !important;
  }

  .view,
  .view.active{
    overflow-y:visible !important;
  }


  .topbar{
    position:sticky !important;
    top:0 !important;
    z-index:150 !important;
  }


  /* =====================================
     KİŞİSEL SAYFA - DEV BOŞLUKLARI KALDIR
  ===================================== */

  .personal-grid{
    gap:10px !important;
  }

  .feature-card{
    min-height:0 !important;
    height:auto !important;

    padding:17px !important;
  }

  .feature-number{
    margin-top:14px !important;

    font-size:36px !important;
    line-height:1 !important;
  }

  .feature-card p{
    min-height:0 !important;

    margin:
      12px
      0
      0 !important;

    line-height:1.4 !important;
  }

  .card-action{
    position:static !important;

    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:100% !important;

    margin-top:15px !important;

    min-height:46px !important;
  }


  /* Direkt mesajlar / profil özeti */

  .dm-dashboard-card,
  .account-overview{
    padding:17px !important;
  }

  .personal-dm-list{
    margin-top:12px !important;
  }

  .personal-dm{
    min-height:64px !important;

    padding:
      10px
      12px !important;
  }

  .profile-overview-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;

    gap:8px !important;
  }

  .profile-overview-grid > div{
    min-height:82px !important;

    padding:13px !important;
  }


  /* =====================================
     AYARLAR - SOL MENÜYÜ MOBİL TAB YAP
  ===================================== */

  .settings-layout{
    gap:10px !important;
  }

  .settings-menu{
    display:flex !important;

    align-items:center !important;

    gap:6px !important;

    width:100% !important;

    padding:8px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    border-radius:17px !important;

    scrollbar-width:none;
  }

  .settings-menu::-webkit-scrollbar{
    display:none;
  }

  .settings-menu > .eyebrow,
  .settings-menu > h1,
  .settings-menu > h2,
  .settings-menu > h3{
    display:none !important;
  }

  .settings-menu-item,
  .rokss-settings-menu-item{
    flex:
      0
      0
      auto !important;

    width:auto !important;

    min-width:max-content !important;

    min-height:42px !important;

    padding:
      9px
      14px !important;

    margin:0 !important;

    border-radius:12px !important;

    white-space:nowrap !important;
  }


  .settings-content{
    padding:17px !important;
  }

  .settings-content h1{
    font-size:
      clamp(
        29px,
        8vw,
        38px
      ) !important;

    line-height:1.05 !important;

    margin-bottom:16px !important;
  }


  .settings-profile-card{
    display:grid !important;

    grid-template-columns:
      auto minmax(0,1fr) auto !important;

    align-items:center !important;

    gap:10px !important;

    padding:13px !important;
  }


  .settings-row{
    display:flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:space-between !important;

    min-height:92px !important;

    gap:12px !important;

    padding:14px !important;
  }

  .settings-row > div:first-child{
    flex:1 1 auto !important;

    min-width:0 !important;
  }

  .settings-row > button,
  .settings-row > .status-chip{
    flex:
      0
      0
      auto !important;
  }


  /* =====================================
     MAĞAZA - KARTLARI KISALT
  ===================================== */

  .rokss-store-shell{
    gap:12px !important;
  }

  .rokss-store-hero{
    padding:
      18px
      18px !important;
  }

  .rokss-store-section{
    padding:
      16px
      14px !important;
  }

  .rokss-store-section-head{
    margin-bottom:12px !important;
  }

  .rokss-store-grid{
    gap:10px !important;
  }


  .rokss-store-product{
    min-height:0 !important;

    overflow:hidden !important;
  }


  .rokss-store-product-preview{
    height:155px !important;
    min-height:155px !important;

    padding:14px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }


  .rokss-text-color-preview{
    width:100% !important;

    height:110px !important;
    min-height:110px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:12px !important;

    text-align:center !important;
  }


  .rokss-store-avatar-preview{
    max-height:130px !important;
  }


  .rokss-store-product-body{
    padding:14px !important;
  }


  .rokss-store-category{
    margin-bottom:5px !important;
  }


  .rokss-store-product h3{
    margin:
      3px
      0
      5px !important;

    font-size:20px !important;
  }


  .rokss-store-product p{
    min-height:0 !important;

    margin:
      0
      0
      13px !important;

    line-height:1.4 !important;
  }


  .rokss-store-product-footer{
    margin-top:8px !important;

    align-items:center !important;
  }


  .rokss-store-price{
    font-size:25px !important;
  }


  .rokss-store-buy{
    min-height:44px !important;

    padding:
      0
      17px !important;
  }


  /* =====================================
     OYUN HESAPLARI / DM
  ===================================== */

  .game-account-card,
  .game-integration-card{
    min-height:0 !important;
  }


  /* =====================================
     ALT ANDROID BAR İÇİN EK PAY
  ===================================== */

  .view{
    padding-bottom:
      max(
        90px,
        calc(
          60px +
          env(safe-area-inset-bottom)
        )
      ) !important;
  }

}


@media(max-width:560px){

  /*
   * Profil istatistikleri telefonda yine
   * 2 sütun. Eski V1 tek sütuna düşürüyordu.
   */

  .profile-overview-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      ) !important;
  }


  .settings-profile-card{
    grid-template-columns:
      56px minmax(0,1fr) !important;
  }

  .settings-profile-card > button{
    grid-column:1/-1 !important;

    width:100% !important;
  }


  .settings-row{
    min-height:82px !important;
  }


  .rokss-store-product-preview{
    height:140px !important;
    min-height:140px !important;
  }


  .rokss-text-color-preview{
    height:96px !important;
    min-height:96px !important;
  }

}

/* ROKSS_FINAL_MOBILE_APP_V2 END */


/* =========================================================
   ROKSS_MOBILE_SERVER_DRAWER_CSS_V1
========================================================= */

.mobile-server-menu-btn,
.mobile-server-drawer-head,
.mobile-server-drawer-backdrop,
.mobile-server-label,
.mobile-server-action-label{
  display:none;
}


@media(max-width:900px){

  /*
   * Sunucular ekranındayken hamburger.
   */

  .mobile-server-menu-btn{
    display:none;

    position:absolute;

    left:10px;

    top:
      max(
        9px,
        env(safe-area-inset-top)
      );

    z-index:190;

    width:44px;
    height:44px;

    padding:10px;

    border:1px solid #293a59;
    border-radius:14px;

    background:
      linear-gradient(
        180deg,
        #172239,
        #101827
      );

    box-shadow:
      0 8px 24px
      rgba(0,0,0,.25);

    cursor:pointer;
  }


  .app-shell.servers-mode
  .mobile-server-menu-btn{
    display:flex !important;

    flex-direction:column;

    justify-content:center;

    gap:5px;
  }


  .mobile-server-menu-btn span{
    display:block;

    width:100%;
    height:2px;

    border-radius:10px;

    background:#dce5f4;

    transition:
      transform .2s ease,
      opacity .2s ease;
  }


  .app-shell.mobile-server-drawer-open
  .mobile-server-menu-btn
  span:nth-child(1){
    transform:
      translateY(7px)
      rotate(45deg);
  }


  .app-shell.mobile-server-drawer-open
  .mobile-server-menu-btn
  span:nth-child(2){
    opacity:0;
  }


  .app-shell.mobile-server-drawer-open
  .mobile-server-menu-btn
  span:nth-child(3){
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  /*
   * Hamburger yüzünden marka sağa kayar.
   */

  .app-shell.servers-mode
  .brand-wordmark{
    margin-left:52px !important;
  }


  /*
   * ESKİ DESKTOP RAIL ARTIK
   * OFF-CANVAS DRAWER.
   */

  .app-shell.servers-mode
  .app-rail{

    display:flex !important;

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    bottom:0 !important;

    z-index:500 !important;

    flex-direction:column !important;

    align-items:stretch !important;

    gap:10px !important;

    width:
      min(
        82vw,
        310px
      ) !important;

    height:100dvh !important;
    min-height:100dvh !important;

    padding:
      max(
        14px,
        env(safe-area-inset-top)
      )
      12px
      max(
        16px,
        env(safe-area-inset-bottom)
      ) !important;

    overflow:hidden !important;

    border-right:
      1px solid #293956 !important;

    background:
      linear-gradient(
        180deg,
        rgba(13,20,34,.995),
        rgba(7,12,21,.995)
      ) !important;

    box-shadow:
      30px 0 80px
      rgba(0,0,0,.58) !important;

    transform:
      translateX(-105%) !important;

    transition:
      transform
      .23s
      cubic-bezier(.2,.8,.2,1) !important;
  }


  .app-shell.servers-mode
  .app-rail::before{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
      radial-gradient(
        circle at 15% 0%,
        rgba(111,79,255,.13),
        transparent 32%
      );
  }


  .app-shell.servers-mode
  .app-rail > *{
    position:relative;
    z-index:1;
  }


  .app-shell.servers-mode
  .mobile-server-drawer-open{
    transform:
      translateX(0);
  }


  .app-shell.servers-mode.mobile-server-drawer-open
  .app-rail{
    transform:
      translateX(0) !important;
  }


  /* HEADER */

  .mobile-server-drawer-head{
    display:flex !important;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    min-height:62px;

    padding:
      5px
      4px
      12px;

    border-bottom:
      1px solid #202d43;
  }


  .mobile-server-drawer-head
  div{
    min-width:0;
  }


  .mobile-server-drawer-head
  small{
    display:block;

    color:#78869d;

    font-size:10px;
    font-weight:900;

    letter-spacing:.17em;

    margin-bottom:4px;
  }


  .mobile-server-drawer-head
  strong{
    display:block;

    font-size:23px;

    color:#fff;
  }


  .mobile-server-drawer-close{
    width:40px;
    height:40px;

    flex:0 0 40px;

    border:1px solid #293956;
    border-radius:13px;

    background:#141e30;

    color:#dbe4f3;

    font-size:27px;
    line-height:1;

    cursor:pointer;
  }


  /* SUNUCU LİSTESİ */

  .app-shell.servers-mode
  .server-rail-list{

    display:flex !important;

    flex:1 1 auto;

    flex-direction:column !important;

    align-items:stretch !important;

    justify-items:stretch !important;

    gap:7px !important;

    width:100% !important;

    max-height:none !important;

    padding:
      2px
      0
      8px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    scrollbar-width:none;
  }


  .app-shell.servers-mode
  .server-rail-list::-webkit-scrollbar{
    display:none;
  }


  /*
   * Her sunucu artık icon + isim.
   */

  .app-shell.servers-mode
  .rail-server{

    display:grid !important;

    grid-template-columns:
      46px
      minmax(0,1fr) !important;

    align-items:center !important;

    justify-items:start !important;

    gap:12px !important;

    width:100% !important;
    height:62px !important;

    padding:
      7px
      12px
      7px
      8px !important;

    border-radius:17px !important;

    text-align:left !important;

    transform:none !important;
  }


  .app-shell.servers-mode
  .rail-server:hover,
  .app-shell.servers-mode
  .rail-server.active{
    transform:none !important;
  }


  .app-shell.servers-mode
  .rail-server.active::before{
    left:-12px !important;

    width:4px !important;
    height:32px !important;
  }


  .app-shell.servers-mode
  .rail-server img{
    width:46px !important;
    height:46px !important;

    object-fit:cover;

    border-radius:14px !important;
  }


  .mobile-server-label{
    display:block !important;

    min-width:0;

    color:#dfe7f4;

    font-size:15px;
    font-weight:800;

    white-space:nowrap;

    overflow:hidden;
    text-overflow:ellipsis;
  }


  .rail-server.active
  .mobile-server-label{
    color:#fff;
  }


  /*
   * Online noktası
   */

  .app-shell.servers-mode
  .rail-server i{
    right:8px !important;
    bottom:8px !important;

    width:8px !important;
    height:8px !important;
  }


  /* ALT AKSİYONLAR */

  .app-shell.servers-mode
  .server-rail-controls{

    display:flex !important;

    position:static !important;

    flex:
      0
      0
      auto;

    flex-direction:column !important;

    align-items:stretch !important;

    gap:7px !important;

    width:100% !important;

    padding:
      10px
      0
      0 !important;

    background:none !important;

    border-top:
      1px solid #202d43;
  }


  .app-shell.servers-mode
  .rail-server-action{

    display:grid !important;

    grid-template-columns:
      36px
      minmax(0,1fr) !important;

    align-items:center !important;
    justify-items:start !important;

    gap:10px !important;

    width:100% !important;
    height:50px !important;

    padding:
      0
      12px !important;

    border-radius:14px !important;
  }


  .mobile-server-action-label{
    display:block !important;

    min-width:0;

    color:#d7e0ef;

    font-size:14px;
    font-weight:800;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }


  /* BACKDROP */

  .mobile-server-drawer-backdrop{

    display:block;

    position:fixed;

    inset:0;

    z-index:450;

    background:
      rgba(2,5,10,.68);

    backdrop-filter:
      blur(3px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
      opacity .2s ease,
      visibility .2s ease;
  }


  .app-shell.mobile-server-drawer-open
  .mobile-server-drawer-backdrop{

    opacity:1;

    visibility:visible;

    pointer-events:auto;
  }

}


/*
 * Desktop'ta kesinlikle hiçbir şey değişmesin.
 */

@media(min-width:901px){

  .mobile-server-menu-btn,
  .mobile-server-drawer-head,
  .mobile-server-drawer-backdrop,
  .mobile-server-label,
  .mobile-server-action-label{
    display:none !important;
  }

}

/* ROKSS_MOBILE_SERVER_DRAWER_CSS_V1 END */


/* =========================================================
   ROKSS_MOBILE_DM_FULLSCREEN_CSS_V3
========================================================= */

.mobile-dm-back{
  display:none;
}


@media(max-width:900px){

  /*
   * DM seçildiğinde profil / server düzeninden
   * bağımsız gerçek tam ekran chat.
   */

  #dmView.view.active.mobile-dm-chat-open{

    display:block !important;

    position:fixed !important;

    inset:0 !important;

    z-index:900 !important;

    width:100% !important;
    max-width:none !important;

    height:100dvh !important;
    min-height:100dvh !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;

    background:#080d16 !important;
  }


  #dmView.mobile-dm-chat-open
  .dm-dedicated-layout{

    display:block !important;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    margin:0 !important;
  }


  /*
   * Mobilde DM seçildikten sonra
   * soldaki konuşma listesi yok.
   * Tam ekran sohbet.
   */

  #dmView.mobile-dm-chat-open
  .dm-dedicated-sidebar{

    display:none !important;
  }


  #dmView.mobile-dm-chat-open
  .dm-dedicated-chat-host{

    display:block !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #dmView.mobile-dm-chat-open
  .chat-panel{

    display:grid !important;

    grid-template-rows:
      auto
      minmax(0,1fr)
      auto !important;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;

    overflow:hidden !important;

    background:#0b1220 !important;
  }


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

  #dmView.mobile-dm-chat-open
  .chat-head{

    display:grid !important;

    grid-template-columns:
      44px
      minmax(0,1fr) !important;

    align-items:center !important;

    gap:10px !important;

    flex:0 0 auto !important;

    min-height:72px !important;

    padding:
      max(
        9px,
        env(safe-area-inset-top)
      )
      12px
      10px !important;

    border-bottom:
      1px solid #1e2b41 !important;

    background:
      rgba(
        10,
        17,
        29,
        .98
      ) !important;

    backdrop-filter:
      blur(18px) !important;
  }


  .mobile-dm-back{

    display:grid !important;

    place-items:center !important;

    width:44px !important;
    height:44px !important;

    padding:0 !important;

    border:
      1px solid #293a59 !important;

    border-radius:
      14px !important;

    background:
      #131e30 !important;

    color:#fff !important;

    font-size:36px !important;
    font-weight:400 !important;
    line-height:1 !important;

    cursor:pointer !important;
  }


  #dmView.mobile-dm-chat-open
  .chat-head > div{

    min-width:0 !important;
  }


  #dmView.mobile-dm-chat-open
  .chat-head .eyebrow{

    display:none !important;
  }


  #dmView.mobile-dm-chat-open
  #chatTitle{

    display:block !important;

    max-width:100% !important;

    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    margin:0 !important;

    font-size:18px !important;
  }


  #dmView.mobile-dm-chat-open
  #chatSubtitle{

    margin-top:2px !important;

    font-size:11px !important;
  }


  /* ==============================
     MESAJLAR
  ============================== */

  #dmView.mobile-dm-chat-open
  .messages{

    display:block !important;

    width:100% !important;

    height:auto !important;
    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:
      12px
      10px
      18px !important;

    overscroll-behavior:
      contain;

    -webkit-overflow-scrolling:
      touch;
  }


  #dmView.mobile-dm-chat-open
  .welcome-card{

    padding:
      8px
      4px
      14px !important;
  }


  #dmView.mobile-dm-chat-open
  .welcome-icon{

    width:38px !important;
    height:38px !important;
  }


  #dmView.mobile-dm-chat-open
  .welcome-card h2{

    font-size:21px !important;

    margin:
      8px
      0
      3px !important;
  }


  #dmView.mobile-dm-chat-open
  .message{

    grid-template-columns:
      36px
      minmax(0,1fr) !important;

    gap:9px !important;

    padding:
      9px
      3px !important;
  }


  #dmView.mobile-dm-chat-open
  .message-body{

    min-width:0 !important;
  }


  #dmView.mobile-dm-chat-open
  .message-body p{

    overflow-wrap:anywhere !important;

    line-height:1.42 !important;
  }


  /* ==============================
     MESAJ YAZMA ALANI
  ============================== */

  #dmView.mobile-dm-chat-open
  .composer{

    display:grid !important;

    grid-template-columns:
      38px
      minmax(0,1fr)
      auto !important;

    align-items:center !important;

    gap:7px !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    z-index:20 !important;

    width:100% !important;

    min-height:
      66px !important;

    padding:
      9px
      9px
      max(
        11px,
        env(safe-area-inset-bottom)
      ) !important;

    border-top:
      1px solid #1f2d43 !important;

    background:
      #0c1421 !important;

    overflow:visible !important;
  }


  #dmView.mobile-dm-chat-open
  .composer .plus{

    width:38px !important;
    height:44px !important;

    padding:0 !important;
  }


  #dmView.mobile-dm-chat-open
  #messageInput{

    display:block !important;

    width:100% !important;
    min-width:0 !important;

    height:44px !important;

    padding:
      0
      12px !important;

    font-size:16px !important;

    background:
      #111b2b !important;
  }


  #dmView.mobile-dm-chat-open
  #sendBtn{

    display:block !important;

    height:44px !important;

    padding:
      0
      14px !important;

    white-space:
      nowrap !important;
  }


  /*
   * Önceki responsive katmandan gelen
   * 560px min-height'i kesin iptal et.
   */

  #dmView.mobile-dm-chat-open
  .dm-dedicated-chat-host{

    min-height:
      0 !important;
  }

}


/* Daha dar telefon */

@media(max-width:420px){

  #dmView.mobile-dm-chat-open
  .composer{

    grid-template-columns:
      36px
      minmax(0,1fr)
      52px !important;
  }


  #dmView.mobile-dm-chat-open
  #sendBtn{

    width:52px !important;

    padding:0 !important;

    font-size:0 !important;
  }


  #dmView.mobile-dm-chat-open
  #sendBtn::after{

    content:"➤";

    font-size:19px;
  }

}

/* ROKSS_MOBILE_DM_FULLSCREEN_CSS_V3 END */


/* =========================================================
   ROKSS_MOBILE_MINI_SERVER_RAIL_V4
========================================================= */

@media(max-width:900px){

  /*
   * Drawer artık ekranın %82'sini kaplamıyor.
   * PC'deki sol server rail'in mobil hali.
   */

  .app-shell.servers-mode
  .app-rail{

    width:88px !important;
    max-width:88px !important;

    padding:
      max(
        10px,
        env(safe-area-inset-top)
      )
      8px
      max(
        12px,
        env(safe-area-inset-bottom)
      ) !important;

    align-items:center !important;

    gap:8px !important;
  }


  /*
   * "Sunucularım" başlığını kaldır.
   * Sadece küçük kapatma butonu.
   */

  .mobile-server-drawer-head{

    width:100% !important;

    min-height:54px !important;

    justify-content:center !important;

    padding:
      0
      0
      9px !important;
  }


  .mobile-server-drawer-head > div{

    display:none !important;
  }


  .mobile-server-drawer-close{

    width:48px !important;
    height:48px !important;

    flex:
      0
      0
      48px !important;

    border-radius:16px !important;

    font-size:26px !important;
  }


  /*
   * Sunucular icon olarak alt alta.
   */

  .app-shell.servers-mode
  .server-rail-list{

    width:100% !important;

    align-items:center !important;

    gap:9px !important;

    padding:
      4px
      0
      10px !important;
  }


  .app-shell.servers-mode
  .rail-server,
  .app-shell.servers-mode
  .rail-home{

    display:grid !important;

    grid-template-columns:
      1fr !important;

    place-items:center !important;

    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;

    height:58px !important;
    min-height:58px !important;

    padding:5px !important;

    margin:0 !important;

    border-radius:18px !important;

    font-size:0 !important;
  }


  .app-shell.servers-mode
  .rail-server img{

    width:48px !important;
    height:48px !important;

    margin:0 !important;

    border-radius:15px !important;
  }


  /*
   * Drawer içindeki server isimleri gizli.
   */

  .app-shell.servers-mode
  .mobile-server-label{

    display:none !important;
  }


  /*
   * Aktif çizgi PC'deki gibi sol tarafta.
   */

  .app-shell.servers-mode
  .rail-server.active::before{

    left:-9px !important;

    width:4px !important;
    height:32px !important;
  }


  /*
   * Alttaki katıl / oluştur butonları
   * sadece icon.
   */

  .app-shell.servers-mode
  .server-rail-controls{

    width:100% !important;

    align-items:center !important;

    gap:8px !important;

    padding-top:9px !important;
  }


  .app-shell.servers-mode
  .rail-server-action{

    display:grid !important;

    grid-template-columns:
      1fr !important;

    place-items:center !important;

    width:58px !important;
    min-width:58px !important;
    max-width:58px !important;

    height:58px !important;

    padding:0 !important;

    border-radius:17px !important;

    font-size:0 !important;
  }


  .app-shell.servers-mode
  .rail-server-action::first-letter{

    font-size:24px;
  }


  .app-shell.servers-mode
  .mobile-server-action-label{

    display:none !important;
  }


  /*
   * Büyük purple "Sunucu oluştur"
   * görünümünü rail içinde engelle.
   */

  .app-shell.servers-mode
  .rail-server-action.primary-btn,
  .app-shell.servers-mode
  .rail-server-action.ghost-btn{

    width:58px !important;
    min-width:58px !important;
  }


  /*
   * Hamburger biraz daha sade.
   */

  .mobile-server-menu-btn{

    width:42px !important;
    height:42px !important;

    padding:9px !important;

    border-radius:13px !important;
  }


  .app-shell.servers-mode
  .brand-wordmark{

    margin-left:48px !important;
  }

}

/* ROKSS_MOBILE_MINI_SERVER_RAIL_V4 END */


/*
 * ============================================================
 * ROKSS_MOBILE_FINAL_POLISH_V6
 * ============================================================
 */

@media (max-width: 900px){

  #serverRailControls .serverLegacyAction,
  #joinServerBtn.serverLegacyAction,
  #createServerBtn.serverLegacyAction{
    display:none !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    max-width:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    opacity:0 !important;

    overflow:hidden !important;

    pointer-events:none !important;
  }


  #serverRailControls{
    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-end !important;

    width:100% !important;

    gap:8px !important;

    padding:
      8px
      0
      calc(
        10px +
        env(safe-area-inset-bottom)
      )
      !important;
  }


  /*
   * Sadece tek + butonu göster.
   */
  #serverMenuBtn.serverMenuLauncher{
    display:grid !important;
    place-items:center !important;

    width:52px !important;
    height:52px !important;

    min-width:52px !important;
    min-height:52px !important;

    max-width:52px !important;
    max-height:52px !important;

    padding:0 !important;
    margin:0 auto !important;

    border-radius:16px !important;

    overflow:hidden !important;

    font-size:0 !important;
  }


  #serverMenuBtn.serverMenuLauncher span{
    display:block !important;

    width:auto !important;
    height:auto !important;

    font-size:30px !important;
    line-height:1 !important;

    transform:none !important;
  }


  .app-rail{
    width:76px !important;

    min-width:76px !important;
    max-width:76px !important;
  }


  #mobileServerMenuBtn{
    /*
     * Görünürlüğü JS / mevcut ekran modu yönetsin.
     * Kişisel ekranda zorla gösterme.
     */
    place-items:center !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    flex:0 0 42px !important;

    padding:0 !important;

    border-radius:14px !important;
  }


  #mobileServerMenuBtn svg{
    width:20px !important;
    height:20px !important;
  }


  .rail-spacer{
    flex:1 1 auto !important;
    min-height:6px !important;
  }
}

/* ROKSS_MOBILE_FINAL_POLISH_V6 END */


/* ROKSS_MOBILE_HAMBURGER_VISIBILITY_FIX_V1 */
@media (max-width:900px){
  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }
}
/* ROKSS_MOBILE_HAMBURGER_VISIBILITY_FIX_V1 END */


/*
 * ============================================================
 * S2_MOBILE_HAMBURGER_POLISH_V1
 * ============================================================
 */

@media (max-width:900px){

  #mobileServerMenuBtn{
    width:38px !important;
    height:38px !important;

    min-width:38px !important;
    min-height:38px !important;

    max-width:38px !important;
    max-height:38px !important;

    flex:0 0 38px !important;

    padding:0 !important;
    margin:0 !important;

    border:
      1px solid
      rgba(126, 103, 255, .28)
      !important;

    border-radius:12px !important;

    background:
      rgba(20, 24, 40, .72)
      !important;

    box-shadow:
      0 6px 18px
      rgba(0, 0, 0, .22)
      !important;

    backdrop-filter:
      blur(10px);

    -webkit-backdrop-filter:
      blur(10px);

    overflow:hidden !important;

    align-items:center !important;
    justify-content:center !important;

    z-index:30 !important;
  }


  /*
   * Eski dev hamburger çizgilerini küçült.
   */
  #mobileServerMenuBtn span{
    width:18px !important;
    max-width:18px !important;

    height:2px !important;

    min-height:2px !important;
    max-height:2px !important;

    margin:2px auto !important;

    border-radius:999px !important;

    background:
      rgba(230, 233, 255, .92)
      !important;

    box-shadow:none !important;
  }


  #mobileServerMenuBtn svg{
    width:18px !important;
    height:18px !important;

    stroke-width:1.8 !important;
  }


  /*
   * Kişisel ekranda hidden ise kesinlikle görünmesin.
   */
  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }


  #mobileServerMenuBtn:hover,
  #mobileServerMenuBtn:active{
    transform:none !important;

    background:
      rgba(34, 38, 60, .92)
      !important;
  }
}





/*
 * ============================================================
 * S2_MOBILE_BRAND_SPACE_V1
 * Üst marka/hamburger satırına nefes alanı
 * ============================================================
 */

@media (max-width:900px){

  .topbar{
    padding-top:
      calc(18px + env(safe-area-inset-top))
      !important;

    padding-bottom:16px !important;

    row-gap:14px !important;
  }


  /*
   * CHATTER HALL / ileride S2 Chat olacak marka satırı.
   */
  .brand-wordmark{
    min-height:48px !important;

    padding-top:6px !important;
    padding-bottom:6px !important;

    align-items:center !important;
  }


  /*
   * Hamburger de marka satırının ortasına otursun.
   */
  #mobileServerMenuBtn{
    align-self:center !important;

    margin-top:4px !important;
    margin-bottom:4px !important;
  }


  /*
   * Menü sekmeleri marka satırına yapışmasın.
   */
  .top-tabs{
    margin-top:2px !important;
  }


  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }
}




/*
 * ============================================================
 * S2_MOBILE_SERVER_HEADER_V1
 * ============================================================
 */

@media (max-width:900px){

  .topbar{
    padding-top:14px !important;
    padding-left:14px !important;
    padding-right:14px !important;
    row-gap:10px !important;
  }

  .brand-wordmark{
    display:flex !important;
    align-items:center !important;
    margin-left:12px !important;
    padding-top:2px !important;
    min-height:44px !important;
  }

  .brand-wordmark strong{
    font-size:18px !important;
  }

  .brand-wordmark span{
    font-size:10px !important;
    letter-spacing:.20em !important;
  }

  #mobileServerMenuBtn{
    transform:translateY(8px) !important;
    margin-top:2px !important;
    margin-bottom:2px !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
  }

  #mobileServerMenuBtn .rokss-mobile-menu-svg{
    width:24px !important;
    height:24px !important;
    display:block !important;
  }

  #mobileServerMenuBtn .rokss-mobile-menu-svg *{
    fill:currentColor !important;
  }

  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }
}


/*
 * ============================================================
 * S2_FREQUENT_SERVERS_STRIP_V1
 * ============================================================
 */

.rokss-frequent-wrap{
  margin:0 0 16px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(84,105,173,.35);
  background:
    linear-gradient(
      180deg,
      rgba(19,28,45,.96),
      rgba(10,16,29,.96)
    );
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    inset 0 0 0 1px rgba(122,88,255,.05);
}

.rokss-frequent-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.rokss-frequent-title strong{
  display:block;
  font-size:15px;
  color:#eef3fb;
}

.rokss-frequent-title span{
  display:block;
  font-size:11px;
  color:#93a1b8;
  margin-top:3px;
}

.rokss-frequent-badge{
  flex:0 0 auto;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#f6d676;
  border:1px solid rgba(246,214,118,.26);
  background:rgba(246,214,118,.06);
  font-weight:800;
  font-size:12px;
}

.rokss-frequent-list{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-bottom:2px;
  scrollbar-width:none;
}

.rokss-frequent-list::-webkit-scrollbar{
  display:none;
}

.rokss-frequent-item{
  flex:0 0 74px;
  border:1px solid #22324d;
  background:#111a29;
  border-radius:16px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  cursor:pointer;
  color:#dfe6f2;
  transition:.18s ease;
}

.rokss-frequent-item:hover{
  transform:translateY(-1px);
  border-color:#7058ff;
  background:linear-gradient(180deg,#15233b,#101929);
  box-shadow:0 8px 24px rgba(112,88,255,.14);
}

.rokss-frequent-avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#243a61,#30215f);
  border:1px solid #314466;
  color:#fff;
  font-weight:900;
  font-size:15px;
}

.rokss-frequent-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.rokss-frequent-label{
  width:100%;
  text-align:center;
  font-size:11px;
  line-height:1.15;
  color:#d8e1ef;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rokss-frequent-rank{
  font-size:10px;
  color:#8ea0ba;
}

.rokss-frequent-empty{
  padding:10px 4px 2px;
  color:#8d9ab0;
  font-size:12px;
}

@media (max-width:900px){
  .rokss-frequent-wrap{
    margin-bottom:14px;
    padding:12px;
    border-radius:16px;
  }

  .rokss-frequent-item{
    flex-basis:70px;
    padding:9px 7px;
  }

  .rokss-frequent-avatar{
    width:40px;
    height:40px;
    border-radius:12px;
  }

  .rokss-frequent-label{
    font-size:10px;
  }
}

/* S2_MOBILE_SERVER_HEADER_V1 END */
/* S2_FREQUENT_SERVERS_STRIP_V1 END */


/*
 * ============================================================
 * S2_MOBILE_TOPBAR_V2
 * ============================================================
 */

@media (max-width:900px){

  /*
   * Üst barı artık gerçek 2 satırlı grid yapıyoruz.
   *
   * SATIR 1:
   * [menu] [brand + VIP]
   *
   * SATIR 2:
   * [navigation]
   */
  .topbar{
    display:grid !important;

    grid-template-columns:
      46px
      minmax(0,1fr)
      !important;

    grid-template-rows:
      46px
      auto
      !important;

    column-gap:12px !important;
    row-gap:10px !important;

    align-items:center !important;

    height:auto !important;

    padding:
      calc(10px + env(safe-area-inset-top))
      16px
      12px
      !important;
  }


  /*
   * Hamburger / server drawer.
   */
  #mobileServerMenuBtn{
    grid-column:1 !important;
    grid-row:1 !important;

    align-self:center !important;
    justify-self:center !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    max-width:42px !important;
    max-height:42px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    border-radius:14px !important;

    display:grid;
    place-items:center;

    color:#b9b1ff !important;

    background:
      linear-gradient(
        180deg,
        rgba(20,27,45,.96),
        rgba(12,18,31,.96)
      )
      !important;

    border:
      1px solid
      rgba(112,91,224,.35)
      !important;

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.22)
      !important;
  }


  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }


  #mobileServerMenuBtn .rokss-mobile-menu-svg{
    width:23px !important;
    height:23px !important;
    display:block !important;
  }


  /*
   * Logo artık menu'nun hemen sağında.
   */
  .brand-wordmark{
    grid-column:2 !important;
    grid-row:1 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:flex-start !important;

    min-width:0 !important;
    min-height:42px !important;

    margin:0 !important;
    padding:0 0 0 4px !important;

    gap:8px !important;

    transform:none !important;
  }


  .brand-wordmark strong{
    font-size:18px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }


  .brand-wordmark span{
    font-size:10px !important;
    line-height:1 !important;

    letter-spacing:.21em !important;
    white-space:nowrap !important;
  }


  /*
   * Kişisel / Sunucular / Ayarlar komple ikinci satır.
   */
  .top-tabs{
    grid-column:1 / -1 !important;
    grid-row:2 !important;

    width:100% !important;

    margin:0 !important;

    align-self:stretch !important;
  }


  /*
   * Eski mobil override'lardan gelebilecek
   * anlamsız margin/translate değerlerini ez.
   */
  .topbar > #mobileServerMenuBtn,
  .topbar > .brand-wordmark,
  .topbar > .top-tabs{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
  }
}




/*
 * ============================================================
 * S2_MOBILE_TOPBAR_V3
 *
 * ROW 1:       CHATTER HALL + VIP
 * ROW 2:       Kişisel | Sunucular | Ayarlar | Mağaza
 *
 * Hamburger sadece Sunucular ekranında,
 * layout dışı absolute olarak durur.
 * ============================================================
 */

@media (max-width:900px){

  .topbar{
    position:sticky !important;
    top:0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      54px
      !important;

    grid-template-rows:
      62px
      54px
      !important;

    column-gap:10px !important;
    row-gap:8px !important;

    width:100% !important;
    height:auto !important;

    padding:
      calc(8px + env(safe-area-inset-top))
      16px
      12px
      !important;

    align-items:center !important;

    overflow:visible !important;
  }


  /*
   * LOGO
   */
  .topbar > .brand-wordmark{
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:0 !important;

    min-height:48px !important;

    margin:0 !important;
    padding:0 !important;

    gap:8px !important;

    transform:
      translateX(10px)
      !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
  }


  .topbar > .brand-wordmark strong{
    font-size:19px !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }


  .topbar > .brand-wordmark span{
    font-size:10px !important;
    line-height:1 !important;

    letter-spacing:.21em !important;

    white-space:nowrap !important;
  }


  /*
   * ANA NAV
   */
  .topbar > .top-tabs{
    grid-column:1 !important;
    grid-row:2 !important;

    width:100% !important;
    height:54px !important;

    min-width:0 !important;

    margin:0 !important;
    padding:5px !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;

    transform:none !important;

    overflow:hidden !important;
  }


  /*
   * MAĞAZA / sağdaki action alanı.
   */
  .topbar > .top-actions{
    grid-column:2 !important;
    grid-row:2 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:54px !important;
    height:54px !important;

    min-width:54px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;

    overflow:visible !important;
  }


  /*
   * Mobilde gereksiz action yazıları görünmesin.
   * İkon butonları kalabilir.
   */
  .topbar > .top-actions .live-pill{
    display:none !important;
  }


  /*
   * HAMBURGER
   *
   * Grid'e dahil DEĞİL.
   * Bu yüzden hiçbir şeyi sıkıştırmayacak.
   */
  #mobileServerMenuBtn{
    position:absolute !important;

    left:18px !important;

    top:
      calc(
        18px +
        env(safe-area-inset-top)
      )
      !important;

    width:42px !important;
    height:42px !important;

    min-width:42px !important;
    min-height:42px !important;

    max-width:42px !important;
    max-height:42px !important;

    margin:0 !important;
    padding:0 !important;

    transform:
      translateY(5px)
      !important;

    z-index:60 !important;

    display:grid;
    place-items:center;

    border-radius:14px !important;

    color:#aea2ff !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,29,48,.98),
        rgba(12,18,31,.98)
      )
      !important;

    border:
      1px solid
      rgba(116,94,229,.40)
      !important;

    box-shadow:
      0 8px 24px
      rgba(0,0,0,.25)
      !important;
  }


  /*
   * Kişisel / Ayarlar ekranlarında kesin gizle.
   */
  #mobileServerMenuBtn[hidden]{
    display:none !important;
  }


  #mobileServerMenuBtn
  .rokss-mobile-menu-svg{
    width:22px !important;
    height:22px !important;

    display:block !important;
  }


  /*
   * Settings'in kendi yatay menüsüne dokunma.
   */
  .settings-layout,
  .settings-tabs,
  .settings-nav{
    position:relative !important;
  }
}





/*
 * ============================================================
 * S2_MOBILE_HEADER_FINAL_V5
 *
 * SATIR 1
 *        CHATTER HALL + VIP
 *
 * SATIR 2
 * SERVER | Kişisel Sunucular Ayarlar | MAGAZA
 * ============================================================
 */

@media (max-width:900px){

  html,
  body{
    overflow-x:hidden !important;
  }


  .topbar{
    position:sticky !important;

    top:0 !important;

    z-index:50 !important;

    display:grid !important;

    grid-template-columns:
      48px
      minmax(0,1fr)
      52px
      !important;

    grid-template-rows:
      62px
      54px
      !important;

    column-gap:8px !important;
    row-gap:8px !important;

    width:100% !important;
    max-width:100vw !important;

    height:auto !important;

    padding:
      calc(
        8px +
        env(safe-area-inset-top)
      )
      16px
      12px
      !important;

    box-sizing:border-box !important;

    align-items:center !important;

    overflow:visible !important;
  }


  /*
   * ================================
   * LOGO SATIRI
   * ================================
   */

  .topbar > .brand-wordmark,
  .app-shell.servers-mode
  .topbar > .brand-wordmark{

    grid-column:
      1 / -1 !important;

    grid-row:
      1 !important;

    position:relative !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    width:100% !important;

    min-width:0 !important;
    min-height:54px !important;

    margin:0 !important;

    margin-left:0 !important;

    padding:0 !important;

    gap:8px !important;

    transform:none !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
  }


  .topbar >
  .brand-wordmark strong{

    font-size:19px !important;

    line-height:1 !important;

    white-space:nowrap !important;
  }


  .topbar >
  .brand-wordmark span{

    font-size:10px !important;

    line-height:1 !important;

    letter-spacing:.21em !important;

    white-space:nowrap !important;
  }


  /*
   * ================================
   * ANA NAV ORTA KOLON
   * ================================
   */

  .topbar > .top-tabs{

    grid-column:2 !important;

    grid-row:2 !important;

    position:relative !important;

    width:100% !important;

    min-width:0 !important;

    height:54px !important;

    margin:0 !important;

    padding:5px !important;

    transform:none !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      )
      !important;

    overflow:hidden !important;
  }


  .topbar >
  .top-tabs
  .top-tab{

    min-width:0 !important;

    padding:
      5px
      4px
      !important;

    font-size:12px !important;
  }


  .topbar >
  .top-tabs
  .top-tab >
  span:last-child{

    min-width:0 !important;

    line-height:1.05 !important;

    white-space:normal !important;
  }


  /*
   * ================================
   * SERVER SWITCHER
   * SOL ALT
   * ================================
   */

  .topbar >
  #mobileServerMenuBtn{

    grid-column:1 !important;

    grid-row:2 !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    align-self:center !important;
    justify-self:center !important;

    width:44px !important;
    height:44px !important;

    min-width:44px !important;
    min-height:44px !important;

    max-width:44px !important;
    max-height:44px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    z-index:1 !important;

    border-radius:14px !important;

    border:
      1px solid
      rgba(
        113,
        91,
        230,
        .40
      )
      !important;

    background:
      linear-gradient(
        180deg,
        rgba(
          21,
          29,
          47,
          .98
        ),
        rgba(
          12,
          18,
          31,
          .98
        )
      )
      !important;

    color:
      #aa9cff
      !important;

    box-shadow:
      0
      8px
      22px
      rgba(
        0,
        0,
        0,
        .22
      )
      !important;
  }


  /*
   * Sadece Sunucular ekranı.
   */

  .app-shell:not(.servers-mode)
  .topbar >
  #mobileServerMenuBtn{

    display:none !important;
  }


  .app-shell.servers-mode
  .topbar >
  #mobileServerMenuBtn:not([hidden]){

    display:grid !important;

    place-items:center !important;
  }


  #mobileServerMenuBtn[hidden]{

    display:none !important;
  }


  #mobileServerMenuBtn
  .s2-server-icon{

    width:22px !important;

    height:22px !important;

    display:block !important;
  }


  /*
   * ================================
   * MAGAZA SAG ALT
   * ================================
   */

  #s2MobileStoreBtn{

    grid-column:3 !important;

    grid-row:2 !important;

    position:relative !important;

    align-self:center !important;

    justify-self:center !important;

    width:50px !important;

    height:50px !important;

    min-width:50px !important;

    min-height:50px !important;

    margin:0 !important;

    padding:0 !important;

    display:grid !important;

    place-items:center !important;

    border-radius:16px !important;
  }


  /*
   * Desktop header elemanları yok.
   */

  .topbar >
  #topRecentDms,

  .topbar >
  .top-recent-dms,

  .topbar >
  .top-actions{

    display:none !important;
  }


  /*
   * Eski JS'in topbar'a direkt attığı
   * fazladan butonları kapat.
   *
   * Bizim server ve store hariç.
   */

  header.topbar >
  button:not(
    #mobileServerMenuBtn
  ):not(
    #s2MobileStoreBtn
  ){

    display:none !important;
  }

}

/* S2_MOBILE_HEADER_FINAL_V5 END */





/*
 * ============================================================
 * S2_MOBILE_HEADER_FINAL_V6
 *
 * SATIR 1:
 *        CHATTER HALL VIP
 *
 * SATIR 2:
 * [server] [Kişisel | Sunucular | Ayarlar] [mağaza]
 *
 * Server butonu yoksa nav otomatik genişler.
 * ============================================================
 */

@media (max-width:900px){

  html,
  body{
    overflow-x:hidden !important;
  }


  header.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:50 !important;

    display:flex !important;
    flex-wrap:wrap !important;

    align-items:center !important;

    width:100% !important;
    max-width:100vw !important;

    height:auto !important;

    box-sizing:border-box !important;

    gap:8px !important;

    padding:
      calc(8px + env(safe-area-inset-top))
      16px
      12px
      !important;

    overflow:visible !important;
  }


  /*
   * ==========================================================
   * BRAND - TAM SATIR
   * ==========================================================
   */

  header.topbar >
  .brand-wordmark,

  .app-shell.servers-mode
  header.topbar >
  .brand-wordmark{

    order:1 !important;

    flex:
      0 0
      100%
      !important;

    width:100% !important;

    min-width:0 !important;
    min-height:62px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    margin:0 !important;
    margin-left:0 !important;

    padding:0 !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;
  }


  header.topbar >
  .brand-wordmark strong{

    font-size:19px !important;

    line-height:1 !important;

    white-space:nowrap !important;
  }


  header.topbar >
  .brand-wordmark span{

    font-size:10px !important;

    line-height:1 !important;

    letter-spacing:.21em !important;

    white-space:nowrap !important;
  }


  /*
   * ==========================================================
   * SERVER SWITCHER
   * ==========================================================
   */

  header.topbar >
  #mobileServerMenuBtn{

    order:2 !important;

    flex:
      0 0
      46px
      !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;

    width:46px !important;
    height:50px !important;

    min-width:46px !important;
    min-height:50px !important;

    max-width:46px !important;
    max-height:50px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    border-radius:15px !important;

    place-items:center !important;

    color:#aa9cff !important;

    background:
      linear-gradient(
        180deg,
        rgba(21,29,47,.98),
        rgba(12,18,31,.98)
      )
      !important;

    border:
      1px solid
      rgba(113,91,230,.40)
      !important;

    box-shadow:
      0 8px 22px
      rgba(0,0,0,.20)
      !important;
  }


  /*
   * Varsayılan gizli.
   */
  header.topbar >
  #mobileServerMenuBtn{

    display:none !important;
  }


  /*
   * Yalnız aktif sekme gerçekten Sunucular ise göster.
   */
  header.topbar:has(
    .top-tab.active[data-view="servers"]
  ) >
  #mobileServerMenuBtn:not([hidden]){

    display:grid !important;
  }


  #mobileServerMenuBtn
  .s2-server-icon{

    width:21px !important;
    height:21px !important;

    display:block !important;
  }


  /*
   * ==========================================================
   * ANA NAV
   * ==========================================================
   */

  header.topbar >
  .top-tabs{

    order:3 !important;

    flex:
      1 1
      0
      !important;

    width:auto !important;

    min-width:0 !important;

    height:50px !important;

    margin:0 !important;
    padding:5px !important;

    position:relative !important;

    top:auto !important;
    left:auto !important;
    right:auto !important;

    transform:none !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      )
      !important;

    overflow:hidden !important;
  }


  header.topbar >
  .top-tabs
  .top-tab{

    min-width:0 !important;

    padding:
      4px
      4px
      !important;

    font-size:12px !important;

    gap:4px !important;
  }


  header.topbar >
  .top-tabs
  .top-tab >
  span:last-child{

    min-width:0 !important;

    line-height:1.05 !important;

    white-space:normal !important;

    overflow:hidden !important;
  }


  /*
   * ==========================================================
   * MAGAZA
   * ==========================================================
   */

  header.topbar >
  #s2MobileStoreBtn{

    order:4 !important;

    flex:
      0 0
      52px
      !important;

    width:52px !important;
    height:50px !important;

    min-width:52px !important;
    min-height:50px !important;

    max-width:52px !important;
    max-height:50px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;

    display:grid !important;
    place-items:center !important;

    border-radius:16px !important;
  }


  /*
   * ==========================================================
   * HEADER'DAKİ ESKİ ELEMANLARI MOBİLDE TAMAMEN YOK ET
   * ==========================================================
   */

  header.topbar >
  #topRecentDms,

  header.topbar >
  .top-recent-dms,

  header.topbar >
  .top-actions{

    display:none !important;
  }


  /*
   * Sadece bu dört elemanın topbar'da yaşamasına izin ver.
   */
  header.topbar >
  :not(.brand-wordmark)
  :not(.top-tabs)
  :not(#mobileServerMenuBtn)
  :not(#s2MobileStoreBtn){

    max-width:100% !important;
  }

}

/* S2_MOBILE_HEADER_FINAL_V6 END */

/*
 * ============================================================
 * S2_MOBILE_MY_SERVERS_BUTTON_V1
 * ============================================================
 */

@media (max-width:900px){

  header.topbar >
  #mobileServerMenuBtn{

    flex:
      0 0 74px
      !important;

    width:74px !important;
    max-width:74px !important;

    height:50px !important;

    display:none !important;

    grid-template-columns:
      18px
      minmax(0,1fr)
      !important;

    align-items:center !important;
    justify-content:center !important;

    column-gap:5px !important;

    padding:
      0
      8px
      !important;

    border-radius:15px !important;

    font-size:9px !important;
    font-weight:800 !important;

    line-height:1 !important;

    white-space:nowrap !important;
  }


  header.topbar:has(
    .top-tab.active[data-view="servers"]
  ) >
  #mobileServerMenuBtn:not([hidden]){

    display:grid !important;
  }


  #mobileServerMenuBtn
  .s2-myservers-icon{

    width:17px !important;
    height:17px !important;

    display:block !important;

    flex:none !important;
  }


  #mobileServerMenuBtn
  .s2-myservers-label{

    display:block !important;

    min-width:0 !important;

    color:#dcd8ff !important;

    font-size:9px !important;

    letter-spacing:-.01em !important;
  }

}

/* S2_MOBILE_MY_SERVERS_BUTTON_V1 END */


/* =========================================================
   ROKSS_MOBILE_LAYOUT_AUTHORITY_V7
   Mobil header, kişisel ekran, kanal sohbeti ve ayar modalları.
========================================================= */

.mobile-channel-back{
  display:none;
}


@media(max-width:900px){

  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
    overscroll-behavior-x:none;
  }


  /* ------------------------------
     TEK MOBİL HEADER
  ------------------------------ */

  header.topbar,
  .app-shell.servers-mode header.topbar{
    position:sticky !important;
    top:0 !important;
    z-index:150 !important;

    display:grid !important;
    grid-template-columns:
      46px minmax(0,1fr) 48px !important;
    grid-template-rows:
      52px 50px !important;

    align-items:center !important;
    gap:8px !important;

    width:100% !important;
    max-width:100% !important;
    height:auto !important;

    padding:
      calc(6px + env(safe-area-inset-top))
      10px
      10px !important;

    overflow:visible !important;
    box-sizing:border-box !important;

    background:rgba(8,13,22,.97) !important;
    border-bottom:1px solid #192338 !important;
  }


  header.topbar > .brand-wordmark,
  .app-shell.servers-mode
  header.topbar > .brand-wordmark{
    grid-column:1 / -1 !important;
    grid-row:1 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    min-width:0 !important;
    min-height:52px !important;

    margin:0 !important;
    padding:0 !important;
    gap:8px !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;
  }


  header.topbar > .brand-wordmark strong{
    font-size:19px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }


  header.topbar > .brand-wordmark span{
    font-size:10px !important;
    line-height:1 !important;
    letter-spacing:.21em !important;
    white-space:nowrap !important;
  }


  header.topbar > #mobileServerMenuBtn{
    grid-column:1 !important;
    grid-row:2 !important;

    position:relative !important;
    inset:auto !important;

    display:none !important;
    place-items:center !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;

    margin:0 !important;
    padding:0 !important;
    transform:none !important;

    color:#b4a9ff !important;
    background:
      linear-gradient(180deg,#151d2f,#0c121f) !important;
    border:1px solid rgba(113,91,230,.42) !important;
    border-radius:15px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
  }


  header.topbar:has(
    .top-tab.active[data-view="servers"]
  ) > #mobileServerMenuBtn:not([hidden]){
    display:grid !important;
  }


  #mobileServerMenuBtn .s2-server-icon,
  #mobileServerMenuBtn .rokss-mobile-menu-svg,
  #mobileServerMenuBtn .s2-myservers-icon{
    display:block !important;
    width:22px !important;
    height:22px !important;
    margin:0 !important;
  }


  #mobileServerMenuBtn .s2-myservers-label{
    display:none !important;
  }


  header.topbar > .top-tabs{
    grid-column:2 !important;
    grid-row:2 !important;

    display:grid !important;
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;

    width:100% !important;
    min-width:0 !important;
    height:50px !important;

    margin:0 !important;
    padding:4px !important;
    gap:3px !important;

    position:relative !important;
    inset:auto !important;
    transform:none !important;
    overflow:hidden !important;
  }


  header.topbar > .top-tabs .top-tab{
    width:100% !important;
    min-width:0 !important;
    height:42px !important;

    padding:3px !important;
    gap:3px !important;

    font-size:11px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    overflow:hidden !important;
  }


  header.topbar > #s2MobileStoreBtn{
    grid-column:3 !important;
    grid-row:2 !important;

    display:grid !important;
    place-items:center !important;

    position:relative !important;
    inset:auto !important;

    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;

    margin:0 !important;
    padding:0 !important;

    color:#b4a9ff !important;
    background:
      linear-gradient(180deg,#151d2f,#0c121f) !important;
    border:1px solid rgba(113,91,230,.42) !important;
    border-radius:15px !important;
    box-shadow:0 8px 22px rgba(0,0,0,.20) !important;
    appearance:none !important;
  }


  header.topbar > #s2MobileStoreBtn svg{
    display:block !important;
    width:22px !important;
    height:22px !important;
    color:currentColor !important;
    fill:none !important;
  }


  header.topbar:has(
    > #mobileServerMenuBtn[hidden]
  ){
    grid-template-columns:
      minmax(0,1fr) 48px !important;
  }


  header.topbar:has(
    > #mobileServerMenuBtn[hidden]
  ) > .top-tabs{
    grid-column:1 !important;
  }


  header.topbar:has(
    > #mobileServerMenuBtn[hidden]
  ) > #s2MobileStoreBtn{
    grid-column:2 !important;
  }


  header.topbar > .top-actions,
  header.topbar > #topRecentDms,
  header.topbar > .top-recent-dms{
    display:none !important;
  }


  /* ------------------------------
     KİŞİSEL MERKEZ
  ------------------------------ */

  #personalView{
    padding:
      10px 10px
      max(82px,calc(60px + env(safe-area-inset-bottom))) !important;
  }


  #personalView .personal-hero{
    display:block !important;
    margin:0 !important;
    padding:16px !important;

    border:1px solid #273750 !important;
    border-radius:18px !important;
    box-shadow:0 12px 32px rgba(0,0,0,.17) !important;
  }


  #personalView .profile-actions{
    margin-top:14px !important;
    gap:8px !important;
  }


  #personalView .personal-grid{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    width:100% !important;
    margin:10px 0 0 !important;
    padding:0 !important;
    gap:10px !important;

    background:transparent !important;
    border:0 !important;
  }


  #personalView .personal-grid > .feature-card{
    min-width:0 !important;
    min-height:184px !important;
    height:auto !important;

    padding:14px !important;

    border:1px solid #273750 !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
  }


  #personalView .personal-grid > .rok-card{
    grid-column:1 / -1 !important;
    min-height:0 !important;
  }


  #personalView .feature-head{
    align-items:flex-start !important;
    gap:6px !important;
  }


  #personalView .feature-head h2{
    margin-top:3px !important;
    font-size:16px !important;
    line-height:1.12 !important;
  }


  #personalView .feature-number{
    margin-top:10px !important;
    font-size:31px !important;
  }


  #personalView .feature-card p{
    display:-webkit-box !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden !important;

    margin:8px 0 0 !important;
    min-height:32px !important;

    font-size:11px !important;
    line-height:1.4 !important;
  }


  #personalView .card-action{
    position:static !important;
    width:100% !important;
    min-height:40px !important;

    margin-top:10px !important;
    padding:8px 10px !important;

    font-size:11px !important;
  }


  #personalView .personal-bottom-grid{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;

    width:100% !important;
    margin:10px 0 0 !important;
    padding:0 !important;
    gap:10px !important;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:visible !important;
  }


  #personalView .personal-bottom-grid > article{
    padding:15px !important;
    border:1px solid #273750 !important;
    border-radius:16px !important;
    box-shadow:0 10px 28px rgba(0,0,0,.14) !important;
  }


  #personalView .panel-title-row h2{
    font-size:18px !important;
  }


  #personalView .profile-overview-grid > div{
    min-height:68px !important;
    padding:11px !important;
  }


  /* ------------------------------
     GENEL AYARLAR SEKME ŞERİDİ
  ------------------------------ */

  #settingsView .settings-menu{
    display:grid !important;
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    width:100% !important;
    min-width:0 !important;

    padding:5px !important;
    gap:4px !important;

    overflow:hidden !important;
    touch-action:pan-y !important;
  }


  #settingsView .settings-menu-item,
  #settingsView .rokss-settings-menu-item{
    width:100% !important;
    min-width:0 !important;
    min-height:40px !important;

    padding:7px 3px !important;

    font-size:10px !important;
    line-height:1.1 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }


  /* ------------------------------
     SUNUCU AYARLARI
  ------------------------------ */

  #serverSettingsModal{
    width:100vw !important;
    max-width:100vw !important;
    height:var(--rokss-visual-height,100dvh) !important;

    padding:
      max(8px,env(safe-area-inset-top))
      8px
      max(8px,env(safe-area-inset-bottom)) !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
    overscroll-behavior:none !important;
    touch-action:pan-y !important;
  }


  #serverSettingsModal .server-settings-modal{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
    border-radius:18px !important;
  }


  #serverSettingsModal .server-settings-head{
    min-height:72px !important;
    padding:15px 54px 12px 16px !important;
  }


  #serverSettingsModal .server-settings-head h2{
    font-size:23px !important;
  }


  #serverSettingsModal .close{
    top:10px !important;
    right:10px !important;
    z-index:5 !important;
  }


  #serverSettingsModal .server-settings-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    grid-template-rows:auto minmax(0,1fr) !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    overflow:hidden !important;
  }


  #serverSettingsModal .server-settings-nav{
    display:grid !important;
    grid-template-columns:
      repeat(4,minmax(0,1fr)) !important;

    width:100% !important;
    min-width:0 !important;

    padding:7px !important;
    gap:4px !important;

    border-right:0 !important;
    border-bottom:1px solid #23314a !important;

    overflow:hidden !important;
    touch-action:pan-y !important;
  }


  #serverSettingsModal .server-settings-tab{
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;

    padding:7px 3px !important;

    font-size:10px !important;
    line-height:1.12 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
  }


  #serverSettingsModal .server-settings-content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:100% !important;
    max-height:none !important;
    min-height:0 !important;

    padding:16px 14px 32px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }


  #serverSettingsModal .server-settings-page,
  #serverSettingsModal .server-settings-create-card,
  #serverSettingsModal .server-settings-item,
  #serverSettingsModal .server-vip-card,
  #serverSettingsModal .community-media-settings,
  #serverSettingsModal .community-media-grid,
  #serverSettingsModal .community-media-card,
  #serverSettingsModal .field{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }


  #serverSettingsModal .server-settings-form-grid,
  #serverSettingsModal .channel-create-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }


  #serverSettingsModal .server-settings-permission-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }


  #serverSettingsModal .server-vip-card{
    padding:14px !important;
    gap:14px !important;
  }


  #serverSettingsModal .server-vip-main{
    align-items:flex-start !important;
    gap:11px !important;
  }


  #serverSettingsModal .server-vip-logo{
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;
    border-radius:14px !important;
  }


  #serverSettingsModal .server-vip-copy{
    min-width:0 !important;
  }


  #serverSettingsModal .server-vip-features{
    display:grid !important;
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
    gap:5px 8px !important;
  }


  #serverSettingsModal .server-vip-side{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) !important;
    align-items:center !important;

    width:100% !important;
    gap:9px !important;
  }


  #serverSettingsModal .server-vip-side .primary-btn{
    width:100% !important;
    min-width:0 !important;
  }


  #serverSettingsModal .server-vip-status{
    grid-column:1 / -1 !important;
  }


  #serverSettingsModal .community-media-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }


  #serverSettingsModal .community-media-actions{
    width:100% !important;
  }


  #serverSettingsModal .community-media-actions > button{
    flex:1 1 120px !important;
    min-width:0 !important;
  }


  #serverSettingsModal .server-settings-item-top,
  #serverSettingsModal .server-settings-channel-row{
    align-items:flex-start !important;
    flex-direction:column !important;
  }


  #serverSettingsModal .server-settings-channel-actions{
    width:100% !important;
  }


  #serverSettingsModal .server-settings-channel-actions > *{
    flex:1 1 auto !important;
    min-width:0 !important;
  }


  #serverSettingsModal *{
    max-inline-size:100%;
  }


  /* ------------------------------
     TAM EKRAN MOBİL KANAL SOHBETİ
  ------------------------------ */

  html.rokss-mobile-channel-open,
  html.rokss-mobile-channel-open body{
    height:var(--rokss-visual-height,100dvh) !important;
    overflow:hidden !important;
  }


  #serversView.mobile-channel-chat-open.view.active{
    display:block !important;

    position:fixed !important;
    inset:0 !important;
    z-index:900 !important;

    width:100% !important;
    max-width:none !important;
    height:var(--rokss-visual-height,100dvh) !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
    background:#080d16 !important;
  }


  #serversView.mobile-channel-chat-open
  .servers-layout,
  #serversView.mobile-channel-chat-open
  .server-workspace,
  #serversView.mobile-channel-chat-open
  .workspace-grid{
    display:block !important;

    width:100% !important;
    height:100% !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;
  }


  #serversView.mobile-channel-chat-open
  .community-hero,
  #serversView.mobile-channel-chat-open
  .rooms-panel,
  #serversView.mobile-channel-chat-open
  .people-panel{
    display:none !important;
  }


  #serversView.mobile-channel-chat-open
  .chat-panel{
    display:grid !important;
    grid-template-rows:
      auto minmax(0,1fr) auto !important;

    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;

    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    background:#0b1220 !important;
  }


  #serversView.mobile-channel-chat-open
  .chat-head{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) !important;
    align-items:center !important;

    min-height:70px !important;
    gap:10px !important;
    padding:
      calc(8px + env(safe-area-inset-top))
      12px 10px !important;

    background:rgba(10,17,29,.98) !important;
    border-bottom:1px solid #1e2b41 !important;
  }


  #serversView.mobile-channel-chat-open
  .mobile-channel-back{
    display:grid !important;
    place-items:center !important;

    width:44px !important;
    height:44px !important;
    padding:0 !important;

    color:#fff !important;
    background:#131e30 !important;
    border:1px solid #293a59 !important;
    border-radius:14px !important;

    font-size:34px !important;
    line-height:1 !important;
  }


  #serversView.mobile-channel-chat-open
  .chat-head > div{
    min-width:0 !important;
  }


  #serversView.mobile-channel-chat-open
  .messages{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    padding:12px 10px 18px !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;
  }


  #serversView.mobile-channel-chat-open
  .composer{
    position:relative !important;
    inset:auto !important;

    display:grid !important;
    grid-template-columns:
      38px minmax(0,1fr) auto !important;
    align-items:center !important;

    width:100% !important;
    min-height:66px !important;

    gap:7px !important;
    padding:
      9px 9px
      max(11px,env(safe-area-inset-bottom)) !important;

    background:#0c1421 !important;
    border-top:1px solid #1f2d43 !important;
    overflow:visible !important;
  }


  #serversView.mobile-channel-chat-open
  .composer .plus{
    width:38px !important;
    height:44px !important;
    padding:0 !important;
  }


  #serversView.mobile-channel-chat-open
  #messageInput{
    width:100% !important;
    min-width:0 !important;
    height:44px !important;

    padding:0 12px !important;
    font-size:16px !important;
    background:#111b2b !important;
  }


  #serversView.mobile-channel-chat-open
  #sendBtn{
    height:44px !important;
    padding:0 14px !important;
    white-space:nowrap !important;
  }

}


@media(max-width:390px){

  header.topbar,
  .app-shell.servers-mode header.topbar{
    padding-left:7px !important;
    padding-right:7px !important;
    column-gap:5px !important;
  }


  header.topbar > .top-tabs .top-tab{
    font-size:10px !important;
  }


  #personalView .personal-grid > .feature-card{
    padding:12px !important;
  }


  #personalView .feature-head h2{
    font-size:15px !important;
  }


  #personalView .card-action{
    padding-left:8px !important;
    padding-right:8px !important;
    font-size:10px !important;
  }


  #serverSettingsModal .server-settings-tab{
    font-size:9px !important;
  }


  #serverSettingsModal .server-settings-permission-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }


  #serversView.mobile-channel-chat-open
  .composer{
    grid-template-columns:
      36px minmax(0,1fr) 52px !important;
  }


  #serversView.mobile-channel-chat-open
  #sendBtn{
    width:52px !important;
    padding:0 !important;
    font-size:0 !important;
  }


  #serversView.mobile-channel-chat-open
  #sendBtn::after{
    content:"➤";
    font-size:18px;
  }

}

/* ROKSS_MOBILE_LAYOUT_AUTHORITY_V7 END */

/* CHATTER HALL HEADER BRAND V3 */
.brand-wordmark {
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
  min-width: max-content;
}

.brand-wordmark strong {
  display: inline-block;
  white-space: nowrap;
  font-size: 17px;
  letter-spacing: .7px;
  line-height: 1;
}

.brand-wordmark span {
  display: inline-block;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 2px;
  opacity: .62;
  line-height: 1;
  text-transform: uppercase;
}


/* CHATTER HALL BRAND -> VIP SPACING V4 */
.topbar .brand-wordmark {
  margin-right: 14px;
}


/* CHATTER HALL PROFILE + VIP FIX V5 */
.topbar .brand-wordmark {
  margin-right: 20px !important;
  padding-right: 8px;
}

.topbar .brand-wordmark + * {
  margin-left: 10px !important;
}


/* CHATTER HALL VIP GAP V6 */
.topbar .brand-wordmark {
  margin-right: 34px !important;
  padding-right: 10px !important;
}

.topbar .brand-wordmark + * {
  margin-left: 18px !important;
}


/* CHATTER HALL -> VIP GAP V7 */
.topbar .brand-wordmark [class*="vip"],
.topbar .brand-wordmark + [class*="vip"] {
  margin-left: 28px !important;
}


/* CHATTER HALL VIP RIGHT GAP V8 */
.topbar .brand-wordmark {
  margin-right: 10px !important;
  padding-right: 0 !important;
}

.topbar .brand-wordmark + * {
  margin-left: 6px !important;   /* by ROKSS ile VIP arasi az */
  margin-right: 28px !important; /* VIP ile Kisisel/Profil arasi bosluk */
}


/* CHATTER HALL VIP RIGHT GAP V9 */
.topbar .brand-wordmark + * {
  margin-left: 6px !important;
  margin-right: 70px !important;
}


/* CHATTER HALL VIP FINAL GAP V10 */

/* Eski dolayli spacing kurallarini etkisizlestir */
.topbar .brand-wordmark {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.topbar .brand-wordmark + * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* VIP, by ROKSS'a yakin; bosluk sadece VIP'in saginda */
#rokssTopVipBadge {
  margin-left: 8px !important;
  margin-right: 70px !important;
}


/* CHATTER HALL TOPBAR GRID FINAL V11 */

@media (min-width: 901px) {

  .topbar,
  .app-shell.servers-mode .topbar {
    grid-template-columns:
      max-content
      minmax(460px, 720px)
      minmax(0, 1fr) !important;
  }

  .topbar .brand-wordmark {
    width: max-content !important;
    min-width: max-content !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  #rokssTopVipBadge {
    flex: 0 0 auto !important;
    margin-left: 8px !important;
    margin-right: 70px !important;
  }

}


/* CHATTER HALL TOPBAR 4 COLUMN FINAL V12 */

@media (min-width: 901px) {

  .topbar,
  .app-shell.servers-mode .topbar {
    grid-template-columns:
      max-content
      minmax(460px, 720px)
      minmax(0, 1fr)
      auto !important;

    grid-template-rows: 1fr !important;
    align-items: center !important;
  }

  .topbar > .brand-wordmark {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .topbar > .top-tabs {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .topbar > #topRecentDms,
  .topbar > .top-recent-dms {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .topbar > .top-actions {
    grid-column: 4 !important;
    grid-row: 1 !important;

    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  #rokssTopVipBadge {
    margin-left: 8px !important;
    margin-right: 70px !important;
  }

}


/* CHATTER HALL HEADER LOGO V1 */

.chatter-hall-header-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  object-fit: cover;

  border-radius: 9px;

  display: block;

  margin-right: 2px;

  filter:
    drop-shadow(0 0 8px rgba(125, 79, 255, .28));
}

.brand-wordmark {
  gap: 9px !important;
}


/* CHATTER HALL FINAL WORDMARK V1 */
.brand-wordmark {
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  min-width: max-content !important;
}

.chatter-hall-wordmark-image {
  display: block;
  height: 42px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}

#rokssTopVipBadge {
  margin-left: 10px !important;
  margin-right: 70px !important;
}


/* CHATTER HALL WORDMARK V2 */
.chatter-hall-wordmark-image {
  display: block;
  height: 52px !important;
  width: auto !important;
  max-width: 320px !important;
  object-fit: contain !important;
}


/* CHATTER HALL WORDMARK SIZE V3 */
.chatter-hall-wordmark-image {
  display: block !important;
  height: 62px !important;
  width: auto !important;
  max-width: 380px !important;
  object-fit: contain !important;
}


/* CHATTER HALL MOBILE CENTER V4 */
@media (max-width: 900px) {

  .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  .brand-wordmark {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .chatter-hall-wordmark-image {
    height: 54px !important;
    width: auto !important;
    max-width: min(92vw, 320px) !important;
    object-fit: contain !important;
  }

  #rokssTopVipBadge {
    margin-left: 10px !important;
    margin-right: 0 !important;
  }

}


/* =========================================================
   CHATTER HALL MOBILE HEADER FINAL V5
   - Logo tam ortada
   - VIP logonun saginda
   - Sunucu mobil header grid'i korunur
========================================================= */

@media (max-width: 900px) {

  header.topbar,
  .app-shell.servers-mode header.topbar {
    display: grid !important;

    grid-template-columns:
      46px
      minmax(0, 1fr)
      48px !important;

    grid-template-rows:
      auto
      auto !important;

    align-items: center !important;

    column-gap: 8px !important;
    row-gap: 10px !important;

    padding:
      8px
      8px
      10px !important;
  }


  /* -------------------------
     LOGO SATIRI
  ------------------------- */

  header.topbar > .brand-wordmark,
  .app-shell.servers-mode header.topbar > .brand-wordmark {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    /*
     * Sol ve sag kolon esit.
     * Logo tam merkeze gelir.
     * VIP sag kolonda kalir.
     */
    grid-template-columns:
      1fr
      auto
      1fr !important;

    align-items: center !important;
    justify-items: center !important;

    position: relative !important;
  }


  .chatter-hall-wordmark-image {
    grid-column: 2 !important;

    display: block !important;

    height: 58px !important;
    width: auto !important;

    max-width: 225px !important;

    margin: 0 !important;

    object-fit: contain !important;

    justify-self: center !important;
  }


  #rokssTopVipBadge {
    grid-column: 3 !important;

    justify-self: start !important;

    margin-left: 12px !important;
    margin-right: 0 !important;

    flex: none !important;
  }


  /* -------------------------
     ALT NAV SATIRI
  ------------------------- */

  header.topbar > #mobileServerMenuBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;

    margin: 0 !important;
  }


  header.topbar > .top-tabs {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 100% !important;

    margin: 0 !important;
  }


  header.topbar > #s2MobileStoreBtn {
    grid-column: 3 !important;
    grid-row: 2 !important;

    margin: 0 !important;
  }


  /* Desktop aksiyonlari mobil grid'e karismasin */
  header.topbar > .top-actions,
  header.topbar > #topRecentDms,
  header.topbar > .top-recent-dms {
    display: none !important;
  }

}


/* Biraz daha dar telefonlar */
@media (max-width: 390px) {

  .chatter-hall-wordmark-image {
    height: 54px !important;
    max-width: 205px !important;
  }

  #rokssTopVipBadge {
    margin-left: 8px !important;
  }

}









/* CHATTER_HALL_SERVER_DISCOVERY_LAYOUT_V2 */


@media (min-width:901px){


  /* =======================================================
     SIK KULLANILANLAR - TAM GENISLIK
  ======================================================= */


  .server-favorites-wide-shell-v2{

    width:100% !important;

    max-width:none !important;

    display:block !important;

    margin:
      0 0 14px 0 !important;

    padding:0 !important;

  }


  .server-favorites-wide-card-v2{

    width:100% !important;

    max-width:none !important;

    min-width:0 !important;

    min-height:150px !important;

    margin:0 !important;

    padding:
      18px 20px !important;

    align-self:stretch !important;

    box-sizing:
      border-box !important;

  }


  /*
   * Kartın içeriği solda kalsın.
   * Panel ise ekran boyunca uzasın.
   */

  .server-favorites-wide-card-v2
  > *{

    max-width:
      max-content;

  }



  /* =======================================================
     SUNUCULAR HEADER
  ======================================================= */


  .server-discover-header-clean-v2{

    display:flex !important;

    grid-template-columns:
      none !important;

    align-items:center !important;

    justify-content:
      space-between !important;

    gap:32px !important;

    width:100% !important;

    min-height:
      145px !important;

    padding:
      26px 34px !important;

    text-align:left !important;

  }



  /*
   * Sunucular başlığını sola yasla.
   */

  .server-discover-header-clean-v2
  > *:not(.server-discover-actions){

    margin-left:
      0 !important;

    margin-right:
      auto !important;

    justify-self:
      start !important;

    text-align:
      left !important;

  }


  .server-discover-header-clean-v2
  h1{

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    text-align:
      left !important;

  }


  .server-discover-header-clean-v2
  p{

    margin-left:
      0 !important;

    margin-right:
      0 !important;

    text-align:
      left !important;

  }



  /*
   * Davet + Oluştur sağ tarafta.
   */

  .server-discover-header-clean-v2
  .server-discover-actions{

    flex:
      0 0 auto !important;

    margin-left:
      auto !important;

    justify-content:
      flex-end !important;

    justify-self:
      end !important;

  }

}



/* CHATTER_HALL_SERVER_DISCOVERY_LAYOUT_V2_END */





/* =========================================================
   CHATTER HALL DISCOVERY SAFE V4
   SADECE GORSEL - RENDER SISTEMINE DOKUNMAZ
========================================================= */


@media (min-width:901px){


  /* -------------------------------------------------------
     ESKI DEV PANEL GORUNUMUNU KALDIR
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .server-discover-section{

    background:
      transparent !important;

    border:
      0 !important;

    box-shadow:
      none !important;

    border-radius:
      0 !important;

    min-height:
      0 !important;

    padding:
      16px 8px 25px !important;

    margin:
      0 !important;

  }


  [data-view-panel="server-discover"]
  .server-discover-section.sponsored,

  [data-view-panel="server-discover"]
  .server-discover-section.public{

    background:
      transparent !important;

    border:
      0 !important;

  }



  /* -------------------------------------------------------
     BASLIK SATIRI
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .server-discover-section-head{

    display:flex !important;

    align-items:flex-end !important;

    justify-content:
      space-between !important;

    gap:
      20px !important;

    width:
      100% !important;

    margin:
      0 0 14px !important;

    padding:
      0 2px !important;

  }


  [data-view-panel="server-discover"]
  .server-discover-section-head
  .eyebrow{

    display:block !important;

    margin-bottom:
      5px !important;

    color:
      #9b82ff !important;

    font-size:
      10px !important;

    line-height:
      1 !important;

    font-weight:
      900 !important;

    letter-spacing:
      .16em !important;

  }


  [data-view-panel="server-discover"]
  .server-discover-section-head
  h2{

    margin:
      0 !important;

    color:
      #f5f4ff !important;

    font-size:
      21px !important;

    line-height:
      1.15 !important;

  }


  [data-view-panel="server-discover"]
  .server-discover-section-head
  p{

    margin:
      6px 0 0 !important;

    color:
      #78869f !important;

    font-size:
      11px !important;

    line-height:
      1.45 !important;

  }



  /* -------------------------------------------------------
     SAYAC
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .discover-count{

    min-width:
      32px !important;

    height:
      29px !important;

    display:grid !important;

    place-items:center !important;

    flex:
      0 0 auto !important;

    padding:
      0 9px !important;

    border-radius:
      10px !important;

    border:
      1px solid
      rgba(130,96,255,.20) !important;

    background:
      rgba(113,77,220,.10) !important;

    color:
      #b8a5ff !important;

    font-size:
      11px !important;

    font-weight:
      900 !important;

  }



  /* -------------------------------------------------------
     LISTE - DAHA KOMPAKT VITRIN
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .server-discover-grid{

    display:grid !important;

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(270px,320px)
      ) !important;

    justify-content:
      start !important;

    align-items:
      start !important;

    column-gap:
      16px !important;

    row-gap:
      16px !important;

    width:
      100% !important;

    min-height:
      0 !important;

  }



  /*
   * Mevcut çalışan renderer hangi kart class'ını
   * kullanıyorsa onu bozmadan grid genişliğine oturt.
   */

  #sponsoredServerList > *,
  #publicServerList > *{

    max-width:
      100% !important;

  }



  /* -------------------------------------------------------
     İKİ BOLUM ARASI BOSLUK
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .server-discover-section.public{

    margin-top:
      4px !important;

  }



  /* -------------------------------------------------------
     SPONSORED SARI DEV KUTU ARTIK YOK
  ------------------------------------------------------- */

  [data-view-panel="server-discover"]
  .server-discover-section.sponsored::before,

  [data-view-panel="server-discover"]
  .server-discover-section.sponsored::after,

  [data-view-panel="server-discover"]
  .server-discover-section.public::before,

  [data-view-panel="server-discover"]
  .server-discover-section.public::after{

    display:
      none !important;

    content:
      none !important;

  }

}


/* =========================================================
   CHATTER HALL DISCOVERY SAFE V4 END
========================================================= */

/* =========================================================
   CHATTER HALL DISCOVERY COVER V1
========================================================= */

#sponsoredServerList > *,
#publicServerList > *{
  position:relative !important;
  overflow:hidden !important;
}

.discover-card-has-cover{
  position:relative !important;
}

.discover-card-cover{
  width:100%;
  height:118px;
  border-radius:18px;
  margin:0 0 14px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      180deg,
      rgba(6,8,18,.16) 0%,
      rgba(9,12,24,.68) 68%,
      rgba(9,12,24,.92) 100%
    ),
    radial-gradient(
      circle at 20% 20%,
      rgba(126,92,255,.34) 0%,
      rgba(126,92,255,0) 38%
    ),
    linear-gradient(
      135deg,
      rgba(9,16,33,.98),
      rgba(18,24,44,.98)
    );
  background-size:cover;
  background-position:center;
  border:1px solid rgba(140,109,255,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 30px rgba(0,0,0,.20);
}

.discover-card-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 30%,
      rgba(4,8,16,.65) 100%
    );
  pointer-events:none;
}

.discover-card-cover.is-sponsored{
  border-color:rgba(255,194,59,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 34px rgba(116,77,255,.16);
}

.discover-card-cover.is-fallback{
  background:
    linear-gradient(
      180deg,
      rgba(5,8,18,.06) 0%,
      rgba(8,11,24,.34) 40%,
      rgba(10,13,27,.92) 100%
    ),
    radial-gradient(
      circle at 20% 35%,
      rgba(120,80,255,.40) 0%,
      rgba(120,80,255,0) 36%
    ),
    radial-gradient(
      circle at 78% 18%,
      rgba(85,120,255,.18) 0%,
      rgba(85,120,255,0) 34%
    ),
    linear-gradient(
      120deg,
      #09111f 0%,
      #11182b 42%,
      #0c1221 100%
    );
}

.discover-card-cover-badge{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,205,87,.30);
  background:rgba(26,18,8,.52);
  color:#ffd76a;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

.discover-card-cover-title{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:2;
  color:#eef2ff;
  font-size:17px;
  font-weight:900;
  letter-spacing:.01em;
  text-shadow:0 2px 12px rgba(0,0,0,.44);
}

.discover-card-cover-subtitle{
  position:absolute;
  left:16px;
  bottom:36px;
  z-index:2;
  color:rgba(231,234,255,.74);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.discover-card-cover-glow{
  position:absolute;
  width:180px;
  height:180px;
  left:-45px;
  top:-52px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(146,104,255,.48) 0%, rgba(146,104,255,0) 70%);
  filter:blur(12px);
  pointer-events:none;
}

.discover-card-cover-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:32px 32px;
  opacity:.14;
  mix-blend-mode:screen;
  pointer-events:none;
}

#sponsoredServerList > * .discover-card-cover,
#publicServerList > * .discover-card-cover{
  max-width:100%;
}



/* =========================================================
   CHATTER HALL DISCOVERY BANNER V2
========================================================= */


@media (min-width:901px){


  /* VIP kart biraz daha premium/geniş */

  #sponsoredServerList{

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(330px,380px)
      ) !important;

  }


  .ch-native-discovery-card-v2{

    overflow:
      hidden !important;

    padding-top:
      0 !important;

  }


  .ch-native-discovery-card-vip-v2{

    border-color:
      rgba(214,166,65,.36) !important;

    background:
      linear-gradient(
        180deg,
        #121827,
        #0d1421
      ) !important;

    box-shadow:
      0 14px 35px
      rgba(0,0,0,.20),
      0 0 0 1px
      rgba(255,193,72,.025)
      inset !important;

  }



  /* =====================================================
     COVER
  ===================================================== */


  .ch-native-discovery-cover-v2{

    position:
      relative;

    width:
      calc(100% + 28px);

    height:
      125px;

    margin:
      -14px -14px 14px;

    overflow:
      hidden;

    background-size:
      cover !important;

    background-position:
      center !important;

    background-repeat:
      no-repeat !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

  }


  .ch-native-discovery-cover-v2.vip{

    border-bottom-color:
      rgba(226,174,61,.20);

  }


  .ch-native-discovery-cover-v2.fallback{

    background:
      radial-gradient(
        circle at 25% 25%,
        rgba(128,83,255,.38),
        transparent 32%
      ),
      radial-gradient(
        circle at 80% 10%,
        rgba(70,123,255,.20),
        transparent 28%
      ),
      linear-gradient(
        130deg,
        #10172b,
        #19133c 55%,
        #0d1425
      ) !important;

  }


  .ch-native-discovery-cover-overlay-v2{

    position:
      absolute;

    inset:
      0;

    background:
      linear-gradient(
        180deg,
        transparent 16%,
        rgba(5,8,17,.08) 40%,
        rgba(5,8,17,.75) 100%
      );

    pointer-events:
      none;

  }



  /* =====================================================
     COVER TEXT
  ===================================================== */


  .ch-native-discovery-cover-label-v2{

    position:
      absolute;

    left:
      14px;

    bottom:
      34px;

    z-index:
      2;

    color:
      #b9a6ff;

    font-size:
      8px;

    font-weight:
      900;

    letter-spacing:
      .16em;

  }


  .ch-native-discovery-cover-name-v2{

    position:
      absolute;

    left:
      14px;

    right:
      70px;

    bottom:
      13px;

    z-index:
      2;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      #fff;

    font-size:
      16px;

    text-shadow:
      0 2px 8px
      rgba(0,0,0,.65);

  }


  .ch-native-discovery-vip-pill-v2{

    position:
      absolute;

    top:
      12px;

    right:
      12px;

    z-index:
      3;

    min-width:
      40px;

    height:
      24px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    border:
      1px solid
      rgba(255,202,70,.34);

    border-radius:
      999px;

    background:
      rgba(28,20,7,.67);

    backdrop-filter:
      blur(8px);

    color:
      #ffd667;

    font-size:
      9px;

    font-weight:
      900;

    box-shadow:
      0 4px 18px
      rgba(0,0,0,.24);

  }

}


/* Mobil native görünüşü şimdilik bozma */
@media (max-width:900px){

  .ch-native-discovery-cover-v2{
    display:none !important;
  }

}


/* =========================================================
   CHATTER HALL DISCOVERY BANNER V2 END
========================================================= */


/* =========================================================
   CHATTER HALL DISCOVERY BANNER V2
========================================================= */


@media (min-width:901px){


  /* VIP kart biraz daha premium/geniş */

  #sponsoredServerList{

    grid-template-columns:
      repeat(
        auto-fill,
        minmax(330px,380px)
      ) !important;

  }


  .ch-native-discovery-card-v2{

    overflow:
      hidden !important;

    padding-top:
      0 !important;

  }


  .ch-native-discovery-card-vip-v2{

    border-color:
      rgba(214,166,65,.36) !important;

    background:
      linear-gradient(
        180deg,
        #121827,
        #0d1421
      ) !important;

    box-shadow:
      0 14px 35px
      rgba(0,0,0,.20),
      0 0 0 1px
      rgba(255,193,72,.025)
      inset !important;

  }



  /* =====================================================
     COVER
  ===================================================== */


  .ch-native-discovery-cover-v2{

    position:
      relative;

    width:
      calc(100% + 28px);

    height:
      125px;

    margin:
      -14px -14px 14px;

    overflow:
      hidden;

    background-size:
      cover !important;

    background-position:
      center !important;

    background-repeat:
      no-repeat !important;

    border-bottom:
      1px solid
      rgba(255,255,255,.07);

  }


  .ch-native-discovery-cover-v2.vip{

    border-bottom-color:
      rgba(226,174,61,.20);

  }


  .ch-native-discovery-cover-v2.fallback{

    background:
      radial-gradient(
        circle at 25% 25%,
        rgba(128,83,255,.38),
        transparent 32%
      ),
      radial-gradient(
        circle at 80% 10%,
        rgba(70,123,255,.20),
        transparent 28%
      ),
      linear-gradient(
        130deg,
        #10172b,
        #19133c 55%,
        #0d1425
      ) !important;

  }


  .ch-native-discovery-cover-overlay-v2{

    position:
      absolute;

    inset:
      0;

    background:
      linear-gradient(
        180deg,
        transparent 16%,
        rgba(5,8,17,.08) 40%,
        rgba(5,8,17,.75) 100%
      );

    pointer-events:
      none;

  }



  /* =====================================================
     COVER TEXT
  ===================================================== */


  .ch-native-discovery-cover-label-v2{

    position:
      absolute;

    left:
      14px;

    bottom:
      34px;

    z-index:
      2;

    color:
      #b9a6ff;

    font-size:
      8px;

    font-weight:
      900;

    letter-spacing:
      .16em;

  }


  .ch-native-discovery-cover-name-v2{

    position:
      absolute;

    left:
      14px;

    right:
      70px;

    bottom:
      13px;

    z-index:
      2;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      nowrap;

    color:
      #fff;

    font-size:
      16px;

    text-shadow:
      0 2px 8px
      rgba(0,0,0,.65);

  }


  .ch-native-discovery-vip-pill-v2{

    position:
      absolute;

    top:
      12px;

    right:
      12px;

    z-index:
      3;

    min-width:
      40px;

    height:
      24px;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    border:
      1px solid
      rgba(255,202,70,.34);

    border-radius:
      999px;

    background:
      rgba(28,20,7,.67);

    backdrop-filter:
      blur(8px);

    color:
      #ffd667;

    font-size:
      9px;

    font-weight:
      900;

    box-shadow:
      0 4px 18px
      rgba(0,0,0,.24);

  }

}


/* Mobil native görünüşü şimdilik bozma */
@media (max-width:900px){

  .ch-native-discovery-cover-v2{
    display:none !important;
  }

}


/* =========================================================
   CHATTER HALL DISCOVERY BANNER V2 END
========================================================= */













/* CHATTER_HALL_RECENT_CSS_FINAL_V5 */

@media (min-width:901px){

  /* ======================================================
     ANA SIK KULLANILANLAR PANELI
  ====================================================== */

  #serverFavoritesWideShellV2{
    width:100% !important;
    max-width:none !important;
  }

  #serverFavoritesWideShellV2 > *,
  .server-favorites-wide-card-v2{
    width:100% !important;
    max-width:none !important;
    display:block !important;
    text-align:center !important;
    padding:18px 26px 22px !important;
    box-sizing:border-box !important;
  }

  #serverFavoritesWideShellV2 > * > *,
  .server-favorites-wide-card-v2 > *{
    max-width:none !important;
  }


  /* ======================================================
     NATIVE 3 KARTIN BULUNDUGU SATIR
     ARTIK HER ZAMAN 5 KOLON
  ====================================================== */

  #serverFavoritesWideShellV2 > * > :last-child,
  .server-favorites-wide-card-v2 > :last-child{
    width:calc(100% - 20px) !important;
    max-width:1500px !important;

    margin:
      18px auto 0 !important;

    display:grid !important;

    grid-template-columns:
      repeat(5,minmax(0,1fr)) !important;

    grid-template-rows:
      1fr !important;

    gap:18px !important;

    align-items:stretch !important;
    justify-content:stretch !important;

    overflow:visible !important;
  }


  /* ======================================================
     NATIVE SUNUCU KARTLARI
     1 - 2 - 3
  ====================================================== */

  #serverFavoritesWideShellV2 > * > :last-child > *,
  .server-favorites-wide-card-v2 > :last-child > *{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:150px !important;
    height:auto !important;

    margin:0 !important;

    padding:15px !important;

    position:relative !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-start !important;

    border:
      1px solid rgba(108,127,176,.25) !important;

    border-radius:18px !important;

    background:
      linear-gradient(
        145deg,
        #121d31 0%,
        #0e182a 100%
      ) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.025),
      0 10px 25px rgba(0,0,0,.14) !important;

    box-sizing:border-box !important;

    cursor:pointer !important;

    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease !important;
  }


  #serverFavoritesWideShellV2 > * > :last-child > *:hover,
  .server-favorites-wide-card-v2 > :last-child > *:hover{
    transform:translateY(-2px) !important;

    border-color:
      rgba(134,105,255,.42) !important;

    box-shadow:
      0 15px 32px rgba(0,0,0,.22),
      0 0 25px rgba(106,77,255,.08) !important;
  }


  /* ikon */

  #serverFavoritesWideShellV2 > * > :last-child > * img,
  .server-favorites-wide-card-v2 > :last-child > * img{
    width:48px !important;
    height:48px !important;

    max-width:48px !important;
    max-height:48px !important;

    object-fit:cover !important;
  }


  /* ======================================================
     SUNUCUYA GIT
     Native karta CSS footer ekliyoruz.
     TIKLAMA hala native kartin kendisine ait.
  ====================================================== */

  #serverFavoritesWideShellV2 > * > :last-child > *::after,
  .server-favorites-wide-card-v2 > :last-child > *::after{
    content:"Sunucuya Git" !important;

    width:100% !important;
    min-height:37px !important;

    margin-top:auto !important;

    padding:9px 8px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    border:
      1px solid rgba(116,102,205,.28) !important;

    border-radius:10px !important;

    background:
      #19243b !important;

    color:#f5f4ff !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;

    box-sizing:border-box !important;

    pointer-events:none !important;
  }


  #serverFavoritesWideShellV2 > * > :last-child > *:hover::after,
  .server-favorites-wide-card-v2 > :last-child > *:hover::after{
    border-color:transparent !important;

    background:
      linear-gradient(
        135deg,
        #674cff,
        #875fff
      ) !important;
  }


  /* ======================================================
     4. SLOT
     Gercek DOM elemani degil.
     Renderer bunu silemez.
  ====================================================== */

  #serverFavoritesWideShellV2 > * > :last-child::before,
  .server-favorites-wide-card-v2 > :last-child::before{
    content:
      "4\A\A Boş\A Son kullanılan sunucu yok" !important;

    grid-column:4 !important;
    grid-row:1 !important;

    min-height:150px !important;

    padding:16px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    white-space:pre-line !important;

    border:
      1px dashed rgba(103,119,158,.20) !important;

    border-radius:18px !important;

    background:
      rgba(14,23,39,.45) !important;

    color:#68758c !important;

    font-size:11px !important;
    line-height:1.6 !important;

    box-sizing:border-box !important;
  }


  /* ======================================================
     5. SLOT
  ====================================================== */

  #serverFavoritesWideShellV2 > * > :last-child::after,
  .server-favorites-wide-card-v2 > :last-child::after{
    content:
      "5\A\A Boş\A Son kullanılan sunucu yok" !important;

    grid-column:5 !important;
    grid-row:1 !important;

    min-height:150px !important;

    padding:16px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;

    white-space:pre-line !important;

    border:
      1px dashed rgba(103,119,158,.20) !important;

    border-radius:18px !important;

    background:
      rgba(14,23,39,.45) !important;

    color:#68758c !important;

    font-size:11px !important;
    line-height:1.6 !important;

    box-sizing:border-box !important;
  }

}


/* küçük laptop */
@media (min-width:901px) and (max-width:1250px){

  #serverFavoritesWideShellV2 > * > :last-child,
  .server-favorites-wide-card-v2 > :last-child{
    grid-template-columns:
      repeat(5,minmax(190px,1fr)) !important;

    overflow-x:auto !important;
    padding-bottom:5px !important;
  }

}


/* CHATTER_HALL_RECENT_CSS_FINAL_V5_END */

/* CHATTER_HALL_RECENT_TEXT_CENTER_V6 */

@media (min-width:901px){

  #serverFavoritesWideShellV2 > *,
  .server-favorites-wide-card-v2{
    text-align:center !important;
  }

  /* üst başlık alanı */
  #serverFavoritesWideShellV2 > * > :first-child,
  .server-favorites-wide-card-v2 > :first-child{
    width:100% !important;
    margin:0 auto 16px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    text-align:center !important;
  }

  #serverFavoritesWideShellV2 > * > :first-child *,
  .server-favorites-wide-card-v2 > :first-child *{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

}

/* CHATTER_HALL_RECENT_TEXT_CENTER_V6_END */

/* CHATTER_HALL_PUBLIC_SERVERS_FULL_WIDTH_V1 */

@media (min-width:901px){

  /*
   * Herkese Açık Sunucular bölümü
   * content alanının sonuna kadar uzansın.
   */
  .server-discover-section.public{
    width:100% !important;
    max-width:none !important;
  }


  #publicServerList{
    width:100% !important;
    max-width:none !important;
    box-sizing:border-box !important;
  }


  /*
   * Liste boşsa tek empty-state kartı
   * bütün satırı kaplasın.
   *
   * Gerçek sunucular geldiğinde normal
   * kart grid düzenine müdahale etmez.
   */
  #publicServerList:has(> :only-child){
    grid-template-columns:
      minmax(0,1fr) !important;
  }


  #publicServerList > :only-child{
    grid-column:
      1 / -1 !important;

    width:
      100% !important;

    max-width:
      none !important;

    box-sizing:
      border-box !important;
  }

}

/* CHATTER_HALL_PUBLIC_SERVERS_FULL_WIDTH_V1_END */

/* =========================================================
   CHATTER HALL MESSAGE DELETE UI V1
========================================================= */

.message{
  position:relative !important;
}


.message-delete-btn{

  position:absolute;

  top:8px;
  right:9px;

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:
    1px solid transparent;

  border-radius:9px;

  background:
    rgba(10,16,27,.88);

  color:
    #74839b;

  cursor:pointer;

  opacity:0;
  transform:
    translateY(-2px);

  transition:
    opacity .14s ease,
    transform .14s ease,
    background .14s ease,
    color .14s ease,
    border-color .14s ease;

  z-index:5;
}


.message:hover
.message-delete-btn{

  opacity:1;

  transform:
    translateY(0);

}


.message-delete-btn:hover{

  color:
    #ff6978;

  background:
    rgba(80,24,34,.82);

  border-color:
    rgba(255,91,110,.27);

}


.message-delete-btn:disabled{

  opacity:.4 !important;

  cursor:
    wait;

}


@media (hover:none){

  .message-delete-btn{
    opacity:.72;
    transform:none;
  }

}

/* =========================================================
   CHATTER HALL MESSAGE DELETE UI V1 END
========================================================= */

/* CHATTER HALL MESSAGE DELETE VISIBILITY FIX V2 */

.message{
  position:relative !important;
  padding-right:48px !important;
}

.message-delete-btn{
  position:absolute !important;

  top:9px !important;
  right:10px !important;

  width:32px !important;
  height:32px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:1px solid rgba(120,137,170,.16) !important;
  border-radius:9px !important;

  background:#111a29 !important;
  color:#7f8da5 !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  transform:translateY(-2px) !important;

  transition:
    opacity .14s ease,
    visibility .14s ease,
    transform .14s ease,
    color .14s ease,
    background .14s ease !important;

  z-index:50 !important;
}

.message:hover > .message-delete-btn,
.message:focus-within > .message-delete-btn{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

.message-delete-btn:hover{
  background:rgba(104,29,42,.95) !important;
  border-color:rgba(255,91,110,.45) !important;
  color:#ff6575 !important;
}

.message-delete-btn svg{
  display:block !important;
  width:16px !important;
  height:16px !important;
}

/* mobilde hover olmadığı için hafif görünür */
@media(max-width:760px), (hover:none){
  .message-delete-btn{
    opacity:.72 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
}

/* CHATTER HALL MESSAGE DELETE VISIBILITY FIX V2 END */

/* CHATTER_HALL_MESSAGE_DELETE_CSS_V5_FINAL */

.message{
  position:relative !important;
  padding-right:48px !important;
}

.message > .message-delete-btn{

  position:absolute !important;

  top:8px !important;
  right:9px !important;

  width:31px !important;
  height:31px !important;

  padding:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  border:
    1px solid rgba(112,129,165,.20) !important;

  border-radius:9px !important;

  background:
    #111a29 !important;

  color:
    #71819b !important;

  cursor:pointer !important;

  opacity:0 !important;
  visibility:hidden !important;

  z-index:100 !important;

}

.message:hover > .message-delete-btn{

  opacity:1 !important;
  visibility:visible !important;

}

.message > .message-delete-btn:hover{

  color:#ff6677 !important;

  background:
    rgba(91,28,40,.96) !important;

  border-color:
    rgba(255,102,119,.38) !important;

}

.message > .message-delete-btn svg{

  width:16px !important;
  height:16px !important;

}

@media (hover:none){

  .message > .message-delete-btn{

    opacity:.75 !important;
    visibility:visible !important;

  }

}

/* CHATTER_HALL_MESSAGE_DELETE_CSS_V5_FINAL END */

/* CHATTER_HALL_AUTOMATIC_REGISTRATION_CSS_V3 */

.automatic-registration-settings{
  margin-top:18px;
  margin-bottom:18px;
  padding:16px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;
  background:rgba(12,19,31,.55);
}

.automatic-registration-header{
  margin-bottom:12px;
}

.automatic-registration-row{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:14px;
  align-items:center;
}

.automatic-registration-row label{
  color:#b8c2d7;
  font-size:13px;
  font-weight:700;
}

.automatic-registration-row select{
  width:100%;
}

@media(max-width:760px){
  .automatic-registration-row{
    grid-template-columns:1fr;
    gap:7px;
  }
}

/* CHATTER_HALL_AUTOMATIC_REGISTRATION_CSS_V3 END */

/* CHATTER_HALL_REGISTRATION_PANEL_CSS_V2 */

.automatic-registration-role-row{
  margin-top:12px;
}

.registration-queue-mode{
  padding:0 !important;
}

.registration-queue-panel{
  width:min(900px,calc(100% - 40px));
  margin:22px auto;
}

.registration-queue-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  border:1px solid rgba(120,136,170,.14);
  border-radius:16px;
  background:rgba(15,24,39,.92);
}

.registration-queue-head h2{
  margin:5px 0 6px;
}

.registration-queue-head p{
  margin:0;
  color:#8492aa;
  font-size:13px;
}

.registration-count{
  min-width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:rgba(108,91,255,.16);
  color:#c2b7ff;
  font-weight:900;
}

.registration-user-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.registration-user-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 16px;
  border:1px solid rgba(120,136,170,.13);
  border-radius:14px;
  background:rgba(15,24,39,.88);
}

.registration-user-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.registration-user-info{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.registration-user-name{
  display:flex;
  align-items:center;
  gap:7px;
}

.registration-unregistered-badge{
  padding:3px 7px;
  border-radius:7px;
  background:rgba(125,137,156,.13);
  color:#9ca8ba;
  font-size:9px;
  font-weight:900;
}

.registration-username,
.registration-user-info small{
  color:#74839b;
  font-size:11px;
}

.registration-user-actions{
  display:flex;
  gap:8px;
}

.registration-approve-btn,
.registration-ban-btn{
  height:36px;
  padding:0 13px;
  border-radius:9px;
  cursor:pointer;
  font-weight:800;
}

.registration-approve-btn{
  border:1px solid rgba(91,214,150,.28);
  background:rgba(39,126,86,.18);
  color:#67dda2;
}

.registration-ban-btn{
  border:1px solid rgba(255,94,113,.25);
  background:rgba(125,35,49,.18);
  color:#ff6c7c;
}

.registration-waiting-state{
  color:#aaa0ff;
  font-size:12px;
  font-weight:800;
}

.registration-empty{
  min-height:130px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px dashed rgba(120,136,170,.18);
  border-radius:14px;
  color:#8492aa;
}

@media(max-width:760px){
  .registration-queue-panel{
    width:calc(100% - 20px);
  }

  .registration-user-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .registration-user-actions{
    width:100%;
  }

  .registration-approve-btn,
  .registration-ban-btn{
    flex:1;
  }
}

/* CHATTER_HALL_REGISTRATION_PANEL_CSS_V2 END */

/* =========================================================
   CHATTER_HALL_CHANNEL_CATEGORIES_CSS_V1
========================================================= */

.channel-category{
  display:grid;
  gap:3px;
  margin:5px 0 9px;
}

.channel-category-header{
  width:100%;
  height:28px;
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 7px;
  border:0;
  background:transparent;
  color:#7f8da5;
  cursor:pointer;
  text-align:left;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.channel-category-header:hover{
  color:#d3dbee;
}

.channel-category-arrow{
  width:12px;
  font-size:14px;
  line-height:1;
  text-align:center;
}

.channel-category-body{
  display:grid;
  gap:3px;
}

.channel-category-body[hidden]{
  display:none;
}

.channel-category-create-field{
  margin-top:10px;
}

.server-category-manager{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(122,137,170,.12);
}

.server-category-manager-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:15px;
  margin-bottom:12px;
}

.server-category-manager-head h4{
  margin:4px 0 0;
}

.server-category-manager-head small{
  color:#738199;
}

.server-category-list{
  display:grid;
  gap:8px;
}

.server-category-row,
.server-channel-category-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid rgba(120,136,170,.12);
  border-radius:11px;
  background:rgba(14,22,36,.66);
}

.server-category-row-actions{
  display:flex;
  gap:7px;
}

.server-channel-category-move{
  margin-top:20px;
}

.server-channel-category-move-list{
  display:grid;
  gap:8px;
  margin-top:9px;
}

.server-channel-category-name{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}

.server-channel-category-row select{
  width:min(240px,45%);
}

@media(max-width:760px){

  .server-category-row,
  .server-channel-category-row{
    align-items:stretch;
    flex-direction:column;
  }

  .server-category-row-actions{
    width:100%;
  }

  .server-category-row-actions button{
    flex:1;
  }

  .server-channel-category-row select{
    width:100%;
  }

}

/* CHATTER_HALL_CHANNEL_CATEGORIES_CSS_V1 END */

/* CHATTER_HALL_CATEGORY_DRAG_REORDER_CSS_V1 */

.channel-category-header.category-draggable{
  cursor:grab;
}

.channel-category-header.category-draggable:active{
  cursor:grabbing;
}

.channel-category-header.category-draggable::after{
  content:"⋮⋮";
  margin-left:auto;
  color:#56667f;
  font-size:12px;
  letter-spacing:-3px;
  opacity:.65;
}

.channel-category-header.category-draggable:hover::after{
  color:#a99cff;
  opacity:1;
}

.channel-category.category-dragging{
  opacity:.42;
}

.channel-category.category-dragging
.channel-category-header{
  border:
    1px dashed rgba(126,105,255,.45);
  border-radius:7px;
  background:
    rgba(104,87,255,.08);
}

/* CHATTER_HALL_CATEGORY_DRAG_REORDER_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_SIDEBAR_MANAGEMENT_CSS_V2
========================================================= */

#channelList .nav-item{
  position:relative;
}

.channel-category{
  position:relative;
}


/* ODA GEAR */

.sidebar-channel-gear{
  width:24px;
  height:24px;
  flex:0 0 24px;

  margin-left:auto;

  display:grid;
  place-items:center;

  border-radius:6px;

  color:#75849d;

  font-size:13px;

  opacity:0;
  pointer-events:none;

  cursor:pointer;

  transition:
    opacity .12s ease,
    color .12s ease,
    background .12s ease;
}


#channelList .nav-item:hover
.sidebar-channel-gear{
  opacity:1;
  pointer-events:auto;
}


.sidebar-channel-gear:hover{
  color:#c3b9ff;
  background:rgba(116,99,255,.15);
}


/* CATEGORY GEAR */

.sidebar-category-gear{
  position:absolute;

  top:2px;
  right:2px;

  width:24px;
  height:24px;

  display:grid;
  place-items:center;

  border-radius:6px;

  color:#75849d;

  font-size:12px;

  opacity:0;
  pointer-events:none;

  cursor:pointer;

  z-index:4;

  transition:
    opacity .12s ease,
    color .12s ease,
    background .12s ease;
}


.channel-category:hover
.sidebar-category-gear{
  opacity:1;
  pointer-events:auto;
}


.sidebar-category-gear:hover{
  color:#c3b9ff;
  background:rgba(116,99,255,.15);
}


/*
 * Drag tutamaciyla gear ust uste binmesin.
 */
.channel-category-header.category-draggable{
  padding-right:34px;
}

.channel-category-header.category-draggable::after{
  margin-right:22px;
}


/* POPOVER */

.ch-sidebar-manage-menu{
  position:fixed;

  z-index:11000;

  width:190px;

  padding:6px;

  border:
    1px solid rgba(118,134,169,.20);

  border-radius:10px;

  background:#101a2a;

  box-shadow:
    0 18px 50px rgba(0,0,0,.46);
}


.ch-sidebar-manage-menu button{
  width:100%;
  min-height:36px;

  display:flex;
  align-items:center;
  gap:9px;

  padding:7px 9px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#cbd4e5;

  cursor:pointer;

  text-align:left;

  font-size:12px;
  font-weight:750;
}


.ch-sidebar-manage-menu button:hover{
  background:rgba(116,99,255,.13);
  color:#fff;
}


.ch-sidebar-manage-menu button.danger{
  color:#ff7383;
}


.ch-sidebar-manage-menu button.danger:hover{
  background:rgba(255,75,95,.11);
}


.ch-sidebar-manage-separator{
  height:1px;

  margin:5px 3px;

  background:
    rgba(122,138,170,.13);
}


/* ROLE MODAL */

.sidebar-permission-backdrop{
  position:fixed;
  inset:0;

  z-index:12000;

  display:none;

  align-items:center;
  justify-content:center;

  padding:20px;

  background:
    rgba(2,7,14,.72);

  backdrop-filter:
    blur(4px);
}


.sidebar-permission-backdrop.open{
  display:flex;
}


.sidebar-permission-modal{
  width:min(
    480px,
    calc(100vw - 30px)
  );

  max-height:
    min(720px,calc(100vh - 40px));

  overflow:auto;

  padding:20px;

  border:
    1px solid rgba(117,134,170,.20);

  border-radius:16px;

  background:#101a2a;

  box-shadow:
    0 24px 80px rgba(0,0,0,.55);
}


.sidebar-permission-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;

  gap:16px;
}


.sidebar-permission-modal-head h3{
  margin:5px 0 0;
}


.sidebar-permission-close{
  width:32px;
  height:32px;

  border:
    1px solid rgba(120,136,170,.18);

  border-radius:8px;

  background:#142136;

  color:#d7def0;

  cursor:pointer;

  font-size:18px;
}


.sidebar-permission-info{
  margin:12px 0 16px;

  color:#8492aa;

  font-size:12px;
  line-height:1.5;
}


.sidebar-permission-everyone{
  display:grid;

  gap:9px;

  margin-bottom:17px;

  padding:12px;

  border:
    1px solid rgba(120,136,170,.12);

  border-radius:10px;

  background:
    rgba(8,14,24,.38);
}


.sidebar-permission-everyone label{
  display:flex;
  align-items:center;

  gap:8px;

  color:#c9d2e3;

  font-size:12px;
}


.sidebar-permission-role-list{
  max-height:250px;

  overflow:auto;

  display:grid;

  gap:6px;

  margin:8px 0 18px;
}


.sidebar-permission-role{
  min-height:39px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:8px 10px;

  border:
    1px solid rgba(120,136,170,.10);

  border-radius:9px;

  background:
    rgba(12,20,33,.52);

  color:#cbd4e5;

  cursor:pointer;
}


.sidebar-permission-role:hover{
  border-color:
    rgba(118,101,255,.27);
}


.sidebar-permission-role-dot{
  width:9px;
  height:9px;

  flex:0 0 9px;

  border-radius:50%;
}

/* CHATTER_HALL_SIDEBAR_MANAGEMENT_CSS_V2 END */

/* =========================================================
   CHATTER_HALL_CHANNEL_GEAR_POSITION_FIX_V1
========================================================= */

#channelList .nav-item{
  position:relative !important;
  padding-right:36px !important;
}

#channelList .sidebar-channel-gear{
  position:absolute !important;

  top:50% !important;
  right:6px !important;

  margin:0 !important;

  transform:translateY(-50%) !important;

  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  z-index:10 !important;

  opacity:0;
  pointer-events:none;
}

#channelList .nav-item:hover
.sidebar-channel-gear{
  opacity:1 !important;
  pointer-events:auto !important;
}

#channelList .sidebar-channel-gear:hover{
  background:rgba(116,99,255,.16) !important;
  color:#c7bdff !important;
}

/* ses kanalinda da ayni konum */
#channelList .voice-channel-link
.sidebar-channel-gear{
  top:18px !important;
}

/* CHATTER_HALL_CHANNEL_GEAR_POSITION_FIX_V1 END */

/* CHATTER_HALL_CHANNEL_GEAR_FORCE_VISIBLE_V2 */

#channelList .nav-item{
  position:relative !important;
  padding-right:36px !important;
}

#channelList .nav-item > .sidebar-channel-gear{
  position:absolute !important;
  right:5px !important;
  top:50% !important;

  transform:translateY(-50%) !important;

  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  margin:0 !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  z-index:20 !important;
}

#channelList .nav-item:hover > .sidebar-channel-gear{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

#channelList .nav-item > .sidebar-channel-gear:hover{
  background:rgba(116,99,255,.18) !important;
  color:#c8bdff !important;
}

/* CHATTER_HALL_CHANNEL_GEAR_FORCE_VISIBLE_V2 END */

/* =========================================================
   CHATTER_HALL_DIRECT_ROOM_GEAR_CSS_V3
========================================================= */

#channelList .nav-item{
  position:relative !important;
  padding-right:36px !important;
}


#channelList .nav-item > .direct-room-gear{
  position:absolute !important;

  top:50% !important;
  right:5px !important;

  transform:
    translateY(-50%) !important;

  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:6px;

  color:#71819b;

  font-size:12px;

  opacity:0;
  visibility:hidden;

  pointer-events:none;

  cursor:pointer;

  z-index:50;

  transition:
    opacity .12s ease,
    color .12s ease,
    background .12s ease;
}


#channelList .nav-item:hover
> .direct-room-gear{
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;
}


#channelList .nav-item
> .direct-room-gear:hover{
  color:#c8bdff;

  background:
    rgba(116,99,255,.17);
}


/* MENU */

.direct-room-menu{
  position:fixed;

  z-index:15000;

  width:190px;

  padding:6px;

  border:
    1px solid rgba(118,134,169,.20);

  border-radius:10px;

  background:#101a2a;

  box-shadow:
    0 18px 50px rgba(0,0,0,.48);
}


.direct-room-menu button{
  width:100%;
  height:37px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:0 9px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#cbd4e5;

  cursor:pointer;

  font-size:12px;
  font-weight:750;

  text-align:left;
}


.direct-room-menu button:hover{
  background:
    rgba(116,99,255,.13);

  color:#fff;
}


.direct-room-menu button.danger{
  color:#ff7383;
}


.direct-room-menu button.danger:hover{
  background:
    rgba(255,75,95,.11);
}


.direct-room-menu-line{
  height:1px;

  margin:5px 3px;

  background:
    rgba(122,138,170,.13);
}

/* CHATTER_HALL_DIRECT_ROOM_GEAR_CSS_V3 END */

/* =========================================================
   CHATTER_HALL_VOICE_DIRECT_GEAR_CSS_V4
========================================================= */

#channelList .voice-channel-link{
  position:relative !important;
  padding-right:38px !important;
}


#channelList .voice-channel-link
> .voice-room-direct-gear-v4{
  position:absolute !important;

  top:50% !important;
  right:5px !important;

  transform:
    translateY(-50%) !important;

  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  border-radius:6px;

  color:#71819b;

  font-size:12px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  cursor:pointer;

  z-index:100;
}


#channelList .voice-channel-link:hover
> .voice-room-direct-gear-v4{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}


#channelList .voice-channel-link
> .voice-room-direct-gear-v4:hover{
  color:#c8bdff;

  background:
    rgba(116,99,255,.18);
}


/* VOICE MENU */

.voice-room-menu-v4{
  position:fixed;

  z-index:16000;

  width:190px;
  padding:6px;

  border:
    1px solid rgba(118,134,169,.20);

  border-radius:10px;

  background:#101a2a;

  box-shadow:
    0 18px 50px rgba(0,0,0,.48);
}


.voice-room-menu-v4 button{
  width:100%;
  min-height:37px;

  display:flex;
  align-items:center;
  gap:9px;

  padding:7px 9px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#cbd4e5;

  cursor:pointer;

  text-align:left;

  font-size:12px;
  font-weight:750;
}


.voice-room-menu-v4 button:hover{
  background:
    rgba(116,99,255,.13);

  color:#fff;
}


.voice-room-menu-v4 button.danger{
  color:#ff7383;
}


.voice-room-menu-v4 button.danger:hover{
  background:
    rgba(255,75,95,.11);
}


.voice-room-menu-line-v4{
  height:1px;
  margin:5px 3px;

  background:
    rgba(122,138,170,.13);
}

/* CHATTER_HALL_VOICE_DIRECT_GEAR_CSS_V4 END */

/* =========================================================
   CHATTER_HALL_VOICE_GROUP_GEAR_CSS_V5
========================================================= */

#channelList .voice-channel-group{
  position:relative !important;
}


/*
 * Voice count sağda durduğu için biraz sola al.
 */
#channelList .voice-channel-group
.voice-channel-count{
  margin-right:30px !important;
}


/*
 * Gear artık voice link'in değil,
 * bütün voice group'un çocuğu.
 */
#channelList .voice-channel-group
> .voice-group-admin-gear-v5{
  position:absolute !important;

  top:7px !important;
  right:5px !important;

  width:24px !important;
  height:24px !important;

  display:grid !important;
  place-items:center !important;

  padding:0 !important;

  border:0 !important;
  border-radius:6px !important;

  background:transparent !important;

  color:#71819b !important;

  font-size:12px !important;

  opacity:0 !important;
  visibility:hidden !important;

  pointer-events:none !important;

  cursor:pointer !important;

  z-index:500 !important;

  transition:
    opacity .12s ease,
    background .12s ease,
    color .12s ease;
}


#channelList .voice-channel-group:hover
> .voice-group-admin-gear-v5{
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:auto !important;
}


#channelList .voice-channel-group
> .voice-group-admin-gear-v5:hover{
  color:#c9c0ff !important;

  background:
    rgba(116,99,255,.18) !important;
}

/* CHATTER_HALL_VOICE_GROUP_GEAR_CSS_V5 END */

/* =========================================================
   CHATTER_HALL_SERVER_SETTINGS_WIDE_V1
========================================================= */


/* ANA MODAL */

#serverSettingsModal .modal,
#serverSettingsModal .server-settings-modal{
  width:min(1480px,94vw) !important;
  max-width:none !important;

  height:min(920px,92vh) !important;
  max-height:92vh !important;

  border-radius:18px !important;
}


/* AYARLAR ANA SAYFA YAPISI */

#serverSettingsModal{
  --server-settings-sidebar-width:240px;
}


#serverSettingsModal .server-settings-layout,
#serverSettingsModal .server-settings-body{
  min-height:0 !important;
  height:100% !important;
}


/* SOL MENÜ */

#serverSettingsModal .server-settings-nav,
#serverSettingsModal .server-settings-sidebar{
  width:var(--server-settings-sidebar-width) !important;
  min-width:var(--server-settings-sidebar-width) !important;

  padding:22px 14px !important;
}


/* SAĞ İÇERİK */

#serverSettingsModal .server-settings-page{
  width:100% !important;
  max-width:none !important;

  padding:34px 38px 52px !important;
}


#serverSettingsModal
[data-server-settings-page="channels"]{
  width:100% !important;
  max-width:none !important;
}


/*
 * Kanal yönetimi içindeki mevcut max-width
 * sınırlarını kaldır.
 */
#serverSettingsModal
[data-server-settings-page="channels"] > *{
  max-width:none !important;
}


/* KANAL OLUSTURMA KARTI */

#serverSettingsModal
[data-server-settings-page="channels"]
:has(#serverSettingsChannelName)
:has(#serverSettingsChannelType)
:has(#serverSettingsCreateChannel){
  width:100% !important;
  max-width:none !important;
}


/* INPUTLAR DAHA FERAH */

#serverSettingsChannelName,
#serverSettingsChannelType,
#serverSettingsChannelCategory{
  min-height:46px !important;
}


#serverSettingsChannelName{
  width:100% !important;
}


/*
 * KANAL OLUŞTURMA ALANI:
 * isim solda geniş,
 * tür/kategori sağda.
 */
#serverSettingsModal
[data-server-settings-page="channels"]
.server-settings-create-channel,
#serverSettingsModal
[data-server-settings-page="channels"]
.channel-create-form{
  display:grid !important;

  grid-template-columns:
    minmax(360px,1fr)
    minmax(210px,280px)
    minmax(210px,280px) !important;

  gap:14px !important;

  align-items:end !important;
}


/* ODA LISTESI */

#serverSettingsChannelList{
  width:100% !important;

  display:grid !important;

  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:12px !important;

  margin-top:18px !important;
}


/*
 * Kanal kartları artık yarım ekranı
 * düzgün kullanacak.
 */
#serverSettingsChannelList > *{
  width:100% !important;
  min-width:0 !important;

  margin:0 !important;
}


/* KANAL KARTLARI */

#serverSettingsChannelList
.server-settings-channel-row,
#serverSettingsChannelList
.channel-settings-row{
  min-height:72px !important;

  padding:14px 15px !important;

  border-radius:13px !important;
}


/* BUTONLAR */

#serverSettingsChannelList button{
  min-height:38px;
}


/* KATEGORI BOLUMU */

#serverSettingsCategoryManager{
  width:100% !important;

  margin-top:28px !important;
  padding-top:26px !important;
}


.server-category-list{
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:10px !important;
}


.server-channel-category-move-list{
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:10px !important;
}


/* DAHA TEMIZ SCROLL */

#serverSettingsModal ::-webkit-scrollbar{
  width:8px;
}


#serverSettingsModal ::-webkit-scrollbar-track{
  background:transparent;
}


#serverSettingsModal ::-webkit-scrollbar-thumb{
  border-radius:10px;

  background:
    rgba(128,143,179,.32);
}


/* LAPTOP */

@media(max-width:1200px){

  #serverSettingsModal .modal,
  #serverSettingsModal .server-settings-modal{
    width:96vw !important;
  }


  #serverSettingsChannelList,
  .server-category-list,
  .server-channel-category-move-list{
    grid-template-columns:
      1fr !important;
  }

}


/* MOBIL */

@media(max-width:760px){

  #serverSettingsModal .modal,
  #serverSettingsModal .server-settings-modal{
    width:100vw !important;
    height:100vh !important;

    max-width:none !important;
    max-height:none !important;

    border-radius:0 !important;
  }


  #serverSettingsModal .server-settings-page{
    padding:
      22px 16px 40px !important;
  }


  #serverSettingsModal{
    --server-settings-sidebar-width:190px;
  }

}

/* CHATTER_HALL_SERVER_SETTINGS_WIDE_V1 END */

/* =========================================================
   CHATTER_HALL_CHANNEL_SETTINGS_SUBNAV_CSS_V1
========================================================= */

[data-server-settings-page="channels"]{
  width:100% !important;
  max-width:none !important;
}


.channel-settings-workspace-v1{
  min-height:620px;

  display:grid;

  grid-template-columns:
    205px minmax(0,1fr);

  margin-top:4px;

  border:
    1px solid rgba(120,136,170,.14);

  border-radius:14px;

  overflow:hidden;

  background:
    rgba(10,17,29,.32);
}


/* IC SOL MENU */

.channel-settings-inner-nav-v1{
  padding:18px 10px;

  border-right:
    1px solid rgba(120,136,170,.13);

  background:
    rgba(8,14,24,.35);
}


.channel-settings-inner-nav-head-v1{
  display:flex;
  flex-direction:column;

  gap:4px;

  padding:
    4px 10px 15px;
}


.channel-settings-inner-nav-head-v1 strong{
  color:#e4e9f5;

  font-size:14px;
}


.channel-settings-inner-tab-v1{
  width:100%;
  min-height:43px;

  display:grid;

  grid-template-columns:
    28px minmax(0,1fr) auto;

  align-items:center;

  gap:7px;

  margin-bottom:4px;

  padding:
    7px 9px;

  border:0;
  border-radius:9px;

  background:transparent;

  color:#8f9db4;

  cursor:pointer;

  text-align:left;

  font-size:12px;
  font-weight:800;

  transition:
    background .13s ease,
    color .13s ease;
}


.channel-settings-inner-tab-v1:hover{
  color:#d9e0ef;

  background:
    rgba(116,99,255,.08);
}


.channel-settings-inner-tab-v1.active{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(91,91,215,.27),
      rgba(89,72,180,.20)
    );
}


.channel-settings-inner-icon-v1{
  width:27px;
  height:27px;

  display:grid;
  place-items:center;

  border-radius:7px;

  background:
    rgba(91,108,156,.12);

  color:#aebaf0;

  font-size:12px;
}


.channel-settings-inner-tab-v1.active
.channel-settings-inner-icon-v1{
  background:
    rgba(108,90,255,.20);

  color:#cabfff;
}


.channel-settings-inner-tab-v1 small{
  min-width:23px;
  height:21px;

  display:grid;
  place-items:center;

  padding:0 5px;

  border-radius:7px;

  background:
    rgba(100,116,150,.10);

  color:#76859d;

  font-size:9px;
}


.channel-settings-inner-tab-v1.active small{
  color:#bdb3ff;

  background:
    rgba(112,94,255,.15);
}


/* SAG ICERIK */

.channel-settings-inner-content-v1{
  min-width:0;

  padding:
    25px 28px 40px;
}


.channel-settings-inner-header-v1{
  margin-bottom:20px;
}


.channel-settings-inner-header-v1 h3{
  margin:
    5px 0 5px;

  font-size:21px;
}


.channel-settings-inner-header-v1 p{
  margin:0;

  color:#7f8da5;

  font-size:12px;
}


.channel-settings-inner-body-v1{
  display:block;

  min-width:0;
}


/* CREATE CARD */

.channel-settings-inner-body-v1
.server-settings-create-card{
  width:100%;

  margin:0 0 18px;
}


.channel-settings-inner-body-v1
.channel-create-grid{
  grid-template-columns:
    minmax(260px,1fr)
    minmax(220px,300px) !important;

  align-items:end;
}


/*
 * Tür dropdown'u iç menüden seçildiği için
 * ekrandan tamamen çıkar.
 */
#serverSettingsChannelType{
  display:none !important;
}


/* LISTELER */

.channel-settings-inner-body-v1
#serverSettingsChannelList{
  width:100%;

  display:grid;

  gap:9px;
}


.channel-settings-inner-body-v1
#serverSettingsChannelList > *{
  margin:0;
}


/* KATEGORI MANAGER */

.channel-settings-inner-body-v1
#serverSettingsCategoryManager{
  width:100%;

  margin-top:0;

  padding-top:0;

  border-top:0;
}


.channel-settings-inner-body-v1
.server-category-manager-head{
  margin-top:0;
}


/*
 * Kategori sekmesinde ikinci kez
 * "Kategori Yönetimi" başlığı biraz gereksiz
 * büyük görünmesin.
 */
.channel-settings-inner-body-v1
.server-category-manager-head .eyebrow{
  display:none;
}


@media(max-width:900px){

  .channel-settings-workspace-v1{
    grid-template-columns:
      170px minmax(0,1fr);
  }


  .channel-settings-inner-content-v1{
    padding:
      22px 18px 35px;
  }

}


@media(max-width:650px){

  .channel-settings-workspace-v1{
    display:block;
  }


  .channel-settings-inner-nav-v1{
    display:flex;

    gap:5px;

    overflow-x:auto;

    border-right:0;

    border-bottom:
      1px solid rgba(120,136,170,.13);
  }


  .channel-settings-inner-nav-head-v1{
    display:none;
  }


  .channel-settings-inner-tab-v1{
    flex:0 0 auto;

    width:auto;

    min-width:145px;

    margin:0;
  }


  .channel-settings-inner-content-v1{
    padding:
      20px 14px 32px;
  }

}

/* CHATTER_HALL_CHANNEL_SETTINGS_SUBNAV_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_ROLE_SETTINGS_SPLIT_VIEW_CSS_V1
========================================================= */

[data-server-settings-page="roles"]{
  width:100% !important;
  max-width:none !important;
}

.role-settings-workspace-v1{
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:620px;
  margin-top:4px;
  border:1px solid rgba(120,136,170,.14);
  border-radius:14px;
  overflow:hidden;
  background:rgba(10,17,29,.32);
}

.role-settings-sidebar-v1{
  padding:18px 12px;
  border-right:1px solid rgba(120,136,170,.13);
  background:rgba(8,14,24,.35);
}

.role-settings-sidebar-head-v1{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:4px 10px 14px;
}

.role-settings-sidebar-head-v1 strong{
  color:#e4e9f5;
  font-size:14px;
}

.role-settings-create-nav-v1,
.role-settings-nav-item-v1{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin-bottom:6px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#94a3bb;
  cursor:pointer;
  text-align:left;
  transition:background .14s ease,color .14s ease;
}

.role-settings-create-nav-v1:hover,
.role-settings-nav-item-v1:hover{
  background:rgba(116,99,255,.08);
  color:#e5ebff;
}

.role-settings-create-nav-v1.active,
.role-settings-nav-item-v1.active{
  background:linear-gradient(
    90deg,
    rgba(91,91,215,.27),
    rgba(89,72,180,.20)
  );
  color:#fff;
}

.role-settings-plus-v1{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:rgba(108,90,255,.18);
  color:#c7bbff;
  font-weight:900;
}

.role-settings-sidebar-list-v1{
  display:grid;
  gap:4px;
}

.role-settings-color-dot-v1{
  width:12px;
  height:12px;
  border-radius:999px;
  flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.05);
}

.role-settings-nav-text-v1{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:700;
}

.role-settings-detail-v1{
  min-width:0;
  padding:26px 28px 38px;
}

.role-settings-detail-head-v1{
  margin-bottom:20px;
}

.role-settings-detail-head-v1 h3{
  margin:5px 0 5px;
  font-size:21px;
}

.role-settings-detail-head-v1 p{
  margin:0;
  color:#7f8da5;
  font-size:12px;
}

.role-settings-detail-body-v1{
  min-width:0;
}

.role-settings-detail-body-v1 .server-settings-create-card{
  width:100%;
  margin:0 0 18px;
}

.role-settings-detail-list-v1{
  display:grid;
  gap:14px;
}

.role-settings-detail-list-v1 > *{
  margin:0 !important;
}

@media(max-width:900px){
  .role-settings-workspace-v1{
    grid-template-columns:200px minmax(0,1fr);
  }

  .role-settings-detail-v1{
    padding:22px 18px 34px;
  }
}

@media(max-width:650px){
  .role-settings-workspace-v1{
    display:block;
  }

  .role-settings-sidebar-v1{
    border-right:0;
    border-bottom:1px solid rgba(120,136,170,.13);
  }
}

/* CHATTER_HALL_ROLE_SETTINGS_SPLIT_VIEW_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_REGISTRATION_SETTINGS_PAGE_CSS_V1
========================================================= */

.registration-settings-page-v1{
  width:100%;
  max-width:none !important;
}


.registration-settings-page-v1 > h3{
  margin:
    5px 0 6px;
}


.registration-settings-description-v1{
  max-width:720px;

  margin:
    0 0 22px;

  color:#7f8da5;

  font-size:12px;
  line-height:1.55;
}


.registration-settings-content-v1{
  width:100%;
}


.registration-settings-content-v1
.automatic-registration-settings{
  width:100%;

  margin:0 !important;

  padding:22px !important;

  border:
    1px solid rgba(120,136,170,.14);

  border-radius:14px;

  background:
    rgba(10,17,29,.40);
}


/*
 * Artık kendi sayfasında olduğu için
 * başlığını daha ferah tut.
 */
.registration-settings-content-v1
.automatic-registration-header{
  margin-bottom:20px;
}


/*
 * Kayıt odası / üye rolü satırları.
 */
.registration-settings-content-v1
.automatic-registration-row,
.registration-settings-content-v1
.automatic-registration-role-row{
  grid-template-columns:
    160px minmax(0,1fr) !important;

  gap:22px !important;

  padding:
    12px 0;
}


.registration-settings-content-v1 select{
  width:100% !important;
  min-height:46px;
}


.registration-settings-actions-v1{
  display:flex;
  justify-content:flex-end;

  margin-top:18px;
}


.registration-settings-actions-v1
.primary-btn{
  min-width:190px;
}


/* SOL MENU */

.registration-settings-nav-v1{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
}


.registration-settings-nav-icon-v1{
  width:16px;

  display:inline-grid;
  place-items:center;

  color:#a895ff;
}


@media(max-width:700px){

  .registration-settings-content-v1
  .automatic-registration-row,
  .registration-settings-content-v1
  .automatic-registration-role-row{
    grid-template-columns:
      1fr !important;

    gap:7px !important;
  }

}

/* CHATTER_HALL_REGISTRATION_SETTINGS_PAGE_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_SERVER_VIP_SETTINGS_PAGE_CSS_V1
========================================================= */

.server-vip-settings-page-v1{
  width:100%;
  max-width:none !important;
}


.server-vip-settings-page-v1 > h3{
  margin:
    5px 0 6px;
}


.server-vip-settings-description-v1{
  margin:
    0 0 24px;

  color:#7f8da5;

  font-size:12px;
}


.server-vip-settings-content-v1{
  width:100%;
}


/*
 * Kendi sayfasına geçtiği için
 * VIP kartı tam genişlik kullansın.
 */
.server-vip-settings-content-v1
#serverVipCard{
  width:100% !important;

  margin:
    0 !important;

  min-height:190px;
}


.server-vip-settings-nav-v1{
  width:100%;

  min-height:42px;

  display:flex;
  align-items:center;

  gap:8px;

  padding:
    9px 13px;

  border:0;
  border-radius:10px;

  background:transparent;

  color:#a5b0c3;

  cursor:pointer;

  text-align:left;

  font-size:12px;
  font-weight:800;
}


.server-vip-settings-nav-v1:hover{
  color:#fff;

  background:
    rgba(116,99,255,.08);
}


.server-vip-settings-nav-v1.active{
  color:#fff;

  background:
    linear-gradient(
      90deg,
      rgba(92,90,205,.28),
      rgba(86,70,168,.20)
    );
}


.server-vip-settings-nav-icon-v1{
  width:17px;

  display:grid;
  place-items:center;

  color:#f5c95c;

  font-size:12px;
}

/* CHATTER_HALL_SERVER_VIP_SETTINGS_PAGE_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_SERVER_VIP_NAV_NEON_FRAME_V3
========================================================= */

.server-vip-settings-nav-v1{
  position:relative !important;

  margin:
    10px 12px 18px !important;

  width:
    calc(100% - 24px) !important;

  min-height:
    48px !important;

  padding:
    10px 14px !important;

  border:
    1px solid rgba(157,92,255,.92) !important;

  border-radius:
    11px !important;

  background:
    linear-gradient(
      135deg,
      rgba(104,63,218,.18),
      rgba(96,55,190,.08)
    ) !important;

  color:
    #eee9ff !important;

  box-shadow:
    0 0 0 1px rgba(155,91,255,.14),
    0 0 10px rgba(140,70,255,.34),
    0 0 24px rgba(115,54,235,.14),
    inset 0 0 18px rgba(138,75,255,.07) !important;

  overflow:visible !important;

  animation:
    chatterVipNavPulseV3
    2.8s
    ease-in-out
    infinite;
}


/* ince ikinci neon halka */
.server-vip-settings-nav-v1::after{
  content:"";

  position:absolute;

  inset:-4px;

  border:
    1px solid rgba(141,73,255,.18);

  border-radius:
    14px;

  pointer-events:none;

  box-shadow:
    0 0 14px rgba(136,69,255,.14);
}


/* yıldız */
.server-vip-settings-nav-icon-v1{
  color:
    #d5a8ff !important;

  text-shadow:
    0 0 6px rgba(189,119,255,.95),
    0 0 13px rgba(140,65,255,.55) !important;
}


/* HOVER */
.server-vip-settings-nav-v1:hover{
  border-color:
    #bb7cff !important;

  background:
    linear-gradient(
      135deg,
      rgba(116,69,236,.30),
      rgba(124,61,220,.15)
    ) !important;

  box-shadow:
    0 0 0 1px rgba(183,116,255,.22),
    0 0 15px rgba(158,77,255,.52),
    0 0 34px rgba(119,54,237,.23),
    inset 0 0 22px rgba(149,84,255,.12) !important;
}


/* SECILI */
.server-vip-settings-nav-v1.active{
  border-color:
    #c18aff !important;

  background:
    linear-gradient(
      135deg,
      rgba(111,65,224,.42),
      rgba(125,63,220,.22)
    ) !important;

  box-shadow:
    0 0 0 1px rgba(193,138,255,.28),
    0 0 18px rgba(163,82,255,.60),
    0 0 40px rgba(124,57,244,.24),
    inset 0 0 25px rgba(155,90,255,.14) !important;
}


@keyframes chatterVipNavPulseV3{

  0%,
  100%{
    box-shadow:
      0 0 0 1px rgba(155,91,255,.12),
      0 0 8px rgba(140,70,255,.27),
      0 0 20px rgba(115,54,235,.10),
      inset 0 0 18px rgba(138,75,255,.06);
  }

  50%{
    box-shadow:
      0 0 0 1px rgba(172,104,255,.19),
      0 0 14px rgba(151,75,255,.44),
      0 0 30px rgba(120,55,239,.17),
      inset 0 0 21px rgba(145,82,255,.09);
  }

}

/* CHATTER_HALL_SERVER_VIP_NAV_NEON_FRAME_V3 END */

/* =========================================================
   CHATTER_HALL_COMMUNITY_DELETE_CSS_V1
========================================================= */


/* SOL AYAR MENÜSÜ */

.server-settings-nav-delete-v1{
  position:relative !important;

  min-height:100% !important;

  padding-bottom:88px !important;
}


/* EN ALTTA KIRMIZI BUTON */

.server-delete-nav-v1{
  position:absolute !important;

  left:12px !important;
  right:12px !important;
  bottom:18px !important;

  width:
    calc(100% - 24px) !important;

  min-height:
    44px !important;

  display:flex !important;
  align-items:center !important;

  gap:8px !important;

  padding:
    9px 13px !important;

  border:
    1px solid rgba(255,72,91,.35) !important;

  border-radius:
    10px !important;

  background:
    rgba(122,28,42,.10) !important;

  color:
    #e76f7e !important;

  cursor:pointer !important;

  text-align:left !important;

  font-size:
    12px !important;

  font-weight:
    800 !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease !important;
}


.server-delete-nav-v1:hover{
  border-color:
    rgba(255,78,98,.68) !important;

  background:
    rgba(177,35,52,.16) !important;

  color:
    #ff8794 !important;
}


.server-delete-nav-v1.active{
  border-color:
    rgba(255,77,96,.85) !important;

  background:
    rgba(177,35,52,.24) !important;

  color:
    #ff98a3 !important;

  box-shadow:
    0 0 18px rgba(210,40,62,.12);
}


/* SAG SAYFA */

.server-delete-page-v1{
  width:100% !important;

  max-width:none !important;
}


.server-delete-content-v1{
  max-width:
    850px;

  padding:
    6px 0 40px;
}


.server-delete-eyebrow-v1{
  color:
    #ff6878 !important;
}


.server-delete-content-v1 > h3{
  margin:
    6px 0 6px;

  font-size:
    24px;
}


.server-delete-description-v1{
  margin:
    0 0 25px;

  color:
    #8592a8;

  font-size:
    12px;

  line-height:
    1.6;
}


/* UYARI KARTI */

.server-delete-warning-v1{
  display:grid;

  grid-template-columns:
    54px minmax(0,1fr);

  gap:
    17px;

  padding:
    22px;

  border:
    1px solid rgba(255,73,91,.24);

  border-radius:
    14px;

  background:
    linear-gradient(
      135deg,
      rgba(101,23,37,.18),
      rgba(38,15,24,.10)
    );

  box-shadow:
    inset 0 0 25px rgba(206,39,58,.025);
}


.server-delete-warning-icon-v1{
  width:
    48px;

  height:
    48px;

  display:grid;

  place-items:center;

  border:
    1px solid rgba(255,74,94,.28);

  border-radius:
    12px;

  background:
    rgba(166,31,49,.15);

  color:
    #ff7584;

  font-size:
    18px;

  font-weight:
    950;
}


.server-delete-warning-v1 strong{
  color:
    #f2f4fa;

  font-size:
    16px;
}


.server-delete-warning-v1 p{
  margin:
    7px 0 0;

  color:
    #929eb2;

  line-height:
    1.6;

  font-size:
    12px;
}


.server-delete-warning-v1 b{
  color:
    #ff99a4;
}


.server-delete-final-note-v1{
  color:
    #ff7785 !important;

  font-weight:
    700;
}


/* BUTONLAR */

.server-delete-actions-v1{
  grid-column:
    1 / -1;

  display:flex;

  justify-content:flex-end;

  gap:
    10px;

  margin-top:
    6px;
}


.server-delete-cancel-v1,
.server-delete-danger-v1{
  min-height:
    42px;

  padding:
    0 17px;

  border-radius:
    9px;

  cursor:pointer;

  font-weight:
    800;

  font-size:
    12px;
}


.server-delete-cancel-v1{
  border:
    1px solid rgba(121,138,170,.18);

  background:
    #142136;

  color:
    #c6cede;
}


.server-delete-danger-v1{
  border:
    1px solid rgba(255,73,93,.45);

  background:
    #8f2132;

  color:
    #fff;
}


.server-delete-danger-v1:hover{
  background:
    #ac263a;

  box-shadow:
    0 0 18px rgba(214,47,69,.17);
}


.server-delete-final-button-v1{
  background:
    #be263d;
}


.server-delete-final-button-v1:hover{
  background:
    #da3049;
}


.server-delete-danger-v1:disabled{
  opacity:.55;

  cursor:not-allowed;
}


/* CHATTER_HALL_COMMUNITY_DELETE_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_SETTINGS_NAV_LAYOUT_REPAIR_CSS_V2
========================================================= */


/*
 * SOL SUNUCU AYAR MENÜSÜ
 */

#serverSettingsModal
.server-settings-stable-nav-v2{

  display:flex !important;
  flex-direction:column !important;

  align-items:stretch !important;

  height:100% !important;
  min-height:100% !important;

  box-sizing:border-box !important;

  padding-bottom:14px !important;
}


/*
 * VIP MUTLAKA EN ÜST
 */

#serverSettingsModal
.server-settings-stable-nav-v2
.server-vip-settings-nav-v1{

  order:-100 !important;

  position:relative !important;

  flex:0 0 auto !important;

  margin:
    10px 12px 14px !important;

  width:
    calc(100% - 24px) !important;
}


/*
 * NORMAL TABLAR ORTADA
 */

#serverSettingsModal
.server-settings-stable-nav-v2
.server-settings-tab,

#serverSettingsModal
.server-settings-stable-nav-v2
.registration-settings-nav-v1{

  flex:
    0 0 auto !important;
}


/*
 * SIL BUTONU:
 * ABSOLUTE YOK.
 * FLEX ILE GERCEKTEN EN ALTA.
 */

#serverSettingsModal
.server-settings-stable-nav-v2
#serverDeleteNavV1{

  order:9999 !important;

  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  flex:
    0 0 auto !important;

  margin:
    auto 12px 4px !important;

  width:
    calc(100% - 24px) !important;

  min-height:
    45px !important;

  display:flex !important;

  visibility:visible !important;
  opacity:1 !important;

  pointer-events:auto !important;

  z-index:20 !important;
}


/*
 * Eski absolute delete sidebar kurallarını iptal et.
 */

#serverSettingsModal
.server-settings-nav-delete-v1{

  position:relative !important;

  display:flex !important;
  flex-direction:column !important;

  height:100% !important;
  min-height:100% !important;

  padding-bottom:
    14px !important;
}


/*
 * KIRMIZI GORUNUM
 */

#serverSettingsModal
#serverDeleteNavV1{

  border:
    1px solid rgba(255,70,89,.46) !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      135deg,
      rgba(126,27,42,.18),
      rgba(78,18,30,.10)
    ) !important;

  color:
    #ff7d8b !important;

  box-shadow:
    inset 0 0 18px rgba(209,43,64,.04) !important;
}


#serverSettingsModal
#serverDeleteNavV1:hover{

  border-color:
    rgba(255,78,97,.78) !important;

  background:
    rgba(157,32,49,.23) !important;

  color:
    #ff9aa5 !important;

  box-shadow:
    0 0 17px rgba(220,43,65,.14) !important;
}


#serverSettingsModal
#serverDeleteNavV1.active{

  border-color:
    #ff5669 !important;

  background:
    rgba(177,37,55,.28) !important;

  color:
    #fff !important;

  box-shadow:
    0 0 20px rgba(235,49,72,.18) !important;
}


/* CHATTER_HALL_SETTINGS_NAV_LAYOUT_REPAIR_CSS_V2 END */

/* =========================================================
   CHATTER_HALL_DELETE_NAV_POSITION_V3
========================================================= */

#serverSettingsModal
#serverDeleteNavV1{

  position:relative !important;

  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;

  inset:auto !important;

  order:0 !important;

  flex:0 0 auto !important;

  margin:
    8px 12px 0 !important;

  width:
    calc(100% - 24px) !important;

  display:flex !important;

  visibility:visible !important;
  opacity:1 !important;

  pointer-events:auto !important;

}


/*
 * Otomatik Kayıt'tan biraz ayrılması için.
 */

#serverSettingsModal
.registration-settings-nav-v1{
  margin-bottom:
    0 !important;
}


/*
 * Önceki flex bottom davranışını iptal et.
 */

#serverSettingsModal
.server-settings-stable-nav-v2
#serverDeleteNavV1{

  margin:
    8px 12px 0 !important;

  order:
    0 !important;

}


/* CHATTER_HALL_DELETE_NAV_POSITION_V3 END */

/* =========================================================
   CHATTER_HALL_CHANNEL_PERMISSION_UI_V2
========================================================= */

[data-server-settings-page="permissions"]{
  max-width:none !important;
}


[data-server-settings-page="permissions"]
.server-settings-default-perms{
  display:none !important;
}


.ss-permission-everyone-v2,
#serverSettingsPermissionRoles{
  display:grid !important;
  gap:12px !important;

  margin-top:18px;
}


.ss-permission-role-card-v2{
  overflow:hidden;

  border:
    1px solid rgba(114,132,166,.18);

  border-radius:13px;

  background:
    rgba(10,17,29,.42);
}


.ss-permission-role-card-v2.everyone{
  border-color:
    rgba(121,92,255,.32);

  background:
    linear-gradient(
      135deg,
      rgba(91,70,183,.10),
      rgba(10,17,29,.44)
    );
}


.ss-permission-role-head-v2{
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:14px;

  padding:
    13px 16px;

  border-bottom:
    1px solid rgba(114,132,166,.12);
}


.ss-permission-role-head-v2 strong{
  display:block;

  color:#eef2fb;

  font-size:13px;
}


.ss-permission-role-head-v2 small{
  display:block;

  margin-top:3px;

  color:#75849c;

  font-size:10px;
}


.ss-permission-role-name-v2{
  display:flex;
  align-items:center;

  gap:10px;
}


.ss-permission-base-badge-v2{
  padding:
    4px 7px;

  border-radius:6px;

  background:
    rgba(118,91,255,.13);

  color:#a998ff;

  font-size:9px;
  font-weight:900;
}


.ss-permission-row-v2{
  min-height:58px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  padding:
    10px 16px;

  border-bottom:
    1px solid rgba(114,132,166,.08);
}


.ss-permission-row-v2:last-child{
  border-bottom:0;
}


.ss-permission-row-copy-v2 strong{
  color:#bbc5d6;

  font-size:12px;
}


.ss-permission-control-v2{
  display:flex;
  align-items:center;

  gap:5px;

  padding:4px;

  border:
    1px solid rgba(102,120,153,.18);

  border-radius:9px;

  background:
    rgba(6,11,19,.45);
}


.ss-permission-state-v2{
  width:35px;
  height:32px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#64748b;

  cursor:pointer;

  font-size:15px;
  font-weight:900;

  transition:
    color .13s ease,
    background .13s ease,
    box-shadow .13s ease;
}


.ss-permission-state-v2:hover{
  background:
    rgba(255,255,255,.04);
}


.ss-permission-state-v2.deny.active{
  background:
    rgba(220,52,72,.20);

  color:#ff6678;

  box-shadow:
    inset 0 0 0 1px rgba(255,88,107,.30);
}


.ss-permission-state-v2.inherit.active{
  background:
    rgba(113,126,153,.17);

  color:#c0cadb;

  box-shadow:
    inset 0 0 0 1px rgba(139,153,180,.20);
}


.ss-permission-state-v2.allow.active{
  background:
    rgba(44,190,132,.18);

  color:#4ce0a4;

  box-shadow:
    inset 0 0 0 1px rgba(70,220,162,.26);
}


.ss-permission-help-v2{
  display:flex;
  align-items:center;

  gap:8px;

  padding:
    2px 4px 4px;

  color:#6f7e95;

  font-size:10px;
}


.ss-permission-help-v2 b:first-child{
  color:#ff6678;
}


.ss-permission-help-v2 b:last-child{
  color:#4ce0a4;
}


@media(max-width:700px){

  .ss-permission-row-v2{
    align-items:flex-start;
    flex-direction:column;

    gap:9px;
  }


  .ss-permission-control-v2{
    align-self:stretch;

    justify-content:flex-end;
  }

}

/* CHATTER_HALL_CHANNEL_PERMISSION_UI_V2 END */

/* =========================================================
   CHATTER_HALL_SIDEBAR_CHANNEL_SETTINGS_MENU_CSS_V1
========================================================= */

.sidebar-channel-settings-menu-v1{
  width:100%;

  min-height:42px;

  display:flex;
  align-items:center;

  gap:9px;

  padding:
    9px 13px;

  border:0;
  border-bottom:
    1px solid rgba(120,136,170,.12);

  background:
    transparent;

  color:
    #d5dbea;

  cursor:pointer;

  text-align:left;

  font-size:
    12px;

  font-weight:
    800;
}


.sidebar-channel-settings-menu-v1:hover{
  background:
    rgba(105,88,220,.12);

  color:
    #fff;
}


.sidebar-room-menu-icon-v1{
  width:15px;

  display:inline-grid;
  place-items:center;

  color:
    #a99bff;

  font-size:
    11px;
}

/* CHATTER_HALL_SIDEBAR_CHANNEL_SETTINGS_MENU_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_CATEGORY_PERMISSION_UI_V1
========================================================= */

.server-settings-categories-host-v1{
  width:100%;
}

.server-settings-categories-host-v1
.channel-settings-inner-content-v1{
  width:100%;
  min-width:0;
}

.category-permission-editor-v1{
  display:grid;
  gap:12px;
  margin-top:18px;
  margin-bottom:18px;
}

.category-permission-card-v1{
  border:1px solid var(--border);
  background:var(--panel2);
  border-radius:14px;
  padding:14px;
}

.category-permission-role-v1{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}

.category-permission-row-v1{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto;
  align-items:center;
  gap:14px;
  padding:10px 0;
  border-top:1px solid var(--border);
}

.category-permission-state-v1{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.category-permission-state-btn-v1{
  border:1px solid var(--border2);
  background:var(--panel);
  color:var(--muted);
  border-radius:8px;
  padding:7px 10px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

.category-permission-state-btn-v1.active{
  color:var(--text);
  border-color:var(--purple);
  background:rgba(124,77,255,.16);
}

.category-permission-state-btn-v1.active[data-cp-state="-1"]{
  border-color:var(--danger);
  background:rgba(255,100,116,.12);
}

.category-permission-state-btn-v1.active[data-cp-state="1"]{
  border-color:var(--green);
  background:rgba(62,213,152,.12);
}

.category-permission-apply-v1{
  display:flex;
  align-items:center;
  gap:9px;
  margin:8px 0 16px;
  color:var(--muted);
  cursor:pointer;
}

/* CHATTER_HALL_CATEGORY_PERMISSION_UI_V1 END */

/* =========================================================
   CHATTER_HALL_PROFILE_VIP_ROLES_PANEL_CSS_V1
========================================================= */

.ch-profile-access-grid-v1{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:12px;
  width:100%;
  margin:10px 0 12px;
}

.ch-profile-type-card-v1,
.ch-profile-roles-card-v1{
  min-width:0;
  border:1px solid #263958;
  border-radius:14px;
  background:
    linear-gradient(
      160deg,
      rgba(18,29,49,.98),
      rgba(10,18,32,.98)
    );
}

.ch-profile-type-card-v1{
  min-height:132px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ch-profile-panel-label-v1{
  display:block;
  margin-bottom:8px;
  color:#8391ad;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
}

.ch-profile-account-type-v1{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:45px;
  padding:10px 12px;
  border-radius:11px;
  border:1px solid #314463;
  background:#0c1728;
  color:#d9e2f5;
  font-size:15px;
}

.ch-profile-account-type-v1.is-vip{
  border-color:#875cff;
  background:
    linear-gradient(
      135deg,
      rgba(108,77,255,.22),
      rgba(162,70,255,.15)
    );
  box-shadow:
    inset 0 0 24px rgba(122,77,255,.09),
    0 0 18px rgba(122,77,255,.10);
  color:#fff;
}

.ch-profile-account-icon-v1{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.9;
}

.ch-profile-type-card-v1 small{
  display:block;
  margin-top:9px;
  color:#73819d;
  font-size:9px;
  line-height:1.4;
}

.ch-profile-roles-card-v1{
  min-height:132px;
  padding:14px 15px;
}

.ch-profile-roles-head-v1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:11px;
}

.ch-profile-roles-head-v1 strong{
  display:block;
  color:#f3f6ff;
  font-size:14px;
}

.ch-profile-role-count-v1{
  min-width:27px;
  height:27px;
  padding:0 7px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid #293b59;
  background:#111d31;
  color:#9eabca;
  font-size:10px;
  font-weight:900;
}

.ch-profile-role-chips-v1{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-height:31px;
  align-items:flex-start;
}

.ch-profile-role-chip-v1{
  --ch-role-color:#8B5CF6;

  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:28px;
  padding:5px 8px;
  border-radius:999px;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--ch-role-color) 42%,
      #263750
    );
  background:
    color-mix(
      in srgb,
      var(--ch-role-color) 10%,
      #0c1626
    );
  color:#edf2ff;
  font-size:10px;
  font-weight:800;
}

.ch-profile-role-chip-v1>i{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--ch-role-color);
  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--ch-role-color) 65%,
      transparent
    );
}

.ch-profile-role-chip-v1>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.ch-profile-role-remove-v1{
  width:18px;
  height:18px;
  margin-left:2px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,79,103,.10);
  color:#ff8394;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  line-height:1;
  padding:0;
}

.ch-profile-role-remove-v1:hover{
  background:rgba(255,79,103,.22);
  color:#fff;
}

.ch-profile-role-remove-v1:disabled{
  opacity:.45;
  cursor:default;
}

.ch-profile-no-role-v1{
  color:#75839e;
  font-size:10px;
  padding:4px 0;
}

.ch-profile-role-add-v1{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid rgba(128,151,190,.12);
}

.ch-profile-role-add-v1>label{
  display:block;
  margin-bottom:7px;
  color:#8f9cb8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.ch-profile-role-add-row-v1{
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px;
  gap:7px;
}

.ch-profile-role-add-row-v1 .field{
  min-width:0;
  height:34px;
  padding:0 9px;
  font-size:10px;
  border-radius:9px;
}

.ch-profile-role-add-row-v1 .primary-btn{
  min-height:34px;
  height:34px;
  padding:0 11px;
  border-radius:9px;
  font-size:10px;
}

@media(max-width:720px){

  .ch-profile-access-grid-v1{
    grid-template-columns:1fr;
  }

}

/* CHATTER_HALL_PROFILE_VIP_ROLES_PANEL_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_FIXED_RECENT_SLOTS_CSS_V2
========================================================= */

.rokss-frequent-list{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100%;
}

.ch-recent-slot-v2{
  min-width:0;
  min-height:150px;
  border-radius:18px;
}

.ch-recent-slot-v2.is-server{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:15px;
  border:1px solid #294064;
  background:
    linear-gradient(
      160deg,
      rgba(18,31,52,.98),
      rgba(13,24,42,.98)
    );
}

.ch-recent-server-main-v2{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:1;
  min-width:0;
}

.ch-recent-server-icon-v2,
.ch-recent-server-fallback-v2{
  width:45px;
  height:45px;
  border-radius:14px;
}

.ch-recent-server-icon-v2{
  display:block;
  object-fit:cover;
}

.ch-recent-server-fallback-v2{
  display:grid;
  place-items:center;
  background:
    linear-gradient(
      145deg,
      #253a68,
      #443087
    );
  border:1px solid #4c5e91;
  color:#fff;
  font-weight:900;
}

.ch-recent-server-name-v2{
  max-width:100%;
  color:#f4f7ff;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ch-recent-server-position-v2{
  color:#71809e;
  font-size:10px;
}

.ch-recent-open-v2{
  width:100%;
  height:35px;
  margin-top:10px;
  border:1px solid #354a73;
  border-radius:10px;
  background:#18243e;
  color:#fff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.ch-recent-open-v2:hover{
  border-color:#745cff;
  background:#202d50;
}

.ch-recent-slot-v2.is-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed #223552;
  background:rgba(13,23,40,.28);
  color:#687795;
}

.ch-recent-slot-number-v2{
  margin-bottom:22px;
  color:#64738f;
  font-size:11px;
}

.ch-recent-empty-title-v2{
  color:#73829f;
  font-size:12px;
  margin-bottom:6px;
}

.ch-recent-empty-copy-v2{
  color:#63718d;
  font-size:10px;
  text-align:center;
}

@media(max-width:1100px){

  .rokss-frequent-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}

@media(max-width:650px){

  .rokss-frequent-list{
    grid-template-columns:1fr !important;
  }

}

/* CHATTER_HALL_FIXED_RECENT_SLOTS_CSS_V2 END */

/* =========================================================
   CHATTER_HALL_RECENT_SERVERS_CLEAN_RENDER_CSS_V3
========================================================= */

.rokss-frequent-list{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
}

.ch-recent-slot-v3{
  min-width:0;
  height:150px;
  border-radius:18px;
}

.ch-recent-slot-v3.is-server{
  display:flex;
  flex-direction:column;
  padding:15px;
  border:1px solid #294064;
  background:
    linear-gradient(
      160deg,
      rgba(18,31,52,.98),
      rgba(13,24,42,.98)
    );
}

.ch-recent-main-v3{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:0;
}

.ch-recent-icon-v3{
  width:44px;
  height:44px;
  border-radius:14px;
  object-fit:cover;
}

.ch-recent-icon-v3.fallback{
  display:grid;
  place-items:center;
  background:
    linear-gradient(
      145deg,
      #263d6d,
      #433080
    );
  color:#fff;
  font-weight:900;
}

.ch-recent-name-v3{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
}

.ch-recent-position-v3{
  color:#72819e;
  font-size:10px;
}

.ch-recent-open-v3{
  width:100%;
  height:34px;
  flex:0 0 34px;
  border:1px solid #344b75;
  border-radius:10px;
  background:#192643;
  color:#fff;
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}

.ch-recent-open-v3:hover{
  background:#223153;
  border-color:#725cff;
}

.ch-recent-slot-v3.is-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed #223552;
  background:rgba(12,22,38,.28);
}

.ch-recent-slot-v3.is-empty strong{
  margin-top:18px;
  color:#71809d;
  font-size:11px;
  font-weight:500;
}

.ch-recent-slot-v3.is-empty span{
  margin-top:6px;
  color:#60708e;
  font-size:9px;
}

.ch-recent-number-v3{
  color:#667592;
  font-size:10px;
}

@media(max-width:1100px){

  .rokss-frequent-list{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

}

@media(max-width:650px){

  .rokss-frequent-list{
    grid-template-columns:1fr !important;
  }

}

/* CHATTER_HALL_RECENT_SERVERS_CLEAN_RENDER_CSS_V3 END */

/* =========================================================
   CHATTER_HALL_RECENT_DESKTOP_FINAL_V7
========================================================= */

@media (min-width:1101px){

  .rokss-frequent-wrap{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  /*
   * Grid yerine flex kullanıyoruz.
   * Böylece 5 kartın alt satıra düşmesi fiziksel olarak engelleniyor.
   */
  .rokss-frequent-list{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;

    width:100% !important;
    max-width:none !important;
    min-width:0 !important;

    gap:16px !important;

    overflow:visible !important;
  }

  .rokss-frequent-list > .ch-recent-slot-v3{
    display:flex !important;

    flex:1 1 0 !important;

    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
  }

}


/*
 * Eski CSS'in oluşturduğu sahte öğeleri de kesin kapat.
 */
.rokss-frequent-wrap::before,
.rokss-frequent-wrap::after,
.rokss-frequent-list::before,
.rokss-frequent-list::after,
.rokss-frequent-list > .ch-recent-slot-v3::before,
.rokss-frequent-list > .ch-recent-slot-v3::after{
  content:none !important;
  display:none !important;
}


/*
 * Boş slotlarda hiçbir buton gösterme.
 */
.ch-recent-slot-v3.is-empty button,
.ch-recent-slot-v3.is-empty .ch-recent-open-v3{
  display:none !important;
}


/*
 * Sadece dolu slotun gerçek JS butonu.
 */
.ch-recent-slot-v3.is-server .ch-recent-open-v3{
  display:block !important;
}

/* CHATTER_HALL_RECENT_DESKTOP_FINAL_V7 END */

/* =========================================================
   CHATTER_HALL_RECENT_LEGACY_KILL_V8
========================================================= */

/*
 * Eski recent-server CSS'i ::before / ::after ile
 * ek kartlar ve sahte butonlar üretiyordu.
 *
 * V4+ renderer bütün 5 slotu gerçek DOM olarak üretiyor.
 * Bu wrapper içinde pseudo-element istemiyoruz.
 */

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]::before,

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]::after,

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]
.rokss-frequent-list::before,

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]
.rokss-frequent-list::after,

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]
.rokss-frequent-list *::before,

html body
.app-shell.servers-mode
.server-discover-head
.rokss-frequent-wrap[data-recent-renderer="v4"]
.rokss-frequent-list *::after{

  content:none !important;
  display:none !important;
  visibility:hidden !important;

  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  box-shadow:none !important;
}


/*
 * Masaüstü:
 * tam 5 gerçek kart, tek satır.
 */
@media(min-width:1101px){

  html body
  .app-shell.servers-mode
  .server-discover-head
  .rokss-frequent-wrap[data-recent-renderer="v4"]
  .rokss-frequent-list{

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    width:100% !important;
    max-width:none !important;

    gap:16px !important;
  }


  html body
  .app-shell.servers-mode
  .server-discover-head
  .rokss-frequent-wrap[data-recent-renderer="v4"]
  .rokss-frequent-list
  > .ch-recent-slot-v3{

    flex:1 1 0 !important;

    width:0 !important;
    min-width:0 !important;
    max-width:none !important;

    margin:0 !important;
  }

}


/*
 * Boş slotta gerçek buton da olamaz.
 */
html body
.rokss-frequent-wrap[data-recent-renderer="v4"]
.ch-recent-slot-v3.is-empty
.ch-recent-open-v3{

  display:none !important;
}

/* CHATTER_HALL_RECENT_LEGACY_KILL_V8 END */

/* =========================================================
   CHATTER_HALL_RECENT_OLD_WIDE_SYSTEM_KILL_V9
========================================================= */

/*
 * ESKI "SUNUCUYA GIT" pseudo butonu.
 * Gercek buton artik JS tarafinda var.
 */
#serverFavoritesWideShellV2 > * > :last-child > *::after,
.server-favorites-wide-card-v2 > :last-child > *::after,
#serverFavoritesWideShellV2 > * > :last-child > *:hover::after,
.server-favorites-wide-card-v2 > :last-child > *:hover::after{
  content:none !important;
  display:none !important;
  visibility:hidden !important;

  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  background:none !important;
  box-shadow:none !important;

  position:static !important;
}


/*
 * ESKI SAHTE 4. SLOT
 */
#serverFavoritesWideShellV2 > * > :last-child::before,
.server-favorites-wide-card-v2 > :last-child::before{
  content:none !important;
  display:none !important;
  visibility:hidden !important;

  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}


/*
 * ESKI SAHTE 5. SLOT
 */
#serverFavoritesWideShellV2 > * > :last-child::after,
.server-favorites-wide-card-v2 > :last-child::after{
  content:none !important;
  display:none !important;
  visibility:hidden !important;

  width:0 !important;
  height:0 !important;
  min-width:0 !important;
  min-height:0 !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}


/*
 * Gercek V3 kartlari masaustunde 5'li tek satir.
 */
@media(min-width:1101px){

  .rokss-frequent-list{
    display:flex !important;
    flex-flow:row nowrap !important;
    width:100% !important;
    gap:16px !important;
  }

  .rokss-frequent-list > .ch-recent-slot-v3{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;
  }

}


/*
 * Bos kartlarda gerçek JS butonu da bulunmamalı.
 */
.ch-recent-slot-v3.is-empty .ch-recent-open-v3{
  display:none !important;
}

/* CHATTER_HALL_RECENT_OLD_WIDE_SYSTEM_KILL_V9 END */

/* =========================================================
   CHATTER_HALL_PROFILE_MEMBER_MODERATION_CSS_V1
========================================================= */

/*
 * Yeni rol paneli zaten bütün rol bilgisini gösteriyor.
 * Eski:
 * ROL | ÇEVRİMİÇİ | ROL
 * ve alttaki tekrar eden rol chiplerini kaldır.
 */
#memberModalContent .profile-info-grid,
#memberModalContent .profile-role-tags{
  display:none !important;
}


/*
 * Moderasyon alanı
 */
.ch-member-moderation-v1{
  margin-top:14px;
  margin-bottom:14px;

  padding:14px;

  border:
    1px solid rgba(255,92,112,.20);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(36,18,27,.60),
      rgba(15,21,35,.75)
    );
}


.ch-member-moderation-title-v1{
  margin-bottom:10px;

  color:#9ba8c4;

  font-size:9px;
  font-weight:900;

  letter-spacing:.14em;
}


.ch-member-moderation-actions-v1{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:9px;
}


.ch-member-kick-v1,
.ch-member-ban-v1{
  min-height:38px;

  border-radius:10px;

  font-size:11px;
  font-weight:900;

  cursor:pointer;
}


.ch-member-kick-v1{
  border:
    1px solid rgba(255,174,82,.35);

  background:
    rgba(255,156,55,.09);

  color:#ffc47d;
}


.ch-member-kick-v1:hover{
  background:
    rgba(255,156,55,.17);
}


.ch-member-ban-v1{
  border:
    1px solid rgba(255,80,103,.42);

  background:
    rgba(255,70,94,.11);

  color:#ff8394;
}


.ch-member-ban-v1:hover{
  background:
    rgba(255,70,94,.22);

  color:#fff;
}


.ch-member-kick-v1:disabled,
.ch-member-ban-v1:disabled{
  opacity:.5;
  cursor:default;
}


@media(max-width:600px){

  .ch-member-moderation-actions-v1{
    grid-template-columns:1fr;
  }

}

/* CHATTER_HALL_PROFILE_MEMBER_MODERATION_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_PROFILE_PANEL_DEDUPE_CSS_V1
========================================================= */

#memberModalContent
.ch-profile-access-grid-v1
~ .ch-profile-access-grid-v1{
  display:none !important;
}

/* CHATTER_HALL_PROFILE_PANEL_DEDUPE_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_COMMUNITY_LEAVE_CSS_V2
========================================================= */

.ch-community-leave-btn-v2{
  min-height:36px;
  padding:0 14px;

  border:
    1px solid rgba(255,78,99,.38);

  border-radius:10px;

  background:
    rgba(255,67,91,.08);

  color:#ff7b8d;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

.ch-community-leave-btn-v2:hover{
  background:
    rgba(255,67,91,.16);

  border-color:
    rgba(255,78,99,.65);

  color:#fff;
}

.ch-community-leave-btn-v2:disabled{
  opacity:.5;
  cursor:default;
}

/* CHATTER_HALL_COMMUNITY_LEAVE_CSS_V2 END */

/* =========================================================
   CHATTER_HALL_SETTINGS_NOTIFICATIONS_CSS_V1
========================================================= */

.ch-notification-settings-v1{
  position:absolute;
  inset:0;
  z-index:20;

  padding:26px 28px;

  overflow-y:auto;

  border-radius:inherit;

  background:
    #101a2a;
}


.ch-notification-settings-v1.hidden{
  display:none !important;
}


.ch-notification-head-v1{
  margin-bottom:20px;
}


.ch-notification-head-v1 h2{
  margin:8px 0 6px;

  font-size:28px;
  line-height:1.1;
}


.ch-notification-head-v1 p{
  margin:0;

  color:#8293af;

  font-size:12px;
}


.ch-notification-list-v1{
  display:grid;
  gap:10px;
}


.ch-notification-row-v1{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:22px;

  min-height:70px;

  padding:14px 16px;

  border:
    1px solid #263958;

  border-radius:13px;

  background:
    rgba(12,23,39,.74);

  cursor:pointer;
}


.ch-notification-row-v1:hover{
  border-color:
    #38527e;
}


.ch-notification-copy-v1{
  display:grid;
  gap:4px;
}


.ch-notification-copy-v1 strong{
  color:#f4f7ff;

  font-size:13px;
}


.ch-notification-copy-v1 span{
  color:#8494af;

  font-size:10px;
}


.ch-toggle-v1{
  position:relative;

  flex:0 0 auto;

  width:44px;
  height:24px;
}


.ch-toggle-v1 input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}


.ch-toggle-track-v1{
  position:absolute;
  inset:0;

  border:
    1px solid #35445e;

  border-radius:999px;

  background:#172338;

  transition:.16s ease;
}


.ch-toggle-thumb-v1{
  position:absolute;

  top:3px;
  left:3px;

  width:16px;
  height:16px;

  border-radius:50%;

  background:#8390a7;

  transition:.16s ease;
}


.ch-toggle-v1 input:checked
+ .ch-toggle-track-v1{
  border-color:
    rgba(116,82,255,.75);

  background:
    linear-gradient(
      90deg,
      #5c65ff,
      #8a3df2
    );
}


.ch-toggle-v1 input:checked
+ .ch-toggle-track-v1
.ch-toggle-thumb-v1{
  left:23px;

  background:#fff;
}


.ch-notification-note-v1{
  margin-top:14px;

  color:#71819e;

  font-size:10px;
}


@media(max-width:700px){

  .ch-notification-settings-v1{
    padding:20px 16px;
  }

  .ch-notification-row-v1{
    gap:12px;
  }

}

/* CHATTER_HALL_SETTINGS_NOTIFICATIONS_CSS_V1 END */

/* =========================================================
   CHATTER_HALL_SETTINGS_PUBLIC_POLISH_V3
========================================================= */

/*
 * Bildirimler ve Gizlilik artık VIP değildir.
 * Rozet pseudo-element, badge child veya eski VIP class
 * olarak gelirse fark etmez.
 */
.settings-menu-item[data-ch-settings-nav-v2="notifications"]::after,
.settings-menu-item[data-ch-settings-nav-v2="privacy"]::after{
  content:none !important;
  display:none !important;
}

.settings-menu-item[data-ch-settings-nav-v2="notifications"] .vip,
.settings-menu-item[data-ch-settings-nav-v2="privacy"] .vip,
.settings-menu-item[data-ch-settings-nav-v2="notifications"] .vip-badge,
.settings-menu-item[data-ch-settings-nav-v2="privacy"] .vip-badge,
.settings-menu-item[data-ch-settings-nav-v2="notifications"] [class*="vip"],
.settings-menu-item[data-ch-settings-nav-v2="privacy"] [class*="vip"]{
  display:none !important;
}


/* Bildirim ekranı scrollbar */
.ch-notification-settings-v1{
  scrollbar-width:thin;
  scrollbar-color:
    rgba(120,96,255,.55)
    transparent;
}

.ch-notification-settings-v1::-webkit-scrollbar{
  width:7px;
}

.ch-notification-settings-v1::-webkit-scrollbar-track{
  background:transparent;
}

.ch-notification-settings-v1::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:
    rgba(120,96,255,.48);
}

.ch-notification-settings-v1::-webkit-scrollbar-thumb:hover{
  background:
    rgba(137,105,255,.72);
}

/* CHATTER_HALL_SETTINGS_PUBLIC_POLISH_V3 END */