:root { --bg:#f4f6fb; --card:#fff; --ink:#0f1b33; --mute:#667085; --line:#e4e7ec; --navy:#00265b; --brand:#0074f6; --ok:#067647; --warn:#b54708; --bad:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--ink); }
.top { display:flex; flex-wrap:wrap; gap:16px; align-items:center; background:#fff; color:var(--navy); padding:8px 20px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:21px; letter-spacing:-.4px; }
.brand img { height:34px; width:auto; display:block; }
.brand .n { color:var(--navy); } .brand .b { color:var(--brand); }
.top nav { display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.top nav a { color:#475467; text-decoration:none; padding:6px 10px; border-radius:6px; font-weight:500; }
.top nav a:hover { background:#eef4ff; color:var(--brand); }
.top nav a.on { background:#e6f0ff; color:var(--brand); font-weight:600; }
.who { font-size:13px; color:#475467; }
.who .role { color:#98a2b3; }
main { max-width:1100px; margin:24px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.stat b { display:block; font-size:26px; }
.stat span { color:var(--mute); font-size:13px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#f9fafb; font-size:13px; color:var(--mute); font-weight:600; }
tr:last-child td { border-bottom:0; }
label { display:block; font-weight:600; margin:12px 0 4px; font-size:14px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea, input[type=file] { width:100%; padding:9px 10px; border:1px solid #cfd4dc; border-radius:8px; font:inherit; background:#fff; }
textarea { min-height:140px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.row { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 16px; }
.chk { display:flex; gap:10px; align-items:flex-start; font-weight:500; margin:14px 0; }
.chk input { margin-top:4px; }
button, .btn { display:inline-block; background:var(--brand); color:#fff; border:0; border-radius:8px; padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
button.sec, .btn.sec { background:#eef0f4; color:var(--ink); }
button.bad { background:var(--bad); }
button.link { background:none; color:var(--brand); padding:0; font-weight:600; }
form.inline { display:inline; }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:12px; border:1px solid; }
.flash.ok { background:#ecfdf3; border-color:#abefc6; color:var(--ok); }
.flash.err { background:#fef3f2; border-color:#fecdca; color:var(--bad); }
.flash.warn { background:#fffaeb; border-color:#fedf89; color:var(--warn); }
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:#eef0f4; color:#344054; }
.b-bekliyor { background:#eff8ff; color:#175cd3; } .b-isleniyor { background:#fffaeb; color:#b54708; }
.b-dolduruldu { background:#f4f3ff; color:#5925dc; } .b-gonderildi { background:#ecfdf3; color:#067647; }
.b-hata, .b-belirsiz { background:#fef3f2; color:#b42318; } .b-iptal { background:#f2f4f7; color:#667085; } .b-taslak { background:#f9fafb; color:#667085; }
.mute { color:var(--mute); } .small { font-size:13px; }
.photos { display:flex; gap:14px; flex-wrap:wrap; } .photos figure { margin:0; }
.photos img { max-width:260px; max-height:260px; border-radius:8px; border:1px solid var(--line); display:block; }
.kv { display:grid; grid-template-columns:200px 1fr; gap:6px 16px; } .kv dt { color:var(--mute); } .kv dd { margin:0; }
.login { max-width:380px; margin:60px auto; }
.login img.biglogo { display:block; width:210px; height:auto; margin:0 auto 14px; }
.copy { font-family:ui-monospace,Menlo,Consolas,monospace; background:#f2f4f7; padding:8px 10px; border-radius:8px; word-break:break-all; }
.pager { margin:14px 0; display:flex; gap:8px; align-items:center; }
@media (max-width:640px) { .kv { grid-template-columns:1fr; } }

.tabs { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.tabs a { padding:7px 14px; border-radius:8px; background:#eef0f4; color:var(--ink); text-decoration:none; font-weight:600; }
.tabs a.on { background:var(--brand); color:#fff; }
.tablewrap { overflow-x:auto; border-radius:10px; }
.tablewrap table { min-width:920px; }
.b-onay { background:#fff4e5; color:#b54708; }

/* Sol yan menü (açılır/kapanır) */
.shell { display:flex; min-height:100vh; }
.content { flex:1; min-width:0; }
.side { width:250px; flex:none; background:#fff; border-right:1px solid var(--line); padding:10px 8px; overflow-y:auto; }
.side-head { display:none; }
.side-backdrop { display:none; }
.nosidebar .side { display:none; }
.side details { margin-bottom:6px; }
.side summary { cursor:pointer; font-size:12px; font-weight:700; color:var(--mute); text-transform:uppercase; letter-spacing:.5px; padding:8px 10px; list-style:none; }
.side summary::-webkit-details-marker { display:none; }
.side summary::before { content:'▾  '; }
.side details:not([open]) summary::before { content:'▸  '; }
.side a { display:flex; gap:9px; align-items:center; padding:8px 10px; border-radius:8px; color:#344054; text-decoration:none; font-weight:500; }
.side a:hover { background:#eef4ff; color:var(--brand); }
.side a.on { background:#e6f0ff; color:var(--brand); font-weight:600; }
.side .ic { width:20px; text-align:center; }
.burger { font-size:18px; padding:4px 10px; background:#eef0f4; color:var(--navy); margin-right:6px; }
.top { justify-content:flex-start; }
.top .who { margin-left:auto; }
@media (max-width:860px) {
  .side { position:fixed; z-index:80; top:0; left:0; bottom:0; box-shadow:4px 0 18px rgba(0,0,0,.18); }
  .side-head { display:flex; justify-content:flex-end; padding:2px 4px 8px; }
  .side-head button { background:#eef0f4; color:var(--navy); border:0; border-radius:8px; width:32px; height:32px; font-size:18px; line-height:1; cursor:pointer; }
  .shell:not(.nosidebar) .side-backdrop { display:block; position:fixed; inset:0; background:rgba(6,12,28,.45); z-index:70; }
}
/* Yukarıdaki @media, bazı tarayıcı/yazdırma ortamlarında CSS piksel genişliğini beklenenden
   farklı hesaplayabiliyor; JS'in ölçtüğü gerçek pencere genişliğine göre eklediği ".mobile"
   sınıfıyla da AYNI kuralları burada tekrar veriyoruz (ikisinden biri tetiklenirse yeter). */
.shell.mobile .side { position:fixed; z-index:80; top:0; left:0; bottom:0; box-shadow:4px 0 18px rgba(0,0,0,.18); }
.shell.mobile .side-head { display:flex; justify-content:flex-end; padding:2px 4px 8px; }
.shell.mobile .side-head button { background:#eef0f4; color:var(--navy); border:0; border-radius:8px; width:32px; height:32px; font-size:18px; line-height:1; cursor:pointer; }
.shell.mobile:not(.nosidebar) .side-backdrop { display:block; position:fixed; inset:0; background:rgba(6,12,28,.45); z-index:70; }
.shell.mobile .row { grid-template-columns:1fr; }
@media (max-width:600px) {
  /* Dar ekranlarda grid'in minmax alt sınırı (240px) yatay taşmaya yol açıp
     .side-head/.side-backdrop medya sorgusunu devre dışı bırakabiliyordu; tek sütuna zorla. */
  .row { grid-template-columns:1fr; }
}
html, body { overflow-x:hidden; }
.tablewrap { max-width:100%; }

/* ============================================================
   Giriş sayfası: bölünmüş ekran, karanlık/aydınlık mod, kayan firma şeridi
   ============================================================ */
html[data-theme=dark]{color-scheme:dark;--bg:#0c1220;--card:#151d31;--ink:#e7ecf6;--mute:#93a0b8;--line:#26314b;--navy:#bcd4ff;--brand:#4c9dff;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171;--sel:#1d3a6e;--soft:#1a2439}

.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--bg)}
.auth-hero{position:relative;overflow:hidden;color:#fff;padding:44px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;background:linear-gradient(145deg,#001636 0%,#00265b 38%,#0050c0 78%,#0074f6 100%)}
.auth-hero>*{position:relative;z-index:1}
.orb{position:absolute!important;border-radius:50%;opacity:.42;animation:orbfloat 16s ease-in-out infinite;z-index:0!important}
.orb.o1{width:420px;height:420px;background:radial-gradient(circle at 35% 35%,#5ab0ff,transparent 68%);top:-140px;right:-110px}
.orb.o2{width:340px;height:340px;background:radial-gradient(circle at 35% 35%,#8b6cff,transparent 68%);bottom:-110px;left:-90px;animation-delay:-6s}
.orb.o3{width:200px;height:200px;background:radial-gradient(circle at 35% 35%,#22d3ee,transparent 68%);top:46%;left:54%;animation-delay:-10s}
@keyframes orbfloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-34px) scale(1.09)}}
@media(prefers-reduced-motion:reduce){.orb{animation:none}}
.auth-brand{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:800;letter-spacing:-.4px}
.auth-brand img{height:46px;width:auto;background:#fff;border-radius:13px;padding:5px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.auth-pitch .pill{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:4px 14px;font-size:13px;font-weight:600;letter-spacing:.3px}
.auth-hero h2{font-size:40px;line-height:1.12;margin:16px 0 12px;letter-spacing:-.8px;font-weight:800}
.auth-hero .grad{background:linear-gradient(90deg,#9fd2ff,#c4b5fd);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-hero .lead{font-size:16px;line-height:1.55;opacity:.92;max-width:470px;margin:0}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px;max-width:620px}
.feat>div{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.17);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:12px 14px;transition:transform .2s,background .2s}
.feat>div:hover{transform:translateY(-3px);background:rgba(255,255,255,.14)}
.feat i{font-style:normal;font-size:21px;flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.17);display:flex;align-items:center;justify-content:center}
.feat span{display:flex;flex-direction:column;line-height:1.3}.feat b{font-size:14px}.feat small{opacity:.8;font-size:12px}
.auth-foot{font-size:12px;opacity:.7}

.fmarq{margin-top:26px}
.fmarq-label{font-size:11.5px;letter-spacing:.7px;text-transform:uppercase;color:#cfe0ff;opacity:.8;margin-bottom:10px;font-weight:600}
.fmarq-label b{color:#fff;font-weight:800}
.fmarq-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fmarq-move{display:flex;gap:12px;width:max-content;animation:fmarq 26s linear infinite}
.fmarq-track:hover .fmarq-move{animation-play-state:paused}
.fchip{flex:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 16px;font-weight:700;font-size:13px;color:#fff;white-space:nowrap;backdrop-filter:blur(2px)}
@keyframes fmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.fmarq-move{animation:none}}
@media(max-width:900px){.fmarq{display:none}}

.auth-side{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:34px 22px;position:relative;margin:0;max-width:none}
.auth-top{position:absolute;top:16px;right:16px}
.auth-card{width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,38,91,.14)}
html[data-theme=dark] .auth-card{box-shadow:0 24px 60px rgba(0,0,0,.5)}
.auth-head{text-align:center}
.auth-logo{width:190px;max-width:70%;height:auto;display:block;margin:0 auto 6px}
.auth-logo-dark{display:none}
html[data-theme=dark] .auth-logo-light{display:none}
html[data-theme=dark] .auth-logo-dark{display:block}
.auth-head h1{font-size:26px;margin:6px 0 4px;letter-spacing:-.4px}.auth-head p{margin:0}
.auth-form label{margin-top:16px}
.auth-form input[type=text],.auth-form input[type=password]{padding:12px 13px;border-radius:12px}
button.big{width:100%;padding:13px 16px;font-size:16px;border-radius:12px;background:linear-gradient(135deg,#0074f6,#0050c0);box-shadow:0 8px 20px rgba(0,116,246,.32);color:#fff;border:0;font-weight:700;cursor:pointer}
button.big:hover{filter:brightness(1.07)}
.pwrow{position:relative}.pwrow input{padding-right:48px!important}
.pwrow .eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:transparent!important;border:0;color:var(--mute);padding:6px 10px;font-size:17px;min-height:0!important;cursor:pointer}
.auth-note{font-size:12px;color:var(--mute);margin-top:18px;text-align:center}

.iconbtn{position:relative;background:#eef0f4;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:7px 10px;cursor:pointer;display:inline-flex}
.iconbtn:hover{border-color:var(--brand)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}

@media(max-width:980px){
  .auth{grid-template-columns:1fr}
  .auth-hero{padding:22px 22px 24px;gap:14px}
  .auth-hero h2{font-size:26px;margin:10px 0 8px}
  .auth-hero .lead{font-size:14px}
  .feat,.auth-foot,.fmarq{display:none}
  .auth-side{padding:18px 14px 30px;margin-top:-18px}
  .auth-card{padding:24px 20px;border-radius:20px}
  .auth-top{position:fixed;top:14px;right:14px;z-index:20}
  .auth-top .iconbtn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .auth-logo{display:none}
  .auth-head h1{margin-top:0}
}
@media(max-width:520px){.auth-hero h2{font-size:22px}.auth-hero .lead{font-size:13px}}

/* ============================================================
   Panel geneli: koyu mod (üst çubuk, yan menü, kart, tablo, form, rozet)
   ============================================================ */
html[data-theme=dark] .top,html[data-theme=dark] .side{background:#111a2e}
html[data-theme=dark] .top nav a,html[data-theme=dark] .who,html[data-theme=dark] .who .role,html[data-theme=dark] .side a{color:#c3cde0}
html[data-theme=dark] .side a:hover,html[data-theme=dark] .top nav a:hover{background:#1b2742;color:#9cc8ff}
html[data-theme=dark] .side a.on,html[data-theme=dark] .top nav a.on{background:var(--sel);color:#d6e6ff}
html[data-theme=dark] .burger,html[data-theme=dark] button.sec,html[data-theme=dark] .btn.sec,html[data-theme=dark] .tabs a,html[data-theme=dark] .side-head button{background:#222e48;color:var(--ink)}
html[data-theme=dark] .tabs a.on{background:#2563eb;color:#fff}
html[data-theme=dark] button,html[data-theme=dark] .btn{background:#2563eb;color:#fff}
html[data-theme=dark] button.sec,html[data-theme=dark] .btn.sec{background:#222e48;color:var(--ink)}
html[data-theme=dark] button.bad{background:#b42318}
html[data-theme=dark] input[type=text],html[data-theme=dark] input[type=password],html[data-theme=dark] input[type=date],html[data-theme=dark] input[type=number],html[data-theme=dark] select,html[data-theme=dark] textarea,html[data-theme=dark] input[type=file]{background:#0f1729;border-color:#2c3a58;color:var(--ink)}
html[data-theme=dark] th{background:#1a2439}
html[data-theme=dark] .badge,html[data-theme=dark] .copy{background:#222e48;color:var(--ink)}
html[data-theme=dark] .b-bekliyor{background:#0f2747;color:#8ec5ff}html[data-theme=dark] .b-isleniyor,html[data-theme=dark] .b-onay{background:#3a2a0a;color:#fcd34d}
html[data-theme=dark] .b-dolduruldu{background:#26194d;color:#c4b5fd}html[data-theme=dark] .b-gonderildi{background:#0e2a1c;color:#86efac}
html[data-theme=dark] .b-hata,html[data-theme=dark] .b-belirsiz{background:#33141a;color:#fca5a5}html[data-theme=dark] .b-iptal,html[data-theme=dark] .b-taslak{background:#222e48;color:#93a0b8}
html[data-theme=dark] .flash.ok{background:#0e2a1c;border-color:#1c5a3a;color:#86efac}
html[data-theme=dark] .flash.err{background:#33141a;border-color:#7a2a33;color:#fca5a5}
html[data-theme=dark] .flash.warn{background:#33270d;border-color:#7a5a1a;color:#fcd34d}
html[data-theme=dark] .brand img{background:#fff;border-radius:8px;padding:2px}
html[data-theme=dark] .side .ic svg{color:#8fa3c4}html[data-theme=dark] .side a.on .ic svg,html[data-theme=dark] .side a:hover .ic svg{color:#9cc8ff}

/* Sohbet balonları: açık modda hafif yeşil/beyaz, karanlık modda ölçülü koyu tonlar (parlamasın). */
.bubble-row{display:flex;margin:6px 0}
.bubble-row.mine{justify-content:flex-end}
.bubble-row.other{justify-content:flex-start}
.bubble{max-width:80%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.bubble-row.mine .bubble{background:#e7f6ea}
.bubble-who{font-weight:700;font-size:13px}
.bubble-time{color:var(--mute);font-size:12px;text-align:right;margin-top:2px}
html[data-theme=dark] .bubble{background:#1b2438;border-color:#2b3654;color:var(--ink)}
html[data-theme=dark] .bubble-row.mine .bubble{background:#15301f;border-color:#1f4b2c}

/* Kenar menüsü ikonları: emoji yerine çizgi SVG */
.side .ic{display:inline-flex;align-items:center;justify-content:center}
.side .ic svg{width:19px;height:19px;stroke:#5b6b8a;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.side a.on .ic svg,.side a:hover .ic svg{stroke:var(--brand)}
.top .who{display:flex;align-items:center;gap:10px}

/* ============================================================
   Kayan canlı destek kabarcığı: misafir (giriş sayfası, sol) ve panel (sağ)
   ============================================================ */
.gwidget{position:fixed;left:0;bottom:0;z-index:90}
.gwidget-launch{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#0074f6,#0050c0);color:#fff;border:0;border-radius:0 18px 0 0;padding:14px 20px 14px 16px;box-shadow:6px -6px 26px rgba(0,80,192,.3);cursor:pointer;font:inherit;font-weight:700;animation:gwidgetIn .5s ease both}
@keyframes gwidgetIn{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
.gwidget-launch svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gwidget-panel{position:absolute;left:0;bottom:68px;width:310px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:0 18px 18px 0;box-shadow:6px 0 40px rgba(0,20,60,.28);padding:16px;display:none;opacity:0;transform:translateY(40px) scaleY(.85);transform-origin:bottom;transition:opacity .28s ease,transform .28s cubic-bezier(.34,1.56,.64,1)}
.gwidget.open .gwidget-panel{display:block;animation:gwidgetUp .32s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes gwidgetUp{from{opacity:0;transform:translateY(40px) scaleY(.85)}to{opacity:1;transform:translateY(0) scaleY(1)}}
.gwidget-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.gwidget-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0074f6,#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.gwidget-head b{display:block;font-size:14px}
.gwidget-head span{display:block;font-size:12px;color:var(--mute)}
.gwidget-panel label{margin:10px 0 4px;font-size:13px}
.gwidget-panel input,.gwidget-panel textarea{font-size:14px}
.gwidget-panel textarea{min-height:72px}
.gwidget-close{position:absolute;top:10px;right:10px;background:none;border:0;color:var(--mute);font-size:18px;cursor:pointer;padding:2px 6px}
@media(max-width:520px){.gwidget-launch span{display:none}.gwidget-launch{padding:14px 18px 14px 14px}}

.pwidget{position:fixed;right:22px;bottom:22px;z-index:90}
.pwidget a{display:flex;align-items:center;gap:9px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:11px 18px 11px 14px;box-shadow:0 10px 26px rgba(0,20,60,.16);text-decoration:none;font-weight:700;animation:pwidgetIn .5s ease .1s both;position:relative}
@keyframes pwidgetIn{from{opacity:0;transform:translateX(40px) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
.pwidget svg{width:20px;height:20px;stroke:var(--brand);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:520px){.pwidget{right:14px;bottom:14px}.pwidget a span{display:none}.pwidget a{padding:13px;border-radius:50%}}

.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:700px){.stats4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.stats4{grid-template-columns:1fr}}

/* ============================================================
   Sağ panel: acenta listesi + yerinde sohbet (yalnızca admin/ik)
   ============================================================ */
.roster{position:fixed;right:0;bottom:120px;z-index:90}
.roster-launch{background:linear-gradient(135deg,#0074f6,#0050c0);color:#fff;border:0;border-radius:12px 0 0 12px;padding:14px 12px;box-shadow:-4px 4px 18px rgba(0,20,60,.2);cursor:pointer;animation:rosterIn .5s ease .1s both;position:relative}
@keyframes rosterIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.roster-launch svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.badge-dot{position:absolute;top:-5px;left:-5px;background:#e11d48;color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 0 0 2px #fff}

/* Giriş sayfası özellik kartları için görsel ikon seçici */
.iconpick{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.iconpick-opt{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;cursor:pointer;background:var(--card)}
.iconpick-opt input{position:absolute;opacity:0;width:0;height:0}
.iconpick-opt svg{width:18px;height:18px;stroke:var(--mute);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.iconpick-opt.on{border-color:var(--brand);background:rgba(0,116,246,.1)}
.iconpick-opt.on svg{stroke:var(--brand)}
.roster-panel{display:none;position:fixed;right:0;top:0;bottom:0;height:100vh;width:320px;max-width:88vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-14px 0 40px rgba(0,20,60,.18);flex-direction:column;min-height:0}
.roster.open .roster-panel{display:flex}
.roster.open .roster-launch{display:none}
.roster-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);flex:none}
.roster-close{background:none;border:0;font-size:20px;color:var(--mute);cursor:pointer}
.roster-list{flex:1 1 auto;min-height:0;overflow-y:auto}
.roster-row{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--line)}
.roster-row:hover{background:rgba(0,116,246,.06)}
.roster-dot{width:9px;height:9px;border-radius:50%;background:#c8ced9;flex:none}
.roster-dot.on{background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.18)}
.roster-row-txt{min-width:0;flex:1}
.roster-row-txt b{display:block;font-size:14px}
.roster-unread{display:inline-block;background:#e11d48;color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.roster-row-txt span{display:block;font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-sec{padding:8px 16px 4px;font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--mute);text-transform:uppercase}
.roster-chat{position:absolute;inset:0;background:var(--card);display:flex;flex-direction:column}
.roster-chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.roster-chat-head b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-chat-x{background:none;border:0;font-size:20px;color:var(--mute);cursor:pointer;line-height:1;padding:0 2px}
.roster-chat-body{flex:1;overflow-y:auto;padding:10px 12px}
.roster-chat .chat-form{padding:10px 12px;border-top:1px solid var(--line)}
@media(max-width:520px){.roster-launch{padding:12px 10px}}