:root{--bg:#0E1015;--bg2:#161920;--bg3:#1E222B;--ç:rgba(242,243,245,.1);--y:#F2F3F5;--y2:#A9AEB8;--y3:#7C828D;--lime:#C8F560;--mavi:#2B47E8;--yesil:#25D366;--kirmizi:#E5484D;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--y);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
svg{width:20px;height:20px}

/* giriş */
body.giris{display:grid;place-items:center;padding:24px;overflow:auto}
.giris-kutu{width:min(380px,100%);text-align:center}
.giris-kutu img{border-radius:18px}
.giris-kutu h1{margin:14px 0 4px;font-size:28px;letter-spacing:-.02em}
.giris-kutu>p{margin:0 0 24px;color:var(--y2)}
.giris-kutu form{display:flex;flex-direction:column;gap:14px;text-align:left}
.giris-kutu label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--y2)}
.giris-kutu input{height:50px;padding:0 14px;border-radius:12px;border:1px solid var(--ç);background:var(--bg2);font-size:16px}
.giris-kutu input:focus{outline:none;border-color:var(--lime)}
.giris-kutu button{height:52px;border:0;border-radius:12px;background:var(--lime);color:#0E1015;font-weight:700;margin-top:6px}
.hata{background:rgba(229,72,77,.12);color:#FF8A8D;padding:10px 12px;border-radius:10px;font-size:14px}

/* düzen: masaüstünde liste | sohbet, telefonda tek ekran */
.uyg{display:grid;grid-template-columns:minmax(300px,380px) 1fr;height:100dvh}
.liste-kol{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--ç);background:var(--bg)}
.sohbet-kol{display:flex;flex-direction:column;min-height:0;background:var(--bg2)}
.ust{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;border-bottom:1px solid var(--ç);min-height:62px}
.ust img{border-radius:9px}
.ust>b{font-size:18px;letter-spacing:-.01em;margin-right:auto}
.ikon-d{width:40px;height:40px;border-radius:12px;border:1px solid var(--ç);background:transparent;display:grid;place-items:center;flex:none;color:var(--y2);text-decoration:none}
.ikon-d:hover{color:var(--y);background:var(--bg3)}
.musait{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--ç);background:var(--bg2);font-size:13px;color:var(--y2)}
.musait i{width:9px;height:9px;border-radius:50%;background:var(--y3)}
.musait[aria-pressed="true"]{color:var(--y)}.musait[aria-pressed="true"] i{background:var(--yesil);box-shadow:0 0 0 4px rgba(37,211,102,.18)}
.bildirim-serit,.kur-serit{display:flex;align-items:center;gap:10px;margin:10px 12px 0;padding:10px 12px;border-radius:12px;background:rgba(200,245,96,.1);font-size:13.5px;color:var(--y)}
.kur-serit{background:rgba(43,71,232,.16)}
.bildirim-serit span,.kur-serit span{flex:1}
.bildirim-serit button,.kur-serit button{border:0;border-radius:9px;padding:8px 12px;background:var(--lime);color:#0E1015;font-weight:700;font-size:13px;white-space:nowrap}
.kur-serit button{background:var(--mavi);color:#fff}
.suzgec{display:flex;gap:6px;padding:12px 12px 6px}
.suzgec button{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--ç);background:transparent;color:var(--y2);font-size:13.5px}
.suzgec button[aria-pressed="true"]{background:var(--y);color:var(--bg);border-color:var(--y)}
.konusmalar{list-style:none;margin:0;padding:4px 8px 20px;overflow-y:auto;flex:1;overscroll-behavior:contain}
.kon{width:100%;text-align:left;display:flex;flex-direction:column;gap:3px;padding:12px;border:0;border-radius:14px;background:transparent;margin-bottom:2px}
.kon:hover{background:var(--bg2)}.kon.secili{background:var(--bg3)}
.kon-u{display:flex;justify-content:space-between;gap:10px}
.kon-u b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kon-u time{font-size:12px;color:var(--y3);flex:none}
.kon-a{display:flex;justify-content:space-between;align-items:center;gap:10px}
.kon-son{font-size:14px;color:var(--y2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kon.yeni .kon-u b,.kon.yeni .kon-son{color:var(--y)}
.rozet{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--lime);color:#0E1015;font:700 12px/22px var(--font);font-style:normal;text-align:center;flex:none}
.kon-site{font-size:12px;color:var(--y3)}.kon-site.cevrimici{color:var(--yesil)}
.kon.kapali{opacity:.55}
.bos{padding:30px 22px;color:var(--y3);text-align:center;font-size:14px}

.sohbet-bos{flex:1;display:grid;place-content:center;justify-items:center;gap:6px;color:var(--y3)}
.sohbet-bos img{border-radius:16px;opacity:.6}
.sohbet-ust .kim{flex:1;min-width:0}
.sohbet-ust .kim b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sohbet-ust .kim small{display:block;font-size:12.5px;color:var(--y3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ara{color:#05210f;background:var(--yesil);border-color:var(--yesil)}
.geri{display:none}
.mesajlar{flex:1;overflow-y:auto;padding:18px clamp(14px,3vw,40px);display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.msj{max-width:min(78%,640px);padding:10px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word;line-height:1.5}
.msj small{display:block;margin-top:3px;font-size:11px;opacity:.6;text-align:right}
.msj.ziyaretci{align-self:flex-start;background:var(--bg3);border-bottom-left-radius:4px}
.msj.operator{align-self:flex-end;background:var(--lime);color:#0E1015;border-bottom-right-radius:4px}
.msj.sistem{align-self:center;background:transparent;border:1px dashed var(--ç);color:var(--y2);font-size:13.5px;max-width:90%}
.hazir{display:flex;gap:8px;overflow-x:auto;padding:10px 12px;border-top:1px solid var(--ç);background:var(--bg)}
.hazir button{flex:none;max-width:280px;padding:9px 12px;border-radius:12px;border:1px solid var(--ç);background:var(--bg2);font-size:13.5px;text-align:left;line-height:1.4;white-space:normal}
.hazir button:hover{border-color:var(--lime)}
.yaz{display:flex;align-items:flex-end;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ç);background:var(--bg)}
.yaz textarea{flex:1;min-height:44px;max-height:140px;resize:none;padding:11px 14px;border-radius:14px;border:1px solid var(--ç);background:var(--bg2);font-size:16px;line-height:1.4}
.yaz textarea:focus{outline:none;border-color:var(--lime)}
.gonder{width:44px;height:44px;border:0;border-radius:14px;background:var(--lime);color:#0E1015;display:grid;place-items:center;flex:none}

/* ayarlar */
.ayar{width:min(680px,100vw);max-height:min(88vh,900px);padding:0;border:1px solid var(--ç);border-radius:20px;background:var(--bg2);color:var(--y)}
.ayar::backdrop{background:rgba(0,0,0,.6)}
.ayar-ust{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--ç);z-index:1}
.ayar-ust b{font-size:18px}
.ayar-govde{padding:6px 18px 22px;display:flex;flex-direction:column;gap:6px}
.ayar h2{font-size:15px;margin:18px 0 8px;color:var(--lime)}
.ayar label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--y2);margin-bottom:10px}
.ayar input,.ayar textarea{padding:10px 12px;border-radius:10px;border:1px solid var(--ç);background:var(--bg);font-size:15px}
.ayar input:focus,.ayar textarea:focus{outline:none;border-color:var(--lime)}
.ayar .renk{flex-direction:row;align-items:center;gap:10px}.ayar input[type=color]{width:46px;height:36px;padding:2px}
.not{margin:0 0 8px;font-size:13px;color:var(--y3)}
.satir{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.d{height:42px;padding:0 16px;border-radius:11px;border:0;background:var(--lime);color:#0E1015;font-weight:700;font-size:14px}
.d.hayalet{background:transparent;border:1px solid var(--ç);color:var(--y)}
.site{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:12px;background:var(--bg);margin-bottom:10px}
.site small{color:var(--y3);word-break:break-all}
.kod{display:block;padding:10px;border-radius:9px;background:#07080b;color:var(--lime);font:12px/1.5 ui-monospace,Consolas,monospace;word-break:break-all}
.site .d{align-self:flex-start;height:36px}
.yeni-site summary{cursor:pointer;color:var(--y);margin:8px 0 12px}
code{font-family:ui-monospace,Consolas,monospace}

@media (max-width:820px){
  .uyg{grid-template-columns:1fr}
  .sohbet-kol{display:none}
  body.sohbette .liste-kol{display:none}
  body.sohbette .sohbet-kol{display:flex}
  .geri{display:grid}
  .sohbet-bos{display:none}
  .ayar{max-height:100dvh;height:100dvh;border-radius:0;margin:0;max-width:100vw}
}

.giris-kutu label.hatirla{flex-direction:row;align-items:center;gap:10px;font-size:14px;color:var(--y1,inherit)}
.giris-kutu label.hatirla input{width:20px;height:20px;padding:0;accent-color:var(--lime)}
.giris-kutu label.hatirla small{color:var(--y2);font-size:12px}