/* ========================================================================= NOC Panel — Canlı Destek widget'ı (assets/js/livechat.js ile birlikte) ------------------------------------------------------------------------- BAĞIMSIZ DOSYA: tokens.css'e bağlı DEĞİLDİR; tanıtım sitesinde (tema) ve panelde aynı görünür. Tüm değişkenler --lc-* önekiyle burada tanımlıdır. Marka rengi (--lc-primary, --lc-primary-dark, --lc-primary-rgb) JS tarafından live-chat-config'teki brand.primary ile üzerine yazılır; aşağıdaki :root değerleri yalnızca yedektir. Koyu görünüm: sayfa taşıyorsa ya da data-theme yokken işletim sistemi koyu tercih ediyorsa. data-theme="light" her zaman açık. Tema sayfaları açık zeminlidir ve data-theme taşımaz. ========================================================================= */ :root{ --lc-primary:#2f56d6; --lc-primary-dark:#2444ab; --lc-primary-rgb:47,86,214; } .lc-root{ /* Açık palet (varsayılan) */ --lc-bg:#ffffff; --lc-bg-2:#f4f6fb; --lc-text:#16202f; --lc-muted:#65718a; --lc-border:#e3e8f0; --lc-bubble:#eef1f7; --lc-input-bg:#ffffff; --lc-shadow:0 18px 48px rgba(15,23,42,.20), 0 2px 8px rgba(15,23,42,.08); --lc-online:#22c55e; --lc-offline:#9aa3b5; --lc-danger:#dc2626; --lc-radius:16px; --lc-z:2147483000; --lc-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Helvetica,Arial,sans-serif; font-family:var(--lc-font); font-size:14px; line-height:1.45; color:var(--lc-text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-align:left; } /* Koyu palet — sistem tercihi (data-theme belirtilmemişse) */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .lc-root{ --lc-bg:#151e2e; --lc-bg-2:#0f1626; --lc-text:#e8edf5; --lc-muted:#9aa8bd; --lc-border:#26334a; --lc-bubble:#1c2739; --lc-input-bg:#0e1725; --lc-shadow:0 18px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); --lc-offline:#6b7a90; } } /* Koyu palet — sayfa açıkça koyu/lacivert tema seçmişse (panel) */ :root[data-theme="dark"] .lc-root, :root[data-theme="navy"] .lc-root{ --lc-bg:#151e2e; --lc-bg-2:#0f1626; --lc-text:#e8edf5; --lc-muted:#9aa8bd; --lc-border:#26334a; --lc-bubble:#1c2739; --lc-input-bg:#0e1725; --lc-shadow:0 18px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); --lc-offline:#6b7a90; } :root[data-theme="navy"] .lc-root{ --lc-bg:#0f2743; --lc-bg-2:#0a1d34; --lc-border:#1e4470; --lc-bubble:#143254; --lc-input-bg:#0a1d34; --lc-muted:#92a7c6; } .lc-root *, .lc-root *::before, .lc-root *::after{ box-sizing:border-box; } .lc-root button{ font-family:inherit; } .lc-root img{ max-width:100%; } /* ------------------------------ Balon ------------------------------ */ .lc-bubble{ position:fixed; right:20px; bottom:20px; z-index:var(--lc-z); width:60px; height:60px; border-radius:50%; border:0; padding:0; margin:0; background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(var(--lc-primary-rgb),.45), 0 2px 6px rgba(0,0,0,.12); transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; -webkit-tap-highlight-color:transparent; } .lc-bubble:hover{ transform:scale(1.06); box-shadow:0 14px 34px rgba(var(--lc-primary-rgb),.5), 0 2px 6px rgba(0,0,0,.12); } .lc-bubble:focus-visible{ outline:0; box-shadow:0 0 0 4px rgba(var(--lc-primary-rgb),.35); } .lc-bubble svg{ width:28px; height:28px; display:block; } .lc-bubble .lc-ico-close{ display:none; } .lc-root.lc-open .lc-bubble .lc-ico-chat{ display:none; } .lc-root.lc-open .lc-bubble .lc-ico-close{ display:block; } /* Okunmamış rozeti */ .lc-badge{ position:absolute; top:-4px; right:-4px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--lc-danger); color:#fff; font-size:12px; font-weight:700; line-height:1; display:none; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.2); } .lc-badge.lc-show{ display:flex; animation:lc-pop .3s cubic-bezier(.2,.8,.2,1); } @keyframes lc-pop{ from{ transform:scale(.4); } to{ transform:scale(1); } } /* ------------------------------ Panel ------------------------------ */ .lc-panel{ position:fixed; right:20px; bottom:92px; z-index:var(--lc-z); width:372px; max-width:calc(100vw - 40px); height:560px; max-height:calc(100vh - 112px); display:flex; flex-direction:column; overflow:hidden; background:var(--lc-bg); color:var(--lc-text); border:1px solid var(--lc-border); border-radius:var(--lc-radius); box-shadow:var(--lc-shadow); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px) scale(.96); transform-origin:bottom right; transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } .lc-root.lc-open .lc-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1), visibility 0s; } /* Üst alan */ .lc-head{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:16px 14px 14px 16px; background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; } .lc-logo{ width:44px; height:44px; flex-shrink:0; border-radius:12px; padding:5px; background:rgba(255,255,255,.96); display:flex; align-items:center; justify-content:center; overflow:hidden; } .lc-logo img{ max-width:100%; max-height:100%; display:block; object-fit:contain; } /* Geniş logo (yazı-logo, en/boy > 1.8 — JS ölçer): kare kutuya sığmaz, kendi satırına alınır; başlık + durum ikinci satıra iner. */ .lc-head{ flex-wrap:wrap; } .lc-logo.lc-logo-wide{ width:auto; height:38px; max-width:160px; padding:6px 10px; order:0; } .lc-logo.lc-logo-wide img{ height:100%; width:auto; } .lc-head.lc-head-wide .lc-close{ order:1; margin-left:auto; } .lc-head.lc-head-wide .lc-head-text{ order:2; flex:1 1 100%; margin-top:8px; } .lc-logo-letter{ font-weight:800; font-size:20px; color:var(--lc-primary); line-height:1; } .lc-head-text{ flex:1; min-width:0; } .lc-title{ display:flex; align-items:center; gap:7px; font-weight:700; font-size:15.5px; letter-spacing:-.01em; line-height:1.3; } .lc-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--lc-offline); box-shadow:0 0 0 3px rgba(255,255,255,.25); } .lc-root.lc-online .lc-dot{ background:var(--lc-online); box-shadow:0 0 0 3px rgba(34,197,94,.3); } .lc-sub{ font-size:12px; opacity:.9; margin-top:2px; line-height:1.35; } .lc-close{ flex-shrink:0; width:32px; height:32px; border-radius:50%; border:0; padding:0; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; } .lc-close:hover{ background:rgba(255,255,255,.3); } .lc-close svg{ width:18px; height:18px; display:block; } /* Gövde */ .lc-body{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--lc-bg-2); } /* Ön form */ .lc-pre{ flex:1; min-height:0; overflow-y:auto; padding:20px 18px; } .lc-root.lc-chat .lc-pre{ display:none; } .lc-hint{ margin:0 0 14px; font-size:13.5px; color:var(--lc-muted); line-height:1.5; } .lc-field{ margin-bottom:10px; } .lc-input{ width:100%; padding:11px 14px; font:inherit; font-size:14px; color:var(--lc-text); background:var(--lc-input-bg); border:1px solid var(--lc-border); border-radius:10px; outline:0; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; } .lc-input::placeholder{ color:var(--lc-muted); opacity:.8; } .lc-input:focus{ border-color:var(--lc-primary); box-shadow:0 0 0 3px rgba(var(--lc-primary-rgb),.2); } .lc-btn{ width:100%; padding:12px 16px; border:0; border-radius:10px; cursor:pointer; background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; font:inherit; font-weight:700; font-size:14px; transition:filter .15s, transform .1s; } .lc-btn:hover{ filter:brightness(1.07); } .lc-btn:active{ transform:translateY(1px); } .lc-btn:disabled{ opacity:.6; cursor:default; transform:none; } .lc-btn-sm{ width:auto; padding:9px 16px; font-size:13px; } .lc-error{ display:none; margin:0 0 10px; font-size:12.5px; color:var(--lc-danger); line-height:1.4; } .lc-error.lc-show{ display:block; } /* Mesaj listesi */ .lc-msgs{ display:none; flex:1; min-height:0; overflow-y:auto; padding:16px 14px 6px; scroll-behavior:smooth; overscroll-behavior:contain; } .lc-root.lc-chat .lc-msgs{ display:block; } .lc-row{ display:flex; align-items:flex-end; gap:8px; margin-top:2px; } .lc-row.lc-gap{ margin-top:14px; } .lc-row.lc-visitor{ justify-content:flex-end; } .lc-avatar{ width:26px; height:26px; flex-shrink:0; border-radius:50%; visibility:hidden; background:var(--lc-primary); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } .lc-row.lc-last .lc-avatar{ visibility:visible; } .lc-col{ display:flex; flex-direction:column; max-width:80%; min-width:0; } .lc-visitor .lc-col{ align-items:flex-end; } .lc-msg{ padding:10px 14px; font-size:14px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; box-shadow:0 1px 2px rgba(0,0,0,.06); animation:lc-in .18s ease; } @keyframes lc-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } .lc-admin .lc-msg{ background:var(--lc-bubble); color:var(--lc-text); border-radius:16px 16px 16px 4px; } .lc-visitor .lc-msg{ background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; border-radius:16px 16px 4px 16px; } .lc-time{ display:none; font-size:10.5px; color:var(--lc-muted); margin:3px 6px 0; } .lc-row.lc-last .lc-time{ display:block; } .lc-img{ display:block; max-width:200px; max-height:220px; border-radius:10px; margin-top:6px; cursor:zoom-in; } .lc-msg:empty{ display:none; } /* Sistem bildirimi (çevrimdışı / kapalı sohbet / davet) */ .lc-sys{ margin:12px 8px 4px; padding:8px 12px; border-radius:10px; text-align:center; font-size:12px; color:var(--lc-muted); background:var(--lc-bubble); line-height:1.45; } /* "Yazıyor…" göstergesi */ .lc-typing .lc-msg{ padding:10px 14px 8px; } .lc-dots{ display:inline-flex; gap:4px; align-items:center; height:14px; } .lc-dots i{ width:7px; height:7px; border-radius:50%; background:var(--lc-muted); opacity:.35; animation:lc-blink 1.2s infinite; } .lc-dots i:nth-child(2){ animation-delay:.2s; } .lc-dots i:nth-child(3){ animation-delay:.4s; } @keyframes lc-blink{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-3px); } } /* Mini oyun (yanıt beklerken) */ .lc-game-prompt{ display:none; margin:8px 12px; padding:12px 14px; border-radius:12px; text-align:center; background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; } .lc-game-prompt.lc-show{ display:block; } .lc-game-title{ font-size:13px; font-weight:700; margin-bottom:3px; } .lc-game-text{ font-size:12px; opacity:.9; margin-bottom:10px; } .lc-game-btn{ background:#fff; color:var(--lc-primary); border:0; padding:7px 18px; border-radius:999px; font-weight:700; font-size:12.5px; cursor:pointer; } .lc-game{ display:none; margin:8px 12px; padding:8px; border-radius:12px; background:var(--lc-bg); border:1px solid var(--lc-border); } .lc-game.lc-show{ display:block; } .lc-game-bar{ display:flex; justify-content:space-between; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; color:var(--lc-muted); margin-bottom:4px; } .lc-canvas{ display:block; width:100%; height:auto; background:var(--lc-bg-2); color:var(--lc-text); border-radius:8px; touch-action:manipulation; } .lc-game-over{ display:none; text-align:center; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; color:var(--lc-muted); margin-top:4px; } .lc-game-over.lc-show{ display:block; } /* Kapatılmış sohbet */ .lc-closed{ display:none; flex-shrink:0; padding:12px 14px; text-align:center; background:var(--lc-bg); border-top:1px solid var(--lc-border); } .lc-closed.lc-show{ display:block; } .lc-closed p{ margin:0 0 10px; font-size:13px; color:var(--lc-muted); line-height:1.45; } /* Giriş alanı */ .lc-compose{ display:none; flex-shrink:0; padding:10px 12px 6px; background:var(--lc-bg); border-top:1px solid var(--lc-border); } .lc-root.lc-chat .lc-compose{ display:block; } .lc-root.lc-closed-chat .lc-compose{ display:none; } .lc-compose-row{ display:flex; align-items:center; gap:4px; background:var(--lc-input-bg); border:1px solid var(--lc-border); border-radius:999px; padding:4px 4px 4px 14px; transition:border-color .15s, box-shadow .15s; } .lc-compose-row:focus-within{ border-color:var(--lc-primary); box-shadow:0 0 0 3px rgba(var(--lc-primary-rgb),.18); } .lc-msg-input{ flex:1; min-width:0; padding:8px 0; border:0; background:transparent; font:inherit; font-size:14px; color:var(--lc-text); outline:0; } .lc-msg-input::placeholder{ color:var(--lc-muted); opacity:.8; } .lc-icon-btn{ width:36px; height:36px; flex-shrink:0; border:0; border-radius:50%; padding:0; background:transparent; color:var(--lc-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; } .lc-icon-btn:hover{ background:var(--lc-bubble); color:var(--lc-text); } .lc-icon-btn svg{ width:18px; height:18px; display:block; } .lc-send{ background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; } .lc-send:hover{ background:linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); color:#fff; filter:brightness(1.08); } .lc-send:disabled{ opacity:.6; cursor:default; filter:none; } .lc-file{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; opacity:0; overflow:hidden; clip:rect(0,0,0,0); pointer-events:none; } .lc-attach{ display:none; align-items:center; gap:6px; margin:6px 0 0 12px; font-size:11.5px; color:var(--lc-muted); } .lc-attach.lc-show{ display:flex; } .lc-attach span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px; } .lc-attach button{ border:0; background:transparent; color:var(--lc-muted); cursor:pointer; font-size:14px; line-height:1; padding:2px 4px; } .lc-attach button:hover{ color:var(--lc-danger); } /* Alt bilgi — kapatılamaz */ .lc-powered{ flex-shrink:0; text-align:center; padding:5px 10px 8px; font-size:11px; color:var(--lc-muted); background:var(--lc-bg); } .lc-powered a{ color:inherit; text-decoration:none; font-weight:600; letter-spacing:.01em; } .lc-powered a:hover{ color:var(--lc-primary); } /* ------------------------------ Mobil ------------------------------ */ @media (max-width:480px){ .lc-panel{ top:0; right:0; bottom:0; left:0; width:100%; max-width:100%; height:100%; max-height:100%; border:0; border-radius:0; transform:translateY(24px); transform-origin:bottom center; } .lc-root.lc-open .lc-bubble{ display:none; } .lc-head{ padding-top:max(16px, env(safe-area-inset-top)); } .lc-powered{ padding-bottom:max(8px, env(safe-area-inset-bottom)); } .lc-col{ max-width:86%; } } /* ------------------------------ Zorlanmış görünüm ------------------------------