:root { --bg-app: #000; --bg-rail: #09090b; --bg-card: #0a0a0c; --bg-card-2: #0d0d10; --bg-input: #09090c; --border: rgba(255, 255, 255, 0.085); --border-strong: rgba(255, 255, 255, 0.15); --text: #f4f4f5; --text-muted: #98989f; --text-dim: #55555e; --accent: #f4f4f5; --green: #22c55e; --blue: #3b82f6; --red: #ef4444; --amber: #f59e0b; --radius: 14px; --radius-sm: 8px; --rail-width: 228px; --content-width: 1030px; } html, body.cc { width: 100%; min-width: 0; height: 100%; margin: 0; background: var(--bg-app); color: var(--text); } /* Tarayıcının varsayılan marjı (genelde ~8px, her kenarda) hiçbir yerde sıfırlanmıyordu. height:100% ile birleşince body, gerçek viewport'tan birkaç piksel daha uzun oluyordu — içerik tek ekrana tam sığsa BİLE sayfa hafifçe kaydırılabilir kalıyordu ("aşağıda bir şey olmamasına rağmen kaydırılıyor" şikayeti). Bu dosya admin-bots.html/musteri-paneli.html/ dashboard.html arasında ORTAK olduğu için düzeltme hepsine birden geçerli. */ body.cc { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; font-synthesis: none; text-rendering: geometricPrecision; } body.cc > .absolute.pointer-events-none { display: none; } body.cc main { scrollbar-color: #898989 transparent; scrollbar-width: thin; } body.cc main > .tab-content { width: min(100%, var(--content-width)); margin-inline: auto; } body.cc main > .tab-content.active { animation: cc-enter 120ms ease-out; } @keyframes cc-enter { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } .cc-rail { width: var(--rail-width) !important; min-width: var(--rail-width); background: var(--bg-rail); border-right: 1px solid var(--border); transition: width 160ms ease, min-width 160ms ease; } .cc-rail > div { padding: 14px 10px 16px; scrollbar-width: none; } .cc-rail > div::-webkit-scrollbar { display: none; } .cc-brand { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 8px 10px; } .cc-brand-icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; color: #dcecf5; } .cc-brand-name { color: #f7f7f8 !important; font-size: 13px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; white-space: nowrap; } .cc-collapse-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: auto; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; } .cc-collapse-btn:hover { color: var(--text); border-color: var(--border-strong); } .cc-group-label { padding: 0 9px; margin: 15px 0 5px; color: #4b4b52; font-size: 9px; font-weight: 800; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; } .cc-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #929299; font-size: 12px; font-weight: 600; line-height: 1; text-align: left; cursor: pointer; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; } .cc-nav-item:hover { color: #dedee2; background: rgba(255, 255, 255, 0.025); } .cc-nav-item.active { color: #fff; background: #242427; border-color: rgba(255, 255, 255, 0.075); } .cc-nav-item svg, .cc-nav-item > span:first-child:not(.cc-label-text) { width: 18px; height: 18px; flex: 0 0 18px; color: currentColor; opacity: 0.82; } .cc-nav-item.active svg, .cc-nav-item.active > span:first-child:not(.cc-label-text) { opacity: 1; } .cc-rail.collapsed { width: 62px !important; min-width: 62px; } .cc-rail.collapsed .cc-label-text, .cc-rail.collapsed .cc-group-label, .cc-rail.collapsed .cc-footer-text, .cc-rail.collapsed .cc-brand-name, .cc-rail.collapsed .mt-4 { display: none; } .cc-rail.collapsed .cc-brand, .cc-rail.collapsed .cc-nav-item, .cc-rail.collapsed .cc-footer-btn { justify-content: center; } .cc-rail.collapsed .cc-collapse-btn { margin-left: 0; } .cc-page-header { position: relative; padding: 5px 0 19px; margin-bottom: 34px; border-bottom: 1px solid var(--border); } .cc-page-header::before { content: ""; position: absolute; z-index: -1; top: -42px; left: -80px; width: 560px; height: 130px; background: radial-gradient(ellipse at top, rgba(31, 62, 95, 0.18), transparent 67%); pointer-events: none; } .cc-page-title { color: #f5f5f5; font-size: 27px; font-weight: 800; line-height: 1.05; letter-spacing: -0.045em; } .cc-page-sub { margin-top: 3px; color: #aaaab0; font-size: 13px; font-weight: 500; line-height: 1.25; } .cc-card, body.cc .feature-card { background: linear-gradient(135deg, #0b0b0e, #080809) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: none !important; backdrop-filter: none !important; } body.cc .feature-card:hover { transform: none !important; background: linear-gradient(135deg, #0d0d10, #09090a) !important; border-color: var(--border-strong) !important; box-shadow: none !important; } .cc-stat { min-height: 94px; padding: 19px 21px 17px; background: linear-gradient(135deg, #0b0b0e, #080809); border: 1px solid var(--border); border-radius: var(--radius); } .cc-stat-value { color: #f6f6f7; font-size: 29px; font-weight: 800; line-height: 1; letter-spacing: -0.035em; } .cc-stat-label { margin-top: 11px; color: #6c6c74; font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: 0.015em; text-transform: uppercase; } .cc-badge { padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; font-size: 9px; font-weight: 800; line-height: 1; } .cc-badge.green { color: #22c55e; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.18); } .cc-badge.blue { color: #3b82f6; background: rgba(59, 130, 246, 0.13); border-color: rgba(59, 130, 246, 0.2); } .cc-badge.red { color: var(--red); background: rgba(239, 68, 68, 0.12); } .cc-badge.amber { color: var(--amber); background: rgba(245, 158, 11, 0.12); } body.cc .input-field, .cc-input, body.cc input[type="text"], body.cc input[type="number"], body.cc input[type="url"], body.cc select, body.cc textarea { min-height: 38px; padding: 9px 12px; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; outline: none; background: var(--bg-input) !important; color: #d8d8dc !important; font-size: 12px !important; line-height: 1.25; box-shadow: inset 0 1px rgba(255, 255, 255, 0.015); transition: border-color 120ms ease, background 120ms ease; } .input-field:focus, .cc-input:focus, body.cc input:focus, body.cc select:focus, body.cc textarea:focus { border-color: var(--border-strong) !important; background: #0b0b0e !important; } body.cc ::placeholder { color: #5e5e65; opacity: 1; } .section-label, .cc-field-label { margin-bottom: 7px; color: #dbdbe0; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; } .cc-field-key { margin-top: 2px; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; } .cc-table { width: 100%; border-collapse: collapse; } .cc-table th { padding: 13px 18px; color: #6a6a73; font-size: 9px; font-weight: 800; letter-spacing: 0.025em; text-align: left; text-transform: uppercase; } /* .text-center (Tailwind, 0,1,0) tek başına ".cc-table th" (0,1,1) kuralını yenemiyor; burada özgüllüğü eşitleyip başlığın altındaki hücrelerle aynı hizaya getiriyoruz. */ .cc-table th.text-center { text-align: center; } .cc-table td { padding: 13px 18px; border-top: 1px solid var(--border); color: #d6d6da; font-size: 12px; } .cc-table tr:hover td { background: var(--bg-card-2); } .cc-footer-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: #dbdbe0; font-size: 10px; font-weight: 700; cursor: pointer; transition: background 120ms ease, border-color 120ms ease; } .cc-footer-btn:hover { background: rgba(255, 255, 255, 0.025); border-color: var(--border-strong); } .cc-footer-btn.blue { color: #3b82f6; border-color: rgba(59, 130, 246, 0.28); } .cc-footer-btn.red { color: #ef4444; border-color: rgba(239, 68, 68, 0.25); } #cc-float-save { position: fixed; right: 28px; bottom: 26px; z-index: 200; min-width: 205px; min-height: 42px; padding: 0 22px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; background: #141418; color: #f4f4f5; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } #cc-float-save:hover { background: #1e1e24; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } .toggle-wrap { background: var(--bg-card) !important; border-color: var(--border) !important; } .ticket-category-btn { border-color: var(--border) !important; color: #898990 !important; background: transparent !important; } .ticket-category-btn.active, .ticket-category-btn:hover { color: #f3f3f4 !important; border-color: var(--border-strong) !important; background: #202023 !important; } .staff-perf-filter-btn { border: 1px solid transparent; transition: color 120ms ease, background 120ms ease, border-color 120ms ease; } .staff-perf-filter-btn.active { background: #202023 !important; color: #f3f3f4 !important; border-color: var(--border-strong) !important; } #bot-settings-group > .feature-card, #log-welcome-settings-group > .feature-card { padding: 0 !important; border: 0 !important; background: transparent !important; } #bot-settings-group > .feature-card > h3, #bot-settings-group > .feature-card > p, #log-welcome-settings-group > .feature-card > .border-b { display: none; } #bot-settings-group > .feature-card > .grid > div, #log-welcome-settings-group > .feature-card > .grid > div { min-height: 112px; padding: 21px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, #0b0b0e, #080809); } #bot-settings-group > .feature-card > .grid > div.sm\:col-span-2 { min-height: auto; } #bot-settings-group > .feature-card > button { display: none; } #channels-settings-group .feature-card { min-height: 112px; padding: 21px 22px !important; } #log-welcome-settings-group > .feature-card > .grid > div > .flex { align-items: center; } #log-welcome-settings-group > .feature-card > .grid > div > .flex > label { order: 3; } #log-welcome-settings-group > .feature-card > .grid > div > .flex > button { display: none; } #moderation-tab.ban-view > .flex.gap-2.flex-wrap { display: none; } #moderation-tab.ban-view #mod-blacklist-tab > .grid { display: block; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, #0b0b0e, #080809); } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card { padding: 0 !important; border: 0 !important; background: transparent !important; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:first-child > div:first-child p, #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:nth-child(2) > div:first-child { display: none; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:first-child > div:first-child h3::after { content: " İşlemi"; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:first-child .space-y-3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; gap: 12px; margin: 12px 0 18px; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:first-child .space-y-3 > div p { display: none; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:first-child button { min-height: 38px; border-radius: var(--radius-sm); background: #ff5148 !important; box-shadow: none !important; font-size: 11px; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:nth-child(2) { margin-top: 0; } #moderation-tab.ban-view #mod-blacklist-tab > .grid > .feature-card:nth-child(2) table { border-top: 1px solid var(--border); } @media (min-width: 640px) { body.cc main { padding: 31px 28px 48px !important; } } @media (max-width: 1023px) { .cc-rail { width: 62px !important; min-width: 62px; } .cc-rail .cc-label-text, .cc-rail .cc-group-label, .cc-rail .cc-footer-text, .cc-rail .cc-brand-name, .cc-rail .mt-4 { display: none; } .cc-rail .cc-brand, .cc-rail .cc-nav-item, .cc-rail .cc-footer-btn { justify-content: center; } } @media (max-width: 639px) { .cc-rail { display: none; } body.cc main { padding: 20px 14px 80px !important; } .cc-page-title { font-size: 23px; } #cc-float-save { right: 14px; bottom: 14px; left: 14px; width: auto; } }