/* Lawi Chat — gri / beyaz / kırmızı / siyah */
:root{
  --bg0:#0d0d0d;--bg1:#141414;--bg2:#1b1b1b;--bg3:#232323;--bg4:#2c2c2c;--bg5:#363636;--line:#262626;
  --txt:#ececec;--txt2:#c8c8c8;--mut:#9a9a9a;--dim:#686868;
  --acc:#e53935;--acc2:#ff5252;--onacc:#fff;
  --on:#43a047;--idle:#f9a825;--dnd:#e53935;--off:#6b6b6b;
  --fs:15px;--pad:16px;--r:10px;--ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 12px 40px rgba(0,0,0,.55);
}
[data-theme=amoled]{--bg0:#000;--bg1:#050505;--bg2:#000;--bg3:#0f0f0f;--bg4:#171717;--bg5:#222;--line:#161616}
[data-theme=light]{--bg0:#dedede;--bg1:#ececec;--bg2:#fafafa;--bg3:#efefef;--bg4:#e2e2e2;--bg5:#d4d4d4;--line:#e0e0e0;--txt:#161616;--txt2:#333;--mut:#5f5f5f;--dim:#8a8a8a;--shadow:0 12px 40px rgba(0,0,0,.18)}
[data-anim=off] *,[data-anim=off] *::before,[data-anim=off] *::after{animation:none!important;transition:none!important}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg2);color:var(--txt);font:var(--fs)/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:var(--acc2);text-decoration:none}a:hover{text-decoration:underline}
[hidden],.hidden{display:none!important}
::selection{background:color-mix(in srgb,var(--acc) 45%,transparent)}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:content-box;border:3px solid transparent}
.thin::-webkit-scrollbar{width:6px}.thin::-webkit-scrollbar-thumb{border:0}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--on) 70%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes dots{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-24px)}}
@keyframes jitter{0%,100%{transform:none}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-1px,0)}80%{transform:translate(1px,1px)}}
@keyframes coin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}

