:root{--p:#6366f1;--pd:#4f46e5;--pl:#818cf8;--sb:260px;--hh:56px;--bg:#f8fafc;--bg2:#fff;--bg3:#f1f5f9;--tx:#0f172a;--tx2:#475569;--tx3:#94a3b8;--bdr:#e2e8f0;--bdr2:#f1f5f9;--card:#fff;--hover:#f8fafc;--inp:#f8fafc;--inpf:#fff;--shd:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);--shd-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);--radius:12px;--radius-sm:8px;--radius-xs:6px;--transition:all .2s cubic-bezier(.4,0,.2,1)}
[data-theme="dark"]{--bg:#0c0a1d;--bg2:#161432;--bg3:#1e1b4b;--tx:#e2e8f0;--tx2:#94a3b8;--tx3:#64748b;--bdr:#2e2b5e;--bdr2:#1e1b4b;--card:#161432;--hover:#1e1b4b;--inp:#1e1b4b;--inpf:#2e2b5e;--shd:0 1px 3px rgba(0,0,0,.2);--shd-md:0 4px 6px rgba(0,0,0,.25)}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x KASITEN html'de: body'de olursa (spec: bir eksen hidden → diğeri auto) body scroll-konteyneri
   olur; iOS standalone PWA'da doküman scroll yüksekliği yanlış hesaplanıp SAYFANIN ALTI KESİLİR
   (son kartlara erişilemez, overscroll'da görünüp geri kayar). Yatay taşma yine gizlenir. */
html{overflow-x:hidden}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tx);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Widget grid — dashboard & user panel */
.wg-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.wg-item.wg-full{grid-column:span 12}
.wg-item.wg-large{grid-column:span 8}
.wg-item.wg-small{grid-column:span 4}
.wg-item.wg-half{grid-column:span 6}
@media (max-width:991px){.wg-item.wg-large,.wg-item.wg-small,.wg-item.wg-half{grid-column:span 12}}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--tx3)}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sb);background:linear-gradient(180deg,var(--sb-top,#1e1b4b) 0%,var(--sb-mid,#312e81) 50%,var(--sb-bot,#3730a3) 100%);color:#fff;z-index:1001;display:flex;flex-direction:column;transition:width .25s cubic-bezier(.4,0,.2,1),transform .3s;border-right:1px solid rgba(255,255,255,.06)}
.sb-mini .sidebar{width:68px}.sb-mini .main{margin-left:68px}
.sb-mini .sb-brand h5,.sb-mini .sb-brand-sub,.sb-mini .sb-brand>div{display:none}.sb-mini .sb-brand{justify-content:center;padding:16px 10px}
.sb-mini .sb-nav a span,.sb-mini .sb-nav a .badge,.sb-mini .sb-sec{display:none}.sb-mini .sb-nav a{justify-content:center;padding:10px}.sb-mini .sb-nav a i{font-size:20px;width:auto;margin:0}
.sb-mini .sb-profile-info>div:last-child,.sb-mini .sb-profile .sb-act-btn span,.sb-mini .sb-role-badge{display:none}.sb-mini .sb-profile-info{justify-content:center}.sb-mini .sb-profile .d-flex{flex-wrap:wrap;justify-content:center;gap:4px!important}.sb-mini .sb-act-btn{padding:7px;min-width:36px}
.sb-mini .sb-nav a[title]{position:relative}.sb-mini .sb-nav a:hover::after{content:attr(data-tip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#1e293b;color:#fff;padding:4px 10px;border-radius:6px;font-size:12px;white-space:nowrap;z-index:1002;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.sb-toggle-btn{position:absolute;right:-17px;top:16px;width:34px;height:34px;border-radius:50%;background:var(--bg2);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1002;color:var(--tx2);font-size:16px;transition:var(--transition);box-shadow:var(--shd)}.sb-toggle-btn:hover{background:var(--p);color:#fff;border-color:var(--p)}
.sb-brand{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08)}.sb-brand h5{margin:0;font-size:16px;font-weight:800;letter-spacing:-.3px}.sb-brand-sub{font-size:11px;color:rgba(255,255,255,.4)}
.sb-search-wrap{padding:6px 12px 8px}
.sb-search-box{position:relative;display:flex;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;transition:all .25s ease;overflow:hidden}
.sb-search-box:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.18)}
.sb-search-box:focus-within{background:rgba(255,255,255,.12);border-color:rgba(99,102,241,.55);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.sb-search-box .sb-s-icon{position:absolute;left:10px;font-size:13px;color:rgba(255,255,255,.3);pointer-events:none;transition:color .2s}
.sb-search-box:focus-within .sb-s-icon{color:rgba(129,140,248,.8)}
.sb-search-inp{width:100%;background:transparent;border:none;padding:7px 32px 7px 32px;font-size:12.5px;color:rgba(255,255,255,.85);outline:none;font-weight:500;letter-spacing:.2px}
.sb-search-inp::placeholder{color:rgba(255,255,255,.28);font-weight:400}
.sb-search-clear{position:absolute;right:6px;background:none;border:none;color:rgba(255,255,255,.3);font-size:14px;cursor:pointer;padding:2px 4px;border-radius:4px;display:none;transition:color .15s}
.sb-search-clear:hover{color:rgba(255,255,255,.7);background:rgba(255,255,255,.1)}
.sb-search-box.has-val .sb-search-clear{display:block}
.sb-search-kbd{position:absolute;right:8px;font-size:9px;color:rgba(255,255,255,.2);pointer-events:none;font-family:system-ui;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:3px;border:1px solid rgba(255,255,255,.08)}
.sb-search-box.has-val .sb-search-kbd{display:none}
.sb-mini .sb-search-wrap{display:none}
.sb-nav{flex:1;padding:8px 10px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.sb-nav:hover{scrollbar-color:rgba(255,255,255,.3) transparent}
.sb-nav::-webkit-scrollbar{width:5px}.sb-nav::-webkit-scrollbar-track{background:transparent}.sb-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:10px}.sb-nav:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}.sb-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)}.sb-sec{color:rgba(255,255,255,.55);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;padding:16px 12px 6px;font-weight:700}
.sb-grp+.sb-grp{margin-top:2px}.sb-grp-hdr{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;padding:14px 12px 6px}.sb-grp-hdr .chv{transition:transform .2s;font-size:.6rem;opacity:.4}.sb-grp.collapsed .sb-grp-body{display:none}.sb-grp.collapsed .chv{transform:rotate(-90deg)}.sb-mini .sb-grp-hdr{display:none}.sb-mini .sb-grp.collapsed .sb-grp-body{display:block}
.sb-nav a{color:rgba(255,255,255,.85);border-radius:var(--radius-sm);padding:9px 12px;display:flex;align-items:center;gap:10px;font-size:13.5px;text-decoration:none;cursor:pointer;margin-bottom:2px;font-weight:500;transition:var(--transition)}
.sb-nav a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.sb-nav a.active{background:rgba(99,102,241,.25);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 #818cf8}.sb-nav a i{font-size:17px;width:20px;text-align:center;opacity:.9}.sb-nav a.active i{opacity:1}
.sb-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.08);flex-direction:column;gap:8px;display:flex}
.sb-foot .av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--p,#6366f1),var(--pl,#818cf8))}
.sb-act-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:7px 0;border-radius:var(--radius-xs);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);cursor:pointer;font-size:15px;transition:var(--transition)}.sb-act-btn:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);transform:translateY(-1px)}
.main{margin-left:var(--sb);min-height:100vh;min-height:100dvh;transition:margin .3s}
.top-bar{height:var(--hh);background:var(--bg2);border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:100;overflow:visible;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.pg{padding:20px}
.card-s{background:var(--card);border-radius:var(--radius);padding:20px;border:1px solid var(--bdr);box-shadow:var(--shd);transition:var(--transition)}.card-s:hover{box-shadow:var(--shd-md)}
.dt{background:var(--card);border-radius:var(--radius);border:1px solid var(--bdr);overflow-x:auto;overflow-y:auto;max-height:calc(100vh - var(--dt-off,188px));box-shadow:var(--shd)}
/* Çalışma şeridi açıkken üstte ~44px daha kroma var; tablonun boyu buna göre kısalmalı,
   yoksa sayfalama çubuğu ekranın altına taşıyor (şerit eklendiğinde olan buydu). */
body.ws-on{--dt-off:234px}
/* Mobilde serit hic cizilmiyor (#wstrip display:none) ama body.ws-on yine ekleniyor;
   tablonun bosuna kisalmamasi icin varsayilana don. */
@media (max-width:768px){ body.ws-on{--dt-off:188px} }.dt table{margin:0;white-space:nowrap}
.dt th{background:var(--bg3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);border-bottom:1px solid var(--bdr);padding:12px 14px;cursor:pointer;user-select:none;position:sticky;top:0;z-index:1}
.dt th:hover{color:var(--p)}.dt th.sorted{color:var(--p)}
.col-resize{position:absolute;right:0;top:0;bottom:0;width:4px;cursor:col-resize;background:transparent;z-index:2;transition:background .15s}.col-resize:hover,.col-resize.active{background:var(--p)}
.dt td{padding:12px 14px;font-size:13.5px;border-bottom:1px solid var(--bdr2);vertical-align:middle;color:var(--tx)}.dt tr:hover td{background:var(--hover)}.dt tr{cursor:pointer;transition:var(--transition)}.dt tr:last-child td{border-bottom:none}
.bs{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;gap:4px}
.s0{background:#eef2ff;color:#4f46e5}.s1{background:#fef3c7;color:#92400e}.s2{background:#e0e7ff;color:#3730a3}.s3{background:#fce7f3;color:#9d174d}.s4{background:#fae8ff;color:#86198f}.s5{background:#d1fae5;color:#065f46}.s6{background:#f1f5f9;color:#64748b}
.p0{color:#22c55e}.p1{color:#3b82f6}.p2{color:#f59e0b}.p3{color:#ef4444}.p4{color:#dc2626;font-weight:700}
/* Öncelik rozeti: Düşük/Normal SESSİZ (dolgu yok, tema-değişkeni metin → dark modda da okunur),
   Yüksek/Acil/Kritik ÖNE ÇIKAR (dolgulu). Liste satırında ikon+metin birlikte basılır; eskiden
   yalnız ikon vardı ve Normal'in bi-dash ikonu ekranda "-" gibi görünüp kolonu soluk yapıyordu. */
.pri-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.pri-0{background:transparent;color:var(--tx3)}
.pri-1{background:transparent;color:var(--tx2)}
.pri-2{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.pri-3{background:#ef4444;color:#fff}
.pri-4{background:#b91c1c;color:#fff;box-shadow:0 0 0 2px rgba(254,202,202,.7)}
@keyframes priBlink{0%,100%{opacity:1}50%{opacity:.7}}
/* Talep detay sağ paneli bölüm başlıkları (details/summary ile katlanır gruplar). */
.tp-sec{border-bottom:1px solid var(--bdr2)}.tp-sec:last-of-type{border-bottom:none}
.tp-sec>summary{list-style:none;cursor:pointer;padding:9px 2px;font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--tx3);display:flex;align-items:center;gap:6px;user-select:none}
.tp-sec>summary::-webkit-details-marker{display:none}
.tp-sec>summary::before{content:'\F229';font-family:'bootstrap-icons';font-size:11px;transition:transform .15s;color:var(--tx3)}
.tp-sec[open]>summary::before{transform:rotate(90deg)}
.tp-sec>summary:hover{color:var(--p)}
.tp-sec-body{padding:2px 0 10px}
.tp-sec-danger>summary{color:#b91c1c}.tp-sec-danger>summary::before{color:#b91c1c}
/* Hızlı filtre çipi canlı sayaç rozeti */
.qf-n{display:inline-block;min-width:15px;text-align:center;padding:0 5px;border-radius:9px;font-size:10px;font-weight:800;line-height:16px;vertical-align:baseline}
/* Müşteri 360 — ilgili talepler mini-listesi (talep detay sağ paneli) */
.rel-tk-list{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.rel-tk{display:flex;flex-direction:column;gap:2px;padding:6px 8px;border:1px solid var(--bdr2);border-radius:7px;text-decoration:none;color:var(--tx);transition:var(--transition)}
.rel-tk:hover{background:var(--hover);border-color:var(--p)}
.rel-tk-subj{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rel-tk-meta{font-size:10px;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp{background:var(--card);border-radius:var(--radius);border:1px solid var(--bdr);overflow:hidden;box-shadow:var(--shd)}.tp-h{padding:14px 20px;border-bottom:1px solid var(--bdr);background:var(--bg3)}.tp-b{padding:20px;overflow:hidden;overflow-x:auto;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}.tp-b table{max-width:100%!important;width:auto!important;border-collapse:collapse;font-size:14px}.tp-b td,.tp-b th{max-width:250px;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.tp-b img{max-width:100%!important;height:auto!important}.tp-b *{max-width:100%!important;box-sizing:border-box}.tp-b p,.tp-b div,.tp-b span{overflow-wrap:break-word;word-wrap:break-word}.new-ticket-alert{position:fixed;top:16px;right:16px;z-index:99999;background:var(--card);border:1px solid #c7d2fe;border-left:4px solid #6366f1;border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shd-md);display:flex;align-items:center;gap:12px;animation:slideInRight .3s ease;cursor:pointer;max-width:400px}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.ntf-pulse{animation:ntfPulse .5s ease 3}@keyframes ntfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}.kb-card{transition:box-shadow .15s;overflow:hidden}.kb-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}.kb-folder{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;color:var(--tx);transition:.15s;user-select:none}.kb-folder:hover{background:var(--hover)}.kb-folder.active{background:#eef2ff;color:#4f46e5;font-weight:700}.kb-folder.drag-over{background:#dbeafe;border:1px dashed #3b82f6;border-radius:6px}.kb-folder-count{font-size:11px;color:#9ca3af;margin-left:auto;background:var(--bg);border-radius:10px;padding:0 6px;min-width:20px;text-align:center}.kb-preview{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.kb-full{overflow:hidden;overflow-x:auto}.kb-full .cm-body{max-height:300px;overflow-y:auto}.srch-dd{position:absolute;z-index:9999;width:100%;max-height:180px;overflow-y:auto;background:var(--card);border:1px solid var(--bdr);border-radius:6px;box-shadow:0 4px 12px var(--shd);margin-top:2px}.srch-dd-item{display:block;padding:5px 10px;font-size:13px;color:var(--tx);text-decoration:none;border-bottom:1px solid var(--bdr2)}.srch-dd-item:hover{background:var(--hover);color:#1d4ed8}.srch-dd-item:last-child{border-bottom:none}.ticket-body{overflow-x:auto;overflow-y:hidden;max-width:100%;position:relative;isolation:isolate}.body-iframe{width:100%;border:none;overflow:hidden;min-height:40px;display:block}
.cm{padding:16px;border-radius:var(--radius);margin-bottom:10px;font-size:14px;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word;isolation:isolate;border:1px solid transparent;transition:var(--transition);position:relative}.cm:hover{box-shadow:var(--shd)}.cm-a{background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-left:4px solid var(--p);border-color:#c7d2fe}.cm-c{background:var(--bg3);border-left:4px solid #cbd5e1;border-color:var(--bdr)}.cm-i{background:linear-gradient(135deg,#fefce8,#fef9c3);border-left:4px solid #eab308;border-color:#fde68a}
.tl-wrap{position:relative;padding-left:28px}.tl-wrap::before{content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;background:var(--bdr)}
/* Gövde/e-posta içeriği Shadow DOM'lu div (iframe DEĞİL) — iOS iframe içeriğe göre büyümüyordu.
   Div içeriğe göre doğal büyür (mobil = masaüstü, tam genişleme). Kırpma olmasın diye overflow:visible. */
.body-iframe{display:block;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;min-height:0;max-width:100%}
.tl-item{position:relative;margin-bottom:16px}.tl-item::before{content:'';position:absolute;left:-21px;top:18px;width:12px;height:12px;border-radius:50%;border:2px solid var(--p);background:var(--bg2);z-index:1}
.tl-item.tl-agent::before{border-color:var(--p);background:var(--p)}.tl-item.tl-cust::before{border-color:#94a3b8;background:#94a3b8}.tl-item.tl-int::before{border-color:#eab308;background:#eab308}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#f0f2f5;position:relative;overflow:hidden}
.login-page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.05),transparent 50%)}
.login-particles{position:absolute;inset:0;overflow:hidden}
.lp-dot{position:absolute;border-radius:50%;background:rgba(99,102,241,.18);animation:lpFloat linear infinite;opacity:0}
.lp-dot:nth-child(odd){background:rgba(139,92,246,.14)}
.lp-dot:nth-child(3n){background:rgba(59,130,246,.12)}
@keyframes lpFloat{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateY(-110vh) translateX(30px);opacity:0}}

/* ============================================================
 * Login bg animasyonları (CSS-only) — _initParticles tarafından
 * type'a göre child div oluşturulup ilgili .lp-* class verilir.
 * Container .login-page'e bazıları .lp-bg-* class ekler (wave/stars/conic için).
 * ============================================================ */

/* === Mesh Blobs === */
.lp-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen;animation:lp-blob-drift linear infinite;will-change:transform}
@keyframes lp-blob-drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.15)}66%{transform:translate(-50px,30px) scale(.9)}100%{transform:translate(0,0) scale(1)}}

/* === Gradient Wave / Aurora === */
.login-page.lp-bg-wave{background:linear-gradient(125deg,#0c4a6e,#1e1b4b,#4c1d95,#831843,#1e3a8a,#0c4a6e);background-size:300% 300%;animation:lp-wave 25s ease infinite}
.login-page.lp-bg-wave::before{display:none}
@keyframes lp-wave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* === Twinkling Stars === */
.login-page.lp-bg-stars{background:radial-gradient(ellipse at top,#1e1b4b 0%,#020617 70%)}
.login-page.lp-bg-stars::before{display:none}
.lp-star{position:absolute;background:#fff;border-radius:50%;animation:lp-twinkle ease-in-out infinite;box-shadow:0 0 3px #fff}
@keyframes lp-twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.1)}}

/* === Bokeh === */
.lp-bokeh{position:absolute;border-radius:50%;filter:blur(18px);opacity:.55;animation:lp-bokeh-float linear infinite;will-change:transform}
@keyframes lp-bokeh-float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(-115vh) translateX(40px);opacity:0}}

/* === Falling Snow === */
.lp-snow{position:absolute;background:#fff;border-radius:50%;opacity:.75;animation:lp-snow-fall linear infinite;box-shadow:0 0 4px rgba(255,255,255,.6)}
@keyframes lp-snow-fall{0%{transform:translateY(-10vh) translateX(0) rotate(0)}100%{transform:translateY(115vh) translateX(60px) rotate(360deg)}}

/* === Conic Rotation === */
.login-page.lp-bg-conic{background:conic-gradient(from 0deg at 50% 50%,#1e1b4b,#4c1d95,#831843,#1e3a8a,#0c4a6e,#1e1b4b);animation:lp-conic-rot 60s linear infinite;background-attachment:fixed}
.login-page.lp-bg-conic::before{display:none}
@keyframes lp-conic-rot{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}

/* === Confetti === */
.lp-confetti{position:absolute;width:8px;height:14px;border-radius:1px;animation:lp-confetti-fall linear infinite;will-change:transform}
@keyframes lp-confetti-fall{0%{transform:translateY(-20vh) rotate(0)}100%{transform:translateY(115vh) rotate(720deg)}}

/* === Geometric Shapes === */
.lp-geo{position:absolute;border:2px solid rgba(99,102,241,.22);animation:lp-geo-rot linear infinite;will-change:transform}
@keyframes lp-geo-rot{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.login-card{background:#fff;border-radius:20px;padding:36px 40px 40px;width:420px;position:relative;z-index:1;border:1px solid #e2e8f0;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.login-logo-area{text-align:center;margin-bottom:28px}
.login-logo-area i{font-size:56px;color:var(--p,#6366f1);display:block;margin-bottom:10px}
.login-logo-area img{height:56px;margin-bottom:10px}
.login-logo-area .login-app-name{font-size:20px;font-weight:800;color:#1e1b4b;letter-spacing:-.3px}
.login-logo-area .login-app-sub{color:#94a3b8;font-size:14px;margin-top:4px}
.login-fl{position:relative;margin-bottom:16px}
.login-fl input{width:100%;padding:18px 14px 8px;border:2px solid #e2e8f0;border-radius:12px;font-size:14px;font-family:inherit;outline:none;transition:all .2s;background:#fff;color:#0f172a}
.login-fl label{position:absolute;top:14px;left:14px;font-size:14px;color:#94a3b8;pointer-events:none;transition:all .2s}
.login-fl input:focus{border-color:var(--p,#6366f1);box-shadow:0 0 0 4px rgba(99,102,241,.08)}
.login-fl input:focus~label,.login-fl input:not(:placeholder-shown)~label{top:4px;font-size:10px;color:var(--p,#6366f1);font-weight:700}
.login-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--p,#6366f1),var(--pd,#4f46e5));color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(99,102,241,.25);font-family:inherit}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,.35)}
.login-check{display:flex;align-items:center;gap:6px;color:#94a3b8;font-size:13px;cursor:pointer}
.login-check input{accent-color:var(--p,#6366f1)}
.login-forgot{color:var(--p,#6366f1);font-size:13px;text-decoration:none;font-weight:600;transition:color .2s}.login-forgot:hover{color:#4f46e5}
@media(max-width:900px){.login-card{width:calc(100% - 32px);max-width:440px;padding:32px 24px}}
.fade-in{animation:fi .25s cubic-bezier(.4,0,.2,1)}@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.kb-board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;min-height:400px}
.kb-col{min-width:260px;max-width:300px;flex:1;background:var(--bg);border-radius:var(--radius);padding:10px;border:1px solid var(--bdr)}
.kb-col-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:6px 8px;margin-bottom:8px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:space-between}
.kb-col-count{font-size:11px;font-weight:700;background:rgba(0,0,0,.08);padding:1px 8px;border-radius:10px}
.kb-col-body{min-height:60px}
.kb-card-item{background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:var(--transition);font-size:13px}
.kb-card-item:hover{box-shadow:var(--shd-md);transform:translateY(-1px)}
.kb-card-item.dragging{opacity:.5;transform:rotate(2deg)}
.kb-col.drag-over{background:color-mix(in srgb,var(--p) 6%,var(--bg));border-color:var(--p)}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg3) 25%,var(--bdr2) 50%,var(--bg3) 75%);background-size:800px 100%;animation:shimmer 1.5s infinite linear}
.skel-line{height:14px;margin-bottom:10px;border-radius:6px}.skel-line.w60{width:60%}.skel-line.w80{width:80%}.skel-line.w40{width:40%}.skel-line.w50{width:50%}
.skel-circle{border-radius:50%}.skel-card{height:80px;border-radius:var(--radius)}
.skel-row{display:flex;gap:12px;margin-bottom:12px}.skel-row .skel{flex:1}
.dt tbody tr:nth-child(even) td{background:var(--bg)}
.dt tbody tr:hover td{background:color-mix(in srgb,var(--p) 5%,var(--bg2))!important}
.dt tbody tr:active td{background:color-mix(in srgb,var(--p) 10%,var(--bg2))!important}
.btn-loading{pointer-events:none;opacity:.85;position:relative}.btn-loading .btn-text{visibility:hidden}.btn-loading .btn-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.btn-spin{display:none}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.anim-slide-up{animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.anim-scale-in{animation:scaleIn .2s cubic-bezier(.4,0,.2,1)}
.empty-state{text-align:center;padding:48px 20px}.empty-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:32px}
.welcome-card{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 8%,var(--bg2)),color-mix(in srgb,var(--pl) 6%,var(--bg2)));border:1px solid color-mix(in srgb,var(--p) 15%,var(--bdr));border-radius:var(--radius);padding:24px 28px;margin-bottom:20px;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden}
.welcome-card::before{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:color-mix(in srgb,var(--p) 8%,transparent)}
.welcome-card::after{content:'';position:absolute;right:40px;bottom:-40px;width:80px;height:80px;border-radius:50%;background:color-mix(in srgb,var(--pl) 6%,transparent)}
.pulse-dot{width:8px;height:8px;border-radius:50%;display:inline-block;animation:pulseDot 2s infinite}@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes ntf-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(239,68,68,.6)}50%{transform:scale(1.15);box-shadow:0 0 0 6px rgba(239,68,68,0)}}
/* .breadcrumb-bar kuralları KALDIRILDI (2026-08-14) — breadcrumb çubuğu tamamen kalktı. */
.af-feed{max-height:320px;overflow-y:auto}.af-feed-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--bdr2);font-size:13px}.af-feed-item:last-child{border-bottom:none}.af-feed-icon{width:32px;height:32px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.ntf-group-title{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;padding:8px 12px;background:var(--bg)}
.ntf-item{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bdr2);cursor:pointer;transition:var(--transition)}.ntf-item:hover{background:var(--hover)}.ntf-item.unread{background:color-mix(in srgb,var(--p) 4%,var(--bg2))}
.ntf-dot{width:8px;height:8px;border-radius:50%;background:var(--p);flex-shrink:0;margin-top:5px}
.ntf-icon{width:32px;height:32px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.sb-profile{padding:14px;border-top:1px solid rgba(255,255,255,.08)}.sb-profile-info{display:flex;align-items:center;gap:10px;margin-bottom:10px}.sb-profile-info .av{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}.sb-online{width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid rgba(30,27,75,.8);position:absolute;bottom:-1px;right:-1px}.sb-role-badge{font-size:10px;padding:2px 8px;border-radius:10px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.7);font-weight:600;display:inline-block}
.ql-editor{min-height:140px;font-family:inherit;font-size:14px}.ql-toolbar{border-radius:var(--radius-sm) var(--radius-sm) 0 0;padding:4px!important}.ql-container{border-radius:0 0 var(--radius-sm) var(--radius-sm)}#kbe{display:flex;flex-direction:column}#kbe .ql-toolbar{flex-shrink:0}#kbe .ql-container{flex:1;min-height:0;overflow-y:auto}
.si{border:1px solid var(--bdr);border-radius:var(--radius);padding:8px 12px 8px 36px;font-size:13px;width:280px;background:var(--inp);color:var(--tx);transition:var(--transition)}.si:focus{outline:none;border-color:var(--p);background:var(--inpf);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.sw{position:relative}.sw>i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:15px}
/* Mobil arama: kutu yerine büyüteç. Buton ve kapatma X'i yalnız dar ekranda var;
   masaüstünde kutu bugünkü gibi durur, bu iki öğe hiç görünmez. */
#tbShortcuts:empty{display:none!important}
.tb-search-btn{display:none;color:var(--tx2);font-size:18px;line-height:1}
.tb-search-x{display:none}
@media(max-width:768px){
  /* .top-bar position:sticky — o zaten konumlanmis sayilir ve absolute cocuklara
     kapsayici olur; position:relative YAZILMAZ, sticky'yi ezerdi (cubuk kayarken
     yukarida kalmaz olurdu). */
  .tb-search-btn{display:inline-flex;align-items:center}
  .top-bar .sw{display:none}
  /* Açık durum: kutu çubuğun üstüne TAM genişlik biner — dar ekranda yarım kutu
     yerine gerçek bir arama satırı. gsDrop (left:0;top:100%) altında açılır. */
  /* ⚠ width:auto ZORUNLU. Ayni media blogunda (asagida) genel bir .sw{width:100%} var ve
     dosyada DAHA SONRA geldigi icin width'i o kazaniyor; width belirlenince left+right
     ikilisi yok sayilir ve kutu cubuk genisligi kadar olup saga 8px tasiyordu. */
  .top-bar.search-open .sw{display:block;position:absolute;left:8px;right:8px;width:auto;top:6px;bottom:6px;z-index:60}
  .top-bar.search-open .si{width:100%;height:100%;padding-right:38px;background:var(--card);box-shadow:var(--shd-md)}
  .top-bar.search-open .tb-search-x{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:2px;top:50%;transform:translateY(-50%);width:34px;height:34px;color:var(--tx2);z-index:61}
}
.btn-p{background:linear-gradient(135deg,var(--p,#6366f1),var(--pd,#4f46e5));border:none;color:#fff;font-weight:600;font-size:13px;padding:8px 16px;border-radius:var(--radius-sm);transition:var(--transition);box-shadow:0 1px 3px rgba(79,70,229,.3)}.btn-p:hover{background:linear-gradient(135deg,var(--pd,#4f46e5),var(--pd,#4338ca));color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(79,70,229,.35)}
.eb{width:26px;height:26px;border-radius:var(--radius-xs);border:1px solid var(--bdr);display:inline-flex;align-items:center;justify-content:center;background:var(--card);cursor:pointer;color:var(--tx2);font-size:13px;transition:var(--transition)}.eb:hover{background:var(--hover);color:var(--p);border-color:var(--p)}
.prop-disabled select,.prop-disabled input{pointer-events:none;opacity:.5;background:#f3f4f6}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(90px,1fr);gap:1px;background:var(--bdr);border-radius:var(--radius);overflow:hidden;height:calc(100dvh - 160px);min-height:480px}
.cal-hdr{background:var(--bg3);padding:6px;text-align:center;font-size:12px;font-weight:700;color:var(--tx2)}
.cal-day{background:var(--card);min-height:70px;padding:4px;font-size:12px;min-width:0;overflow:hidden}.cal-day.other{background:var(--bg);color:var(--tx3)}.cal-day.today{background:linear-gradient(135deg,#eef2ff,#e0e7ff);box-shadow:inset 0 0 0 2px var(--p);position:relative}.cal-day.today .dn{background:var(--p);color:#fff;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px}
.cal-day .dn{font-weight:700;margin-bottom:2px}.cal-ev{padding:2px 4px;border-radius:4px;margin-bottom:1px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;display:block;max-width:100%}
.cal-day.overlap{box-shadow:inset 3px 0 0 #f59e0b}.cal-day.today.overlap{box-shadow:inset 0 0 0 2px var(--p),inset 4px 0 0 #f59e0b}.cal-overlap{color:#f59e0b;font-size:10px;margin-left:4px;cursor:help}.cal-more{font-size:10px;color:var(--p);cursor:pointer;font-weight:600;padding:1px 4px;border-radius:3px}.cal-more:hover{background:#eef2ff}.cal-day.week-view{min-height:200px}.cal-day-list{background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);padding:12px;margin-bottom:6px;cursor:pointer;transition:var(--transition)}.cal-day-list:hover{box-shadow:var(--shd-md)}
/* ===== Company modal redesign ===== */
.co-hero{display:flex;align-items:center;gap:14px;padding:12px 14px;background:linear-gradient(135deg,var(--bg3),var(--card));border:1px solid var(--bdr);border-radius:var(--radius);margin-bottom:12px}
.co-hero .logo-w{flex-shrink:0;position:relative}
.co-hero .logo-w img,.co-hero .logo-w .ph{width:60px;height:60px;border-radius:12px;object-fit:contain;background:var(--card);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:26px}
.co-hero .logo-w .ph{background:linear-gradient(135deg,#4f46e5,#7c3aed)}
.co-hero .info{flex:1;min-width:0}
.co-hero .name{font-size:16px;font-weight:700;margin:0;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co-hero .name .id{font-size:11px;color:var(--tx3);font-weight:400}
.co-hero .meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px}
.co-tabs{margin-bottom:10px;font-size:13px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.co-tabs .nav-link{padding:6px 12px;color:var(--tx2);border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent}
.co-tabs .nav-link:hover{color:var(--p);background:var(--bg3)}
.co-tabs .nav-link.active{color:var(--p);border-bottom-color:var(--p);background:transparent;font-weight:600}
.co-tabs .nav-link .badge{font-size:10px;margin-left:4px;padding:2px 6px}
.co-metric{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:10px 12px}
.co-metric .lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
.co-metric .input-row{display:flex;align-items:baseline;gap:6px}
.co-metric input{font-size:20px;font-weight:700;color:var(--p);border:none;background:transparent;width:92px;max-width:100%;flex:0 1 auto;padding:0;text-align:left}
.co-metric input:focus{outline:none;box-shadow:none}
.co-metric input:disabled{opacity:.6}
.co-metric .unit{font-size:11px;color:var(--tx2);flex-shrink:0}
.co-metric .sub{font-size:10px;color:var(--tx3);margin-top:2px}
.co-contact-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid transparent;transition:background .15s,border-color .15s;margin-bottom:2px}
.co-contact-row:hover{background:var(--bg3);border-color:var(--bdr)}
.co-contact-row:hover .row-actions{opacity:1}
.co-contact-row.authorized{background:var(--bg3);border-color:var(--bdr)}
.co-contact-row .row-actions{opacity:.35;transition:opacity .15s;display:flex;gap:2px;flex-shrink:0}
.co-contact-row .info{flex:1;min-width:0;font-size:13px}
.co-contact-row .info .nm{font-weight:600}
.co-contact-row .info .meta{color:var(--tx2);font-size:11px}
.co-add-toggle{cursor:pointer;padding:6px 10px;border:1px dashed var(--bdr);border-radius:var(--radius-sm);text-align:center;color:var(--tx2);font-size:12px;font-weight:600;transition:all .15s;margin-bottom:6px}
.co-add-toggle:hover{border-color:var(--p);color:var(--p);background:var(--bg3)}
.co-add-form{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:8px;margin-bottom:8px;display:none}
.co-add-form.show{display:block}
@media (max-width:768px){
  .co-hero{flex-wrap:wrap;gap:10px;padding:10px}
  .co-hero .logo-w img,.co-hero .logo-w .ph{width:48px;height:48px;font-size:20px}
  .co-hero .name{font-size:15px}
  .co-tabs{font-size:12px}
  .co-tabs .nav-link{padding:4px 8px}
  .co-metric{padding:6px 8px}
  .co-metric input{font-size:16px}
}
/* ===== Credentials (Şifre Kartları) ===== */
.cred-group{margin-bottom:14px}
.cred-group-pill{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 6px;background:var(--bg3);border:1px solid var(--bdr);border-radius:20px;margin-bottom:8px;font-size:13px;width:100%}
.cred-group-pill img,.cred-group-pill .ph{width:22px;height:22px;border-radius:50%;object-fit:contain;background:var(--card);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}
.cred-group-pill .ph{background:linear-gradient(135deg,#4f46e5,#7c3aed);border-color:transparent}
.cred-group-pill .nm{font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.cred-group-pill .cnt,.cred-group-pill .add{flex-shrink:0}
.cred-group-pill .cnt{background:#e0e7ff;color:#4338ca;padding:1px 8px;border-radius:10px;font-size:11px;font-weight:600}
.cred-group-pill .add{background:transparent;border:none;color:var(--p);font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px;border-radius:6px}
.cred-group-pill .add:hover{background:#eef2ff}
.cred-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.cred-card{display:flex;background:var(--card);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .15s;position:relative}
.cred-card:hover{box-shadow:var(--shd-md);transform:translateY(-1px)}
.cred-card:hover .actions{opacity:1}
.cred-card .strip{width:5px;flex-shrink:0;background:var(--bdr)}
.cred-card .iconw{flex-shrink:0;display:flex;align-items:flex-start;padding:10px 0 10px 10px}
.cred-card .iconw .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.cred-card .body{flex:1;min-width:0;padding:10px 12px}
.cred-card .title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:2px}
.cred-card .title-row .tt{font-weight:700;color:var(--p);font-size:13px;line-height:1.2;word-break:break-word}
.cred-card .actions{display:flex;gap:2px;flex-shrink:0;opacity:.25;transition:opacity .15s}
.cred-card .sub{font-size:11px;color:var(--tx2);margin-bottom:6px}
.cred-card .info-line{font-size:12px;color:var(--tx);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cred-card .info-line i{color:var(--tx2);margin-right:4px}
.cred-card .info-line code{font-size:11px;background:transparent;padding:0}
.cred-card .info-line a{font-size:11px}
.cred-card .divider{height:1px;background:var(--bdr);margin:6px 0}
.cred-card .meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11px}
.cred-card .meta-row .chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;background:var(--bg3);color:var(--tx2);font-weight:600}
.cred-card .meta-row .chip.ok{background:#dcfce7;color:#15803d}
.cred-card .meta-row .chip.muted{background:var(--bg3);color:var(--tx3)}
.cred-card .meta-row .chip.info{background:#dbeafe;color:#1e40af}
.cred-card .meta-row .chip.warn{background:#fef3c7;color:#92400e}
.cred-card .last-access{font-size:10px;color:var(--tx3);margin-top:4px;border-top:1px dashed var(--bdr);padding-top:4px}
/* ===== Şifre kartları — liste (tablo) görünümü =====
   Firma gruplaması korunur; grup içi kart ızgarası yerine kompakt tablo. */
/* WhatsApp Yönetimi sayfa-içi sekme şeridi.
   ⚠️ SINIF ADI "wa-tabs" OLAMAZ: konuşma listesinin filtre çipleri (Tümü/Bana/Atanmamış...)
   zaten .wa-tabs kullanıyor ve app.css:1568'de flex-wrap:wrap ile SARMALI tanımlı. Buraya
   height/overflow-y konunca o çipler 40px'lik kutuda kırpılıyordu. Ayrı ad şart. */
.wa-admin-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.wa-admin-tabs::-webkit-scrollbar{display:none}
.wa-admin-tabs .nav-item{flex:0 0 auto}
.cred-table-wrap{background:var(--card);border:1px solid var(--bdr);border-radius:10px;overflow:hidden}
/* Liste görünümünde firma başlığı ile tablo TEK PARÇA olur: aradaki 8px boşluk ve
   birbirine bakan yuvarlak köşeler/çift kenarlık kaldırılır. Gruplar ARASI boşluk
   (.cred-group{margin-bottom}) aynen kalır — yalnız grup İÇİ birleşme hedefleniyor. */
.cred-group.joined .cred-group-pill{margin-bottom:0;border-radius:10px 10px 0 0;border-bottom-color:transparent}
.cred-group.joined .cred-table-wrap{border-top-left-radius:0;border-top-right-radius:0}
.cred-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}
.cred-table thead th{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.03em;padding:6px 10px;background:var(--bg3);border-bottom:1px solid var(--bdr);text-align:left;white-space:nowrap}
.cred-table tbody td{padding:6px 10px;border-bottom:1px solid var(--bdr);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.cred-table tbody tr:last-child td{border-bottom:none}
.cred-table tbody tr{cursor:pointer;transition:background .12s}
.cred-table tbody tr:hover{background:var(--bg3)}
.cred-table tbody tr:hover .c-act .eb{opacity:1}
.cred-table .none{color:var(--tx3)}
.cred-table .c-tip{width:38px;text-align:center;padding-left:8px;padding-right:0}
.cred-table .tic{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;color:#fff;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.cred-table .c-title .tt{font-weight:700;color:var(--p)}
.cred-table .c-user{width:20%}
.cred-table .c-user code{font-size:12px;background:transparent;padding:0;color:var(--tx)}
.cred-table .c-host{width:30%;color:var(--tx2);font-size:12px}
.cred-table .c-host i{margin-right:5px;color:var(--tx3)}
.cred-table .c-chips{width:110px;white-space:nowrap}
.cred-table .c-chips .chip{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:10px;font-size:11px;font-weight:600;margin-right:3px;background:var(--bg3);color:var(--tx2)}
.cred-table .c-chips .chip.ok{background:#dcfce7;color:#15803d}
.cred-table .c-chips .chip.info{background:#dbeafe;color:#1e40af}
.cred-table .c-chips .chip.warn{background:#fef3c7;color:#92400e}
.cred-table .c-access{width:112px;font-size:11px;color:var(--tx3)}
.cred-table .c-access .who{margin-left:3px;cursor:help;opacity:.7}
.cred-table .c-act{width:72px;text-align:right;white-space:nowrap}
.cred-table .c-act .eb{opacity:.3;transition:opacity .15s}
[data-theme="dark"] .cred-table .c-chips .chip.ok{background:#14532d;color:#86efac}
[data-theme="dark"] .cred-table .c-chips .chip.info{background:#1e3a8a;color:#93c5fd}
[data-theme="dark"] .cred-table .c-chips .chip.warn{background:#78350f;color:#fcd34d}
@media (max-width:820px){
  /* Dar ekranda önce ikincil sütunlar düşer — yatay kaydırma yerine sütun eleme:
     satır yüksekliği sabit kalır, dokunmatikte hedef kaymaz. */
  .cred-table .c-access{display:none}
}
@media (max-width:600px){
  .cred-grid{grid-template-columns:1fr;gap:6px}
  .cred-table .c-user,.cred-table .c-chips{display:none}
  .cred-table .c-host{width:auto}
  .cred-table thead th,.cred-table tbody td{padding:6px 6px}
  /* Mobilde .eb 36x36'ya çıkıyor (yukarıdaki dokunmatik kuralı) — 2 buton + hücre dolgusu
     72px'e sığmayıp overflow:hidden ile KIRPILIYORDU (düzenle/sil erişilemez oluyordu). */
  .cred-table .c-act{width:88px;padding-left:0;padding-right:4px}
  .cred-table .c-act .eb{opacity:1}
  .cred-card{align-items:center}
  .cred-card .strip{width:3px}
  .cred-card .iconw{padding:6px 0 6px 8px}
  .cred-card .iconw .ic{width:28px;height:28px;font-size:13px;border-radius:8px}
  .cred-card .body{padding:6px 8px}
  .cred-card .title-row{margin-bottom:1px;align-items:center}
  .cred-card .title-row .tt{font-size:13px;line-height:1.25}
  .cred-card .title-row::after{content:"\f285";font-family:"bootstrap-icons";font-size:16px;color:var(--tx3);margin-left:auto;flex-shrink:0;line-height:1}
  .cred-card .actions{display:none}
  .cred-card .sub{display:none}
  .cred-card .divider{display:none}
  .cred-card .last-access{display:none}
  .cred-card .info-line{display:inline;font-size:11px;color:var(--tx2);margin:0;line-height:1.3}
  .cred-card .info-line i{display:none}
  .cred-card .info-line code{font-size:11px;color:var(--tx2);background:transparent;padding:0}
  .cred-card .info-line a{font-size:11px;color:var(--tx2);text-decoration:none}
  .cred-card .info-line+.info-line::before{content:" · ";color:var(--tx3);margin:0 2px}
  .cred-card .meta-row{margin-top:3px;gap:4px;line-height:1}
  .cred-card .meta-row .chip{font-size:10px;padding:1px 5px}
}
/* ===== Yoğunluk Haritası (R6) ===== */
.r6-hm-grid{display:grid;grid-template-columns:42px repeat(24,minmax(24px,1fr));gap:2px;font-size:11px;min-width:680px}
.r6-hm-grid .hdr{text-align:center;color:var(--tx3);font-weight:600;font-size:10px}
.r6-hm-grid .hdr.work{color:var(--p);position:relative}
.r6-hm-grid .hdr.work::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--p);border-radius:1px}
.r6-hm-grid .lbl{display:flex;align-items:center;font-weight:600;color:var(--tx2);font-size:11px;padding-left:2px}
.r6-hm-grid .lbl.weekend{color:#94a3b8;font-style:italic}
.r6-hm-cell{border-radius:3px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:600;cursor:default;transition:transform .08s}
.r6-hm-cell:hover{transform:scale(1.15);z-index:2;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.r6-row-weekend{background-image:linear-gradient(135deg,rgba(148,163,184,.05) 0%,rgba(148,163,184,.05) 100%)}
.r6-segment{background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.r6-segment .ic{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.r6-segment .lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.r6-segment .val{font-size:18px;font-weight:700;line-height:1}
.r6-segment .meta{font-size:11px;color:var(--tx3);margin-top:2px}
.r6-insight{padding:10px 14px;border-radius:8px;font-size:12px;border:1px solid;display:flex;align-items:center;gap:10px}
.r6-insight.warn{background:#fef3c7;border-color:#fde68a;color:#854d0e}
.r6-insight.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.r6-quiet-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;border-radius:14px;font-size:11px;font-family:monospace;font-weight:600;margin-right:4px;margin-bottom:4px}
/* ===== Yaşlandırma Raporu (R11) ===== */
.r11-bucket{display:flex;align-items:center;gap:10px;padding:12px;background:var(--card);border:1px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .15s;border-left:4px solid var(--bdr)}
.r11-bucket:hover{transform:translateY(-1px);box-shadow:var(--shd-md)}
.r11-bucket.active{box-shadow:inset 0 0 0 2px var(--p);background:var(--bg3)}
.r11-bucket .ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.r11-bucket .val{font-size:20px;font-weight:700;line-height:1}
.r11-bucket .lbl{font-size:11px;color:var(--tx2);margin-top:2px;text-transform:uppercase;letter-spacing:.3px;font-weight:600}
.r11-bucket .meta{font-size:10px;color:var(--tx3);margin-top:1px}
.r11-insight{padding:10px 14px;border-radius:8px;font-size:12px;display:flex;align-items:center;gap:8px;border:1px solid;flex-wrap:wrap}
.r11-insight .b{font-weight:700;font-size:13px}
.r11-insight.critical{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.r11-insight.warning{background:#fef3c7;border-color:#fde68a;color:#854d0e}
.r11-insight.info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.r11-row{position:relative}
.r11-row td:first-child{position:relative}
.r11-row td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--age-color,var(--bdr))}
.r11-age-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:700;color:#fff}
.r11-unassigned{background:#fef2f2!important}
.r11-unassigned td:first-child::before{background:#ef4444}
.r11-unassigned td{color:#991b1b}
.r11-sticky-thead thead th{position:sticky;top:0;z-index:5;background:var(--bg3)}
/* ===== User Modal — hero card + tabs + helpers ===== */
.user-hero{display:flex;align-items:center;gap:14px;padding:14px;background:linear-gradient(135deg,var(--bg3),var(--card));border:1px solid var(--bdr);border-radius:var(--radius);margin-bottom:12px}
.user-hero .av-w{position:relative;flex-shrink:0}
.user-hero .av-w .av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:22px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.user-hero .av-w .dot{position:absolute;bottom:0;right:0;width:14px;height:14px;border-radius:50%;border:2px solid var(--card)}
.user-hero .info{flex:1;min-width:0}
.user-hero .name{font-size:18px;font-weight:700;margin:0;line-height:1.2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-hero .email{font-size:13px;color:var(--tx2);margin-top:2px}
.user-hero .badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px;font-size:11px}
.user-tabs{margin-bottom:10px;font-size:13px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.user-tabs .nav-link{padding:6px 12px;color:var(--tx2);border:none;border-bottom:2px solid transparent;border-radius:0;background:transparent}
.user-tabs .nav-link:hover{color:var(--p);background:var(--bg3)}
.user-tabs .nav-link.active{color:var(--p);border-bottom-color:var(--p);background:transparent;font-weight:600}
/* Renk paleti — 12 swatch tek satıra sığacak boyut */
.color-palette{display:flex;flex-wrap:wrap;gap:3px;margin-top:0;align-items:center}
.color-palette .sw{width:18px;height:18px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;flex-shrink:0}
.color-palette .sw:hover{transform:scale(1.15)}
.color-palette .sw.active{border-color:#fff;box-shadow:0 0 0 2px var(--p)}
.color-palette .sw.active::after{content:"\f26b";font-family:bootstrap-icons;color:#fff;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* Şifre güç göstergesi */
.pw-strength{margin-top:4px}
.pw-strength-bar{height:4px;border-radius:2px;background:var(--bdr);overflow:hidden;display:flex;gap:2px}
.pw-strength-bar>div{flex:1;background:var(--bdr);transition:background .2s;border-radius:2px}
.pw-strength-bar.s1>div:nth-child(-n+1){background:#ef4444}
.pw-strength-bar.s2>div:nth-child(-n+2){background:#f59e0b}
.pw-strength-bar.s3>div:nth-child(-n+3){background:#84cc16}
.pw-strength-bar.s4>div{background:#22c55e}
.pw-strength-lbl{font-size:11px;color:var(--tx3);margin-top:3px;display:flex;justify-content:space-between}
.pw-strength-lbl .s1{color:#ef4444}.pw-strength-lbl .s2{color:#f59e0b}.pw-strength-lbl .s3{color:#84cc16}.pw-strength-lbl .s4{color:#22c55e}
.pw-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;font-size:10px;color:var(--tx3)}
.pw-checks span.ok{color:#22c55e}
.pw-checks span.ok::before{content:"\f26b";font-family:bootstrap-icons;margin-right:3px}
.pw-checks span:not(.ok)::before{content:"\f659";font-family:bootstrap-icons;margin-right:3px;color:var(--tx3)}
/* Rol açıklaması */
.role-hint{font-size:11px;color:var(--tx2);background:var(--bg3);border-left:3px solid var(--p);padding:6px 10px;border-radius:0 4px 4px 0;margin-top:4px}
/* IP chip input */
.ip-chip-container{display:flex;flex-wrap:wrap;gap:4px;padding:6px;border:1px solid var(--bdr);border-radius:var(--radius-sm);background:var(--card);min-height:38px;align-items:center}
.ip-chip-container input{border:none;outline:none;background:transparent;flex:1;min-width:120px;font-size:13px;padding:2px 4px}
.ip-chip{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;color:var(--p);padding:3px 8px;border-radius:12px;font-size:11px;font-family:monospace;font-weight:600;border:1px solid #c7d2fe}
.ip-chip .x{cursor:pointer;font-size:13px;opacity:.6}
.ip-chip .x:hover{opacity:1;color:#ef4444}
/* User durum kartları */
.user-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.user-status{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px}
.user-status .ic{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.user-status .lbl{font-size:10px;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.user-status .val{font-size:13px;font-weight:700;color:var(--tx)}
/* User audit mini-table */
.user-audit-row{padding:6px 8px;border-bottom:1px solid var(--bdr2);font-size:12px;display:flex;align-items:center;gap:8px}
.user-audit-row:last-child{border-bottom:none}
@media (max-width:600px){
  .user-hero{flex-wrap:wrap;padding:10px;gap:10px}
  .user-hero .av-w .av{width:48px;height:48px;font-size:18px}
  .user-hero .name{font-size:16px}
  .user-tabs{font-size:12px}
  .user-tabs .nav-link{padding:4px 8px}
}
/* ===== Online Users — özet metrikler ===== */
.on-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:12px}
.on-metric{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card);border:1px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .15s}
.on-metric:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:var(--shd-sm)}
.on-metric.active{border-color:var(--p);background:linear-gradient(135deg,var(--bg3),var(--card));box-shadow:inset 0 0 0 1px var(--p)}
.on-metric-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.on-metric-val{font-size:20px;font-weight:700;color:var(--tx);line-height:1.1}
.on-metric-lbl{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:1px}
.on-user-card{transition:all .15s}
.on-user-card:hover{box-shadow:var(--shd-md);transform:translateY(-1px)}
@media (max-width:600px){
  .on-metrics{grid-template-columns:repeat(2,1fr);gap:6px}
  .on-metric{padding:8px 10px;gap:8px}
  .on-metric-icon{width:28px;height:28px;font-size:12px}
  .on-metric-val{font-size:16px}
}
/* KB Grid layout — kart görünümü (mobil 1, tablet/desktop 2 sütun) ve liste görünümü */
.kb-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:768px){.kb-grid:not(.kb-view-list){grid-template-columns:repeat(2,minmax(0,1fr))}}
.kb-grid.kb-view-list{grid-template-columns:1fr;gap:4px}
.kb-grid.kb-view-list .kb-card{padding:8px 12px!important;margin-bottom:0!important;border-left-width:3px!important}
.kb-grid.kb-view-list .kb-card h6{font-size:14px!important;white-space:nowrap!important;-webkit-line-clamp:1!important;display:block!important;margin-bottom:2px!important}
.kb-grid.kb-view-list .kb-card .kb-preview{display:none!important}
.kb-grid.kb-view-list .kb-card .kb-card-meta-row{display:none}
.kb-grid.kb-view-list .kb-card .kb-card-row1{align-items:center}
/* Kart sol şerit (kategori rengi) */
.kb-card{border-left:4px solid var(--bdr);transition:all .15s;position:relative}
.kb-card:hover{box-shadow:var(--shd-md);transform:translateY(-1px)}
/* ⋮ menüsü AÇIKKEN kart en üstte kalsın. İKİ AYRI sebep "Sil"i görünmez yapıyordu:
   (1) .kb-card:hover'daki transform yeni bir stacking context yaratıyor → menü kartın katmanına
       hapsoluyor, DOM'da sonra gelen kart üstüne biniyor.
   (2) .kb-card'daki overflow:hidden menüyü kart sınırında KIRPIYOR → menünün alt kısmı
       (ayraç + "Sil") hiç çizilmiyor. z-index tek başına bunu çözmez.
   Menü açıkken ikisini de kaldırıyoruz. */
.kb-card:has(.dropdown-menu.show){z-index:1060;overflow:visible}
.kb-card:has(.dropdown-menu.show):hover{transform:none}
/* KB toolbar — sticky */
.kb-toolbar-sticky{position:sticky;top:0;z-index:10;background:var(--bg);padding:6px 0 8px;margin-bottom:6px;border-bottom:1px solid transparent;transition:border-color .15s}
.kb-toolbar-sticky.scrolled{border-bottom-color:var(--bdr)}
/* KB ⋯ dropdown menu */
.kb-card .dropdown-menu{font-size:13px;min-width:180px;box-shadow:var(--shd-md)}
.kb-card .dropdown-item{padding:5px 12px;cursor:pointer}
.kb-card .dropdown-item i{width:18px;display:inline-block;text-align:center}
/* KB etiket tıklanabilir */
.kb-card .badge.kb-tag{cursor:pointer;transition:transform .1s}
.kb-card .badge.kb-tag:hover{transform:scale(1.05);box-shadow:0 1px 4px rgba(0,0,0,.15)}
/* Empty state */
.kb-empty{text-align:center;padding:60px 20px;color:var(--tx2)}
.kb-empty .ico{font-size:72px;opacity:.12;color:var(--p);line-height:1}
.kb-empty h5{margin:18px 0 8px;font-size:18px;color:var(--tx)}
.kb-empty p{font-size:13px;color:var(--tx3);max-width:420px;margin:0 auto 20px}
/* KB loading skeleton */
.kb-skel-line{background:linear-gradient(90deg,var(--bg3) 0%,var(--bg2) 50%,var(--bg3) 100%);background-size:200% 100%;animation:kb-skel-shimmer 1.5s ease-in-out infinite;border-radius:4px;width:100%}
@keyframes kb-skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* KB klasör paneli — mobilde collapsible */
.kb-folders-header{display:none;align-items:center;cursor:pointer;padding:8px 10px;background:var(--bg3);border-radius:6px;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--tx);user-select:none}
.kb-folders-header:hover{background:color-mix(in srgb,var(--p) 8%,var(--bg3))}
.kb-folders-header .kb-chev{transition:transform .2s;font-size:11px;color:var(--tx2)}
.kb-folders-header.collapsed .kb-chev{transform:rotate(-90deg)}
@media (max-width:768px){
  .kb-folders-header{display:flex}
  .kb-folders-header.collapsed + .kb-folders-body{display:none}
  .kb-folders-body .kb-folders-title{display:none}
}
/* KB kartları mobilde sıkıştır */
@media (max-width:600px){
  .kb-card{padding:8px 10px!important;margin-bottom:6px!important}
  .kb-card h6{font-size:13px!important;white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;margin-bottom:4px!important}
  .kb-card .badge{font-size:10px!important;padding:1px 6px!important}
  .kb-card .kb-preview{font-size:11px!important;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal!important;margin-top:4px!important}
  .kb-card>div:first-child>div:first-child>div:nth-child(3){font-size:10px!important;line-height:1.4;color:var(--tx3)}
  .kb-card .eb{width:26px!important;height:26px!important;font-size:12px!important}
}
/* Credentials detay — bağlantı satırı mobilde wrap */
@media (max-width:600px){
  .cred-entry-row{flex-wrap:wrap;gap:6px!important;padding:8px!important}
  .cred-entry-row>span:first-child{width:100%;min-width:0!important;text-align:left!important;font-size:11px;padding:2px 8px}
  .cred-entry-row code{font-size:11px!important;letter-spacing:1px!important}
  .cred-entry-row code[id^="ePw_"]{margin-left:0}
  .cred-entry-row .btn{padding:2px 4px!important;font-size:14px!important}
}
/* Harita modal fullscreen + mini preview */
.cal-map-fullscreen{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;max-width:none!important;margin:0!important}
.cal-map-fullscreen .modal-content{height:100vh;border-radius:0!important;display:flex;flex-direction:column}
.cal-map-fullscreen .modal-body{flex:1;overflow-y:auto}
.cal-mini-map{height:140px;border-radius:6px;background:#eef;border:1px solid var(--bdr);overflow:hidden;margin-top:6px}
.cal-mini-map .leaflet-control-container{display:none}
.cal-day.drop-target{background:rgba(99,102,241,.15)!important;outline:2px dashed var(--p);outline-offset:-2px}
.cal-ev[draggable="true"]{cursor:grab}.cal-ev[draggable="true"]:active{cursor:grabbing}
@media (max-width:768px){.cal-toolbar .form-select-sm{max-width:none!important;flex:1 1 calc(50% - 4px);min-width:110px}.cal-toolbar .btn-group{flex-wrap:wrap}.cal-toolbar>h6{width:100%;margin-bottom:6px}}
@media (max-width:480px){.cal-toolbar .form-select-sm{flex:1 1 100%}.cal-toolbar .btn-group .btn{padding:4px 8px;font-size:11px}.cal-toolbar input[type="month"]{width:100%!important}.cal-toolbar>div:last-child{width:100%}}
.tag{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;color:var(--p);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;margin:1px;border:1px solid #c7d2fe}
.tag .x{cursor:pointer;font-size:14px}
.perm-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid transparent;line-height:1}
.perm-pill i{font-size:13px;opacity:.85}
.perm-pill b{font-size:13px;font-weight:700}
.perm-pill-lbl{font-size:11px;font-weight:500;opacity:.85}
[data-theme="dark"] .perm-pill{filter:brightness(1.15)}
.ms-box{border:1px solid var(--bdr);border-radius:var(--radius-sm);background:var(--card);max-height:260px;overflow-y:auto;padding:4px}
.ms-item{padding:4px 8px;border-radius:var(--radius-xs);cursor:pointer;font-size:13px;display:flex;align-items:center;gap:6px;color:var(--tx);transition:var(--transition)}.ms-item:hover{background:var(--hover)}.ms-item.sel{background:#eef2ff;color:var(--p);font-weight:600}
.cm-body{max-width:100%}.cm-body table{max-width:100%;border-collapse:collapse;font-size:13px;margin:4px 0}.cm-body table td,.cm-body table th{border:1px solid #d1d5db;padding:5px 8px;max-width:200px;overflow:hidden;text-overflow:ellipsis}.cm-body img{max-width:100%;height:auto;border-radius:var(--radius-xs)}.cm-body blockquote{border-left:3px solid #d1d5db;margin:6px 0;padding:6px 12px;color:#6b7280;font-size:13px;background:var(--bg3);border-radius:0 var(--radius-xs) var(--radius-xs) 0}.cm-body pre,.cm-body code{font-size:12px;background:var(--bg3);padding:3px 6px;border-radius:var(--radius-xs);overflow-x:auto;max-width:100%;display:block}.cm-body *{max-width:100%!important}.cm-att{margin-top:10px;padding-top:8px;border-top:1px dashed var(--bdr)}.cm-att-title{font-size:11px;font-weight:700;color:var(--tx3);margin-bottom:6px}.att-link{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--radius-sm);padding:6px 12px;font-size:13px;color:var(--p);text-decoration:none;margin:2px;transition:var(--transition);max-width:100%;overflow:hidden}.att-link>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-link:hover{background:#eef2ff;border-color:#c7d2fe}.att-link i{font-size:16px}.att-link .att-size{color:var(--tx3);font-size:11px;margin-left:2px}.att-preview-btn{background:none;border:none;padding:0 2px;cursor:pointer;color:#6b7280;font-size:15px;line-height:1;vertical-align:middle}.att-preview-btn:hover{color:var(--p)}.att-preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column}.att-preview-overlay .att-pv-toolbar{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:10000}.att-preview-overlay .att-pv-toolbar button{background:rgba(255,255,255,.15);border:none;color:#fff;font-size:18px;width:36px;height:36px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}.att-preview-overlay .att-pv-toolbar button:hover{background:rgba(255,255,255,.3)}.att-preview-overlay .att-pv-title{position:absolute;top:14px;left:16px;color:#fff;font-size:13px;opacity:.8;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.att-preview-overlay img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-sm);box-shadow:0 4px 24px rgba(0,0,0,.4)}.att-preview-overlay iframe{width:90vw;height:85vh;border:none;border-radius:var(--radius-sm);background:#fff}
.td-grid{display:grid;grid-template-columns:1fr 360px;gap:12px}
.menu-btn{display:none;background:none;border:none;font-size:25px;color:var(--tx);cursor:pointer;padding:4px 8px;border-radius:var(--radius-xs)}
.menu-btn:hover{background:var(--hover)}
#ntfPanel{box-shadow:var(--shd-md)!important;border-radius:var(--radius)!important}
#ntfPanel .bg-light{background:#eef2ff!important}
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000}
.mob-cards{display:none}.mob-table{display:block}
/* Yalnız mobilde: tablo başlığı gizliyken sıralama kontrolü buradan gelir.
   Kırılma noktası .mob-cards ile AYNI tutulmalı. */
.mob-only{display:none}
/* Ticket table responsive columns */
.tt-subj .text-truncate{max-width:clamp(100px,15vw,400px)}
.tt-sender .text-truncate{max-width:clamp(80px,10vw,300px)}
.tt-company .text-truncate{max-width:clamp(80px,10vw,300px)}
/* Company table responsive columns */
.co-name{max-width:clamp(160px,20vw,400px);overflow:hidden}.co-name .d-flex{min-width:0}
.co-domain{max-width:clamp(80px,10vw,250px);overflow:hidden}
.co-contacts{max-width:clamp(100px,12vw,300px);overflow:hidden}
@media(max-width:1366px){.dt td,.dt th{font-size:12px!important;padding:8px 10px!important}
.tt-subj .text-truncate{max-width:clamp(100px,12vw,180px)}
.tt-sender .text-truncate{max-width:clamp(60px,8vw,140px)}
.tt-company .text-truncate{max-width:clamp(60px,8vw,140px)}
.co-name{max-width:clamp(120px,14vw,200px)}
.co-domain{max-width:clamp(60px,8vw,140px)}
.co-contacts{max-width:clamp(80px,10vw,160px)}}
@media(max-width:768px){
.sidebar{transform:translateX(-100%)}.sidebar.show{transform:translateX(0)}
.main{margin-left:0!important;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}.menu-btn{display:flex;align-items:center}.si{width:100%}
.sb-mini .main{margin-left:0!important}.sb-mini .sidebar{width:260px}
.sb-toggle-btn{right:12px;top:12px}
.td-grid{grid-template-columns:1fr!important}
/* Profil ve Tercihler sayfası mobil — tüm grid'ler tek sütuna düşsün */
.up-avatar-grid{grid-template-columns:1fr!important;gap:16px!important;text-align:center}
.up-2col{grid-template-columns:1fr!important}
/* time/date input'ları küçük ekranda Bootstrap form-control-sm + native picker karşımında
   value text'i sıkışık/yamuk render ediyordu. font-size:16px iOS zoom'unu da önler. */
input[type="time"],input[type="date"],input[type="datetime-local"]{
  text-decoration:none!important;
  -webkit-text-decoration:none!important;
  font-style:normal!important;
  font-family:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:normal!important;
  text-align:left;
  font-size:16px!important;
  line-height:1.4!important;
  padding:0.5rem 0.75rem!important;
}
input[type="time"]::-webkit-date-and-time-value,
input[type="date"]::-webkit-date-and-time-value{
  text-align:left!important;
  font-style:normal!important;
  font-family:inherit!important;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator{opacity:0.6;cursor:pointer}
#ntfPanel{width:calc(100vw - 20px)!important;right:10px!important;left:10px!important}
.pg{padding:10px}.card-s{padding:12px}.dt td,.dt th{padding:8px 10px;font-size:12px}
.cal-day{min-height:45px}.cal-ev{font-size:10px}.cal-day.week-view{min-height:120px}
.top-bar{padding:0 10px}
.dt{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt table{min-width:500px}
.modal-dialog,.modal-dialog.modal-lg,.modal-dialog.modal-xl{max-width:calc(100vw - 16px)!important;margin:8px auto}
.modal-content{max-height:95vh;overflow-y:auto;border-radius:var(--radius)!important}
.af-row{flex-wrap:wrap}.af-row .af-group{min-width:calc(50% - 6px)!important}
.af-ms-drop{min-width:calc(100vw - 40px)!important}
.col-4.col-md-2 .card-s{padding:10px!important}
.col-4.col-md-2 .card-s div[style*="font-size:24px"]{font-size:20px!important}
.ql-toolbar{flex-wrap:wrap;overflow-x:auto}
.ql-toolbar .ql-formats{margin-bottom:2px}
/* KALDIRILDI: #cmList mobilde max-height:350px ile sabitleniyordu → konuşma listesi 350px'te kırpılıyor,
   scroll da yok, uzun mesajlar görünmüyordu. Masaüstünde kısıt yok; mobilde de olmasın — liste içeriğe
   göre uzasın, sayfa normal kaysın (masaüstüyle aynı). */
#cmList{max-height:none!important}
.att-preview-overlay img{max-width:98vw;max-height:80vh}
.att-preview-overlay iframe{width:98vw;height:80vh}
.att-preview-overlay .att-pv-title{max-width:60%;font-size:11px}
.tag{font-size:10px!important;padding:2px 8px!important}
.badge{font-size:9px!important}
.login-card{width:calc(100% - 20px)!important;max-width:420px;padding:28px 20px;margin:10px}.login-logo-area i{font-size:44px!important}.login-logo-area img{height:44px!important}.login-logo-area .login-app-name{font-size:18px}.lp-dot{width:3px!important;height:3px!important}
.cal-grid{font-size:11px}
canvas{max-height:220px!important}
/* Manşet kartları artık <a> — tıklanabilir olduğu görünmeli ve klavye odağı belli olmalı.
   Odak halkası olmadan Tab'la gezen kullanıcı nerede olduğunu göremez. */
.dsh-stat{transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.dsh-stat:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:var(--shd-md)}
.dsh-stat:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.dsh-mine-row:hover{background:var(--hover)}
.dsh-mine-row:focus-visible{outline:2px solid var(--p);outline-offset:-2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.dsh-stat{transition:none}.dsh-stat:hover{transform:none}}
.stat-card{padding:12px 14px!important}.stat-icon{width:36px!important;height:36px!important;font-size:16px!important}
.welcome-card{flex-direction:column;text-align:center;gap:12px;padding:16px}
.welcome-card>div:last-child{text-align:center}
.kb-board{flex-direction:column}.kb-col{min-width:100%!important;max-width:100%!important}
.kb-layout{flex-direction:column!important}.kb-layout>.card-s{min-width:100%!important;max-width:100%!important}
.mob-cards{display:block!important}.mob-table{display:none!important}.mob-only{display:inline-flex!important}
.sw{width:100%}
.input-group[style*="max-width"]{max-width:100%!important}
select[style*="max-width"],select[style*="width:1"]{max-width:100%!important;width:100%!important}
input[style*="width:1"]{width:100%!important}
.d-flex.gap-2.flex-wrap{width:100%}
.d-flex.gap-2.flex-wrap>input,.d-flex.gap-2.flex-wrap>select{flex:1 1 calc(50% - 4px)!important;min-width:0!important;width:auto!important}
.d-flex.gap-2.flex-wrap>.input-group{flex:1 1 100%!important;max-width:100%!important}
.d-flex.gap-2.flex-wrap>.btn-group{flex:1 1 100%}
/* ⚠ overflow-y:hidden ZORUNLU. CSS kurali: bir eksen 'visible' degilse, digerindeki
   'visible' otomatik 'auto'ya doner. Yani yalniz overflow-x:auto yazmak, tek satirlik
   seridi DIKEY olarak da kaydirilabilir yapiyor — kullanici sekmelere dokunurken serit
   yukari kayiyor ve sekmeler yarim gorunuyor. */
.nav-tabs{font-size:12px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}.nav-tabs .nav-item{flex-shrink:0}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fl-group{margin-bottom:12px}
.btn{min-height:38px}
.eb{min-width:40px;min-height:40px;font-size:16px!important}
.sd-wrap{min-width:100px}
.sd-drop{min-width:180px}
}
@media(max-width:480px){
.si{width:100%}
.top-bar .btn-p{padding:6px 10px!important;font-size:11px!important}
.modal-body .row.g-2>[class*="col-"]{width:100%!important;max-width:100%!important;flex:0 0 100%!important}
.sb-brand h5{font-size:14px}
.col-4.col-md-2{width:50%!important;flex:0 0 50%!important}
.dt td,.dt th{font-size:11px!important;padding:6px 8px!important}
.dt table{min-width:400px}
canvas{max-height:180px!important}
.welcome-card>div:first-child{display:none}
.pg{padding:8px}
.top-bar{height:48px}
.top-bar h6{font-size:13px!important}

.d-flex.gap-2.flex-wrap>input,.d-flex.gap-2.flex-wrap>select{flex:1 1 100%!important}
.login-card{padding:20px 16px!important}
.cpk{grid-template-columns:repeat(7,28px);gap:2px}.cpk-c,.cpk-x{width:28px;height:28px}
.kb-card-item{padding:8px 10px}
.stat-card{gap:8px!important}
.stat-card div[style*="font-size:24px"]{font-size:18px!important}
.stat-card div[style*="width:44px"]{width:36px!important;height:36px!important}
.modal-body{padding:12px!important}
.cal-hdr{padding:4px;font-size:10px}
}
/* ===== MOBILE ENHANCEMENTS ===== */
@media(max-width:768px){
.sidebar{width:260px;z-index:1100}
.eb{min-width:40px;min-height:40px;font-size:16px!important}
.dt th.mob-hide,.dt td.mob-hide{display:none}
.modal-dialog{margin:0!important;max-width:100vw!important;min-height:100vh;min-height:100dvh}.modal-content{border-radius:0!important;min-height:100vh;min-height:100dvh}
/* Modal footer her zaman erişilebilir — sticky (klavye/URL bar yüzünden alt sınır kayıyor) */
.modal-footer{position:sticky;bottom:0;background:var(--card);z-index:5;padding-bottom:calc(0.25rem + env(safe-area-inset-bottom,0px))}
/* Modal içi tablolar yatay scroll (eskiden sadece ≤600'deydi — 601-768 boşluğu kapandı) */
.modal-body table{display:block;overflow-x:auto;white-space:nowrap}
/* Talepten KB Makalesi modalı — iki sabit pane mobilde alt alta */
.kbgen-split{flex-direction:column!important;overflow-y:auto!important}
.kbgen-split>div{width:100%!important;max-height:none!important;overflow:visible!important;flex-shrink:0}
}
@media(max-width:480px){
.eb{min-width:36px;min-height:36px}
.dt td,.dt th{font-size:12px!important}
}
/* Bildirim + takım sohbeti panelleri — mobilde tam genişlik, sabit konum.
   Zil butonu üst barın en sağında olmadığı için right:0 ile hizalanan panel dar
   ekranda sol taraftan taşıp kırpılıyordu (tcQuickPanel'de "Takım Sohbeti" başlığı kesiliyordu). */
@media(max-width:640px){
  #ntfPanel,#tcQuickPanel{position:fixed!important;top:60px!important;left:10px!important;right:10px!important;width:auto!important;max-width:none!important}
}
/* Teklifler listesi — responsive */
.prp-cards{display:none}
@media(max-width:1100px){
  .prp-col-date{display:none}
}
@media(max-width:900px){
  .prp-col-title{display:none}
}
@media(max-width:640px){
  .prp-table-wrap{display:none}
  .prp-cards{display:block;padding:8px}
  .prp-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);padding:10px 12px;margin-bottom:8px;cursor:pointer;transition:var(--transition)}
  .prp-card:hover{border-color:var(--p);box-shadow:var(--shd-md)}
  .prp-card:last-child{margin-bottom:0}
}
.sd-wrap{position:relative;display:inline-block;min-width:130px}
.sd-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;font-size:13px;border:1px solid var(--bdr);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;white-space:nowrap;height:32px;color:var(--tx);transition:var(--transition)}
.sd-btn:hover{border-color:var(--p)}.sd-btn .sd-x{margin-left:auto;color:#9ca3af;font-size:11px;padding:2px}.sd-btn .sd-x:hover{color:#ef4444}
.sd-drop{position:absolute;top:100%;left:0;z-index:500;background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);box-shadow:var(--shd-md);min-width:220px;max-height:250px;display:none;margin-top:4px}
.sd-drop.open{display:block}
.sd-drop input{width:100%;border:none;border-bottom:1px solid var(--bdr);padding:8px 10px;font-size:13px;outline:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--card);color:var(--tx)}
.sd-list{max-height:200px;overflow-y:auto}.sd-list div{padding:6px 10px;font-size:13px;cursor:pointer;color:var(--tx);transition:var(--transition)}.sd-list div:hover{background:var(--hover)}.sd-list div.sel{background:#eef2ff;color:var(--p);font-weight:600}
.sd-list .sd-empty{color:#9ca3af;text-align:center;padding:8px;cursor:default}
.af-panel{background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);padding:16px 20px;margin-bottom:10px;display:none;box-shadow:var(--shd)}
.af-panel.open{display:block}
.af-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.af-group{display:flex;flex-direction:column;gap:4px;min-width:140px}
.af-group label{font-size:11px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px}
.af-checks{display:flex;flex-wrap:wrap;gap:3px}
.af-cb{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:20px;font-size:12px;cursor:pointer;border:1px solid var(--bdr);user-select:none;transition:var(--transition);background:var(--card);color:var(--tx2);font-weight:500}
.af-cb:hover{border-color:var(--p);color:var(--p)}
.af-cb.sel{background:#eef2ff;border-color:#c7d2fe;color:#4f46e5;font-weight:600}
.af-cb input{display:none}
.af-ms{position:relative}
.af-ms-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;font-size:12px;border:1px solid var(--bdr);border-radius:var(--radius-sm);background:var(--card);cursor:pointer;min-width:120px;height:32px;color:var(--tx);white-space:nowrap;transition:var(--transition)}
.af-ms-btn:hover{border-color:var(--p)}
.af-ms-drop{position:absolute;top:100%;left:0;z-index:500;background:var(--card);border:1px solid var(--bdr);border-radius:var(--radius);box-shadow:var(--shd-md);min-width:220px;display:none;margin-top:4px}
.af-ms-drop.open{display:block}
.af-ms-drop input[type=text]{width:100%;border:none;border-bottom:1px solid var(--bdr);padding:8px 10px;font-size:13px;outline:none;border-radius:var(--radius) var(--radius) 0 0;background:var(--card);color:var(--tx)}
.af-ms-list{max-height:180px;overflow-y:auto;padding:4px 0}
.af-ms-list label{display:flex;align-items:center;gap:6px;padding:5px 10px;font-size:13px;cursor:pointer;color:var(--tx);font-weight:400;text-transform:none;letter-spacing:0;transition:var(--transition)}
.af-ms-list label:hover{background:var(--hover)}
.af-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.af-tag{display:inline-flex;align-items:center;gap:4px;background:#eef2ff;color:#4f46e5;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid #c7d2fe}
.af-tag .x{cursor:pointer;font-size:12px;color:#9ca3af;margin-left:1px}.af-tag .x:hover{color:#ef4444}
.fl-group{position:relative;margin-bottom:16px}.fl-group .form-control,.fl-group .form-select{height:48px;padding:20px 12px 6px;font-size:14px;border-radius:var(--radius-sm);transition:var(--transition)}.fl-group label{position:absolute;top:14px;left:12px;font-size:14px;color:var(--tx3);pointer-events:none;transition:all .2s;z-index:1}.fl-group .form-control:focus~label,.fl-group .form-control:not(:placeholder-shown)~label,.fl-group .has-val~label{top:4px;font-size:11px;color:var(--p);font-weight:600}.fl-group .form-control:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.req-star{color:#ef4444;font-weight:700}.form-control.is-invalid,.form-select.is-invalid{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important}
.val-msg{font-size:11px;color:#ef4444;margin-top:2px;display:none}.val-msg.show{display:block}
.drop-zone{border:2px dashed var(--bdr);border-radius:var(--radius);padding:16px;text-align:center;transition:var(--transition);cursor:pointer;background:var(--bg)}
.drop-zone.drag-over{border-color:var(--p);background:#eef2ff}
.drop-zone:hover{border-color:var(--p)}
.rf-item{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-sm);border:1px solid var(--bdr);font-size:12px;background:var(--inp);transition:var(--transition)}
.rf-item.over{border-color:#ef4444;background:#fef2f2}
.rf-item .rf-rm{cursor:pointer;color:#9ca3af;font-size:12px;padding:1px}.rf-item .rf-rm:hover{color:#ef4444}
.rf-img-prev{width:32px;height:32px;object-fit:cover;border-radius:4px;border:1px solid #e5e7eb}
.ql-editor img{max-width:100%;border-radius:6px;margin:4px 0;cursor:pointer}
.img-rsz{position:relative;display:inline-block;margin:4px 0}
.img-rsz img{display:block;border-radius:6px}
.img-rsz.active{outline:2px solid #4f46e5;outline-offset:2px}
.img-rsz .img-h{position:absolute;width:8px;height:8px;background:#4f46e5;border:1px solid #fff;border-radius:2px;z-index:10;display:none}
.img-rsz.active .img-h{display:block}
.img-h-se{bottom:-4px;right:-4px;cursor:se-resize}.img-h-sw{bottom:-4px;left:-4px;cursor:sw-resize}.img-h-ne{top:-4px;right:-4px;cursor:ne-resize}.img-h-e{top:50%;right:-4px;transform:translateY(-50%);cursor:e-resize}.img-h-w{top:50%;left:-4px;transform:translateY(-50%);cursor:w-resize}
.img-tb{position:absolute;top:-32px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--bdr);border-radius:6px;box-shadow:0 2px 8px var(--shd);padding:2px 4px;display:none;gap:2px;white-space:nowrap;z-index:11}
.img-rsz.active .img-tb{display:flex}
.img-tb button{background:none;border:1px solid transparent;border-radius:4px;padding:2px 6px;font-size:12px;cursor:pointer;color:var(--tx);font-weight:600}.img-tb button:hover{background:var(--hover);border-color:var(--bdr)}.img-tb button.act{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe}
.img-tb .img-sz{font-size:11px;color:#9ca3af;padding:2px 4px;display:flex;align-items:center}
.ql-editor{min-height:140px}
#nte2 .ql-container{max-height:130px!important;overflow-y:auto!important}#nte2 .ql-editor{min-height:80px!important;max-height:130px!important;overflow-y:auto!important}
.ql-editor table{border-collapse:collapse;width:100%;margin:4px 0}.ql-editor td,.ql-editor th{border:1px solid #d1d5db;padding:4px 8px;min-width:50px}
/* Yapıştırılan mail içeriği (atomik embed) — kaynak HTML kendi inline stilleriyle gelir;
   üstteki genel editör tablo kuralları (width:100% + zorunlu kenarlık) imza tablosunu bozar,
   embed içinde nötrlenir. Blok tek parça seçilir/silinir, içi düzenlenmez. */
.ql-pastedhtml{margin:6px 0;max-width:100%;overflow-x:auto;position:relative}
.ql-editor .ql-pastedhtml table{width:auto;margin:0}
.ql-editor .ql-pastedhtml td,.ql-editor .ql-pastedhtml th{border:none;padding:1px 4px;min-width:0}
.ql-editor .ql-pastedhtml img{max-width:100%}
.ql-editor .ql-pastedhtml:hover{outline:1px dashed var(--bdr);outline-offset:2px}
.cpk{position:fixed;background:var(--card);border:1px solid var(--bdr);border-radius:4px;box-shadow:0 3px 12px var(--shd);padding:4px;z-index:99999;display:grid;grid-template-columns:repeat(7,22px);gap:1px}
.cpk-c{width:22px;height:22px;border:1px solid rgba(0,0,0,.2);cursor:pointer;box-sizing:border-box}.cpk-c:hover{border:2px solid #000;z-index:1;position:relative}
.cpk-x{width:22px;height:22px;border:1px solid #ccc;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:#888;font-weight:700}.cpk-x:hover{border-color:#f00;color:#f00}
.tbl-del-float{position:fixed;z-index:99990;background:#fee2e2;color:#ef4444;border:1px solid #fca5a5;border-radius:4px;width:24px;height:24px;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:background .15s}.tbl-del-float:hover{background:#ef4444;color:#fff;border-color:#ef4444}
[data-theme="dark"] .modal-content{background:var(--card);color:var(--tx);border-color:var(--bdr)}
[data-theme="dark"] .modal-header{border-color:var(--bdr)}
[data-theme="dark"] .modal-footer{border-color:var(--bdr)}
[data-theme="dark"] .form-control,[data-theme="dark"] .form-select{background:var(--inp);color:var(--tx);border-color:var(--bdr)}
[data-theme="dark"] .form-control:focus,[data-theme="dark"] .form-select:focus{background:var(--inpf);color:var(--tx);border-color:var(--p);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
[data-theme="dark"] .form-check-label{color:var(--tx)}
[data-theme="dark"] .table{color:var(--tx);--bs-table-bg:var(--card);--bs-table-border-color:var(--bdr);--bs-table-striped-bg:var(--bg3);--bs-table-hover-bg:var(--hover)}
[data-theme="dark"] .table thead th{background:var(--bg3);color:var(--tx2);border-color:var(--bdr)}
[data-theme="dark"] .nav-tabs{border-color:var(--bdr)}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--tx2)}
[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--card);color:var(--tx);border-color:var(--bdr) var(--bdr) var(--card)}
[data-theme="dark"] .btn-outline-secondary{color:var(--tx2);border-color:var(--bdr)}
[data-theme="dark"] .btn-outline-secondary:hover{background:var(--bg3);color:var(--tx)}
[data-theme="dark"] .btn-secondary{background:var(--bg3);border-color:var(--bdr);color:var(--tx)}
[data-theme="dark"] .text-muted{color:var(--tx3)!important}
[data-theme="dark"] .text-dark{color:var(--tx)!important}
[data-theme="dark"] .bg-light{background:var(--bg3)!important}
[data-theme="dark"] .border-bottom{border-color:var(--bdr)!important}
[data-theme="dark"] .alert{background:var(--bg3);color:var(--tx);border-color:var(--bdr)}
[data-theme="dark"] .ql-toolbar{background:var(--bg3);border-color:var(--bdr)!important}
[data-theme="dark"] .ql-container{border-color:var(--bdr)!important;background:var(--card)}
[data-theme="dark"] .ql-editor{color:var(--tx)}
[data-theme="dark"] .ql-snow .ql-stroke{stroke:var(--tx2)}
[data-theme="dark"] .ql-snow .ql-fill{fill:var(--tx2)}
[data-theme="dark"] .ql-snow .ql-picker{color:var(--tx2)}
[data-theme="dark"] .ql-snow .ql-picker-options{background:var(--card);border-color:var(--bdr)}
[data-theme="dark"] #ntfPanel{background:var(--card)!important;border-color:var(--bdr)!important}
[data-theme="dark"] .login-page{background:#0b0f19}
[data-theme="dark"] .login-page::before{background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.08),transparent 50%)}
[data-theme="dark"] .lp-dot{background:rgba(99,102,241,.25)}
[data-theme="dark"] .lp-dot:nth-child(odd){background:rgba(139,92,246,.2)}
[data-theme="dark"] .lp-dot:nth-child(3n){background:rgba(56,189,248,.15)}
[data-theme="dark"] .login-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(12px)}
[data-theme="dark"] .login-logo-area .login-app-name{color:#e2e8f0}
[data-theme="dark"] .login-logo-area .login-app-sub{color:rgba(255,255,255,.4)}
[data-theme="dark"] .login-fl input{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#e2e8f0}
[data-theme="dark"] .login-fl input:focus{border-color:var(--p,#6366f1);box-shadow:0 0 0 4px rgba(99,102,241,.12)}
[data-theme="dark"] .login-fl label{color:rgba(255,255,255,.35)}
[data-theme="dark"] .login-fl input:focus~label,[data-theme="dark"] .login-fl input:not(:placeholder-shown)~label{color:var(--pl,#818cf8)}
[data-theme="dark"] .login-check{color:rgba(255,255,255,.35)}
[data-theme="dark"] .login-forgot{color:var(--pl,#818cf8)}
/* Konuşma balonları: .cm-a (temsilci) ve .cm-i (dahili not) sabit AÇIK gradyanla tanımlıydı ve
   karanlık karşılıkları HİÇ YOKTU → açık zemin + temadan gelen açık metin, okunmuyordu. */
[data-theme="dark"] .cm-a{background:linear-gradient(135deg,#1e2749,#232e57);border-color:#3b4a86}
[data-theme="dark"] .cm-i{background:linear-gradient(135deg,#2a2411,#332c15);border-color:#7c5e1e}
[data-theme="dark"] .cm-c{border-left-color:#475569}
[data-theme="dark"] .cm-body blockquote{background:var(--bg3);color:var(--tx2);border-color:var(--bdr)}
[data-theme="dark"] .cm-body pre,[data-theme="dark"] .cm-body code{background:var(--bg3);color:var(--tx)}
[data-theme="dark"] .prop-disabled select,[data-theme="dark"] .prop-disabled input{background:var(--bg3)}
[data-theme="dark"] .badge.bg-light{background:var(--bg3)!important;color:var(--tx)!important}
[data-theme="dark"] .card{background:var(--card);border-color:var(--bdr);color:var(--tx)}
[data-theme="dark"] .list-group-item{background:var(--card);border-color:var(--bdr);color:var(--tx)}
[data-theme="dark"] hr{border-color:var(--bdr)}
[data-theme="dark"] .form-label{color:var(--tx)}
[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
[data-theme="dark"] .accordion-item{background:var(--card);border-color:var(--bdr)}
[data-theme="dark"] .accordion-button{background:var(--bg3);color:var(--tx)}
[data-theme="dark"] .pagination .page-link{background:var(--card);border-color:var(--bdr);color:var(--tx)}
[data-theme="dark"] .pagination .page-item.active .page-link{background:var(--p);border-color:var(--p)}
[data-theme="dark"] .tab-content{color:var(--tx)}
[data-theme="dark"] .toast{background:var(--card);color:var(--tx)}
/* ===== Project Flow Schema ===== */
.prj-schema-toolbar{display:flex;align-items:center;padding:8px 12px;background:var(--bg2);border:1px solid var(--bdr);border-bottom:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.prj-schema-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;background:var(--bg);border:2px dashed var(--bdr);border-radius:var(--radius-sm)}
.prj-schema{position:relative;min-height:500px;overflow:auto;background:var(--bg);border:1px solid var(--bdr);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.prj-schema svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}
.prj-schema svg path.dep-arrow{stroke:var(--p);stroke-width:2;fill:none;pointer-events:stroke;cursor:pointer;opacity:.6;transition:all .2s;stroke-linejoin:round;stroke-linecap:round}
.prj-schema svg path.dep-arrow:hover{stroke:var(--p);stroke-width:3;opacity:1}
.prj-schema svg path.dep-arrow.dep-done{stroke:#22c55e;opacity:.4}
.prj-schema svg path.dep-arrow.selected{stroke:#ef4444;stroke-width:3;opacity:1}
.prj-schema svg line.rubber-band{stroke:var(--p);stroke-width:2;stroke-dasharray:6,4}
.prj-card{position:absolute;width:190px;border-radius:var(--radius-xs);background:var(--card);border:1px solid var(--bdr);box-shadow:var(--shd);z-index:2;transition:box-shadow .15s,transform .1s}
.prj-card:hover{box-shadow:var(--shd-md);transform:translateY(-1px)}
.prj-card.selected{outline:2px solid var(--p);outline-offset:1px}
.prj-card.prj-card-done{opacity:.7}
.prj-card-hdr{padding:6px 10px;font-size:11px;font-weight:600;color:#fff;border-radius:5px 5px 0 0;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;justify-content:space-between}
.prj-card-hdr:active{cursor:grabbing}
.prj-card-body{padding:8px 10px;font-size:10px;color:var(--tx2)}
.prj-card-body .progress{height:4px;margin-bottom:3px;border-radius:2px}
.prj-card-status{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg);font-weight:600}
.prj-card-actions{position:absolute;top:4px;right:4px;display:none;gap:4px;z-index:4}
.prj-card:hover .prj-card-actions{display:flex}
.prj-card-actions i{font-size:13px;cursor:pointer;background:rgba(255,255,255,.9);border-radius:50%;padding:2px;transition:transform .15s}
.prj-card-actions i:hover{transform:scale(1.2)}
.prj-port{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--p);border:2px solid var(--card);cursor:crosshair;z-index:3;opacity:0;transition:all .15s}
.prj-card:hover .prj-port{opacity:.7}
.prj-port-out{right:-7px;top:50%;transform:translateY(-50%)}
.prj-port-in{left:-7px;top:50%;transform:translateY(-50%)}
.prj-port:hover{transform:translateY(-50%) scale(1.3);opacity:1;box-shadow:0 0 6px var(--p)}
/* Gantt status colors */
.gantt-Beklemede .bar{fill:#9ca3af !important}
.gantt-DevamEdiyor .bar{fill:#3b82f6 !important}
.gantt-Tamamlandi .bar{fill:#22c55e !important}
.gantt-IptalEdildi .bar{fill:#ef4444 !important}
.gantt .bar-label{fill:#1e293b !important;font-size:12px;font-weight:600}
.gantt .lower-text,.gantt .upper-text{fill:#475569 !important;font-size:12px}
.gantt .grid-header{fill:var(--bg2);stroke:var(--bdr)}
.gantt .grid-row{fill:var(--bg2)}
.gantt .row-line{stroke:var(--bdr)}
.gantt .tick{stroke:var(--bdr)}
.gantt .today-highlight{fill:rgba(99,102,241,.08) !important}
[data-theme="dark"] .gantt .bar-label{fill:#e2e8f0 !important}
[data-theme="dark"] .gantt .lower-text,[data-theme="dark"] .gantt .upper-text{fill:var(--tx2) !important}
[data-theme="dark"] .gantt .grid-row{fill:var(--bg)}
[data-theme="dark"] .gantt .row-line{stroke:var(--bdr)}
[data-theme="dark"] .gantt .grid-header{fill:var(--bg2);stroke:var(--bdr)}
/* Project Dashboard */
.prj-stat-card{background:var(--card);border-radius:var(--radius-sm);padding:16px;text-align:center;border:1px solid var(--bdr);border-left:3px solid var(--p)}
.prj-stat-val{font-size:28px;font-weight:800;color:var(--p);line-height:1}
.prj-stat-lbl{font-size:11px;color:var(--tx3);text-transform:uppercase;margin-top:4px}
/* Project Labels */
.prj-label{display:inline-block;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;white-space:nowrap}
.prj-label-pick{display:inline-flex;align-items:center;padding:3px 8px;border-radius:6px;font-size:11px;border:1px solid var(--bdr);cursor:pointer;transition:all .15s}
.prj-label-pick.active{font-weight:600}
.prj-label-pick:hover{opacity:.8}
/* Project Overdue */
.prj-overdue{animation:prjPulse 2s infinite}
@keyframes prjPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px rgba(239,68,68,.2)}}
@keyframes grWave{0%,100%{transform:rotate(0deg)}15%{transform:rotate(14deg)}30%{transform:rotate(-8deg)}45%{transform:rotate(14deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(10deg)}90%{transform:rotate(0deg)}}
@keyframes grPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.2)}}
@keyframes grBounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}50%{transform:translateY(0)}75%{transform:translateY(-3px)}}
@keyframes grFloat{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-4px) rotate(5deg)}50%{transform:translateY(0) rotate(0deg)}75%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes grSpin{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(15deg) scale(1.1)}50%{transform:rotate(0deg) scale(1)}75%{transform:rotate(-10deg) scale(1.05)}100%{transform:rotate(0deg) scale(1)}}
@keyframes grSteam{0%,100%{opacity:.6;transform:translateY(0) scale(1)}50%{opacity:1;transform:translateY(-3px) scale(1.08)}}
@keyframes grFlash{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}
.gr-wave{display:inline-block;animation:grWave 2s ease-in-out infinite;transform-origin:70% 70%}
.gr-pulse{display:inline-block;animation:grPulse 2.5s ease-in-out infinite}
.gr-bounce{display:inline-block;animation:grBounce 1.5s ease-in-out infinite}
.gr-float{display:inline-block;animation:grFloat 3s ease-in-out infinite}
.gr-spin{display:inline-block;animation:grSpin 2s ease-in-out infinite}
.gr-steam{display:inline-block;animation:grSteam 2s ease-in-out infinite}
.gr-flash{display:inline-block;animation:grFlash 1s ease-in-out infinite}

/* ===== Dark Mode Systemic Overrides ===== */
[data-theme="dark"] .text-dark,
[data-theme="dark"] .badge.bg-info,
[data-theme="dark"] .badge.bg-warning,
[data-theme="dark"] .badge.bg-light{color:var(--tx)!important}
[data-theme="dark"] .text-muted{color:var(--tx2)!important}

[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled,
[data-theme="dark"] textarea:disabled,
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled{background:var(--bg3)!important;color:var(--tx2)!important;opacity:.65;border-color:var(--bdr)!important}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-info-subtle,
[data-theme="dark"] .bg-warning-subtle,
[data-theme="dark"] .bg-success-subtle,
[data-theme="dark"] .bg-danger-subtle,
[data-theme="dark"] .bg-primary-subtle,
[data-theme="dark"] .bg-secondary-subtle{background:var(--bg3)!important;color:var(--tx)!important;border-color:var(--bdr)!important}

[data-theme="dark"] mark{background:var(--p);color:#fff;padding:0 3px;border-radius:3px}

[data-theme="dark"] code{background:var(--bg3);color:var(--tx);padding:2px 5px;border-radius:4px}
/* Talep numarası: rengi inline var(--p) idi ve --p karanlık temada DEĞİŞMİYOR; koyu satır
   zemininde indigo sönük kalıp okunmuyordu. Sınıfa alındı, karanlıkta açık mavi. */
.tno{color:var(--p)}
[data-theme="dark"] .tno{color:#93c5fd!important}
[data-theme="dark"] pre{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr);border-radius:6px}

[data-theme="dark"] .table{color:var(--tx);border-color:var(--bdr)}
[data-theme="dark"] .table>:not(caption)>*>*{background:transparent;color:var(--tx);border-color:var(--bdr2)}
[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{background:var(--bg)!important;color:var(--tx)!important}
[data-theme="dark"] .table-hover>tbody>tr:hover>*{background:var(--hover)!important;color:var(--tx)!important}

[data-theme="dark"] .alert{background:var(--bg3);color:var(--tx);border-color:var(--bdr)}
[data-theme="dark"] .alert-info,
[data-theme="dark"] .alert-warning,
[data-theme="dark"] .alert-success,
[data-theme="dark"] .alert-danger,
[data-theme="dark"] .alert-primary{background:var(--bg3);border-color:var(--bdr)}

[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end{border-color:var(--bdr)!important}

[data-theme="dark"] .list-group-item{background:var(--card);color:var(--tx);border-color:var(--bdr)}

[data-theme="dark"] .dropdown-menu{background:var(--card);border-color:var(--bdr);color:var(--tx)}
[data-theme="dark"] .dropdown-item{color:var(--tx)}
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus{background:var(--hover);color:var(--tx)}
[data-theme="dark"] .dropdown-divider{border-color:var(--bdr)}

[data-theme="dark"] .form-check-input:not(:checked){background-color:var(--inp);border-color:var(--bdr)}

[data-theme="dark"] .nav-tabs{border-color:var(--bdr)}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--tx2);background:transparent;border-color:transparent}
[data-theme="dark"] .nav-tabs .nav-link:hover{border-color:var(--bdr) var(--bdr) transparent;color:var(--tx)}
[data-theme="dark"] .nav-tabs .nav-link.active{background:var(--card);color:var(--tx);border-color:var(--bdr) var(--bdr) var(--card)}

[data-theme="dark"] .tag{background:color-mix(in srgb,var(--p) 18%,var(--bg3));color:var(--pl);border-color:color-mix(in srgb,var(--p) 30%,var(--bdr))}

.qnote{background:var(--qn-color);border:1px solid rgba(0,0,0,.08);color:#1f2937}
.qnote .qnote-text{color:#1f2937}
.qnote .qnote-meta{color:#6b7280}
.qnote .qnote-btn{color:#4b5563}
[data-theme="dark"] .qnote{background:color-mix(in srgb,var(--qn-color) 25%,var(--card));border-color:color-mix(in srgb,var(--qn-color) 40%,var(--bdr));color:var(--tx)}
[data-theme="dark"] .qnote .qnote-text{color:var(--tx)}
[data-theme="dark"] .qnote .qnote-meta{color:var(--tx2)}
[data-theme="dark"] .qnote .qnote-btn{color:var(--tx2)}

.session-current{background:#ecfdf5;border-radius:6px;padding:6px 8px;border:1px solid #a7f3d0}
[data-theme="dark"] .session-current{background:color-mix(in srgb,#22c55e 12%,var(--card));border-color:color-mix(in srgb,#22c55e 30%,var(--bdr));color:var(--tx)}

.bulk-bar{background:#eef2ff;border:1px solid #c7d2fe;border-radius:8px;padding:6px 10px;margin-bottom:6px;font-size:13px}
.bulk-bar .bulk-count{color:var(--p)}
[data-theme="dark"] .bulk-bar{background:color-mix(in srgb,var(--p) 15%,var(--card));border-color:color-mix(in srgb,var(--p) 30%,var(--bdr))}
[data-theme="dark"] .bulk-bar .bulk-count{color:var(--pl)}

/* ===== Müşteri Portalı (Customer Portal) ===== */
[data-portal="true"]{--p:#0ea5e9;--pd:#0284c7;--pl:#7dd3fc}
[data-portal="true"] .portal-shell{min-height:100vh;background:var(--bg)}
[data-portal="true"] .portal-header{background:var(--bg2);border-bottom:1px solid var(--bdr);position:sticky;top:0;z-index:100;box-shadow:0 1px 3px rgba(0,0,0,.04)}
[data-portal="true"] .portal-header-inner{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
[data-portal="true"] .portal-nav{display:flex;gap:4px}
[data-portal="true"] .portal-nav-item{padding:8px 16px;font-size:14px;color:var(--tx2);text-decoration:none;border-radius:8px;transition:var(--transition);font-weight:500}
[data-portal="true"] .portal-nav-item:hover{background:var(--hover);color:var(--tx)}
[data-portal="true"] .portal-nav-item.active{background:color-mix(in srgb,var(--p) 12%,var(--card));color:var(--p);font-weight:600}
[data-portal="true"] .portal-main{max-width:1100px;margin:0 auto;padding:24px 20px}
[data-portal="true"] .pg{padding:0}
[data-portal="true"] .portal-welcome{background:linear-gradient(135deg,color-mix(in srgb,var(--p) 6%,var(--card)),color-mix(in srgb,var(--pl) 4%,var(--card)));border:1px solid color-mix(in srgb,var(--p) 15%,var(--bdr));border-radius:var(--radius);padding:24px 28px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
[data-portal="true"] .btn-portal-primary{background:var(--p);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:var(--transition);font-size:14px}
[data-portal="true"] .btn-portal-primary:hover{background:var(--pd);color:#fff}
[data-portal="true"] .btn-portal-primary.btn-lg{padding:12px 28px;font-size:15px}
[data-portal="true"] .portal-ticket-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bdr2);cursor:pointer;transition:var(--transition)}
[data-portal="true"] .portal-ticket-row:hover{background:var(--hover)}
[data-portal="true"] .portal-ticket-row:last-child{border-bottom:none}
[data-portal="true"] .portal-comment{padding:14px 16px;border-radius:10px;margin-bottom:12px;background:var(--bg3);border:1px solid var(--bdr)}
[data-portal="true"] .portal-comment.mine{background:color-mix(in srgb,var(--p) 6%,var(--card));border-color:color-mix(in srgb,var(--p) 25%,var(--bdr))}
[data-portal="true"] .portal-comment-meta{font-size:12px;color:var(--tx2);margin-bottom:6px}
[data-portal="true"] .portal-comment-body{font-size:14px;line-height:1.6}
[data-portal="true"] .portal-ticket-body{font-size:14px;line-height:1.6}
[data-portal="true"] body{font-size:14px}

[data-portal="true"] .portal-att-item{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--bdr);background:var(--card);border-radius:8px;cursor:pointer;transition:var(--transition);min-width:200px;max-width:100%}
[data-portal="true"] .portal-att-item:hover{border-color:var(--p);background:var(--hover);transform:translateY(-1px)}
[data-portal="true"] .portal-att-meta{flex:1;min-width:0}
[data-portal="true"] .portal-att-name{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
[data-portal="true"] .portal-att-size{font-size:11px;color:var(--tx3)}

/* Admin yorum reaksiyonları */
.cm-rx{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;position:relative}
.adm-rx-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg3);border:1px solid var(--bdr);border-radius:14px;cursor:pointer;font-size:12px;transition:var(--transition);color:var(--tx)}
.adm-rx-chip:hover{border-color:var(--p);background:var(--hover);transform:translateY(-1px)}
.adm-rx-chip.mine{background:rgba(99,102,241,.12);border-color:var(--p);color:var(--p);font-weight:600}
.adm-rx-emoji{font-size:14px;line-height:1}
.adm-rx-count{font-size:11px;font-weight:600}
.adm-rx-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:1px dashed var(--bdr);border-radius:14px;cursor:pointer;color:var(--tx3);transition:var(--transition);font-size:12px}
.adm-rx-add:hover{border-color:var(--p);color:var(--p);background:var(--hover)}
.adm-rx-picker{position:absolute;bottom:34px;right:0;background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:flex;gap:4px;z-index:10}
.adm-rx-picker button{background:transparent;border:none;padding:4px 8px;font-size:18px;cursor:pointer;border-radius:6px;line-height:1;transition:var(--transition)}
.adm-rx-picker button:hover{background:var(--hover);transform:scale(1.2)}

/* Portal yorum reaksiyonları */
.portal-comment-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center;position:relative}
.portal-rx-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;background:var(--bg3);border:1px solid var(--bdr);border-radius:14px;cursor:pointer;font-size:12px;transition:var(--transition);color:var(--tx)}
.portal-rx-chip:hover{border-color:var(--p);background:var(--hover);transform:translateY(-1px)}
.portal-rx-chip.mine{background:rgba(14,165,233,.12);border-color:var(--p);color:var(--p);font-weight:600}
.portal-rx-emoji{font-size:14px;line-height:1}
.portal-rx-count{font-size:11px;font-weight:600}
.portal-rx-add{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:1px dashed var(--bdr);border-radius:14px;cursor:pointer;color:var(--tx3);transition:var(--transition);font-size:12px}
.portal-rx-add:hover{border-color:var(--p);color:var(--p);background:var(--hover)}
.portal-rx-picker{position:absolute;bottom:34px;right:0;background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,.15);display:flex;gap:4px;z-index:10}
.portal-rx-picker button{background:transparent;border:none;padding:4px 8px;font-size:18px;cursor:pointer;border-radius:6px;line-height:1;transition:var(--transition)}
.portal-rx-picker button:hover{background:var(--hover);transform:scale(1.2)}

/* Portal CSAT widget */
.portal-csat-btn{flex:1;max-width:120px;padding:12px 8px;background:var(--card);border:2px solid var(--bdr);border-radius:10px;cursor:pointer;transition:var(--transition);color:var(--tx)}
.portal-csat-btn:hover{border-color:var(--p);background:var(--hover);transform:translateY(-2px)}
.portal-csat-btn.active{border-color:var(--p);background:rgba(14,165,233,.12);box-shadow:0 4px 12px rgba(14,165,233,.25)}
.portal-csat-btn[data-score="1"].active{border-color:#ef4444;background:rgba(239,68,68,.1);box-shadow:0 4px 12px rgba(239,68,68,.25)}
.portal-csat-btn[data-score="2"].active{border-color:#f59e0b;background:rgba(245,158,11,.1);box-shadow:0 4px 12px rgba(245,158,11,.25)}
.portal-csat-btn[data-score="3"].active{border-color:#16a34a;background:rgba(22,163,74,.1);box-shadow:0 4px 12px rgba(22,163,74,.25)}

/* Portal-setup sayfası (login öncesi davet linki) */
.setup-page-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0c4a6e,#0e7490);padding:20px}
.setup-card{max-width:440px;width:100%;background:var(--card);border-radius:16px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
[data-theme="dark"] .setup-card{background:var(--bg2)}

/* ===== BİLDİRİM MERKEZİ — tam sayfa ===== */
.ntf-page-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ntf-search{position:relative;flex:1;min-width:200px}
.ntf-search>i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);font-size:14px;pointer-events:none}
.ntf-search input{width:100%;padding:8px 12px 8px 32px;border:1px solid var(--bdr);border-radius:8px;background:var(--card);color:var(--tx);font-size:13px;transition:border-color .2s,box-shadow .2s}
.ntf-search input:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent)}

.ntf-cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.ntf-cat-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--bdr);border-radius:18px;background:var(--card);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;color:inherit}
.ntf-cat-chip:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.ntf-cat-chip.active{box-shadow:0 2px 8px rgba(0,0,0,.15)}
.ntf-cat-chip .bi{font-size:13px}
.ntf-cat-count{display:inline-block;min-width:20px;text-align:center;padding:1px 6px;background:rgba(0,0,0,.08);color:inherit;border-radius:10px;font-size:11px;font-weight:700}
.ntf-cat-chip.active .ntf-cat-count{background:rgba(255,255,255,.25)}

.ntf-bulk-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:color-mix(in srgb,var(--p) 8%,var(--card));border:1px solid color-mix(in srgb,var(--p) 30%,transparent);border-radius:10px;margin-bottom:12px;position:sticky;top:0;z-index:5}
.ntf-bulk-info{font-size:13px;color:var(--p);font-weight:600}

.ntf-page-list{display:flex;flex-direction:column;gap:6px}
.ntf-row{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--card);border:1px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .15s;position:relative}
.ntf-row:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ntf-row.unread{background:color-mix(in srgb,var(--p) 4%,var(--card));border-color:color-mix(in srgb,var(--p) 25%,var(--bdr))}
.ntf-row-check{display:flex;align-items:center;padding:4px 0}
.ntf-row-check input{cursor:pointer;width:16px;height:16px;accent-color:var(--p)}
.ntf-row-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.ntf-row-body{flex:1;min-width:0}
.ntf-row-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px}
.ntf-row-title{font-size:14px;font-weight:600;color:var(--tx)}
.ntf-row-msg{font-size:13px;color:var(--tx2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.ntf-row-meta{font-size:11px;color:var(--tx3);margin-top:4px}
.ntf-row-meta .bi{font-size:11px}
.ntf-row-dot{width:8px;height:8px;background:var(--p);border-radius:50%;flex-shrink:0;margin-left:auto}
.ntf-type-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600;white-space:nowrap}
.ntf-row-actions{display:flex;gap:4px;flex-shrink:0;opacity:0;transition:opacity .15s}
.ntf-row:hover .ntf-row-actions{opacity:1}
.ntf-row-act{background:transparent;border:1px solid var(--bdr);border-radius:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);font-size:13px;transition:all .15s;padding:0}
.ntf-row-act:hover{background:var(--hover);color:var(--p);border-color:var(--p)}

/* ===== BELL PANEL — kategori chip bar + tip badge ===== */
.ntf-panel-cats::-webkit-scrollbar{height:4px}
.ntf-panel-cats::-webkit-scrollbar-thumb{background:var(--bdr);border-radius:2px}
.ntf-pcat{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid;border-radius:14px;background:var(--card);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s;font-weight:600;flex-shrink:0}
.ntf-pcat:hover{transform:translateY(-1px)}
.ntf-pcat .bi{font-size:11px}
.ntf-pcat-cnt{background:rgba(0,0,0,.1);padding:0 5px;border-radius:8px;font-size:10px;line-height:1.5;font-weight:700}
.ntf-pcat.active .ntf-pcat-cnt{background:rgba(255,255,255,.3)}
.ntf-row-btn{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:5px}
.ntf-row-btn:hover{background:var(--hover);color:var(--p)!important}
.ntf-panel-footer a:hover{text-decoration:underline!important}

/* ===== PUSH PROMPT BANNER (panel içi) ===== */
.ntf-push-banner{margin:10px 12px 0;padding:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 12%,var(--card)),color-mix(in srgb,var(--p) 6%,var(--card)));border:1px solid color-mix(in srgb,var(--p) 30%,transparent);border-radius:10px}
.ntf-push-banner-inner{display:flex;align-items:flex-start;gap:10px}
.ntf-push-icon{width:36px;height:36px;background:var(--p);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:pulseDot 2s infinite}
.ntf-push-text{flex:1;min-width:0}
.ntf-push-title{font-size:13px;font-weight:700;color:var(--tx);margin-bottom:2px}
.ntf-push-msg{font-size:12px;color:var(--tx2);line-height:1.4}

/* ===== MOBILE BOTTOM-SHEET (bell + takım sohbeti panelleri < 600px) ===== */
@media (max-width:600px){
  #ntfPanel,#tcQuickPanel{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;max-width:none!important;max-height:80vh!important;border-radius:16px 16px 0 0!important;border:none!important;box-shadow:0 -8px 32px rgba(0,0,0,.25)!important;animation:ntfSheetSlide .25s ease-out}
  #ntfPanel::before,#tcQuickPanel::before{content:'';display:block;width:40px;height:4px;background:var(--bdr);border-radius:2px;margin:8px auto -4px}
  .ntf-page-toolbar{flex-direction:column;align-items:stretch}
  .ntf-search{min-width:0}
  .ntf-row-actions{opacity:1}
  .ntf-bulk-bar{position:fixed;bottom:0;left:0;right:0;border-radius:0;margin:0;z-index:200;box-shadow:0 -4px 12px rgba(0,0,0,.15)}
}
@keyframes ntfSheetSlide{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* Dark mode tweaks */
[data-theme="dark"] .ntf-cat-count{background:rgba(255,255,255,.08)}
[data-theme="dark"] .ntf-pcat-cnt{background:rgba(255,255,255,.1)}

/* ===== YÖNETİM WIDGET'LARI ===== */
.mgmt-hero-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mgmt-hero-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px}
.mgmt-hero-icon{font-size:28px;flex-shrink:0}
.mgmt-hero-val{font-size:32px;font-weight:800;line-height:1.1}
.mgmt-hero-lbl{font-size:12px;color:var(--tx2);font-weight:600}
@media (max-width:768px){.mgmt-hero-grid{grid-template-columns:repeat(2,1fr)}}

/* Top/Bottom performance kartları */
.tb-card{background:var(--card);border:1px solid var(--bdr);border-radius:10px;padding:10px;height:100%}
.tb-top{border-left:4px solid #22c55e}
.tb-bot{border-left:4px solid #ef4444}
.tb-head{font-size:12px;font-weight:700;text-transform:uppercase;color:var(--tx2);letter-spacing:.5px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--bdr)}
.tb-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px dashed var(--bdr)}
.tb-row:last-child{border-bottom:none}
.tb-rank{width:32px;text-align:center;font-size:18px;flex-shrink:0}
.tb-name{flex:1;min-width:0;font-size:13px}
.tb-name>b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-sub{font-size:10px;color:var(--tx3);font-weight:500}
.tb-metric{text-align:right;font-size:15px;font-weight:800;min-width:60px}

/* Monthly Revenue */
.mr-main{padding:8px 0;text-align:center}
.mr-rev{font-size:32px;font-weight:800;color:#059669;line-height:1;letter-spacing:-.5px}
.mr-cur{font-size:20px;font-weight:700;color:#059669;opacity:.8}
.mr-sub{font-size:12px;color:var(--tx2);margin-top:4px}
.mr-stats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mr-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:600}

/* Aging Summary */
.ag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ag-cell{padding:8px;border-radius:8px;text-align:center}
.ag-cell-num{font-size:18px;font-weight:800;line-height:1}
.ag-cell-lbl{font-size:11px;font-weight:600;color:var(--tx2);margin-top:2px}
.ag-oldest{margin-top:8px;padding:8px 10px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;font-size:12px;line-height:1.4;transition:all .15s}
.ag-oldest:hover{border-color:var(--p);background:var(--hover)}
@media (max-width:768px){.ag-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== TEKLİF KANBAN PIPELINE ===== */
.prp-kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;min-height:60vh}
.prp-kn-col{flex:0 0 280px;border:1px solid var(--bdr);border-radius:10px;display:flex;flex-direction:column;max-height:75vh}
.prp-kn-col-head{padding:10px 12px;display:flex;justify-content:space-between;align-items:center;background:var(--card);border-radius:10px 10px 0 0}
.prp-kn-col-body{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:6px;min-height:60px}
.prp-kn-card{background:var(--card);border:1px solid var(--bdr);border-radius:8px;padding:8px 10px;cursor:grab;font-size:12px;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.prp-kn-card:hover{border-color:var(--p);transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1)}
.prp-kn-card:active{cursor:grabbing}
.prp-kn-head{font-size:12px;margin-bottom:2px}
.prp-kn-title{font-size:13px;font-weight:600;line-height:1.3;color:var(--tx);max-height:34px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prp-kn-co{font-size:11px}
.prp-kn-ghost{opacity:.4;background:color-mix(in srgb,var(--p) 10%,var(--card));border:2px dashed var(--p)}
@media (max-width:768px){.prp-kn-col{flex:0 0 240px}}

/* ===== TEKLİF FORM MOBİL UYUM ===== */
@media (max-width:768px){
  .prp-form-modal .modal-content{border-radius:0!important}
  .prp-form-modal .row.g-2>div,
  .prp-form-modal .row.g-3>div{margin-bottom:8px}
  .prp-form-modal .form-label{font-size:12px!important;margin-bottom:2px}
  .prp-form-modal .form-control-sm,
  .prp-form-modal .form-select-sm{font-size:14px!important;min-height:40px}
  .prp-form-modal #prpItemsTbl{font-size:11px}
  .prp-form-modal #prpItemsTbl th,
  .prp-form-modal #prpItemsTbl td{padding:4px 3px!important}
  .prp-form-modal #prpItemsTbl input{font-size:12px;min-width:50px}
  .prp-form-modal #prpItemsTbl .prp-drag-handle{display:none}
  .prp-form-modal #prpTotals .row>div{padding:4px 8px;font-size:12px}
  .prp-form-modal .ql-toolbar{flex-wrap:wrap!important}
  .prp-form-modal .modal-footer{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--bdr);z-index:2}
  .prp-form-modal .modal-footer .btn{width:100%;padding:10px}
}
@media (max-width:480px){
  .prp-form-modal #prpItemsTbl th:nth-child(3),
  .prp-form-modal #prpItemsTbl td:nth-child(3){display:none} /* Kod sütununu gizle (ad zaten unique) */
}

/* ===== SLA ESCALATION TIMELINE ===== */
.sla-timeline{margin:8px 0;padding:14px 12px;background:var(--bg);border:1px solid var(--bdr);border-radius:8px}
.sla-tl-track{position:relative;height:54px}
.sla-tl-line{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--bdr);transform:translateY(-1px)}
.sla-tl-due{position:absolute;top:8px;transform:translateX(-50%);background:#3b82f6;color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.sla-tl-due::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:14px;background:#3b82f6;transform:translateX(-50%)}
.sla-tl-mark{position:absolute;top:50%;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;cursor:help;box-shadow:0 1px 3px rgba(0,0,0,.2);z-index:1}
.sla-tl-lbl{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:600;color:var(--tx2);white-space:nowrap;background:var(--card);padding:0 3px;border-radius:3px}

/* ===== AUDIT LOG SUMMARY CARDS ===== */
.al-summary-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.al-sum-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid;background:var(--card)}
.al-sum-icon{font-size:22px;flex-shrink:0}
.al-sum-val{font-size:20px;font-weight:800;line-height:1.1}
.al-sum-lbl{font-size:11px;color:var(--tx2);font-weight:600}
@keyframes alSumPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.4)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}
@media (max-width:1200px){.al-summary-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){.al-summary-grid{grid-template-columns:repeat(2,1fr)}.al-sum-val{font-size:16px}.al-sum-icon{font-size:18px}}

/* ===== E-POSTA ŞABLONLARI: KATEGORİ AKORDION + TOOLBAR ===== */
.tpl-cat-group{border:1px solid var(--bdr);border-radius:8px;background:var(--card);padding:8px 12px}
.tpl-cat-group[open]{padding-bottom:12px}
.tpl-cat-head{cursor:pointer;font-size:13px;padding:6px 0;display:flex;align-items:center;list-style:none;user-select:none}
.tpl-cat-head::-webkit-details-marker{display:none}
.tpl-cat-head::before{content:'\f282';font-family:'bootstrap-icons';margin-right:6px;font-size:11px;color:var(--tx3);transition:transform .2s}
.tpl-cat-group[open] .tpl-cat-head::before{transform:rotate(90deg)}
.tpl-toolbar .vr{height:24px;border-left:1px solid var(--bdr);margin:0 4px}
.tpl-toolbar .btn-sm{padding:4px 10px;min-width:34px;font-size:13px}
.tpl-varref summary{outline:none}
.tpl-varref code{cursor:pointer;transition:all .15s}
.tpl-varref code:hover{background:color-mix(in srgb,var(--p) 15%,var(--card))!important;color:var(--p)}

/* ===== MÜŞTERİ PORTALI: MOBİL UYUM ===== */
/* Tüm tablet boyutlarında portal layout sıkışmasın */
@media (max-width:768px){
  [data-portal="true"] .portal-header-inner{padding:10px 14px;gap:8px}
  [data-portal="true"] .portal-main{padding:16px 14px}
  [data-portal="true"] .portal-welcome{padding:18px 20px;gap:14px}
  [data-portal="true"] .portal-welcome h2{font-size:18px!important}
  [data-portal="true"] .portal-welcome p{font-size:13px}
  [data-portal="true"] .portal-nav-mob{display:flex!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;gap:4px;padding:4px 14px 8px;border-bottom:1px solid var(--bdr)}
  [data-portal="true"] .portal-nav-mob::-webkit-scrollbar{display:none}
  [data-portal="true"] .portal-nav-mob a{flex-shrink:0;font-size:13px;padding:8px 12px;min-height:38px;display:flex;align-items:center;white-space:nowrap}
  [data-portal="true"] .portal-filter-bar{flex-wrap:wrap;gap:8px}
  [data-portal="true"] .portal-filter-bar>*{flex:1 1 calc(50% - 4px);max-width:none!important;min-width:140px}
  [data-portal="true"] .portal-filter-bar input[type=date]{width:auto!important;flex:1 1 calc(50% - 4px)}
  [data-portal="true"] .portal-ticket-row{padding:12px 14px;gap:8px}
  [data-portal="true"] .portal-ticket-row h6{font-size:14px!important}
  [data-portal="true"] .portal-att-item{min-width:0!important;width:100%;max-width:none}
  [data-portal="true"] .portal-att-name{max-width:none!important;white-space:normal!important;word-break:break-word}
  [data-portal="true"] .portal-comment{padding:12px 14px}
  [data-portal="true"] .btn-portal-primary{padding:11px 22px;min-height:44px;font-size:14px}
  [data-portal="true"] #ntfWrap>button,
  [data-portal="true"] .portal-header .btn-link{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:600px){
  [data-portal="true"] .portal-header-inner{flex-wrap:wrap}
  [data-portal="true"] .portal-welcome{flex-direction:column;align-items:flex-start;text-align:left}
  [data-portal="true"] .portal-welcome>*:last-child{align-self:stretch}
  [data-portal="true"] .row.g-2,
  [data-portal="true"] .row.g-3{margin:0}
  [data-portal="true"] .row .col-md-6{padding-left:0;padding-right:0;margin-bottom:8px}
  [data-portal="true"] .portal-csat-btn{max-width:none!important}
  [data-portal="true"] .ql-toolbar{flex-wrap:wrap!important}
}
@media (max-width:480px){
  [data-portal="true"] .portal-main{padding:12px 12px}
  [data-portal="true"] .portal-welcome{padding:14px 16px}
  [data-portal="true"] .portal-ticket-row{flex-direction:column;align-items:flex-start}
  [data-portal="true"] .portal-nav-mob{padding:4px 12px 6px}
  [data-portal="true"] .btn-sm{padding:8px 12px;min-height:38px;font-size:13px}
}

/* ===== SİSTEM SAĞLIĞI: mobil pre/code wrap düzeltme ===== */
@media (max-width:600px){
  .modal pre{white-space:pre-wrap!important;word-break:break-word!important;font-size:11px!important;max-width:100%}
  .modal code{word-break:break-word}
  .modal-body table{display:block;overflow-x:auto;font-size:11px}
}

/* ===== KARANLIK MOD: HARDCODED TINT ARKA PLAN ADAPTASYONLARI =====
   Inline style="background:#XXX" ile yazılmış tint kutular için dark mode override.
   !important ile inline style geçilir. Görseller eşdeğer "tint" hissini korurken karanlık temaya uyum sağlar. */
[data-theme="dark"] [style*="background:#fee2e2"],
[data-theme="dark"] [style*="background: #fee2e2"],
[data-theme="dark"] [style*="background:#fef2f2"],
[data-theme="dark"] [style*="background: #fef2f2"]{background:rgba(239,68,68,.18)!important;color:#fca5a5!important;border-color:rgba(239,68,68,.3)!important}
[data-theme="dark"] [style*="background:#fef9c3"],
[data-theme="dark"] [style*="background: #fef9c3"],
[data-theme="dark"] [style*="background:#fffbeb"],
[data-theme="dark"] [style*="background: #fffbeb"],
[data-theme="dark"] [style*="background:#fef3c7"],
[data-theme="dark"] [style*="background: #fef3c7"]{background:rgba(245,158,11,.15)!important;color:#fcd34d!important;border-color:rgba(245,158,11,.3)!important}
[data-theme="dark"] [style*="background:#dcfce7"],
[data-theme="dark"] [style*="background: #dcfce7"],
[data-theme="dark"] [style*="background:#ecfdf5"],
[data-theme="dark"] [style*="background: #ecfdf5"]{background:rgba(34,197,94,.15)!important;color:#86efac!important;border-color:rgba(34,197,94,.3)!important}
[data-theme="dark"] [style*="background:#eef2ff"],
[data-theme="dark"] [style*="background: #eef2ff"],
[data-theme="dark"] [style*="background:#eff6ff"],
[data-theme="dark"] [style*="background: #eff6ff"]{background:rgba(99,102,241,.15)!important;color:#a5b4fc!important;border-color:rgba(99,102,241,.3)!important}
[data-theme="dark"] [style*="background:#fff7ed"],
[data-theme="dark"] [style*="background: #fff7ed"],
[data-theme="dark"] [style*="background:#ffedd5"],
[data-theme="dark"] [style*="background: #ffedd5"]{background:rgba(249,115,22,.15)!important;color:#fdba74!important;border-color:rgba(249,115,22,.3)!important}
[data-theme="dark"] [style*="background:#ecfeff"],
[data-theme="dark"] [style*="background:#cffafe"]{background:rgba(6,182,212,.15)!important;color:#67e8f9!important;border-color:rgba(6,182,212,.3)!important}
[data-theme="dark"] [style*="background:#f1f5f9"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background:#f9fafb"]{background:var(--bg3)!important}
[data-theme="dark"] [style*="background:#ecfccb"]{background:rgba(132,204,22,.15)!important;color:#bef264!important;border-color:rgba(132,204,22,.3)!important}
/* Hex shorthand içeren özel durumlar: text rengi açık olanlarda override edilen color'a karşı bazı içerik color'larını koruma */
[data-theme="dark"] [style*="background:#fee2e2"] b,
[data-theme="dark"] [style*="background:#fef2f2"] b,
[data-theme="dark"] [style*="background:#fef9c3"] b,
[data-theme="dark"] [style*="background:#dcfce7"] b{color:inherit!important}

/* WhatsApp panel — sayfa scroll'unu kapat, .main flex chain ile viewport içine sığdır.
   .pg flex column olur, wa-page flex:1 ile kalan tüm boşluğu doldurur.
   (Eskiden buraya breadcrumb'ı gizleyen bir kural da vardı; breadcrumb 2026-08-14'te kalktı.) */
body:has(.wa-page) { overflow: hidden !important; }
.main:has(.wa-page) {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  /* dvh: mobil URL bar/klavye açıkken kompozer görünür kalsın (100vh görünenden büyük olabiliyor) */
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.main:has(.wa-page) .top-bar { flex-shrink: 0; position: relative; }
.main:has(.wa-page) > footer { flex-shrink: 0; }
.pg:has(.wa-page) {
  padding: 0 !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Breadcrumb wa-page üstüne gereksiz — gizle, dikey alanı geri kazan */
.pg .wa-page {
  flex: 1 1 0 !important;
  height: auto !important;
  max-height: 100% !important;
  min-height: 0 !important;
}

/* Sağ detay paneli collapse — konuşma alanı genişler */
.wa-page.wa-detail-collapsed .wa-detail-pane { display: none !important; }

/* WhatsApp panel — mobile responsive: 768px altında konuşma açılınca sol liste gizlenir,
   geri butonu ile listeye dön */
.wa-page .wa-mobile-back { display: none; }
@media (max-width: 768px) {
  /* !important ŞART: pane'ler inline style="display:flex;width:340px" taşıyor — important'sız
     bu kurallar hiç uygulanmıyordu, mobilde iki pane yan yana render olup konuşma ekran dışına taşıyordu. */
  .wa-page .wa-list-pane { width: 100% !important; min-width: 0 !important; }
  .wa-page .wa-conv-pane { display: none !important; }
  .wa-page .wa-detail-pane { display: none !important; }
  .wa-page.wa-conv-active .wa-list-pane { display: none !important; }
  .wa-page.wa-conv-active .wa-conv-pane { display: flex !important; flex: 1 1 auto !important; width: 100% !important; }
  .wa-page.wa-conv-active .wa-mobile-back { display: inline-flex !important; }
}

/* Pastel bilgi kutuları: renk --wa-tint'te; karanlık temada kural değişkeni yok sayıp koyu yüzeye
   geçer (inline pastel zemin karanlıkta gözü alıyordu). */
/* Tepki seçici hapı — zemini inline'dan alındı, sınıfın CSS tanımı yoktu (şeffaf kalırdı). */
.wa-reaction-popup { background: #fff; }
[data-theme="dark"] .wa-reaction-popup { background: #233138; }
.wa-tintbox { background: var(--wa-tint, #f8fafc); }
[data-theme="dark"] .wa-tintbox { background: #1f2c33; border-color: #2a3942 !important; }
/* Dahili not balonu: açık temada amber kalır, karanlıkta koyu amber + açık metin
   (yoksa açık metin amber zemine biniyordu). */
[data-theme="dark"] .wa-bubble-internal { background: #3b2f0b !important; color: #fde68a; }
/* İç etiket/meta renkleri de inline (#92400e koyu amber) — koyu amber zeminde okunmuyordu.
   Stylesheet'teki !important inline'ı ezebilen tek yol. */
[data-theme="dark"] .wa-bubble-internal div { color: #fde68a !important; }

/* ===== WhatsApp / AI ayar kartları =====
   Bu iki sınıfın CSS tanımı YOKTU: zemin ve kenarlık her kartta inline yazılıydı (background:#fff).
   Inline stil tema kuralıyla ezilemediği için KARANLIK TEMADA 70 KART DA BEYAZ kalıyordu ve
   üzerlerindeki açık gri metin okunmuyordu (ölçülen kontrast 1.23 — beyaz üstüne beyaz).
   Çözüm: renk artık --wa-tint / --wa-bd değişkenlerinde. Açık temada pastel vurgular korunur,
   karanlık temada aşağıdaki kural değişkeni yok sayıp koyu yüzeye geçer.
   NOT: kartlardaki `border-left:4px solid <renk>` vurguları inline kaldı — inline olduğu için
   karanlıkta da kendi rengini korur, bu bilinçli. */
.wa-card, .ai-card {
  background: var(--wa-tint, #fff);
  border: 1px solid var(--wa-bd, #e2e8f0);
  border-radius: 8px;
}
[data-theme="dark"] .wa-card, [data-theme="dark"] .ai-card {
  background: #202c33;
  border-color: #2a3942;
}
/* Kart içindeki ikincil metinler karanlıkta okunur kalsın */
[data-theme="dark"] .wa-card .text-muted, [data-theme="dark"] .ai-card .text-muted { color: #aebac1 !important; }

/* ===== "AI ile Sor" bandı — TEK KAYNAK =====
   Raporlar/Yardım/Bilgi Bankası'ndaki AI soru alanları farklı farklı stillendirilmişti
   (biri soft mor gradyan, biri indigo, biri canlı mor-mavi + beyaz yazı). Artık hepsi bu
   sınıfı kullanıyor; .tint-card mekanizmasına palet veriyor, iki temada da aynı görünüyor.
   Yeni bir AI Sor alanı eklerken: class="card-s tint-card ai-ask". */
.ai-ask {
  --tint: linear-gradient(135deg,#faf5ff 0%,#fdf2f8 100%);
  --tint-dk: #211a33;
  --tint-fg: #e9d5ff;
  --tint-bd: #5b3fa0;
  border: 1px solid #e9d5ff;
}
/* Form öğeleri ton kuralının dışında kalmalı — yoksa girilen metin ve düğme yazısı
   ton rengine boyanıp okunmaz oluyordu. */
[data-theme="dark"] .ai-ask input,
[data-theme="dark"] .ai-ask textarea,
[data-theme="dark"] .ai-ask select { color: var(--tx) !important; }
.ai-ask .ai-ask-title { color: #7e22ce; font-weight: 700; font-size: 13px; }
[data-theme="dark"] .ai-ask .ai-ask-title { color: #d8b4fe !important; }

/* ── AI'a Sor — sohbet penceresi ─────────────────────────────────────────────
   Tek atislik "kutu + altinda cevap" duzeninden konusma duzenine gecildi.
   Renkler TOKEN uzerinden: karanlik temada da calismasi icin sabit hex yok
   (ai-ask'in mor tonu disinda; o zaten iki temada da tanimli). */
.ai-thread {
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px 2px;
}
.ai-msg { display: flex; gap: 8px; align-items: flex-start; }
.ai-msg.me { flex-direction: row-reverse; }
.ai-msg .ai-av {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; background: var(--bg3); color: var(--tx2);
}
.ai-msg.ai .ai-av { background: #f3e8ff; color: #7e22ce; }
[data-theme="dark"] .ai-msg.ai .ai-av { background: #3b2b5c; color: #d8b4fe; }
.ai-bubble {
  max-width: 82%; padding: 8px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: var(--card); border: 1px solid var(--bdr); color: var(--tx);
}
.ai-msg.me .ai-bubble {
  background: var(--p); border-color: var(--p); color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg.ai .ai-bubble { border-bottom-left-radius: 4px; }

/* Bos durum: kullanicinin ne sorabilecegini GORMESI icin. Urunde 45 AI yetenegi
   var ve cogu kullanici birkacini biliyor; asil sorun kesfedilebilirlik. */
.ai-hero { text-align: center; padding: 10px 4px 6px; }
.ai-hero-ico {
  width: 44px; height: 44px; margin: 0 auto; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #f3e8ff; color: #7e22ce; font-size: 21px;
}
[data-theme="dark"] .ai-hero-ico { background: #3b2b5c; color: #d8b4fe; }
.ai-sug {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; margin-top: 6px; text-align: left;
  border: 1px solid var(--bdr); border-radius: 10px;
  background: var(--card); color: var(--tx);
  font-size: 12.5px; line-height: 1.4; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  min-height: 38px;                      /* dokunma hedefi */
}
.ai-sug:hover { border-color: var(--p); background: var(--hover); }
.ai-sug i { color: var(--p); flex: 0 0 auto; }
.ai-note { font-size: 10.5px; color: var(--tx3, var(--tx2)); text-align: center; margin-top: 7px; }

/* "Yeni veri var" şeridi — liste ekranlarında otomatik yenileme yerine.
   Sayfayı kullanıcının altından çekmemek için tazeleme KARARINI kullanıcıya bırakır. */
.data-refresh-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 8px 12px;
  font-size: 13px; color: var(--tx);
  background: var(--bg3); border: 1px solid var(--bdr); border-left: 3px solid var(--p);
  border-radius: var(--radius-sm);
}
.data-refresh-banner i { color: var(--p); }
.data-refresh-banner .btn { font-size: 12px; padding: 3px 12px; min-height: 30px; }
.data-refresh-banner .btn-link { color: var(--tx2); text-decoration: none; }
.data-refresh-banner .btn-link:hover { color: var(--tx); }

/* AI rapor tablosunda tıklanabilir hücre (talep no / firma adı).
   Düz metinden ayırt edilebilmeli ama tabloyu mavi bir duvara çevirmemeli:
   noktalı alt çizgi + normal metin rengi, üzerine gelince ana renk. */
/* Aday hucre: cozumleme bitene kadar DUZ METIN gorunur. Ayri bir stili yok —
   kullanici bir sey bekliyormus hissine kapilmasin; acilabilenler linke donusur. */
.rai-cand { }
.rai-link { color: inherit; text-decoration: underline dotted var(--tx3); text-underline-offset: 3px; cursor: pointer; }
.rai-link:hover { color: var(--p); text-decoration-color: var(--p); }
.rai-link:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; border-radius: 3px; }

/* ═══ YARDIM MERKEZİ DÜZENİ ═══════════════════════════════════════════════
   Solda kılavuz gezinme (kendi aramasıyla), ortada doküman, sağda KATLANABİLİR
   sohbet. Eskiden AI kutusu sayfanın ilk ~450 pikselini kaplıyor ve dokümantasyon
   katlamanın altında kalıyordu.

   ⚠ MEDYA sorgusu kullanılıyor, konteyner sorgusu DEĞİL. `container-type` layout
   containment getiriyor ve bu, içindeki `position:fixed` öğeleri de o kutuya
   bağlıyor — yani mobil sohbet ekrana değil kutuya yapışırdı. */
.help-wrap { position: relative; }
.help-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

/* Sohbeti aç/kapat — katlanabilir düzenin tek kumandası. Her zaman görünür,
   böylece "AI nereye gitti?" sorusu doğmuyor. */
.help-ai-toggle {
  display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; min-height: 38px;
  border: 1px solid #e9d5ff; border-radius: 99px; cursor: pointer;
  background: #faf5ff; color: #7e22ce;
  transition: border-color var(--transition), background var(--transition);
}
/* Renkler .ai-ask ile AYNI kaynaktan: tint #faf5ff / kenar #e9d5ff / yazi #7e22ce,
   karanlikta #211a33 / #5b3fa0 / #d8b4fe. Ayri bir palet uydurmak iki tema arasinda
   ayrisma demekti. */
[data-theme="dark"] .help-ai-toggle { background: #211a33; border-color: #5b3fa0; color: #d8b4fe; }
.help-ai-toggle:hover { border-color: var(--p); }
.help-wrap.chat-open .help-ai-toggle {
  background: linear-gradient(135deg, #a855f7, var(--p)); border-color: transparent; color: #fff;
}
.help-ai-toggle .t-kapat { display: none; }
.help-wrap.chat-open .help-ai-toggle .t-kapat { display: inline; }
.help-wrap.chat-open .help-ai-toggle .t-ac { display: none; }

.help-cols { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 10px; align-items: start; }
.help-wrap.chat-open .help-cols { grid-template-columns: 236px minmax(0, 1fr) 352px; }

.help-nav-toggle { display: none; }
.help-list { max-height: 62vh; overflow-y: auto; }
.help-doc { min-height: 300px; max-height: 68vh; overflow-y: auto; }

.help-chat { display: none; }
.help-wrap.chat-open .help-chat { display: block; position: sticky; top: 8px; }
.help-chatbox { display: flex; flex-direction: column; height: min(70vh, 520px); border-radius: var(--radius); overflow: hidden; }
.help-chat-hd { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 1px solid var(--bdr); }
/* Ozgulluk BILEREK iki sinif: .ai-thread hem max-height:340px hem mobilde 46vh yaziyor ve
   o kurallar dosyada DAHA SONRA geliyor. Sohbet kutusu esneyen bir alan oldugu icin sabit
   yukseklik burada iptal edilmeli; tek sinifla yazsaydim mobilde 46vh geri gelirdi. */
.help-chatbox .help-chat-bd { flex: 1; overflow-y: auto; padding: 12px; max-height: none; }
.help-chat-ft { padding: 9px 12px; border-top: 1px solid var(--bdr); }

.help-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 1300; }
.help-wrap.chat-open .help-backdrop.on { display: block; }

/* ORTA GENİŞLİK — sohbet sağa yanaşan panel olur (sayfadaki "?" çekmecesiyle aynı desen). */
@media (max-width: 1399px) {
  .help-wrap.chat-open .help-cols { grid-template-columns: 236px minmax(0, 1fr); }
  .help-wrap.chat-open .help-chat {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw);
    z-index: 1301; box-shadow: -3px 0 16px rgba(0,0,0,.2);
  }
  .help-chatbox { height: 100%; border-radius: 0; }
}

/* DAR / MOBİL — sohbet alttan açılır, konular listesi katlanır. */
@media (max-width: 768px) {
  .help-cols { grid-template-columns: 1fr; }
  .help-nav-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    font-size: 13px; font-weight: 600; color: var(--tx);
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--radius);
    padding: 10px 13px; min-height: 44px; cursor: pointer;
  }
  .help-nav-toggle .ok { margin-left: auto; transition: transform .2s; }
  .help-wrap.nav-open .help-nav-toggle .ok { transform: rotate(180deg); }
  .help-nav-panel { display: none; margin-top: 8px; }
  .help-wrap.nav-open .help-nav-panel { display: block; }
  .help-list { max-height: 42vh; }
  .help-doc { max-height: none; }

  .help-wrap.chat-open .help-chat {
    top: auto; left: 0; right: 0; width: auto; height: 78vh;
    box-shadow: 0 -6px 24px rgba(0,0,0,.22);
  }
  .help-chatbox { border-radius: 14px 14px 0 0; }
  /* Dokunma hedefleri: dar ekranda 38px yetmiyor. Girdi 14px'te KALIYOR —
     iOS 16px altındaki yazı tipinde odakta sayfayı zorla yakınlaştırır. */
  .help-chat .ai-sug { min-height: 44px; font-size: 13px; }
  .help-chat .form-control { min-height: 42px; }
  .help-chat .ai-bubble { max-width: 88%; font-size: 13px; }
}
/* Cevabin altindaki basparmak satiri. btn-light KULLANILMIYOR: Bootstrap onu sabit acik gri
   yaziyor ve karanlik temada beyaz lekeye donusuyor; renkler token uzerinden. */
.ai-oy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; min-height: 30px; padding: 2px 8px;
  border: 1px solid var(--bdr); border-radius: 8px;
  background: var(--card); color: var(--tx2);
  transition: border-color var(--transition), background var(--transition);
}
.ai-oy-btn:hover { border-color: var(--p); background: var(--hover); color: var(--tx); }
@media (max-width: 768px) { .ai-thread { max-height: 46vh } .ai-bubble { max-width: 88% } }

/* ===== SAYFALAMA ÇUBUĞU — hep görünür =====
   Sayfalama tablodan SONRA normal akışta duruyordu; ekran küçüldükçe ya da üstteki kroma
   büyüdükçe katlanmanın altına düşüyor, kullanıcı sayfa değiştirmek için ta aşağı kaydırmak
   zorunda kalıyordu. Tablo ZATEN kendi içinde kaydığı için çubuğu yapışkan yapmak yeterli:
   ekran boyutundan bağımsız olarak görünür alanın en altında kalır. */
.dt-pager {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--bg);
  padding: 8px 0 2px; margin-top: 8px;
}

/* ===== ÇEVRİMDIŞI ŞERİDİ (#offlineBar) =====
   ALTTA duruyor: üstte zaten sabit üst çubuk (--hh) ve çalışma şeridi var; oraya bir üçüncü
   şerit koymak içerik alanını daha da daraltırdı. Durum bildirimi olduğu için kalıcı —
   toast gibi kaybolmuyor (kaybolan uyarı "acaba düzeldi mi" belirsizliği bırakır).
   Tıklamayı engellememesi için pointer-events: none. */
#offlineBar {
  position: fixed; left: 0; right: 0; z-index: 1200;
  bottom: 0; padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #b45309; color: #fff; font-size: 13px; font-weight: 500;
  box-shadow: 0 -2px 8px rgba(0,0,0,.18);
  pointer-events: none;
}
#offlineBar i { font-size: 15px; }
/* Karanlik temada da ayni: uyari rengi her iki temada okunur olmali, tema degiskenine
   baglanirsa acik temada silik kaliyor. */
[data-theme="dark"] #offlineBar { background: #92400e; }

/* ===== ÇALIŞMA ŞERİDİ (#wstrip) =====
   Tasarım A — tarayıcı sekmesi: aktif sekmenin alt kenarı yok, içerikle birleşir.
   Model "Mod 1 serbest sekme, MANUEL": sekme kendiliğinden DOĞMAZ. Menü/satır tıklaması
   aktif sekmenin içinde gezinir; yeni sekme yalnız ⧉ / Ctrl+tık / orta tık / + ile açılır.
   Kill switch: Profil ve Tercihler → "Çalışma şeridi". Kapalıyken şerit hiç çizilmez.
   Tam ekran sayfalarda (WhatsApp, Takvim, Chatbot Tasarımcı, Takım Sohbeti, Portal)
   çizilmez — o sayfalar calc(100vh) ile kuruluyor, şerit yerleşimlerini taşırırdı. */
/* Şerit SAYFANIN ÜSTÜNE YAPIŞIK kalır. Yapışkan olmadığında aşağı kaydırınca sekmeler
   ekrandan çıkıyor ve kullanıcı sekme değiştirmek için önce yukarı kaydırmak zorunda
   kalıyordu — sekmenin işe yaraması için her an erişilebilir olması gerekiyor.
   top: var(--hh) → üst çubuğun (.top-bar, sticky top:0, yüksekliği --hh) hemen altı.
   z-index üst çubuğunkinden (100) KÜÇÜK: örtüşme olursa üst çubuk üstte kalmalı. */
#wstrip { display: flex; align-items: flex-end; background: var(--bg3);
  border-bottom: 1px solid var(--bdr); padding: 6px 8px 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  position: sticky; top: var(--hh); z-index: 99; }
#wstrip::-webkit-scrollbar { display: none; }
.ws-tab { display: flex; align-items: center; gap: 8px; padding: 8px 9px 8px 13px;
  font-size: 12.5px; color: var(--tx2); background: transparent;
  border: 1px solid transparent; border-bottom: none; border-radius: 9px 9px 0 0;
  white-space: nowrap; cursor: pointer; margin-bottom: -1px; max-width: 210px; flex-shrink: 0; }
.ws-tab:hover { background: rgba(127,127,127,.10); color: var(--tx); }
.ws-tab.on { background: var(--card); border-color: var(--bdr); color: var(--tx); font-weight: 600; }
.ws-tab .ws-lab { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-tab .ws-ic { font-size: 12px; opacity: .75; flex-shrink: 0; }
.ws-tab .ws-x { opacity: .45; font-size: 11px; padding: 2px 3px; border-radius: 4px; flex-shrink: 0; }
.ws-tab .ws-x:hover { opacity: 1; background: rgba(127,127,127,.22); }
/* Yazılmış yanıtı/eki olan sekme — uyarısız kapanmaz */
.ws-dirty { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
/* Arka plandaki sekmenin kaydinda yeni hareket var (mavi) — kirli isaretinden (turuncu) ayri */
.ws-new { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; }
.ws-plus { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  margin: 0 0 6px 4px; border-radius: 7px; color: var(--tx2); cursor: pointer; flex-shrink: 0; font-size: 14px; }
.ws-plus:hover { background: rgba(127,127,127,.16); color: var(--tx); }
/* Satır sonundaki "sekmede aç" — yalnız satır üzerine gelince görünür */
.ws-open { opacity: 0; font-size: 12px; color: var(--p); padding: 3px 6px;
  border-radius: 5px; cursor: pointer; white-space: nowrap; text-decoration: none; }
tr:hover .ws-open { opacity: 1; }
.ws-open:hover { background: rgba(99,102,241,.14); }
/* Klavye: hover'a bağlı olduğu için TAB ile gelen kullanıcı GÖRÜNMEZ bir durağa
   düşüyordu — odaklanınca görünür olmalı. */
.ws-open:focus-visible { opacity: 1; outline: 2px solid var(--p); outline-offset: 1px; }
/* Mobil: şerit hiç çizilmez (kullanıcı kararı) */
@media (max-width: 768px) { #wstrip { display: none !important; } }

/* ===== RENK TONLU KART (.tint-card) — genel amaçlı =====
   Sorun: raporlarda/panellerde vurgu kartlarının zemini inline pastel yazılıyordu
   (background:#f0fdf4 gibi). Inline stil tema kuralıyla ezilemediği için KARANLIK TEMADA
   ZEMİN AÇIK KALIYOR, metin ise temadan gelip açıklaşıyordu → açık üstüne açık, okunmuyordu.
   Çözüm: renk artık --tint (açık tema) ve --tint-dk / --tint-fg (karanlık) değişkenlerinde.
   İç metin renkleri de çoğu yerde inline koyu ton olduğu için karanlıkta !important ile
   ton ailesinin açık tonuna zorlanır — yoksa koyu yeşil, koyu zeminde yine okunmazdı. */
.tint-card { background: var(--tint, #f8fafc); }
[data-theme="dark"] .tint-card {
  background: var(--tint-dk, #1b2735) !important;
  border-color: var(--tint-bd, #2a3942) !important;
}
[data-theme="dark"] .tint-card,
[data-theme="dark"] .tint-card * { color: var(--tint-fg, #cbd5e1) !important; }
/* Ton içindeki bağlantı/vurgu yine ayırt edilebilsin */
[data-theme="dark"] .tint-card a { text-decoration: underline; }

/* Hazır ton paleti — kullanım: class="tint-card tint-g"
   Böylece her çağrı yerinde 4 değişkeni elle yazmaya gerek kalmıyor ve tonlar
   uygulama genelinde tek yerden ayarlanabiliyor. */
.tint-b { --tint:#eff6ff; --tint-dk:#16233d; --tint-fg:#bfdbfe; --tint-bd:#2f4a7a; }  /* mavi   */
.tint-g { --tint:#f0fdf4; --tint-dk:#12241b; --tint-fg:#a7f3d0; --tint-bd:#2f6b46; }  /* yeşil  */
.tint-a { --tint:#fffbeb; --tint-dk:#2a2010; --tint-fg:#fde68a; --tint-bd:#7c5e1e; }  /* amber  */
.tint-r { --tint:#fef2f2; --tint-dk:#2b1414; --tint-fg:#fecaca; --tint-bd:#7f3a3a; }  /* kırmızı*/
.tint-p { --tint:#faf5ff; --tint-dk:#211a33; --tint-fg:#e9d5ff; --tint-bd:#5b3fa0; }  /* mor    */
.tint-i { --tint:#eef2ff; --tint-dk:#1b2140; --tint-fg:#c7d2fe; --tint-bd:#3f4a8f; }  /* indigo */
.tint-n { --tint:#f8fafc; --tint-dk:#1b2735; --tint-fg:#cbd5e1; --tint-bd:#2a3942; }  /* nötr   */

/* Arama vurgusu (hl / _kbHighlight) — inline sarı zemin karanlıkta açık-üstüne-açıktı */
.hlx { background: #fef08a; color: #1f2937; border-radius: 2px; }
[data-theme="dark"] .hlx { background: #7c5e1e; color: #fde68a; }

/* ===== WhatsApp yüzey zeminleri =====
   ⚠️ Bunlar ESKİDEN JS'te inline style olarak gömülüydü (background:#fff / #efeae2). Inline stil
   hiçbir CSS kuralıyla ezilemediği için KARANLIK TEMADA BEYAZ kalıyordu: sol panonun boş alanı
   bembeyaz, orta panonun boş durum ekranı açık bej görünüyordu. Sınıfa taşındı; iki tema burada. */
.wa-page { background: #efeae2; }
[data-theme="dark"] .wa-page { background: #0b141a; }
.wa-list-pane { background: #fff; }
[data-theme="dark"] .wa-list-pane { background: #111b21; }
/* Konuşma seçilmemişken görünen boş durum zemini — mesaj alanıyla aynı duvar kağıdı. */
.wa-conv-pane { background: #efeae2; }
[data-theme="dark"] .wa-conv-pane { background: #0b141a; }
/* Genel amaçlı yüzeyler: arama çubuğu (kart rengi) ve şerit alanları (biraz daha koyu/nötr). */
.wa-surface { background: #fff; }
[data-theme="dark"] .wa-surface { background: #202c33; }
.wa-surface-alt { background: #f0f2f5; }
[data-theme="dark"] .wa-surface-alt { background: #1f2c33; }
[data-theme="dark"] #waTypingIndicator { color: #aebac1 !important; }

/* === WhatsApp Conversation Modern Polish === */
/* Doodle pattern background — WhatsApp benzeri (light + dark mode) */
/* Önceki nokta deseni o kadar silikti ki ekran düz bej algılanıyordu ("çok sade" geri
   bildirimi). WhatsApp Web'in doluluk hissi karalama duvar kağıdından gelir — inline SVG,
   ağ isteği yok. Aynı desen karanlık temada düşük opaklıkla beyaz çizgiye döner. */
#waMessages {
  background-color: #efeae2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23d6cec2' stroke-width='1.6' opacity='.55'%3E%3Ccircle cx='28' cy='30' r='7'/%3E%3Cpath d='M80 18l8 8m0-8l-8 8'/%3E%3Cpath d='M150 40q8-12 16 0'/%3E%3Crect x='210' y='22' width='12' height='12' rx='3'/%3E%3Cpath d='M40 105h16'/%3E%3Cpath d='M48 97v16'/%3E%3Ccircle cx='128' cy='120' r='9'/%3E%3Cpath d='M195 100l10 6-10 6z'/%3E%3Cpath d='M20 190q10-10 20 0t20 0'/%3E%3Ccircle cx='105' cy='205' r='5'/%3E%3Cpath d='M160 185l9 9m0-9l-9 9'/%3E%3Crect x='215' y='195' width='14' height='10' rx='2'/%3E%3Cpath d='M65 250q8-10 16 0'/%3E%3Ccircle cx='240' cy='250' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] #waMessages {
  background-color: #0b141a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.6' opacity='.05'%3E%3Ccircle cx='28' cy='30' r='7'/%3E%3Cpath d='M80 18l8 8m0-8l-8 8'/%3E%3Cpath d='M150 40q8-12 16 0'/%3E%3Crect x='210' y='22' width='12' height='12' rx='3'/%3E%3Cpath d='M40 105h16'/%3E%3Cpath d='M48 97v16'/%3E%3Ccircle cx='128' cy='120' r='9'/%3E%3Cpath d='M195 100l10 6-10 6z'/%3E%3Cpath d='M20 190q10-10 20 0t20 0'/%3E%3Ccircle cx='105' cy='205' r='5'/%3E%3Cpath d='M160 185l9 9m0-9l-9 9'/%3E%3Crect x='215' y='195' width='14' height='10' rx='2'/%3E%3Cpath d='M65 250q8-10 16 0'/%3E%3Ccircle cx='240' cy='250' r='6'/%3E%3C/g%3E%3C/svg%3E");
}

/* Mesaj bubble base — daha yumuşak gölge, smooth animation */
.wa-bubble {
  position: relative;
  padding: 7px 10px 5px 10px;
  border-radius: 7.5px;
  /* %70 — ama yanında eylem çubuğuna yer kalacak kadar (bkz. "MESAJ EYLEM ÇUBUĞU"). Geniş panelde %70'tir. */
  max-width: max(20%, min(70%, calc(100% - var(--wa-eylem-R, 0px))));
  margin-bottom: 2px;
  box-shadow: 0 1px 0.5px rgba(0,0,0,.13);
  word-wrap: break-word;
  animation: waBubbleIn .18s ease-out;
}
/* Mesaj metni — gerçek WhatsApp ölçüleri.
   Önceden gövde `white-space:pre-wrap` ile çiziliyordu ve body'den miras alınan
   line-height:1.6 yüzünden satırlar ~4px, boş satırlar ~22px fazla açılıyordu; balon
   WhatsApp'a göre belirgin şişkin duruyordu. Paragraf bloğunda aralık kontrol edilebiliyor. */
.wa-msg-text { font-size: 14.2px; line-height: 1.32; word-break: break-word; }
.wa-msg-text p { margin: 0; white-space: pre-wrap; }
.wa-msg-text p + p { margin-top: 8px; }   /* WhatsApp'ta paragraf arası tam boş satır değil */
.wa-msg-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em; background: rgba(0,0,0,.06); padding: 0 3px; border-radius: 3px; color: inherit;
}
.wa-msg-text code.wa-pre { display: block; padding: 6px 8px; margin: 4px 0; white-space: pre-wrap; }
@keyframes waBubbleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.wa-bubble-out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 0; }
.wa-bubble-in  { background: #ffffff; align-self: flex-start; border-top-left-radius: 0; }
[data-theme="dark"] .wa-bubble-out { background: #005c4b; color: #e9edef; }
[data-theme="dark"] .wa-bubble-in  { background: #202c33; color: #e9edef; }

/* Consecutive (grouped) bubbles — köşe yumuşatma */
.wa-bubble.wa-bubble-grouped.wa-bubble-out { border-top-right-radius: 7.5px; }
.wa-bubble.wa-bubble-grouped.wa-bubble-in  { border-top-left-radius: 7.5px; }

/* Balon kuyruğu — yalnız dizinin İLK balonunda (grouped olanda köşe zaten yuvarlak, kuyruk olmaz).
   Renk balon zemininin aynısı; karanlık temada da eşlenir. */
.wa-bubble:not(.wa-bubble-grouped)::before {
  content: ''; position: absolute; top: 0; width: 0; height: 0; border-style: solid;
}
.wa-bubble-in:not(.wa-bubble-grouped)::before {
  left: -8px; border-width: 0 8px 10px 0; border-color: transparent #ffffff transparent transparent;
}
.wa-bubble-out:not(.wa-bubble-grouped)::before {
  right: -8px; border-width: 0 0 10px 8px; border-color: transparent transparent transparent #d9fdd3;
}
[data-theme="dark"] .wa-bubble-in:not(.wa-bubble-grouped)::before  { border-right-color: #202c33; }
[data-theme="dark"] .wa-bubble-out:not(.wa-bubble-grouped)::before { border-left-color: #005c4b; }

/* Sentiment border (sol kenar şerit) */
.wa-bubble.wa-sentiment-negative { border-left: 3px solid #f59e0b; }
.wa-bubble.wa-sentiment-angry { border-left: 3px solid #dc2626; }
.wa-bubble.wa-sentiment-positive { border-left: 3px solid #10b981; }

/* Time + status footer */
.wa-bubble-meta {
  font-size: 11px;
  color: rgba(0,0,0,.45);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  line-height: 1;
}
[data-theme="dark"] .wa-bubble-meta { color: rgba(233,237,239,.55); }
.wa-tick-read { color: #53bdeb; }

/* Tarih ayraçları — sticky chip */
.wa-date-sep {
  align-self: center;
  background: rgba(225,245,254,.92);
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 14px 0 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
  position: sticky;
  top: 6px;
  z-index: 2;
}
[data-theme="dark"] .wa-date-sep { background: #1f2c33; color: #aebac1; }

/* Reply context (yanıtlanan mesaja referans) */
.wa-reply-ctx {
  background: rgba(0,0,0,.04);
  border-left: 3px solid #25d366;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: 12px;
  cursor: pointer;
}
.wa-bubble-out .wa-reply-ctx { background: rgba(0,0,0,.06); }
[data-theme="dark"] .wa-reply-ctx { background: rgba(255,255,255,.06); border-left-color: #00a884; }
.wa-reply-ctx-sender { font-weight: 600; color: #25d366; font-size: 11px; }
.wa-reply-ctx-body { color: rgba(0,0,0,.6); font-size: 12px; max-height: 32px; overflow: hidden; }
[data-theme="dark"] .wa-reply-ctx-body { color: rgba(233,237,239,.65); }

/* ===== MESAJ EYLEM ÇUBUĞU (yanıtla / tepki / ilet / düzenle / sil / çevir) =====
   Çubuk balonun DIŞINDA, yanında durur: gelen mesajda ve dahili notta balonun SAĞINDA, giden
   mesajda SOLUNDA, balonun üst hizasında (WhatsApp Web'deki tepki düğmesi gibi).
   NEDEN: eskiden balonun İÇİNDE sağ üstteydi (top/right:3px). Kısa mesajda ("1 842 345 238",
   "Tamam") balonun neredeyse tamamını örtüyordu; kopyalamak için metne basan kullanıcı çubuğun
   düğmesine basıyor, seçim HİÇ BAŞLAMIYORDU (2026-09-30 kullanıcı bildirimi). Aşağıdaki "seçim
   sırasında gizle" kuralı bunu çözemiyordu: gizleme ancak seçim başladıktan sonra devreye giriyor.

   YER AYIRMA — dar panel için "başka yere koy" yedeği yerine. Balonun azami genişliği çubuğun
   kaplayacağı yer kadar kısılır; %70 (not: %80) yalnız yan tarafta yer kalmadığında küçülür,
   geniş panelde gelen/giden balonun genişliği değişmez. İSTİSNA dahili not: o ortada durduğu için
   ~700 px'lik içerik genişliğine kadar sola kayar (aşağıda, bilinen bedel). Neden "sığmazsa balonun ÜSTÜNE koy" değil: mesajlar dikey
   dizili, balonun üstü bir önceki balonun altıdır — çubuk onun saatini/son satırını örterdi (aynı
   hata komşu balonda). Neden konteyner sorgusu değil: container-type layout containment getiriyor
   (bkz. Yardım Merkezi notu) ve gereken yer panelin değil BALONUN türüne/düğme sayısına bağlı.
   Yer HOVER'A BAĞLI DEĞİL: üzerine gelince genişlik değişseydi metin zıplardı.
   Ölçen kapı: tools/verify-wa-eylem-cubugu.mjs (gerçek CSS + gerçek fare olayı, 800-1400 px). */
.wa-bubble {
  --wa-eylem-bosluk: 6px;   /* balon ile çubuk arası */
  --wa-eylem-dugme: 24px;   /* düğme genişliği — aşağıda sabitleniyor */
  --wa-eylem-n: 3;          /* ayrılan düğme sayısı; en az 3 (notta "düzenle" 15 dk sonra kalkar, genişlik oynamasın) */
  --wa-eylem-pay: 8px;      /* #waMessages'ın 16px yan dolgusundan (19-whatsapp.js, satır içi) çubuğa verilebilen */
  --wa-eylem-yer: calc(var(--wa-eylem-bosluk) + var(--wa-eylem-n) * var(--wa-eylem-dugme));
  --wa-eylem-R: calc(var(--wa-eylem-yer) - var(--wa-eylem-pay));   /* balonun, içerik kenarından uzak durması gereken */
}
.wa-bubble:has(> .wa-bubble-actions > button:nth-child(4)) { --wa-eylem-n: 4; }   /* gelen + çeviri */
.wa-bubble:has(> .wa-bubble-actions > button:nth-child(5)) { --wa-eylem-n: 5; }
.wa-bubble:has(> .wa-bubble-actions > button:nth-child(6)) { --wa-eylem-n: 6; }
/* Dahili not ortada (satır içi align-self:center; max-width:80%): iki yanında yalnız %10 var. Çubuk
   sağa sığsın diye not GEREKTİĞİ KADAR sola kayar (sağ dış boşluk), en darda hafifçe daralır.
   İçerik ≥ 10×R (~700 px) olunca kayma sıfır. Satır içi max-width'i yalnız !important ezebilir.
   Kayma notun EN GENİŞ hâline göre hesaplanır (CSS gerçek genişliği bilemez): KISA not da aynı
   kadar kayar — bilerek; alt alta notlar aynı eksende kalır. Bilinen bedel (kapı ölçümü): 1400 px +
   detay paneli (içerik 442 px) ~26 px, daha darda ~35 px; yalnız detay paneli kapalı geniş pencerede
   (içerik ≥ ~700 px) sıfır. Yalnız uzun notu kaydırmak notun gerçek genişliğini ölçmeyi (JS) ister. */
.wa-bubble.wa-bubble-internal {
  max-width: max(20%, min(80%, calc(100% - var(--wa-eylem-R, 0px)))) !important;
  margin-right: clamp(0px, calc(2 * var(--wa-eylem-R, 0px) - 20%), max(0px, var(--wa-eylem-R, 0px)));
}
.wa-bubble-actions {
  position: absolute;
  top: 0;
  left: calc(100% + var(--wa-eylem-bosluk));   /* gelen + dahili not: balonun SAĞINDA */
  z-index: 3;
  display: none;
  width: max-content;
  background: rgba(255,255,255,.95);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.wa-bubble-out .wa-bubble-actions { left: auto; right: calc(100% + var(--wa-eylem-bosluk)); }   /* giden: SOLUNDA */
.wa-bubble:hover .wa-bubble-actions { display: flex; }
/* Görünmez KÖPRÜ. Çubuk balonun çocuğu olduğu için üstü de balonun :hover'ı sayılır; kopan yalnız
   aradaki boşluk. Köprü balonun TAM BOYUNDA ve çubuğun dış kenarına kadar uzanır: uzun balonda
   metnin ortasından çubuğa ÇAPRAZ giden fare balonun yanından, çubuğun altından çıkar. Yalnız balon
   zaten :hover iken var — boş alana gelen fare hiçbir balonu uyandırmaz. Ayrılan yerin içinde
   kaldığı için komşu balona binmez, yatay taşma yapmaz.
   ⚠ `content` ŞART: onsuz sözde öğe hiç üretilmez, kural sessizce etkisiz kalır (ilk taslakta öyleydi;
   kapıdaki (f) adım adım fare kontrolü 2 px'lik adımda boşluğa düşüp yakaladı).
   ⚠ Köprü balon İÇERİĞİNİN ALTINDA çizilir (z-index:-1). Dar panelde bazı içerikler balonun dışına
   taşıyor (PDF kutusu min-width:200px, kişi kartı 220px, konum resmi 300px — satır içi, 19-whatsapp.js).
   Konumlandırılmış köprü düz akıştaki bu içeriğin ÜSTÜNDE çiziliyordu: "İndir"in taşan yarısına basan
   tıklama düğmeye değil köprüye gidiyordu (1200 px + detay paneli, 2026-10-01 denetimi). z-index:-1
   onu içeriğin altına, #waMessages zemininin ÜSTÜNE koyar — o yüzden #waMessages kendi istifleme
   bağlamını kurar (isolation). Onsuz -1 sayfa köküne iner, köprü konteyner zemininin altında kalır,
   fare onu hiç bulamaz ve köprü sessizce işlevsiz olur (kapıdaki (f) bunu yakalar). */
#waMessages { isolation: isolate; }
.wa-bubble:hover:has(> .wa-bubble-actions)::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: 100%; width: var(--wa-eylem-yer);
  z-index: -1;
}
.wa-bubble-out:hover:has(> .wa-bubble-actions)::after { left: auto; right: 100%; }
/* DOKUNMATİK CİHAZDA eylem çubuğu HİÇ GÖSTERİLMEZ. DOM'da kalıyor çünkü alttan
   açılan liste hangi eylemlerin geçerli olduğunu ondan okuyor (koşullar tek yerde kalsın).
   Görünür olduğunda kısa mesajlarda metni örtüyor ve ekran dışına taşıyordu. */
@media (pointer: coarse) {
  .wa-bubble-actions, .wa-bubble.wa-act-open .wa-bubble-actions { display: none !important; }
  /* Çubuk yoksa yanında yer de ayrılmaz, köprü de olmaz: balonlar eski %70 / %80 genişliğinde. */
  .wa-bubble { --wa-eylem-R: 0px !important; }
  .wa-bubble:hover::after { content: none !important; }
  /* Basılı tutma bizim; tarayıcının seçim/callout menüsü araya girmesin.
     Karşılığı listedeki "Kopyala" (WhatsApp'ın kendi modeli). */
  .wa-bubble { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ===== MOBİL EYLEM LİSTESİ (alttan açılır) ===== */
.wa-es-ort { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.42);
  display: flex; align-items: flex-end; animation: waEsFade .12s ease-out; }
@keyframes waEsFade { from { opacity: 0 } to { opacity: 1 } }
.wa-es-panel { width: 100%; background: var(--card); border-radius: 16px 16px 0 0;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 24px rgba(0,0,0,.22); animation: waEsUp .16s cubic-bezier(.2,.8,.3,1); }
@keyframes waEsUp { from { transform: translateY(14%) } to { transform: none } }
.wa-es-emoji { display: flex; justify-content: space-around; padding: 6px 4px 10px;
  border-bottom: 1px solid var(--bdr2); }
.wa-es-emoji button { background: none; border: none; font-size: 26px; padding: 4px 8px;
  border-radius: 50%; cursor: pointer; }
.wa-es-liste { padding: 6px 0; }
/* 48px: dokunma hedefi için asgari boy — eski ikonlar ~26px idi ve yanlış basılıyordu. */
.wa-es-satir { display: flex; align-items: center; gap: 14px; width: 100%;
  background: none; border: none; padding: 0 16px; min-height: 48px;
  font-size: 15px; color: var(--tx); text-align: left; cursor: pointer; }
.wa-es-satir:active { background: var(--hover); }
.wa-es-satir i { font-size: 17px; color: var(--tx2); width: 22px; flex-shrink: 0; }
.wa-es-iptal { width: 100%; background: none; border: none; border-top: 1px solid var(--bdr2);
  min-height: 48px; font-size: 15px; font-weight: 600; color: var(--tx2); cursor: pointer; }
/* Metin seçilirken eylem çubuğu GİZLENİR. Çubuk artık balonun dışında, ama seçim sürerken
   görünmesi yine gereksiz dikkat dağıtıcı; eski iç yerleşimde hem metnin üstünü örtüyor hem
   sürükleme hareketini kesiyordu (19-whatsapp.js içindeki selectionchange dinleyicisi
   .wa-secim-var sınıfını ekliyor).
   !important şart: yukarıdaki :hover kuralı da display:flex diyor ve seçim yaparken imleç
   zaten balonun üstünde oluyor. */
#waMessages.wa-secim-var .wa-bubble-actions { display: none !important; }
/* Dokunmatik: hover yok → balona dokununca .wa-act-open ekleniyor (19-whatsapp.js).
   Kural medya sorgusunun İÇİNDE değil, tabanda: durum sınıfları cihaz koşuluna
   hapsedilmemeli, yoksa aynı sınıf başka bağlamda sessizce çalışmaz. */
.wa-bubble.wa-act-open .wa-bubble-actions { display: flex; opacity: .97; }
/* Genişlik SABİT: balonun yanına ayrılan yer (--wa-eylem-yer) bu sayıdan hesaplanıyor. Eskisiyle
   aynı boy (6+12+6 px); ikon fontu gecikse de çubuk ayrılan yere sığar. */
.wa-bubble-actions button {
  background: none; border: none; padding: 3px 0; cursor: pointer;
  width: var(--wa-eylem-dugme, 24px); flex: none;
  font-size: 12px; color: #54656f;
}
.wa-bubble-actions button:hover { background: rgba(0,0,0,.05); border-radius: 3px; }
[data-theme="dark"] .wa-bubble-actions { background: rgba(32,44,51,.95); }
[data-theme="dark"] .wa-bubble-actions button { color: #aebac1; }

/* Active reply preview (input üstünde) */
.wa-reply-preview {
  background: rgba(0,168,132,.1);
  border-left: 3px solid #25d366;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.wa-reply-preview-content { flex: 1; min-width: 0; }
.wa-reply-preview-sender { font-weight: 600; color: #25d366; font-size: 11px; }
.wa-reply-preview-body { color: #54656f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="dark"] .wa-reply-preview-body { color: #aebac1; }

/* Image lightbox modal */
.wa-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: waBubbleIn .15s ease-out;
}
.wa-lightbox img { max-width: 95vw; max-height: 92vh; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.wa-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.1); color: #fff;
  width: 40px; height: 40px; border-radius: 50%; border: none;
  font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wa-lightbox-close:hover { background: rgba(255,255,255,.2); }

/* Drag-drop overlay */
.wa-drop-overlay {
  position: absolute; inset: 0;
  background: rgba(37,211,102,.15);
  border: 3px dashed #25d366;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #25d366; font-size: 18px; font-weight: 600;
  pointer-events: none;
  z-index: 5;
}

/* Bubble body image (inline) */
.wa-bubble-img {
  display: block;
  max-width: 280px;
  max-height: 320px;
  border-radius: 6px;
  cursor: zoom-in;
  margin-bottom: 4px;
}

/* === Polished List Pane === */
.wa-list-pane-header { padding: 10px; background: #f0f2f5; border-bottom: 1px solid var(--bdr2); flex-shrink: 0; }
[data-theme="dark"] .wa-list-pane-header { background: #202c33; }

.wa-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.wa-tab {
  padding: 3px 10px;
  border: 1px solid #25d366;
  background: #fff;
  color: #25d366;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .15s;
}
.wa-tab:hover { background: #f0fdf4; }
.wa-tab.active { background: #25d366; color: #fff; }
.wa-tab.secondary { border-color: #9ca3af; color: #6b7280; }
.wa-tab.secondary:hover { background: #f3f4f6; }
.wa-tab.secondary.active { background: #6b7280; color: #fff; }
.wa-tab .wa-tab-count {
  background: rgba(0,0,0,.08);
  color: inherit;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 9px;
  min-width: 14px;
  text-align: center;
}
.wa-tab.active .wa-tab-count { background: rgba(255,255,255,.28); }
[data-theme="dark"] .wa-tab { background: #2a3942; }
[data-theme="dark"] .wa-tab:hover { background: #374248; }

.wa-list-item {
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  position: relative;
  transition: background .12s;
}
.wa-list-item:hover { background: #f9fafb; }
.wa-list-item.active { background: #f0fdf4; }
.wa-list-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #16a34a;
}
/* Okunmamış konuşma: isim + önizleme koyulaşır (rozet zaten var) — WhatsApp Web davranışı */
.wa-list-item.unread .wa-list-name { font-weight: 800; }
.wa-list-item.unread .wa-list-snippet { color: #111827; font-weight: 500; }
[data-theme="dark"] .wa-list-item.unread .wa-list-snippet { color: #e9edef; }
/* Çoklu seçim modu — seçili konuşma görsel feedback */
.wa-list-item.selected { background: #fef3c7 !important; }
.wa-list-item.selected:hover { background: #fde68a !important; }
[data-theme="dark"] .wa-list-item.selected { background: #422d0c !important; }
[data-theme="dark"] .wa-list-item.selected:hover { background: #4a3613 !important; }
[data-theme="dark"] .wa-list-item { border-bottom-color: #2a3942; }
[data-theme="dark"] .wa-list-item:hover { background: #202c33; }
[data-theme="dark"] .wa-list-item.active { background: #2a3942; }

.wa-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.wa-avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.wa-avatar-lg { width: 52px; height: 52px; font-size: 18px; }

.wa-list-body { flex: 1; min-width: 0; }
.wa-list-name-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.wa-list-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.wa-list-time { font-size: 11px; color: #9ca3af; flex-shrink: 0; }
.wa-list-snippet { font-size: 13px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
[data-theme="dark"] .wa-list-snippet { color: #aebac1; }
.wa-list-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; gap: 6px; }
.wa-list-company { font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
/* Son sözün kimde olduğu (bizden/bot/not) ve atanan temsilci — liste satırında. */
.wa-list-yon { font-size: 11px; color: #9ca3af; }
.wa-list-atanan { font-size: 10px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; flex-shrink: 0; }
[data-theme="dark"] .wa-list-atanan { color: #aebac1; }
/* Başarısız mesajdaki "Yeniden gönder" bağlantısı. */
.wa-yeniden-gonder { color: inherit; font-weight: 600; text-decoration: underline; }
/* Dokunmatikte listede basılı tutma konuşma menüsünü açar; iOS'un kendi seçim/bağlam balonu araya girmesin. */
@media (pointer: coarse) { .wa-list-item { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } }
/* 24 saat penceresi kapanmak üzere + müşteri cevapsız uyarısı (yazma alanının üstünde). */
.wa-pencere-uyari { flex-shrink: 0; padding: 6px 14px; font-size: 12px; line-height: 1.4; background: #fffbeb; color: #92400e; border-top: 1px solid #fde68a; }
[data-theme="dark"] .wa-pencere-uyari { background: #3b2f0b; color: #fde68a; border-top-color: #5c4712; }
.wa-list-unread {
  background: #25d366;
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.wa-list-tags { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.wa-list-tag {
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 4px;
  font-weight: 500;
  border: 1px solid;
}

/* === Polished Conv Header === */
/* Markalı gradyan başlık — koyu yeşil → WhatsApp turkuazı → yeşil. Metin/ikonlar beyaz;
   pencere çipleri yarı saydam beyaz zemine alınır (aşağıda). Karanlık temada daha koyu uçlar. */
.wa-conv-header {
  background: linear-gradient(120deg, #0b3d2e, #128c7e 65%, #16a34a);
  padding: 10px 14px;
  border-bottom: none;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: #fff;
}
[data-theme="dark"] .wa-conv-header { background: linear-gradient(120deg, #06231b, #0b5c50 65%, #0f7a3d); }
.wa-conv-header .wa-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }
.wa-conv-header .wa-icon-btn { color: rgba(255,255,255,.9); }
.wa-conv-header .wa-icon-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.wa-conv-info { flex: 1; min-width: 0; }
.wa-conv-info b { font-size: 14px; display: block; color: #fff; }
.wa-conv-info small { font-size: 12px; color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 6px; margin-top: 1px; }
[data-theme="dark"] .wa-conv-info small { color: rgba(255,255,255,.72); }
/* Gradyan üstünde pencere çipi — pastel zeminler okunmuyordu, yarı saydam beyaz kapsül */
.wa-conv-header .wa-window-chip.ok   { background: rgba(255,255,255,.18); color: #d9fdd3; }
.wa-conv-header .wa-window-chip.warn { background: rgba(255,255,255,.18); color: #fde68a; }
.wa-conv-header .wa-window-chip.bad  { background: rgba(220,38,38,.55); color: #fff; }
.wa-window-chip {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wa-window-chip.ok { background: #dcfce7; color: #166534; }
.wa-window-chip.warn { background: #fef3c7; color: #92400e; }
.wa-window-chip.bad { background: #fee2e2; color: #991b1b; }

.wa-icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #54656f;
  font-size: 16px;
  transition: background .12s;
}
.wa-icon-btn:hover { background: rgba(0,0,0,.05); }
.wa-icon-btn:disabled { opacity: .4; cursor: not-allowed; }
[data-theme="dark"] .wa-icon-btn { color: #aebac1; }
[data-theme="dark"] .wa-icon-btn:hover { background: rgba(255,255,255,.08); }

/* === Polished Reply Bar === */
.wa-reply-bar { padding: 8px 12px; background: #f0f2f5; border-top: 1px solid var(--bdr2); flex-shrink: 0; }
[data-theme="dark"] .wa-reply-bar { background: #202c33; border-top-color: #2a3942; }
.wa-reply-row { display: flex; gap: 6px; align-items: center; }
/* GÖNDER DÜĞMESİ EKRAN DIŞINA TAŞIYORDU. Metin kutusu flex:1 ile esniyor ama <input>'un
   tarayıcıdan gelen iç genişliği (~170px+) alt sınır oluyor; satır o sınırın altına inemeyince
   sağdaki düğme dışarı itiliyordu. min-width:0 bu alt sınırı kaldırır — dar ekranda kutu
   kısalır, düğme yerinde kalır. (2026-08-24 mobil şikâyeti.) */
.wa-reply-input { min-width: 0; }
.wa-reply-row .wa-icon-btn, .wa-reply-row .wa-send-btn, .wa-reply-row .dropdown { flex-shrink: 0; }
.wa-reply-input {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  font-size: 14px;
  background: #fff;
  outline: none;
}
.wa-reply-input:focus { border-color: #25d366; }
.wa-reply-input:disabled { background: #f3f4f6; color: #9ca3af; }
[data-theme="dark"] .wa-reply-input { background: #2a3942; color: #e9edef; border-color: #2a3942; }
[data-theme="dark"] .wa-reply-input:focus { border-color: #00a884; }
.wa-send-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wa-send-btn:hover { background: #128c7e; }
.wa-send-btn:disabled { background: #d1d5db; cursor: not-allowed; }

/* === Polished Detail Pane === */
.wa-detail-pane { padding: 12px; background: #f8fafc; }
[data-theme="dark"] .wa-detail-pane { background: #111b21; }
/* Bölüm kartı + başlığı (maketteki KİŞİ / ÖZET / AKSİYONLAR yapısı) */
.wa-rsec {
  background: #fff; border: 1px solid #e8edf2; border-radius: 12px;
  padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
[data-theme="dark"] .wa-rsec { background: #202c33; border-color: #2a3942; box-shadow: none; }
.wa-rsec-t {
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #94a3b8;
  text-transform: uppercase; margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
[data-theme="dark"] .wa-rsec-t { color: #aebac1; }
.wa-rsec .wa-detail-card, .wa-rsec .wa-detail-stats, .wa-rsec .wa-linked-ticket { margin-bottom: 0; }
.wa-rsec .wa-detail-card { background: #f8fafc; }
[data-theme="dark"] .wa-rsec .wa-detail-card { background: #111b21; }
.wa-rsec .wa-detail-card.warn { background: #fef3c7; }
[data-theme="dark"] .wa-rsec .wa-detail-card.warn { background: #422d0c; }
.wa-detail-name { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.wa-detail-phone { color: #6b7280; font-size: 12px; margin-bottom: 12px; }
[data-theme="dark"] .wa-detail-phone { color: #aebac1; }
.wa-detail-card {
  background: #f9fafb;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}
[data-theme="dark"] .wa-detail-card { background: #202c33; }
.wa-detail-card b { font-size: 13px; }
.wa-detail-card small { color: #6b7280; display: block; margin-top: 2px; font-size: 11.5px; }
[data-theme="dark"] .wa-detail-card small { color: #aebac1; }
.wa-detail-card.warn { background: #fef3c7; }
[data-theme="dark"] .wa-detail-card.warn { background: #422d0c; color: #fde68a; }

.wa-detail-stats { display: flex; gap: 6px; margin-bottom: 10px; }
.wa-detail-stat {
  text-align: center; font-size: 10.5px; color: #64748b; flex: 1;
  background: #fff; border: 1px solid #e8edf2; border-radius: 10px; padding: 8px 0;
}
[data-theme="dark"] .wa-detail-stat { background: #111b21; border-color: #2a3942; color: #aebac1; }
.wa-detail-stat b { display: block; font-size: 17px; font-weight: 700; color: #0284c7; }
.wa-detail-stat:nth-child(2) b { color: #7c3aed; }
.wa-detail-stat.danger b { color: #dc2626; }
[data-theme="dark"] .wa-detail-stat b { color: #38bdf8; }
[data-theme="dark"] .wa-detail-stat:nth-child(2) b { color: #a78bfa; }
[data-theme="dark"] .wa-detail-stat.danger b { color: #f87171; }

.wa-linked-ticket {
  background: #ecfdf5;
  border-left: 3px solid #10b981;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 13px;
  cursor: pointer;
}
.wa-linked-ticket:hover { background: #d1fae5; }
[data-theme="dark"] .wa-linked-ticket { background: #064e3b; border-left-color: #34d399; color: #d1fae5; }
[data-theme="dark"] .wa-linked-ticket:hover { background: #065f46; }
/* Başlık/numara renkleri JS'te inline'dı; inline stil karanlık tema kuralını EZDİĞİ için
   koyu yeşil zeminde koyu yeşil yazı görünmez oluyordu — sınıfa taşındı. */
.wa-linked-title { font-weight: 600; font-size: 12px; color: #065f46; }
[data-theme="dark"] .wa-linked-title { color: #a7f3d0; }
.wa-linked-no { font-size: 11px; background: transparent; color: #047857; }
[data-theme="dark"] .wa-linked-no { color: #6ee7b7; }

.wa-detail-section-title { font-size: 11px; color: #6b7280; font-weight: 600; margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.5px; }
[data-theme="dark"] .wa-detail-section-title { color: #aebac1; }

.wa-detail-actions { display: grid; gap: 6px; margin-top: 10px; }
.wa-detail-action {
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .12s;
  color: #374151;
}
.wa-detail-action:hover { background: #f9fafb; }
/* İkon renkli kutucukta (maket 3'teki stil). Varsayılan gri; success/danger kendi rengini,
   wai-b / wai-p sınıfları mavi/mor aksan verir (markup'ta ilgili düğmeye atanıyor). */
.wa-detail-action i {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; background: #64748b;
}
.wa-detail-action.success i { background: #16a34a; }
.wa-detail-action.danger i { background: #dc2626; }
.wa-detail-action.warn i { background: #d97706; }
.wa-detail-action i.wai-b { background: #0284c7; }
.wa-detail-action i.wai-p { background: #7c3aed; }
.wa-detail-action { border-radius: 10px; font-weight: 600; gap: 8px; }
.wa-detail-action.success { background: #ecfdf5; border-color: #6ee7b7; color: #047857; }
.wa-detail-action.success:hover { background: #d1fae5; }
.wa-detail-action.warn { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.wa-detail-action.warn:hover { background: #fde68a; }
.wa-detail-action.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.wa-detail-action.danger:hover { background: #fee2e2; }
[data-theme="dark"] .wa-detail-action { background: #2a3942; border-color: #2a3942; color: #e9edef; }
[data-theme="dark"] .wa-detail-action:hover { background: #374248; }
[data-theme="dark"] .wa-detail-action.success { background: #064e3b; border-color: #047857; color: #6ee7b7; }
[data-theme="dark"] .wa-detail-action.warn { background: #422d0c; border-color: #92400e; color: #fcd34d; }
[data-theme="dark"] .wa-detail-action.danger { background: #4c0519; border-color: #7f1d1d; color: #fca5a5; }

/* Detail pane "Daha Fazla" dropdown — nadir kullanılan eylemler */
.wa-more-menu {
  position: fixed;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  z-index: 9999;
  min-width: 220px;
  padding: 4px;
  animation: waBubbleIn .12s ease-out;
}
.wa-more-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  color: #374151;
  text-align: left;
}
.wa-more-menu button:hover { background: #f3f4f6; }
.wa-more-menu button.warn { color: #92400e; }
.wa-more-menu button.warn:hover { background: #fef3c7; }
.wa-more-menu button.danger { color: #991b1b; }
.wa-more-menu button.danger:hover { background: #fee2e2; }
.wa-more-divider { height: 1px; background: #e5e7eb; margin: 4px 6px; }
.wa-more-section {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px 2px;
  display: flex;
  align-items: center;
  gap: 5px;
}
[data-theme="dark"] .wa-more-menu { background: #2a3942; border-color: #2a3942; }
[data-theme="dark"] .wa-more-menu button { color: #e9edef; }
[data-theme="dark"] .wa-more-menu button:hover { background: #374248; }
[data-theme="dark"] .wa-more-divider { background: #374248; }

/* Customer history quick-row */
.wa-hist-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  font-size: 11.5px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  border-radius: 4px;
}
.wa-hist-row:hover { background: #f9fafb; }
.wa-hist-row .wa-hist-label { color: #374151; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-hist-row .wa-hist-date { color: #9ca3af; flex-shrink: 0; }
[data-theme="dark"] .wa-hist-row { border-bottom-color: #2a3942; }
[data-theme="dark"] .wa-hist-row:hover { background: #202c33; }
[data-theme="dark"] .wa-hist-row .wa-hist-label { color: #e9edef; }


/* Sticky save bar — sidebar'ı örtmemek için margin-left:var(--sb) ile hizalı */
.cbd-sticky-savebar {
  position: fixed;
  bottom: 0;
  left: var(--sb);
  right: 0;
  background: #fef3c7;
  border-top: 1px solid #fbbf24;
  padding: 10px 20px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
  z-index: 1000;
}
.sb-mini .cbd-sticky-savebar { left: 68px; }
@media (max-width: 768px) {
  .cbd-sticky-savebar { left: 0 !important; }
}

/* ===== AI Settings + Reports — Mobile Responsiveness Fix'leri ===== */
@media (max-width: 768px) {
  /* AI Settings 11-tab nav-pills: küçük ekranda label gizle, sadece ikon kalsın (custom class işaretle) */
  .ai-tabs-grouped .nav-pills .nav-link {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  /* Tablolar — yatay scroll için zorla */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive table { min-width: 600px; }
  /* AI Settings sayfasında çok-kolonlu form'lar tek kolona düşsün */
  .ai-card .row > [class*="col-md-"] { margin-bottom: 8px; }
  /* Modal'lar mobilde fullscreen davransın — dvh: footer URL bar/klavye altında kalmasın */
  .modal-dialog.modal-lg, .modal-dialog.modal-xl { margin: 0; max-width: 100%; height: 100vh; height: 100dvh; }
  .modal-dialog.modal-lg .modal-content, .modal-dialog.modal-xl .modal-content {
    height: 100vh; height: 100dvh; border-radius: 0 !important;
  }
  /* Custom Şablonlar / Prompts / SQL Log tablolarında uzun açıklama wrap */
  #aiTplContent td, #aiPromptsContent td, #aiSqlLogContent td { word-break: break-word; max-width: 200px; }
  /* Sentiment Trend (r20) chart yüksekliği mobilde küçült */
  #r20Chart { max-height: 240px !important; }
  /* KB AI Önerileri body preview daha kompakt */
  #pg .card-s[style*="border-left:4px solid"] { padding: 10px !important; }
  /* Discovery Mode SQL textarea mobilde okunabilir font */
  #_rAiDiscSql, #_kbaiBody, #_aiPromptText { font-size: 12px !important; }
  /* Buton grupları tek satır olamayınca wrap */
  .btn-group-sm .btn { padding: 4px 8px !important; font-size: 11px !important; }
  /* Reports period dropdown'u şişmesin */
  #rPeriod, #rDays { max-width: 140px; }
  /* Chatbot designer panel toggle butonları mobilde daha küçük */
  #cbdTogglePalBtn, #cbdTogglePropsBtn { padding: 4px 8px !important; }
}

/* AI Tabs — grup ayraç (li.ai-tab-sep) */
.ai-tabs-grouped .ai-tab-sep { list-style: none; user-select: none; white-space: nowrap; }

/* Tablet (768-991): grup başlıklarını sadece ikon + 'sığdır' */
@media (max-width: 991px) {
  .ai-tabs-grouped .ai-tab-sep {
    font-size: 0 !important; /* metni gizle */
    padding: 5px 6px !important;
    border-left: none !important;
    border-right: none !important;
  }
  .ai-tabs-grouped .ai-tab-sep i { font-size: 14px !important; } /* ikon görünür kalsın */
}

/* AI Prompts modal body — çok geniş textarea taşmasın */
#_aiPromptText { width: 100%; max-width: 100%; box-sizing: border-box; }

/* U5: AI rapor tablosu — mobilde card layout (her satır ayrı kart, label:value pairs)
   td'lerin data-label attribute'u JS tarafında set edilir. */
@media (max-width: 640px) {
  .ai-rpt-table thead { display: none; }
  /* Card layout'ta tablo viewport'a sığmalı — .dt table{min-width:500px} kuralını ez,
     yoksa kart 500px kalıp değer (cevap) sağda ekran dışına taşar (portrait'te gizli görünür). */
  .dt .ai-rpt-table { min-width: 0; }
  .ai-rpt-table, .ai-rpt-table tbody, .ai-rpt-table tr, .ai-rpt-table td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .ai-rpt-table tr {
    background: #fff;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .ai-rpt-table td {
    border: none;
    padding: 4px 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    text-align: right;
    border-bottom: 1px dashed #f0f0f0;
    white-space: normal;       /* tablonun nowrap'ını ez — uzun değer sarsın, taşmasın */
    word-break: break-word;
    min-width: 0;
  }
  .ai-rpt-table td:last-child { border-bottom: none; }
  .ai-rpt-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--tx2);
    font-size: 11px;
    text-align: left;
    flex: 0 0 40%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ai-rpt-table td b { font-size: 13px; }
  /* Compare modunda 3'lü kolon yapısı — mobilde de aynı pattern ama header yok */
}



/* ============================================================
   DOKUNMATIK CİHAZLAR (pointer:coarse) — genişlikten bağımsız.
   iPad/tablet desktop genişliğinde de hover yok; bu blok hover-only
   aksiyonları görünür yapar, tap hedeflerini büyütür, iOS focus
   zoom'unu engeller (16px altı input fontu zoom tetikler).
   ============================================================ */
@media(pointer:coarse){
  input,select,textarea,.form-control,.form-select,.form-control-sm,.form-select-sm,.ql-editor,.wa-reply-input,.si{font-size:16px!important}
  .btn-close{min-width:40px;min-height:40px;background-size:14px}
  .eb{min-width:40px;min-height:40px}
  /* Bildirim satır aksiyonları her zaman görünür */
  .ntf-row-actions{opacity:1!important}
  .ntf-row-act{width:40px;height:40px}
  /* WhatsApp mesaj aksiyonları (Yanıtla/İlet/Sil) — DOKUNUNCA açılır.
     Eskiden burada display:flex!important vardı: dokunmada hover olmadığı için
     aksiyonlara ulaşılsın diye HEP görünür yapılmıştı. Ama hap balonun sağ üstüne
     mutlak konumlanıyor ve şablon başlığı/metnin üstünü kalıcı olarak kapatıyordu
     (mobilde her balonda ayrı ayrı). Artık balona dokununca o balonunki açılıyor;
     tekrar dokunma veya başka yere dokunma kapatıyor. Aksiyonların hiçbiri kaybolmadı. */
  .wa-bubble-actions button{min-width:34px;min-height:30px}
  /* Talep satırındaki "yeni sekmede aç" — dokunmatikte hover yok.
     769px+ tablette tablo görünür, ikon opacity:0 ama tıklanabilir kalıyordu:
     görünmez hayalet hedef. Kardeş aksiyonlarla aynı kurtarma. */
  .ws-open{opacity:1!important;min-width:40px;min-height:40px;
    display:inline-flex;align-items:center;justify-content:center}
  /* Proje akış kartı aksiyonları + bağlantı portları görünür */
  .prj-card-actions{display:flex!important}
  .prj-port{opacity:1!important}
  /* Takvim event chip'leri büyüt (yanlışlıkla 'yeni etkinlik' açılmasın) */
  .cal-ev{min-height:26px;padding:3px 6px}
  /* Quill renk paleti dokunulabilir boy */
  .cpk-c{width:34px;height:34px}
}
/* Sağ üst toast/uyarılar dar ekranda taşmasın */
@media(max-width:480px){
  .new-ticket-alert{max-width:calc(100vw - 24px)!important;right:12px!important}
}

/* ===== WhatsApp konuşma başlığı — dar ekran =====
   430px'te başlık sıkışıyordu: uzun ad iki satıra düşüyor, "23sa kaldı" penceresi
   sağdaki ikon sırasının üstüne biniyordu. Ad tek satırda kırpılıyor, ikonlar
   küçülmüyor (dokunma hedefi korunsun), pencere çipi kendi satırına iniyor. */
@media(max-width:576px){
  .wa-conv-header{padding:8px 10px;gap:8px}
  .wa-conv-info{min-width:0;overflow:hidden}
  .wa-conv-info b{
    font-size:13.5px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;   /* iki satıra düşmesin */
  }
  .wa-conv-info small{
    flex-wrap:wrap;row-gap:2px;font-size:11px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  /* İkonlar ezilmesin; ad kısalsın. */
  .wa-conv-header .wa-icon-btn{flex-shrink:0}
  .wa-conv-header .wa-window-chip{flex-shrink:0;max-width:100%}
}
/* Çok dar ekranda (≤400px) pencere çipi başlıktan kalksın — bilgi kaybolmuyor:
   pencere kapalıysa yanıt kutusu zaten "24-saat penceresi kapalı" yazıyor. */
@media(max-width:400px){
  .wa-conv-header .wa-window-chip{display:none}
}
/* Yanıt kutusu artık <textarea>: tek satırdan başlar, içerik büyüdükçe uzar, sınırda kaydırır. */
.wa-reply-input{
  resize:none; line-height:1.35; max-height:120px; overflow-y:auto;
  font-family:inherit; font-size:14px;
}
/* Detay örtüsünden sohbete dönüş — örtü açıkken tepede sabit. */
.wa-detail-close{
  display:none; position:sticky; top:0; z-index:2;
  width:100%; border:0; border-radius:8px; padding:9px 12px; margin-bottom:10px;
  background:#25d366; color:#fff; font-weight:600; font-size:13.5px; cursor:pointer;
  text-align:left;
}
.wa-page.wa-detail-open .wa-detail-close{display:block}

/* ===== WhatsApp mobil: sağa taşan üç yer =====
   Üçünün de kökü aynı: dar ekranda sığmayan yatay satırlar. */
@media(max-width:768px){
  /* 1) Konuşma listesi araç çubuğu — "Seç" düğmesi sağdan kırpılıyordu.
        Sarmak yerine yatay kaydırma: etiket/sıralama seçicileri tek satırda kalsın. */
  .wa-list-toolbar{
    flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .wa-list-toolbar::-webkit-scrollbar{display:none}
  .wa-list-toolbar > *{flex-shrink:0}
  .wa-list-toolbar .ms-auto{margin-left:auto!important}

  /* 2) Yanıt kutusu şeridi — ikonlar + kutu + gönder tek satıra sığmıyordu.
        Dar ekranda ŞERİTTE YALNIZ + ve GÖNDER kalıyor; emoji/hızlı yanıt/AI/şablon
        "+" menüsüne taşındı. Kullanıcı yazdığını okuyamıyordu, sebep buydu. */
  .wa-reply-row > .wa-icon-btn:not(#waAttachBtn),
  .wa-reply-row > .dropdown{display:none}
  .wa-reply-input{font-size:15px}   /* iOS'ta 16px altı odakta sayfayı zoomlar; 15px sınırda kalıyor */
  /* 2) Yanıt kutusu şeridi — ikonlar + kutu + gönder tek satıra sığmıyordu. */
  .wa-reply-bar{padding:6px 8px}
  .wa-reply-row{gap:4px}
  .wa-reply-row .wa-icon-btn{width:30px;height:30px}
  .wa-send-btn{width:36px;height:36px}

  /* 3) Konuşma başlığı — ikon sırası sağdan taşıyordu. */
  .wa-conv-header .wa-icon-btn{width:30px;height:30px}
  .wa-conv-header{gap:4px}

  /* ⓘ ile açılan detay paneli: mobilde tam ekran örtü.
     Dar ekran kuralı display:none!important olduğu için burada da !important şart. */
  .wa-page.wa-detail-open .wa-detail-pane{
    display:block!important;
    position:absolute; inset:0; z-index:30;
    width:100%!important; max-width:100%!important;
    overflow-y:auto; box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
  }
  .wa-page{position:relative}
}

/* AI Ayarları sekme pill'leri mobilde 3-4 satıra sarıp dikey alan yiyordu — yatay scroll */
@media(max-width:768px){
  #aiTabNav,#waSetTabNav{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:4px}
  #aiTabNav .nav-link,#waSetTabNav .nav-link{white-space:nowrap}
}