/* ------------------------------------------------------------ kontroller */
.inp,select.inp,textarea.inp{width:100%;background:var(--bg0);border:1px solid var(--line);color:var(--txt);padding:10px 12px;border-radius:8px;outline:0;transition:border-color .2s,box-shadow .2s}
[data-theme=light] .inp{background:#fff}
.inp:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
textarea.inp{resize:vertical;min-height:70px}
label.l{display:block;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:16px 0 7px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--acc);color:var(--onacc);border-radius:8px;padding:9px 16px;font-weight:600;font-size:14px;transition:filter .15s,transform .12s,background .15s;position:relative;overflow:hidden;white-space:nowrap}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.97)}
.btn.sec{background:var(--bg4);color:var(--txt)}.btn.sec:hover{background:var(--bg5);filter:none}
.btn.ghost{background:transparent;color:var(--txt)}.btn.ghost:hover{background:var(--bg4);filter:none}
.btn.red{background:#c62828;color:#fff}.btn.outline{background:transparent;box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc2)}
.btn.sm{padding:5px 11px;font-size:13px}.btn.lg{padding:12px 22px;font-size:15px}.btn.full{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .55s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}
.ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--mut);font-size:17px;transition:background .15s,color .15s}
.ib:hover{background:var(--bg4);color:var(--txt)}.ib.on{color:var(--txt)}.ib.red{color:var(--acc2)}
.err{color:var(--acc2);font-size:13px;min-height:1.3em;margin:6px 0}
.okmsg{color:var(--on);font-size:13px;margin:6px 0}
.mut{color:var(--mut)}.dim{color:var(--dim)}.small{font-size:12px}
.sep{height:1px;background:var(--line);margin:12px 0}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:0}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:6px;background:var(--bg4);font-size:12px;font-weight:600}
.tag i{width:10px;height:10px;border-radius:50%;display:inline-block}
.tag.staff{background:var(--acc);color:#fff;font-size:10px;letter-spacing:.06em;padding:1px 6px}
.kbd{background:var(--bg4);border-radius:4px;padding:1px 6px;font:12px Consolas,monospace}
.switch{width:42px;height:24px;border-radius:12px;background:var(--bg5);position:relative;transition:background .25s;flex:none}
.switch::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s var(--ease);box-shadow:0 1px 3px #0006}
.switch.on{background:var(--acc)}.switch.on::after{transform:translateX(18px)}
.tg{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.tg small{display:block;color:var(--mut);font-size:12px;margin-top:2px}
input[type=range]{width:100%;accent-color:var(--acc)}
input[type=color]{width:46px;height:34px;border:0;background:none;padding:0;cursor:pointer}
.meter{height:10px;background:var(--bg0);border-radius:6px;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9e9e9e,#fff 60%,var(--acc));transition:width .06s}
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--mut);padding:40px 20px;gap:6px;animation:fadeUp .5s var(--ease)}
.empty .big{font-size:64px;line-height:1;margin-bottom:8px;filter:grayscale(.2)}
.empty b{color:var(--txt);font-size:17px}
.skel{background:linear-gradient(90deg,var(--bg3) 25%,var(--bg4) 50%,var(--bg3) 75%);background-size:200% 100%;animation:shimmer 1.2s infinite;border-radius:6px}

/* ------------------------------------------------------------ avatar */
.avw{position:relative;flex:none;display:inline-block}
.av{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;overflow:hidden;user-select:none;background:#616161}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.frame{position:absolute;inset:-3px;border-radius:50%;padding:3px;background:var(--ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.frame.spin{animation:spin 4s linear infinite}
.st{position:absolute;right:-1px;bottom:-1px;width:30%;height:30%;min-width:10px;min-height:10px;border-radius:50%;background:var(--off);box-shadow:0 0 0 3px var(--stbg,var(--bg1))}
.st.online{background:var(--on)}.st.idle{background:var(--idle)}.st.dnd{background:var(--dnd)}.st.offline{background:var(--off)}
.st.idle::after{content:"";position:absolute;width:55%;height:55%;border-radius:50%;background:var(--stbg,var(--bg1));top:0;left:0}
.st.dnd::after{content:"";position:absolute;width:56%;height:20%;background:var(--stbg,var(--bg1));border-radius:2px;top:40%;left:22%}
.speaking .av{box-shadow:0 0 0 2px var(--on),0 0 10px color-mix(in srgb,var(--on) 60%,transparent)}

/* isim efektleri */
.name{font-weight:600}
.fx-glow{color:#ff5252!important;text-shadow:0 0 8px #ff1744,0 0 2px #ff1744}
.fx-silver{background:linear-gradient(90deg,#8d8d8d 0%,#fff 25%,#8d8d8d 50%,#fff 75%,#8d8d8d 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:shimmer 3s linear infinite}
.fx-fire{background:linear-gradient(90deg,#ff1744,#ff9100,#ffea00,#ff9100,#ff1744);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:shimmer 2s linear infinite}
.fx-glitch{color:#fff!important;text-shadow:2px 0 #e53935,-2px 0 #9e9e9e;display:inline-block;animation:jitter .35s steps(2) infinite}
[data-theme=light] .fx-glitch{color:#111!important}
.badge{margin-left:4px;font-size:.95em;cursor:default}

/* ------------------------------------------------------------ giriş */
#auth{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#080808;z-index:50;padding:16px;overflow:hidden;perspective:1200px}
#auth .orb{position:absolute;border-radius:50%;filter:blur(90px);animation:float 16s ease-in-out infinite}
#auth .o1{width:520px;height:520px;background:#b71c1c;opacity:.45;top:-160px;left:-120px}
#auth .o2{width:440px;height:440px;background:#424242;opacity:.6;bottom:-160px;right:-100px;animation-delay:-6s}
#auth .o3{width:300px;height:300px;background:#e53935;opacity:.25;top:45%;left:58%;animation-delay:-10s}
#auth .grid{position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at center,#000 20%,transparent 75%)}
#auth .box{position:relative;transition:transform .6s cubic-bezier(.2,.8,.2,1)!important;background:rgba(20,20,20,.82);backdrop-filter:blur(18px);padding:32px;border-radius:18px;width:min(440px,100%);box-shadow:0 30px 80px #000c,inset 0 0 0 1px #ffffff12;animation:fadeUp .7s var(--ease);transition:transform .15s;color:#ececec}
#auth.shake .box{animation:shake .45s}
#auth .lg{width:84px;height:84px;margin:0 auto 12px;display:block;filter:drop-shadow(0 12px 28px #e5393566)}
#auth h1{margin:0 0 4px;text-align:center;font-size:28px;color:#fff}
#auth .sub{text-align:center;color:#a0a0a0;margin-bottom:16px}
#auth .inp{background:#0b0b0b;border-color:#2a2a2a;color:#ececec}
#auth label.l{color:#8f8f8f}
.tabs{display:flex;gap:4px;margin:14px 0 4px;background:#0b0b0b;border-radius:10px;padding:4px;position:relative}
.tabs button{flex:1;color:#8f8f8f;padding:9px;border-radius:7px;position:relative;z-index:1;transition:color .25s;font-weight:600}
.tabs button.on{color:#fff}.tabs button:disabled{opacity:.4;cursor:not-allowed}
.tabs i{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);left:4px;border-radius:7px;background:#e53935;transition:transform .3s var(--ease)}
.tabs.reg i{transform:translateX(100%)}
#auth .btn{width:100%;margin-top:10px;padding:12px;background:#e53935;color:#fff}
#auth .alt{text-align:center;margin-top:14px;font-size:13px}
.fieldbox{animation:fadeUp .35s var(--ease)}

/* ------------------------------------------------------------ düzen */
#app{height:100%;display:none;grid-template-columns:72px 248px minmax(0,1fr) auto}
#app.on{display:grid;animation:fadeIn .4s}
#rail{background:var(--bg0);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:8px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#rail::-webkit-scrollbar{display:none}
.ri{position:relative;width:48px;height:48px;flex:none}
.ri .ico{width:48px;height:48px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:var(--txt);overflow:hidden;cursor:pointer;transition:border-radius .25s var(--ease),background .2s,color .2s,transform .2s var(--ease)}
.ri .ico img{width:100%;height:100%;object-fit:cover}
.ri:hover .ico,.ri.on .ico{border-radius:16px;background:var(--acc);color:#fff}
.ri.img:hover .ico,.ri.img.on .ico{background:var(--bg3)}
.ri.green .ico{color:var(--acc2)}.ri.green:hover .ico{background:var(--acc);color:#fff}
.ri .pill{position:absolute;left:-16px;top:50%;width:8px;height:0;margin-top:0;border-radius:0 4px 4px 0;background:var(--txt);transition:height .2s var(--ease),margin-top .2s var(--ease)}
.ri.unread .pill{height:8px;margin-top:-4px}
.ri:hover .pill{height:20px;margin-top:-10px}
.ri.on .pill{height:40px;margin-top:-20px}
.ri .cnt{position:absolute;right:-4px;bottom:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--acc);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px var(--bg0);animation:pop .25s var(--ease)}
.rsep{width:32px;height:2px;border-radius:1px;background:var(--bg4);flex:none;margin:2px 0}
.tip{position:fixed;z-index:200;background:#0a0a0a;color:#fff;padding:7px 12px;border-radius:8px;font-size:14px;font-weight:600;box-shadow:var(--shadow);pointer-events:none;animation:pop .12s var(--ease);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
[data-theme=light] .tip{background:#111}

#side{background:var(--bg1);display:flex;flex-direction:column;min-height:0;min-width:0}
.shead{height:50px;padding:0 14px 0 16px;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:0 1px 0 var(--line),0 2px 4px rgba(0,0,0,.12);flex:none;position:relative;z-index:2;cursor:default}
.shead.click{cursor:pointer;transition:background .15s}.shead.click:hover{background:var(--bg3)}
.shead span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search{margin:10px 10px 0;background:var(--bg0);border-radius:6px;padding:6px 10px;font-size:13px;color:var(--mut);cursor:pointer;text-align:left;width:calc(100% - 20px)}
.sbody{flex:1;overflow-y:auto;padding:8px;min-height:0}
.nav{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;color:var(--mut);cursor:pointer;font-weight:600;transition:background .15s,color .15s;margin-bottom:2px}
.nav:hover{background:var(--bg4);color:var(--txt)}.nav.on{background:var(--bg4);color:var(--txt)}
.nav .ic{font-size:20px;width:24px;text-align:center}
.nav .cnt{margin-left:auto;background:var(--acc);color:#fff;border-radius:10px;font-size:11px;padding:0 7px;font-weight:700}
.cat{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:16px 6px 4px 8px}
.cat button{font-size:17px;color:var(--mut);line-height:1;width:20px}.cat button:hover{color:var(--txt)}
.dmrow{display:flex;align-items:center;gap:12px;padding:6px 8px;border-radius:8px;color:var(--mut);cursor:pointer;transition:background .15s,color .15s;animation:slideIn .3s var(--ease) backwards;--stbg:var(--bg1)}
.dmrow:hover{background:var(--bg4);color:var(--txt);--stbg:var(--bg4)}.dmrow.on{background:var(--bg4);color:var(--txt);--stbg:var(--bg4)}
.dmrow.unread{color:var(--txt);font-weight:700}
.dmrow .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmrow .x{opacity:0;color:var(--mut);font-size:16px;width:20px}.dmrow:hover .x{opacity:1}.dmrow .x:hover{color:var(--txt)}
.dmrow .cnt{background:var(--acc);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;font-weight:700}
.ch{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:6px;color:var(--dim);cursor:pointer;transition:background .12s,color .12s;position:relative;margin-bottom:1px}
.ch:hover{background:var(--bg4);color:var(--txt2)}.ch.on{background:var(--bg5);color:var(--txt)}
.ch.unread{color:var(--txt);font-weight:600}
.ch.unread::before{content:"";position:absolute;left:-8px;top:50%;width:4px;height:8px;margin-top:-4px;border-radius:0 4px 4px 0;background:var(--txt)}
.ch .h{font-size:19px;width:20px;text-align:center;opacity:.8}
.ch .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch .cnt{background:var(--acc);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;font-weight:700}
.ch .gear{opacity:0;font-size:13px;color:var(--mut)}.ch:hover .gear{opacity:1}.ch .gear:hover{color:var(--txt)}
.vp{display:flex;align-items:center;gap:8px;padding:3px 8px 3px 34px;color:var(--mut);font-size:14px;border-radius:6px;cursor:pointer;animation:slideIn .25s var(--ease)}
.vp:hover{background:var(--bg4);color:var(--txt)}
.vp .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp i{font-style:normal;font-size:12px;opacity:.85}

#vbar{background:var(--bg0);border-top:1px solid var(--line);padding:10px 10px 8px;flex:none;animation:fadeUp .3s var(--ease)}
#vbar .t{color:var(--on);font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px}
#vbar .t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--on);animation:pulse 1.4s infinite}
#vbar .s{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
#vbar .s:hover{color:var(--txt);text-decoration:underline}
#vbar .row{margin-top:8px;gap:6px;flex-wrap:nowrap}
#vbar .row button{flex:1;padding:6px;border-radius:6px;background:var(--bg3);color:var(--txt);transition:background .15s,transform .12s}
#vbar .row button:hover{background:var(--bg5)}#vbar .row button:active{transform:scale(.93)}
#vbar .row button.on{background:#c62828;color:#fff}
#me{background:var(--bg0);padding:8px;display:flex;align-items:center;gap:8px;flex:none;--stbg:var(--bg0)}
#me .who{display:flex;align-items:center;gap:9px;flex:1;min-width:0;padding:3px 4px;border-radius:6px;cursor:pointer;transition:background .15s}
#me .who:hover{background:var(--bg4);--stbg:var(--bg4)}
#me .nm{min-width:0;line-height:1.2}
#me .nm b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#me .nm small{color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
#me .ib{width:32px;height:32px}
#me .ib.on{color:var(--acc2)}
#me .gear:hover{transform:rotate(90deg)}#me .gear{transition:transform .4s var(--ease),background .15s,color .15s}

#main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg2);position:relative}
#banner{background:linear-gradient(90deg,#b71c1c,#e53935);color:#fff;padding:7px 16px;font-size:13px;flex:none;display:flex;gap:10px;align-items:center;animation:fadeUp .4s var(--ease)}
#banner button{margin-left:auto;color:#fff;opacity:.8}
.mhead{height:50px;padding:0 12px 0 16px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 0 var(--line),0 2px 4px rgba(0,0,0,.1);flex:none;position:relative;z-index:3;min-width:0}
.mhead .ti{display:flex;align-items:center;gap:8px;font-weight:700;min-width:0;flex:none;max-width:45%}
.mhead .ti span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhead .ti .h{font-size:22px;color:var(--dim);font-weight:400}
.mhead .topic{color:var(--mut);font-size:13px;padding-left:12px;border-left:1px solid var(--bg5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.mhead .r{margin-left:auto;display:flex;align-items:center;gap:4px;flex:none}
.mhead .tabsbar{display:flex;gap:6px;align-items:center;margin-left:8px;padding-left:14px;border-left:1px solid var(--bg5);overflow-x:auto;scrollbar-width:none}
.mhead .tabsbar button{padding:3px 10px;border-radius:6px;color:var(--mut);font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.mhead .tabsbar button:hover{background:var(--bg4);color:var(--txt)}.mhead .tabsbar button.on{background:var(--bg5);color:var(--txt)}
.mhead .tabsbar button.add{background:var(--acc);color:#fff}.mhead .tabsbar button.add.on{background:transparent;color:var(--acc2)}
.mhead .tabsbar .cnt{background:var(--acc);color:#fff;border-radius:9px;font-size:11px;padding:0 6px;margin-left:5px}
#conn{font-size:12px;color:var(--mut);display:none;align-items:center;gap:6px;margin-right:6px}
#conn.bad{display:flex}#conn i{width:8px;height:8px;border-radius:50%;background:var(--idle);animation:pulse 1s infinite}
.body{flex:1;display:flex;min-height:0;min-width:0}
.content{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}

/* ------------------------------------------------------------ sohbet */
.msgs{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 0 12px;min-height:0}
.welcome{padding:26px var(--pad) 10px;animation:fadeUp .5s var(--ease)}
.welcome .wi{width:68px;height:68px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:10px}
.welcome h2{margin:0 0 4px;font-size:28px}
.loadmore{text-align:center;padding:12px;color:var(--mut);font-size:13px}
.m{display:flex;gap:14px;padding:2px 48px 2px var(--pad);position:relative;transition:background .1s}
.m.first{margin-top:16px}
.m:hover{background:color-mix(in srgb,var(--bg0) 30%,transparent)}
.m.mention{background:color-mix(in srgb,var(--acc) 9%,transparent);box-shadow:inset 3px 0 0 var(--acc)}
.m.mention:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
.m.new{animation:slideIn .25s var(--ease)}
.m.pending{opacity:.55}
.m .avw{margin-top:2px;cursor:pointer}
.m .sp{width:40px;flex:none;font-size:10px;color:var(--dim);opacity:0;text-align:right;padding-top:4px;user-select:none}
.m:hover .sp{opacity:1}
.m .b{min-width:0;flex:1}
.m .hd{display:flex;align-items:baseline;gap:8px;min-width:0}
.m .hd .name{cursor:pointer}.m .hd .name:hover{text-decoration:underline}
.m time{color:var(--dim);font-size:12px;white-space:nowrap}
.m .t{white-space:pre-wrap;word-break:break-word;color:var(--txt2)}
.m .t .ed{font-size:10px;color:var(--dim);margin-left:4px}
.m .t code{background:var(--bg0);padding:1px 5px;border-radius:4px;font:13px Consolas,monospace}
.m .t pre{background:var(--bg0);padding:10px 12px;border-radius:8px;margin:6px 0;overflow:auto;font:13px/1.5 Consolas,monospace;border:1px solid var(--line);white-space:pre}
.m .t .em{font-size:2.6em;line-height:1.15}
.m .t .ment{background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc2);border-radius:4px;padding:0 3px;font-weight:600;cursor:pointer}
.m .t blockquote{margin:2px 0;padding-left:10px;border-left:4px solid var(--bg5)}
.m .t .spoiler{background:var(--bg5);color:transparent;border-radius:4px;cursor:pointer;transition:color .2s}.m .t .spoiler.open{color:inherit;background:var(--bg4)}
.m .acts{position:absolute;right:14px;top:-14px;display:none;background:var(--bg2);border-radius:8px;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.3);overflow:hidden;z-index:2}
.m:hover .acts{display:flex;animation:pop .12s}
.m .acts button{padding:5px 8px;color:var(--mut);font-size:15px}.m .acts button:hover{background:var(--bg4);color:var(--txt)}.m .acts button.del:hover{color:var(--acc2)}
.m .editbox textarea{width:100%;background:var(--bg3);border:0;border-radius:8px;padding:9px 12px;outline:0;resize:none;color:var(--txt)}
.m .editbox small{color:var(--mut);font-size:12px}.m .editbox small a{cursor:pointer}
.day{display:flex;align-items:center;gap:10px;margin:22px var(--pad) 4px;color:var(--dim);font-size:12px;font-weight:600}
.day::before,.day::after{content:"";flex:1;height:1px;background:var(--line)}
.jump{position:absolute;bottom:86px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;border-radius:20px;padding:6px 16px;box-shadow:var(--shadow);animation:pop .2s var(--ease);font-weight:600;font-size:13px;z-index:4}
.typing{height:24px;padding:0 var(--pad);font-size:12px;color:var(--txt2);flex:none;display:flex;align-items:center;gap:6px;font-weight:500}
.typing .d{display:inline-flex;gap:3px}.typing .d i{width:5px;height:5px;border-radius:50%;background:var(--txt2);animation:dots 1.2s infinite}
.typing .d i:nth-child(2){animation-delay:.15s}.typing .d i:nth-child(3){animation-delay:.3s}
.composer{padding:0 var(--pad) 22px;flex:none;position:relative}
.cw{display:flex;align-items:flex-end;background:var(--bg3);border-radius:10px;transition:box-shadow .2s;padding-right:4px}
.cw:focus-within{box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 50%,transparent)}
.cw textarea{flex:1;background:none;border:0;outline:0;resize:none;padding:12px 14px;max-height:40vh;min-height:44px;line-height:20px;color:var(--txt)}
.cw textarea:disabled{cursor:not-allowed}
.cw .ib{margin-bottom:6px;font-size:20px}
.counter{position:absolute;right:calc(var(--pad) + 6px);bottom:4px;font-size:11px;color:var(--mut)}.counter.over{color:var(--acc2)}
.emo{position:absolute;right:var(--pad);bottom:76px;width:340px;max-height:300px;background:var(--bg1);border-radius:12px;box-shadow:var(--shadow),0 0 0 1px var(--line);display:flex;flex-direction:column;z-index:20;animation:pop .16s var(--ease);overflow:hidden}
.emo .eg{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;overflow-y:auto}
.emo .eg button{font-size:22px;border-radius:6px;padding:4px;transition:transform .1s,background .1s}
.emo .eg button:hover{background:var(--bg4);transform:scale(1.2)}
.emo .ec{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line)}
.emo .ec button{padding:4px 8px;border-radius:6px;font-size:18px;opacity:.6}.emo .ec button.on,.emo .ec button:hover{opacity:1;background:var(--bg4)}

/* ------------------------------------------------------------ sağ panel */
#aside{background:var(--bg1);width:248px;overflow-y:auto;min-height:0;transition:width .25s var(--ease)}
#aside.wide{width:340px}
#aside:empty,#app.noaside #aside{display:none}
.mem{display:flex;align-items:center;gap:11px;padding:5px 8px;margin:0 8px;border-radius:8px;cursor:pointer;transition:background .12s,opacity .2s;animation:slideIn .3s var(--ease) backwards;--stbg:var(--bg1)}
.mem:hover{background:var(--bg4);--stbg:var(--bg4)}
.mem.off{opacity:.38}.mem.off:hover{opacity:1}
.mem .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mem .crown{font-size:12px}
.mgrp{font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:20px 16px 6px}
.active h3{margin:18px 16px 12px;font-size:19px}
.acard{margin:0 16px 10px;background:var(--bg3);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s,transform .2s var(--ease);--stbg:var(--bg3);animation:fadeUp .4s var(--ease) backwards}
.acard:hover{background:var(--bg4);--stbg:var(--bg4);transform:translateY(-2px)}
.pside{animation:fadeIn .3s}
.pside .bnr{height:120px;position:relative}
.pside .pav{position:absolute;left:16px;top:80px;--stbg:var(--bg1)}
.pside .pav .avw{box-shadow:0 0 0 6px var(--bg1);border-radius:50%}
.pside .pb{padding:52px 16px 16px}
.pside .card{background:var(--bg0);border-radius:10px;padding:12px;margin-top:12px}
.pside h4{margin:0 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}

/* ------------------------------------------------------------ arkadaşlar */
.fpage{flex:1;overflow-y:auto;padding:16px 20px 30px;min-width:0}
.fsearch{position:relative;margin-bottom:14px}.fsearch .inp{padding-left:36px}.fsearch::before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.6}
.fcount{font-size:11px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin:6px 0 8px}
.frow{display:flex;align-items:center;gap:12px;padding:10px;border-top:1px solid var(--line);border-radius:8px;cursor:pointer;transition:background .12s;--stbg:var(--bg2);animation:fadeUp .3s var(--ease) backwards}
.frow:hover{background:var(--bg3);border-top-color:transparent;--stbg:var(--bg3)}
.frow:hover+.frow{border-top-color:transparent}
.frow .who{flex:1;min-width:0}
.frow .who b{display:block}.frow .who small{color:var(--mut);font-size:13px}
.frow .acts{display:flex;gap:8px}
.circ{width:36px;height:36px;border-radius:50%;background:var(--bg1);color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:16px;transition:color .15s,background .15s}
.frow:hover .circ{background:var(--bg0)}
.circ:hover{color:var(--txt)}.circ.ok:hover{color:var(--on)}.circ.no:hover{color:var(--acc2)}
.addf{max-width:720px}
.addf h2{margin:6px 0 6px;font-size:18px;text-transform:uppercase;letter-spacing:.02em}
.addbox{display:flex;align-items:center;background:var(--bg0);border:1px solid var(--line);border-radius:10px;padding:6px 6px 6px 14px;margin-top:14px;transition:border-color .2s,box-shadow .2s}
.addbox:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent)}
.addbox.ok{border-color:var(--on)}.addbox.bad{border-color:var(--acc2)}
.addbox input{flex:1;background:none;border:0;outline:0;padding:8px 0;font-size:15px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:20px}
.tile{background:var(--bg3);border-radius:12px;padding:16px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:background .15s,transform .2s var(--ease)}
.tile:hover{background:var(--bg4);transform:translateY(-2px)}
.tile .big{font-size:30px}

/* ------------------------------------------------------------ mağaza */
.store{flex:1;overflow-y:auto;min-width:0}
.shero{position:relative;padding:38px 32px 30px;background:radial-gradient(circle at 85% 30%,#e5393555,transparent 55%),linear-gradient(135deg,#0a0a0a,#1f1f1f 60%,#2a0b0b);color:#fff;overflow:hidden}
.shero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.shero h1{margin:0 0 6px;font-size:34px;position:relative;z-index:1}
.shero p{margin:0;color:#bdbdbd;max-width:520px;position:relative;z-index:1}
.wallet{position:relative;z-index:1;display:flex;gap:12px;align-items:center;margin-top:20px;flex-wrap:wrap}
.coinbox{display:flex;align-items:center;gap:10px;background:#ffffff12;border:1px solid #ffffff1c;border-radius:12px;padding:10px 16px;font-size:20px;font-weight:800}
.coin{display:inline-block;width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#bdbdbd 40%,#757575);box-shadow:inset 0 0 0 2px #e53935;animation:coin 3s linear infinite;vertical-align:-2px}
.scats{display:flex;gap:6px;padding:16px 28px 0;flex-wrap:wrap;position:sticky;top:0;background:var(--bg2);z-index:3;padding-bottom:12px;border-bottom:1px solid var(--line)}
.scats button{padding:7px 14px;border-radius:20px;background:var(--bg3);color:var(--mut);font-weight:600;font-size:13px;transition:background .15s,color .15s}
.scats button:hover{color:var(--txt)}.scats button.on{background:var(--acc);color:#fff}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;padding:20px 28px 40px}
.item{background:var(--bg3);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s;animation:fadeUp .4s var(--ease) backwards;position:relative}
.item:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.item .pv{height:140px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--bg5),var(--bg0));position:relative;overflow:hidden;--stbg:var(--bg0)}
.item .pv .bpv{position:absolute;inset:0}
.item .pv .nm{font-size:22px;font-weight:800}
.item .pv .emo2{font-size:58px;filter:drop-shadow(0 8px 14px #0008)}
.item .info{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.item .info b{font-size:15px}.item .info small{color:var(--mut);font-size:12px;flex:1}
.item .buy{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.item .price{font-weight:800;display:flex;align-items:center;gap:6px}
.item .own{position:absolute;top:10px;right:10px;background:#000a;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px;z-index:2}
.item .eq{background:var(--acc)}
.kind{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#000a;color:#ddd;padding:3px 8px;border-radius:10px;z-index:2}

/* ------------------------------------------------------------ katmanlar */
#layer>*{z-index:100}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .18s;z-index:100}
.modal{background:var(--bg2);border-radius:14px;width:min(460px,100%);max-height:92vh;overflow:auto;box-shadow:var(--shadow);animation:pop .25s var(--ease)}
.modal.w600{width:min(600px,100%)}
.modal .mh{padding:22px 22px 6px;text-align:center}.modal .mh h2{margin:0 0 6px;font-size:22px}.modal .mh p{margin:0;color:var(--mut)}
.modal .mb{padding:12px 22px 18px}
.modal .mf{padding:14px 18px;background:var(--bg1);display:flex;justify-content:flex-end;gap:8px;border-radius:0 0 14px 14px}
.modal .mf .left{margin-right:auto}
.choice{display:flex;align-items:center;gap:14px;width:100%;padding:14px;border-radius:10px;border:1px solid var(--line);margin-top:10px;text-align:left;transition:background .15s,border-color .15s,transform .15s var(--ease)}
.choice:hover{background:var(--bg3);border-color:var(--bg5);transform:translateX(3px)}
.choice .big{font-size:30px}.choice b{display:block}.choice small{color:var(--mut)}
.choice::after{content:"›";margin-left:auto;font-size:26px;color:var(--mut)}
.invprev{display:flex;align-items:center;gap:14px;background:var(--bg1);border-radius:12px;padding:14px;margin-top:12px;animation:fadeUp .3s var(--ease)}
.sicon{border-radius:30%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-weight:700;overflow:hidden;flex:none;color:var(--txt)}
.sicon img{width:100%;height:100%;object-fit:cover}
.linkbox{display:flex;background:var(--bg0);border-radius:8px;padding:4px 4px 4px 12px;align-items:center;gap:8px;border:1px solid var(--line)}
.linkbox input{flex:1;background:none;border:0;outline:0;font-size:14px;min-width:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--off);margin-right:4px}.dot.g{background:var(--on)}

.menu{position:fixed;background:var(--bg0);border-radius:8px;padding:6px;box-shadow:var(--shadow),0 0 0 1px var(--line);min-width:200px;max-width:280px;animation:pop .12s var(--ease);z-index:150}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:8px 10px;border-radius:4px;color:var(--txt2);font-size:14px;text-align:left}
.menu button:hover{background:var(--acc);color:#fff}
.menu button.danger{color:var(--acc2)}.menu button.danger:hover{background:#c62828;color:#fff}
.menu button:disabled{opacity:.4;pointer-events:none}
.menu .msep{height:1px;background:var(--line);margin:4px 6px}
.menu .mlabel{padding:6px 10px 2px;font-size:11px;color:var(--mut);font-weight:800;text-transform:uppercase}
.menu .stdot{width:10px;height:10px;border-radius:50%;flex:none}

.pop{position:fixed;width:320px;background:var(--bg1);border-radius:12px;box-shadow:var(--shadow),0 0 0 1px var(--line);overflow:hidden;animation:pop .16s var(--ease);z-index:140;--stbg:var(--bg1)}
.pop .bnr{height:96px}
.pop .pav{position:absolute;left:16px;top:52px}
.pop .pav .avw{box-shadow:0 0 0 6px var(--bg1);border-radius:50%}
.pop .pb{padding:46px 16px 16px}
.pop .card{background:var(--bg0);border-radius:10px;padding:12px;margin-top:12px}
.pop h4{margin:10px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
.pop h4:first-child{margin-top:0}
.pop .roles{display:flex;flex-wrap:wrap;gap:4px}
.pop .uname{font-size:20px;font-weight:800;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pop .handle{color:var(--mut);font-size:14px}
.pop .quick{margin-top:12px}

.toasts{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:300}
.toast{background:var(--bg0);color:var(--txt);padding:11px 16px;border-radius:10px;box-shadow:var(--shadow),0 0 0 1px var(--line);border-left:4px solid var(--txt2);animation:slideR .3s var(--ease);max-width:340px;font-size:14px}
.toast.err{border-left-color:var(--acc)}.toast.ok{border-left-color:var(--on)}

/* tam ekran ayarlar */
.fullset{position:fixed;inset:0;background:var(--bg2);display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,760px) minmax(60px,1fr);animation:pop .22s var(--ease);z-index:110}
.fullset .fnav{background:var(--bg1);display:flex;justify-content:flex-end;overflow-y:auto}
.fullset .fnav>div{width:220px;padding:60px 8px 30px 20px}
.fullset .fnav h5{margin:16px 10px 6px;font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.fullset .fnav h5:first-child{margin-top:0}
.fullset .fnav button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:6px;color:var(--mut);margin-bottom:2px;font-weight:500;transition:background .12s,color .12s}
.fullset .fnav button:hover{background:var(--bg4);color:var(--txt)}.fullset .fnav button.on{background:var(--bg5);color:var(--txt)}
.fullset .fnav button.danger{color:var(--acc2)}
.fullset .fnav .sep{margin:10px}
.fullset .fbody{padding:60px 40px 80px;overflow-y:auto;min-width:0}
.fullset .fbody>div{animation:fadeUp .3s var(--ease)}
.fullset .fbody h2{margin:0 0 20px;font-size:20px}
.fullset .fclose{padding-top:60px}
.fullset .fclose button{width:36px;height:36px;border-radius:50%;border:2px solid var(--mut);color:var(--mut);font-size:16px;transition:background .15s,color .15s,border-color .15s}
.fullset .fclose button:hover{background:var(--bg4);color:var(--txt);border-color:var(--txt)}
.fullset .fclose small{display:block;color:var(--mut);font-size:12px;margin:6px 0 0 4px;font-weight:700}
.savebar{position:sticky;bottom:0;margin-top:24px;background:var(--bg0);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);animation:fadeUp .3s var(--ease)}
.savebar span{flex:1}
.pcard{background:var(--bg0);border-radius:12px;overflow:hidden;width:300px;max-width:100%;--stbg:var(--bg0)}
.pcard .bnr{height:90px}.pcard .pb{padding:44px 16px 16px;position:relative}
.pcard .pav{position:absolute;left:16px;top:-36px}.pcard .pav .avw{box-shadow:0 0 0 6px var(--bg0);border-radius:50%}
.listrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:var(--bg1);margin-bottom:6px;animation:fadeUp .3s var(--ease) backwards;--stbg:var(--bg1)}
.listrow .grow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listrow .grow small{color:var(--mut)}
.split{display:grid;grid-template-columns:200px 1fr;gap:20px}
.rlist button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;text-align:left;color:var(--txt2);margin-bottom:2px}
.rlist button:hover{background:var(--bg4)}.rlist button.on{background:var(--bg5);color:var(--txt)}
.rlist button i{width:12px;height:12px;border-radius:50%;flex:none}
.swatches{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.swatches button{width:30px;height:30px;border-radius:8px;border:2px solid transparent;transition:transform .12s}
.swatches button:hover{transform:scale(1.12)}.swatches button.on{border-color:var(--txt)}
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.theme{border:2px solid var(--line);border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:transform .2s var(--ease),border-color .2s;font-size:13px;font-weight:600}
.theme:hover{transform:translateY(-3px)}.theme.on{border-color:var(--acc)}
.theme i{display:block;height:56px;border-radius:8px;margin-bottom:8px;border:1px solid #8883}
.crop{display:block;margin:12px auto;border-radius:50%;background:#000;cursor:grab;touch-action:none;box-shadow:0 0 0 3px var(--acc)}
.crop.sq{border-radius:28%}.crop:active{cursor:grabbing}
.drop{border:2px dashed var(--bg5);border-radius:12px;padding:16px;text-align:center;color:var(--mut);cursor:pointer;transition:border-color .2s,background .2s}
.drop:hover{border-color:var(--acc);background:var(--bg3)}

@media(max-width:1100px){#aside{width:220px}}
@media(max-width:900px){#app{grid-template-columns:64px 220px minmax(0,1fr)}#aside{display:none}.fullset{grid-template-columns:200px 1fr 50px}.fullset .fnav>div{width:200px}.fullset .fbody{padding:40px 20px}}
@media(max-width:640px){
  #app{grid-template-columns:64px minmax(0,1fr)}
  #side{position:fixed;left:64px;top:0;bottom:0;width:min(280px,80vw);z-index:40;transform:translateX(-120%);transition:transform .3s var(--ease);box-shadow:var(--shadow)}
  #app.sideopen #side{transform:none}
  .menubtn{display:inline-flex!important}
  .fullset{grid-template-columns:1fr}.fullset .fnav{display:none}.fullset .fclose{position:fixed;right:12px;top:-40px}
  .split{grid-template-columns:1fr}
}
.menubtn{display:none!important}

.ri .ico.home{background:transparent;padding:0}.ri .ico.home img{width:48px;height:48px;transition:transform .25s var(--ease)}.ri:hover .ico.home,.ri.on .ico.home{background:transparent}.ri:hover .ico.home img{transform:scale(1.04)}

/* rozetler */
.brow{display:inline-flex;gap:5px;flex-wrap:wrap;align-items:center}
.bdg{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:var(--bg4);cursor:default;transition:transform .15s var(--ease);box-shadow:inset 0 0 0 1px #ffffff10}
.bdg:hover{transform:translateY(-2px) scale(1.12)}
.bdg.lp{background:linear-gradient(135deg,#ff5252,#8e0000);color:#fff;font-weight:900}
.bdg.st2{background:linear-gradient(135deg,#3a3a3a,#111);box-shadow:inset 0 0 0 1px #e5393588}
.lpmark{margin-left:4px;color:#ff5252;font-weight:900;text-shadow:0 0 8px #ff1744;cursor:default}
/* kenar çubuğu L+ */
.lpic{display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:12px!important;letter-spacing:-.5px;background:linear-gradient(135deg,#ff5252,#8e0000);color:#fff;border-radius:7px;width:24px;height:22px;flex:none}
.nav .soon{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.05em;color:#ff8a80;background:#e5393522;border:1px solid #e5393555;border-radius:6px;padding:1px 6px}
.tag.newtag{background:var(--acc);color:#fff;font-size:10px;letter-spacing:.05em}
/* duyurular */
.news{flex:1;overflow-y:auto;min-width:0}
.nhero{padding:34px 32px 26px;background:radial-gradient(circle at 90% 20%,#e5393540,transparent 55%),linear-gradient(135deg,#0a0a0a,#1c1c1c);color:#fff}
.nhero h1{margin:0 0 6px;font-size:30px}.nhero p{margin:0;color:#bdbdbd;max-width:560px}
.nlist{padding:22px 28px 40px;max-width:900px}
.ncard{display:flex;gap:16px;background:var(--bg3);border-radius:14px;padding:18px 20px;margin-bottom:14px;animation:fadeUp .45s var(--ease) backwards;border:1px solid transparent;transition:border-color .2s,transform .2s var(--ease)}
.ncard:hover{border-color:var(--bg5);transform:translateY(-2px)}
.ncard.pinned{border-color:#e5393566;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 10%,var(--bg3)),var(--bg3))}
.nemo{font-size:34px;width:54px;height:54px;border-radius:14px;background:var(--bg1);display:flex;align-items:center;justify-content:center;flex:none}
.nhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:17px;margin-bottom:2px}
.nbody{white-space:pre-wrap;word-break:break-word;color:var(--txt2)}
.nbody code{background:var(--bg0);padding:1px 5px;border-radius:4px;font:13px Consolas,monospace}
/* L+ sayfası */
.lplus{flex:1;overflow-y:auto;min-width:0;padding-bottom:50px}
.lphero{position:relative;text-align:center;padding:56px 24px 50px;overflow:hidden;background:linear-gradient(180deg,#0a0a0a,var(--bg2))}
.lpglow{position:absolute;width:620px;height:620px;left:50%;top:-260px;margin-left:-310px;border-radius:50%;background:radial-gradient(circle,#e5393566,transparent 65%);animation:float 10s ease-in-out infinite;pointer-events:none}
.lplogo{position:relative;display:inline-flex;align-items:flex-start;font-size:96px;font-weight:900;line-height:1;color:#fff;letter-spacing:-4px;text-shadow:0 10px 40px #e5393588;animation:fadeUp .7s var(--ease)}
.lplogo span{font-size:64px;color:#ff5252;margin-left:2px;animation:pulseTxt 2.4s ease-in-out infinite}
@keyframes pulseTxt{50%{text-shadow:0 0 30px #ff1744;transform:scale(1.08)}}
.lphero h1{position:relative;margin:18px 0 10px;font-size:clamp(26px,4vw,40px);color:#fff}
.lphero p{position:relative;color:#bdbdbd;margin:0 auto;max-width:520px;font-size:16px}
.grad2{background:linear-gradient(90deg,#fff,#ff8a80,#e53935,#fff);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
.lph{text-align:center;margin:40px 0 18px;font-size:24px}
.lpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;padding:0 28px;max-width:1100px;margin:0 auto}
.lpcard{background:var(--bg3);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;animation:fadeUp .45s var(--ease) backwards;transition:transform .2s var(--ease),box-shadow .2s;border:1px solid var(--line)}
.lpcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#e5393555}
.lpi{font-size:28px;width:48px;height:48px;border-radius:12px;background:var(--bg1);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.lpcard .tag{margin-top:auto}
.lpprice{position:relative;max-width:420px;margin:40px auto 0;background:linear-gradient(160deg,#1f1f1f,#0d0d0d);border:1px solid #e5393566;border-radius:18px;padding:28px;text-align:center;box-shadow:0 20px 60px #e5393522;color:#ececec}
.lpbadge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--acc);color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;padding:4px 12px;border-radius:20px}
.lpnum{font-size:54px;font-weight:900;color:#fff;margin:4px 0}
.lpprice ul{list-style:none;padding:0;margin:18px 0;text-align:left;display:inline-block;color:#d0d0d0}
.lpprice li{padding:3px 0}
.lpfaq{max-width:720px;margin:0 auto;padding:0 24px}
.glass2{background:var(--bg3);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.glass2 summary{cursor:pointer;font-weight:700}.glass2 p{margin:10px 0 0;color:var(--mut)}
.lppromo{display:flex;align-items:center;gap:10px;background:#ffffff12;border:1px solid #e5393566;border-radius:12px;padding:8px 14px;color:#fff;text-align:left;transition:background .2s,transform .2s var(--ease)}
.lppromo:hover{background:#e5393533;transform:translateY(-2px)}
.lppromo .lpic{width:34px;height:30px;font-size:15px!important}
.lppromo small{color:#bdbdbd}

/* ses sayfası */
.vstage{flex:1;display:flex;flex-direction:column;min-height:0;background:radial-gradient(circle at 50% 0%,#e539351a,transparent 60%),var(--bg0);padding:20px;gap:16px;overflow:auto}
.vgrid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-content:center}
.vgrid.solo{grid-template-columns:minmax(260px,560px);justify-content:center}
.vgrid.duo{grid-template-columns:repeat(2,minmax(240px,460px));justify-content:center}
.vtile{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;background:var(--bg2);box-shadow:inset 0 0 0 1px #ffffff12;transition:box-shadow .15s,transform .2s var(--ease);animation:pop .35s var(--ease) backwards;--stbg:var(--bg2)}
.vtile:hover{transform:translateY(-3px)}
.vtile .vbg{position:absolute;inset:0;opacity:.45;filter:blur(18px) saturate(1.2);transform:scale(1.2)}
.vtile .avw{position:relative;z-index:1;transition:transform .15s}
.vtile.speaking{box-shadow:inset 0 0 0 3px var(--on),0 0 24px color-mix(in srgb,var(--on) 40%,transparent)}
.vtile.speaking .avw{transform:scale(1.05)}
.vname{position:absolute;left:10px;bottom:10px;z-index:1;background:#000a;padding:3px 10px;border-radius:8px;font-size:13px;color:#fff;max-width:calc(100% - 70px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vicons{position:absolute;right:10px;bottom:10px;z-index:1;display:flex;gap:4px}
.vicons span{background:#000a;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px}
.vinfo{text-align:center;color:var(--mut);font-size:13px}
.vctrl{display:flex;justify-content:center;gap:12px;flex:none;padding-bottom:6px}
.vc{width:56px;height:56px;border-radius:50%;background:var(--bg3);color:var(--txt);font-size:22px;box-shadow:inset 0 0 0 1px #ffffff14;transition:background .15s,transform .15s var(--ease)}
.vc:hover{background:var(--bg5);transform:translateY(-3px)}.vc:active{transform:scale(.92)}
.vc.off{background:#fff;color:#111}.vc.leave{background:#c62828;color:#fff}.vc.leave:hover{background:#e53935}
.vc:disabled{opacity:.35;cursor:not-allowed;transform:none}
.vjoin{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:10px}
.sfxgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px}
.sfx{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center!important;gap:2px;padding:10px 4px!important;border-radius:10px!important;background:var(--bg3)!important;font-size:11px!important;color:var(--txt2)!important;transition:transform .12s!important}
.sfx span{font-size:24px}
.sfx:hover{background:var(--acc)!important;color:#fff!important;transform:scale(1.06)}
/* destek */
.support{flex:1;display:grid;grid-template-columns:280px 1fr;min-height:0}
.slist{border-right:1px solid var(--line);overflow-y:auto;padding:8px;background:var(--bg1)}
.slist .dmrow .n div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.schat{display:flex;flex-direction:column;min-height:0;min-width:0}
.shd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap}
.smsgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.sb{max-width:76%;padding:10px 13px;border-radius:14px;white-space:pre-wrap;word-break:break-word;animation:fadeUp .25s var(--ease)}
.sb small{display:block;font-size:11px;font-weight:700;color:var(--acc2);margin-bottom:3px}
.sb.user{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px}.sb.user a{color:#fff}
.sb.admin{align-self:flex-start;background:var(--bg3);border-bottom-left-radius:4px}
.sb.system{align-self:center;color:var(--mut);font-size:13px;text-align:center}
.scomp{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.scomp textarea{flex:1;resize:none}
/* easter egg */
.rain{position:fixed;top:-60px;z-index:400;pointer-events:none;animation:rainFall linear forwards}
@keyframes rainFall{to{transform:translateY(calc(100vh + 120px)) rotate(360deg)}}
.conf{position:fixed;top:-20px;z-index:400;pointer-events:none;border-radius:2px;animation:confFall cubic-bezier(.2,.6,.4,1) forwards}
@keyframes confFall{to{transform:translate(var(--dx),calc(100vh + 40px)) rotate(var(--rx))}}
.konami #rail .ri .ico{animation:spin 1.2s linear infinite}
.sday{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:350;display:flex;align-items:center;gap:12px;background:linear-gradient(90deg,#b71c1c,#e53935);color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow);animation:fadeUp .5s var(--ease)}
.sday.mourn{background:#111;border:1px solid #333}
.sday button{color:#fff;opacity:.8;margin-left:6px}
@media(max-width:760px){.support{grid-template-columns:1fr}.slist{max-height:200px;border-right:0;border-bottom:1px solid var(--line)}.vc{width:48px;height:48px;font-size:19px}}

.mem .n{min-width:0}
.memact{font-size:11px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-1px}
.actcard{display:flex;gap:12px;align-items:center;margin-top:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 18%,var(--bg0)),var(--bg0));border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:10px;padding:10px 12px}
.acticon{width:44px;height:44px;border-radius:10px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;animation:pulseTxt 2.4s ease-in-out infinite}
.acard.playing{box-shadow:inset 3px 0 0 var(--acc)}

.gifbtn{font-size:11px!important;font-weight:900;letter-spacing:.04em;width:auto!important;padding:0 7px;border:2px solid currentColor;height:22px!important;margin-bottom:11px!important;margin-right:4px}
.gifp{position:absolute;right:var(--pad);bottom:76px;width:min(420px,calc(100vw - 32px));height:420px;background:var(--bg1);border-radius:12px;box-shadow:var(--shadow),0 0 0 1px var(--line);display:flex;flex-direction:column;z-index:20;animation:pop .16s var(--ease);overflow:hidden;padding:8px;gap:6px}
.gifchips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:none}
.gifchips button{background:var(--bg3);border-radius:14px;padding:4px 10px;font-size:12px;color:var(--txt2);white-space:nowrap}
.gifchips button:hover{background:var(--acc);color:#fff}
.gifgrid{flex:1;overflow-y:auto;columns:2;column-gap:6px}
.gifitem{display:block;width:100%;margin-bottom:6px;border-radius:8px;overflow:hidden;break-inside:avoid;background:var(--bg3);transition:transform .15s,box-shadow .15s}
.gifitem:hover{transform:scale(1.02);box-shadow:0 0 0 2px var(--acc)}
.gifitem img{width:100%;display:block}
.embed{margin-top:6px;max-width:min(420px,100%)}
.embed img{max-width:100%;max-height:320px;border-radius:8px;display:block;cursor:zoom-in;background:var(--bg3)}
.imgview{flex-direction:column;cursor:zoom-out}
.imgview img{max-width:92vw;max-height:84vh;border-radius:8px;box-shadow:var(--shadow)}
.rulesbox{background:var(--bg1);border-radius:10px;padding:14px;max-height:46vh;overflow-y:auto;white-space:pre-wrap;line-height:1.6;text-align:left}
.chk2{display:flex;gap:8px;align-items:center;margin-top:12px;cursor:pointer;font-weight:600}

.content{background:var(--chatbg,var(--bg2))}
.cathead{cursor:pointer;user-select:none;border-radius:4px;transition:color .15s}
.cathead:hover{color:var(--txt)}
.cathead .caret{display:inline-block;font-style:normal;margin-right:4px;transition:transform .2s var(--ease);font-size:10px}
.cathead.col .caret{transform:rotate(-90deg)}
.ch[draggable=true],.cathead[draggable=true]{cursor:grab}
.dragging{opacity:.4}
.dropbefore{box-shadow:inset 0 2px 0 var(--acc)}
.dropafter{box-shadow:inset 0 -2px 0 var(--acc)}
.dropinto{background:color-mix(in srgb,var(--acc) 20%,transparent)!important;color:var(--txt)!important}
.tag.bot{background:var(--acc);color:#fff;font-size:10px;padding:1px 6px;letter-spacing:.04em;margin-left:4px}
.slashpop{position:absolute;left:var(--pad);right:var(--pad);bottom:76px;background:var(--bg1);border-radius:12px;box-shadow:var(--shadow),0 0 0 1px var(--line);max-height:300px;overflow-y:auto;z-index:21;animation:pop .14s var(--ease);padding-bottom:6px}
.slashitem{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer}
.slashitem b{min-width:90px}
.slashitem.on,.slashitem:hover{background:var(--bg4)}
.ctgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.ctheme{display:flex;flex-direction:column;gap:6px;align-items:center;font-size:12px;font-weight:600;color:var(--txt2);padding:6px;border-radius:10px;border:2px solid transparent;transition:border-color .15s,transform .2s var(--ease)}
.ctheme:hover{transform:translateY(-2px)}.ctheme.on{border-color:var(--acc)}
.ctheme i{display:flex;align-items:center;justify-content:center;width:100%;height:58px;border-radius:8px;font-style:normal;border:1px solid #ffffff14}
.ctheme i span{background:#ffffff1f;color:#fff;border-radius:6px;padding:2px 8px;font-weight:700}

.mascot{display:block;margin:0 auto 6px;filter:drop-shadow(0 12px 24px #0008);animation:fadeUp .6s var(--ease)}

.nemo{overflow:hidden;line-height:1}

/* ------------------------------------------------------------ DM arama */
.dmcallbar{background:linear-gradient(180deg,#000,var(--bg1));border-bottom:1px solid var(--line,#ffffff14);padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fadeIn .3s}
.dmcallbar[hidden]{display:none}
.ctiles{display:flex;gap:28px}
.ctile{position:relative;border-radius:50%;transition:box-shadow .15s}
.ctile .avw{border-radius:50%}
.ctile.speaking{box-shadow:0 0 0 3px #3ba55d,0 0 18px #3ba55d88}
.ctile.away{opacity:.4}
.ctile .cm{position:absolute;right:-2px;bottom:-2px;background:var(--bg0);border-radius:50%;padding:3px;font-size:13px}
.cinfo{font-size:13px;color:var(--mut);font-weight:700}
.cbtns{gap:10px}
.callbtn{width:56px;height:56px;border-radius:50%;border:0;cursor:pointer;font-size:22px;background:var(--bg4);color:#fff;transition:filter .15s,transform .15s}
.callbtn:hover{filter:brightness(1.15);transform:scale(1.05)}
.callbtn.sm{width:44px;height:44px;font-size:17px}
.callbtn.on{background:#fff;color:#000}
.callbtn.yes{background:#3ba55d}
.callbtn.no{background:#e53935}
.ringbox{position:fixed;z-index:9999;right:24px;bottom:24px;width:260px;padding:24px 16px 18px;border-radius:18px;background:var(--bg1);border:1px solid #ffffff1a;box-shadow:0 20px 60px #000c;display:flex;flex-direction:column;align-items:center;gap:4px;animation:fadeUp .3s var(--ease)}
.ringbox b{font-size:18px;margin-top:10px}
.rava{border-radius:50%;animation:ringpulse 1.2s infinite}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 #3ba55daa}100%{box-shadow:0 0 0 22px #3ba55d00}}

/* ------------------------------------------------------------ ekran paylaşımı */
.vrest{display:contents}
.sview{position:relative;flex:none;width:100%;aspect-ratio:16/9;max-height:62vh;background:#000;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14;animation:fadeIn .3s}
.sview[hidden]{display:none}
.sview video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.sview:fullscreen{border-radius:0;max-height:none}
.slabel{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:8px;background:#000a;padding:6px 10px;border-radius:8px;font-size:13px;font-weight:700;backdrop-filter:blur(6px)}
.live{background:#e53935;color:#fff;font-size:10px;font-weight:900;padding:2px 6px;border-radius:4px;letter-spacing:.06em}
.sbtns{position:absolute;right:12px;top:12px;display:flex;gap:6px;opacity:0;transition:opacity .2s}
.sview:hover .sbtns,.sview:hover .stabs{opacity:1}
.sbtns button,.stabs button{background:#000b;color:#fff;border:0;border-radius:8px;padding:7px 11px;font-weight:700;cursor:pointer;backdrop-filter:blur(6px)}
.sbtns button:hover,.stabs button:hover{background:#e53935}
.stabs{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;opacity:.6;transition:opacity .2s}
.stabs button.on{background:#e53935}
.vgrid.mini{flex:none;grid-template-columns:repeat(auto-fill,minmax(150px,190px));justify-content:center}
.vgrid.mini .vtile{aspect-ratio:16/9}
.vgrid.mini .vtile .avw{transform:scale(.7)}
.livetag{position:absolute;z-index:2;left:10px;top:10px;background:#e53935;color:#fff;font-size:11px;font-weight:900;padding:3px 7px;border-radius:6px;letter-spacing:.04em;cursor:pointer}
.ctile .livetag{left:50%;top:auto;bottom:-10px;transform:translateX(-50%);white-space:nowrap;font-size:10px}
.vc.onair,.callbtn.onair{background:#e53935;color:#fff}
#vbar button.onair{background:#e53935;color:#fff}
.dmcallbar .sview{width:min(860px,100%);max-height:52vh}
.spick{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;max-height:55vh;overflow:auto}
.spitem{background:var(--bg2);border:2px solid transparent;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;cursor:pointer;color:var(--txt);text-align:left;transition:border-color .15s}
.spitem:hover{border-color:var(--acc)}
.spitem img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:6px}
.spitem span{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------------ kamera */
video.camv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
video.camv.mirror{transform:scaleX(-1)}
.vtile video.camv{border-radius:inherit}
.vtile:has(video.camv) .vname,.vtile:has(video.camv) .vicons,.vtile:has(video.camv) .livetag{z-index:2}
.ctile.hascam{width:200px;height:120px;border-radius:14px;overflow:hidden}
.ctile.hascam video.camv{border-radius:14px}
.ctile .cm,.ctile .livetag{z-index:2}
.camprev{margin-top:8px;position:relative;width:100%;max-width:280px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.camprev:empty{display:none}

/* ------------------------------------------------------------ GIF favorileri */
.gifitem{position:relative}
.gfav{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#000b;color:#fff;font-size:15px;cursor:pointer;opacity:0;transition:opacity .15s,transform .15s;z-index:2}
.gifitem:hover .gfav,.embed:hover .gfav,.gfav.on{opacity:1}
.gfav:hover{transform:scale(1.12)}
.gfav.on{color:#ffca28}
.embed{position:relative;display:inline-block}
.favchip{color:#ffca28!important}

/* ------------------------------------------------------------ performans */
/* isim efektleri sürekli değil: sadece üstüne gelince ve profil kartlarında oynar */
.fx-silver,.fx-fire,.fx-glitch{animation-play-state:paused}
:hover>:is(.fx-silver,.fx-fire,.fx-glitch),:is(.pop,.pside,.pcard) :is(.fx-silver,.fx-fire,.fx-glitch){animation-play-state:running}
.acticon{animation:none}
.coin{animation-play-state:paused}
:hover>.coin{animation-play-state:running}
/* pencere gizliyken hiçbir şey hareket etmesin */
[data-hidden] *,[data-hidden] *::before,[data-hidden] *::after{animation-play-state:paused!important}
/* performans modu (FPS boost) */
[data-perf=on] *,[data-perf=on] *::before,[data-perf=on] *::after{animation:none!important;transition:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-perf=on] :is(.vbg,#auth .orb,.lpglow){display:none!important}
[data-perf=on] :is(.fx-silver,.fx-fire){background-position:0 0}