/* ===================================================================== Bizim Topraklar — Modern Tema v3 (20 iyileştirme) Ek katman: mevcut CSS'lere dokunmaz, EN SON yüklenir. Geri almak için: şablonlardaki bt-modern-v3.css / bt-modern-v3.js satırlarını silin. Bölümler: 1 Tasarım değişkenleri 6 Mesaj yazma alanı 11 Butonlar 16 Rozet / level 2 Tipografi 7 Sohbet üst çubuğu 12 Form alanları 17 Mobil alt menü 3 Giden mesaj balonu 8 Kenar çubuğu 13 Ana sayfa kartları 18 Koyu tema 4 Gelen mesaj + saat/isim 9 Kaydırma çubukları 14 Modal + açılır menü 19 Yönetim paneli 5 Sohbet zemini + tarih 10 Odak halkası + seçim 15 Avatar + durum 20 Hareket + erişilebilirlik ===================================================================== */ /* ---------- 1) TASARIM DEĞİŞKENLERİ ---------- */ :root{ --bt3-red:#d81f3c; --bt3-red-deep:#b4152f; --bt3-red-tint:rgba(216,31,60,.08); --bt3-ink:#141827; --bt3-ink-2:#454b60; --bt3-muted:#8087a0; --bt3-canvas:#f5f6f9; --bt3-surface:#fff; --bt3-hair:rgba(20,24,39,.08); --bt3-hair-strong:rgba(20,24,39,.14); --bt3-sh-1:0 1px 2px rgba(20,24,39,.05); --bt3-sh-2:0 4px 14px rgba(20,24,39,.07); --bt3-sh-3:0 16px 40px rgba(20,24,39,.12); --bt3-r-s:10px; --bt3-r-m:14px; --bt3-r-l:20px; --bt3-r-bubble:18px; --bt3-ease:cubic-bezier(.22,.8,.3,1); --bt3-fast:.16s; --bt3-med:.26s; } /* ---------- 2) TİPOGRAFİ ---------- */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} body{font-feature-settings:"kern","liga","calt";letter-spacing:-.003em} h1,h2,h3,.h1,.h2,.h3,.card-title,.modal-title{letter-spacing:-.018em;font-weight:700} .message-time,.message-status,.online-count,.badge,.bt-char-counter{font-variant-numeric:tabular-nums} html body.tr-chat-shell .cht .message-data{font-size:.925rem;line-height:1.5} html body.tr-chat-shell .cht .message-html{word-break:break-word;overflow-wrap:anywhere} /* ---------- 3) GİDEN MESAJ BALONU ---------- */ html body.tr-chat-shell .cht.sent .message-data{ background:linear-gradient(165deg,#e2334f 0%,#c41f3c 100%) !important; border-radius:var(--bt3-r-bubble) !important; box-shadow:0 1px 2px rgba(180,21,47,.22),0 6px 16px -6px rgba(180,21,47,.30) !important; padding:8px 14px !important; } html body.tr-chat-shell .cht.sent .message-data a{color:#fff;text-decoration-color:rgba(255,255,255,.55);text-underline-offset:2px} /* ---------- 4) GELEN MESAJ + İSİM / SAAT ---------- */ html body.tr-chat-shell .cht.replies .message-data{ background:var(--bt3-surface) !important; border:1px solid var(--bt3-hair) !important; border-radius:var(--bt3-r-bubble) !important; box-shadow:var(--bt3-sh-1) !important; padding:8px 14px !important; } html body.tr-chat-shell .cht .sender-name{font-size:.78rem;font-weight:650;letter-spacing:0;opacity:.95} html body.tr-chat-shell .message-meta-inline{font-size:.66rem;font-weight:500;letter-spacing:.01em;opacity:.78} html body.tr-chat-shell .cht:hover .message-meta-inline{opacity:1} html body.tr-chat-shell .replied-to{border-radius:12px;border-left-width:3px} /* ---------- 5) SOHBET ZEMİNİ + TARİH AYIRICI ---------- */ html body.tr-chat-shell .main-panel{background:var(--bt3-canvas) !important} html body.tr-chat-shell .chat-scroll{scroll-behavior:smooth;padding-inline:clamp(4px,1.6vw,20px)} html body.tr-chat-shell .new-date p{ background:rgba(255,255,255,.78) !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid var(--bt3-hair) !important;box-shadow:none !important; padding:3px 12px !important;font-size:.7rem !important;font-weight:600 !important;letter-spacing:.02em;color:var(--bt3-muted) !important; } html body.tr-chat-shell .bt-unread-line{color:var(--bt3-red)} /* ---------- 6) MESAJ YAZMA ALANI ---------- */ html body.tr-chat-shell .room-editor{background:transparent !important;border-top:0 !important;padding:6px clamp(6px,1.6vw,16px) 10px} html body.tr-chat-shell .editor-container.editor-controller{ background:var(--bt3-surface) !important; border:1px solid var(--bt3-hair-strong) !important; border-radius:24px !important; box-shadow:var(--bt3-sh-2) !important; transition:border-color var(--bt3-fast),box-shadow var(--bt3-med) var(--bt3-ease); } html body.tr-chat-shell .editor-container.editor-controller:focus-within{ border-color:rgba(216,31,60,.5) !important; box-shadow:0 0 0 4px var(--bt3-red-tint),var(--bt3-sh-2) !important; } html body.tr-chat-shell .tr-send-message{ border-radius:50% !important;background:linear-gradient(165deg,#e2334f,#c41f3c) !important;color:#fff !important;border:0 !important; box-shadow:0 4px 12px -2px rgba(180,21,47,.45);transition:transform var(--bt3-fast) var(--bt3-ease),opacity var(--bt3-fast); } html body.tr-chat-shell .tr-send-message:hover{transform:scale(1.06)} html body.tr-chat-shell .tr-send-message:active{transform:scale(.94)} html body.tr-chat-shell .editor-icon{color:var(--bt3-muted);transition:color var(--bt3-fast),transform var(--bt3-fast)} html body.tr-chat-shell .editor-icon:hover{color:var(--bt3-red);transform:translateY(-1px)} html body.tr-chat-shell .is-typing{font-size:.74rem;color:var(--bt3-muted);letter-spacing:.01em} /* ---------- 7) SOHBET ÜST ÇUBUĞU ---------- */ html body.tr-chat-shell .topbar,html body.tr-chat-shell .topbar-channels{ background:rgba(255,255,255,.82) !important; backdrop-filter:saturate(1.4) blur(10px) !important;-webkit-backdrop-filter:saturate(1.4) blur(10px) !important; border-bottom:1px solid var(--bt3-hair) !important;box-shadow:none; transition:box-shadow var(--bt3-med); } html body.tr-chat-shell.bt3-scrolled .topbar{box-shadow:0 6px 18px -10px rgba(20,24,39,.25)} html body.tr-chat-shell .room-title,html body.tr-chat-shell .top-channel-name{font-weight:700 !important;letter-spacing:-.012em} /* ---------- 8) KENAR ÇUBUĞU / ODA LİSTESİ ---------- */ html body.tr-chat-shell .sidebar-wrapper{background:var(--bt3-surface) !important;border-right:1px solid var(--bt3-hair) !important} html body.tr-chat-shell .channel-item,html body.tr-chat-shell .user-list-item,html body.tr-chat-shell .member-item{ border-radius:12px !important;margin:1px 6px;position:relative; transition:background var(--bt3-fast),transform var(--bt3-fast) var(--bt3-ease); } html body.tr-chat-shell .channel-item:hover,html body.tr-chat-shell .user-list-item:hover{background:rgba(20,24,39,.045) !important} html body.tr-chat-shell .channel-item.active{background:var(--bt3-red-tint) !important;color:var(--bt3-red-deep) !important;font-weight:650} html body.tr-chat-shell .channel-item.active::before{ content:"";position:absolute;left:-6px;top:22%;bottom:22%;width:3px;border-radius:0 3px 3px 0;background:var(--bt3-red); } html body.tr-chat-shell .sidebar-unread-dot,.bt-unread-badge{box-shadow:0 0 0 2px var(--bt3-surface)} html body.tr-chat-shell .room-img{border-radius:var(--bt3-r-m)} /* ---------- 9) İNCE KAYDIRMA ÇUBUKLARI ---------- */ *{scrollbar-width:thin;scrollbar-color:rgba(20,24,39,.22) transparent} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(20,24,39,.18);border-radius:999px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:rgba(20,24,39,.32);background-clip:content-box;border:2px solid transparent} /* ---------- 10) ODAK HALKASI + SEÇİM RENGİ ---------- */ ::selection{background:rgba(216,31,60,.2);color:inherit} :where(a,button,[role="button"],input,select,textarea,summary):focus-visible{ outline:2px solid var(--bt3-red);outline-offset:2px;border-radius:var(--bt3-r-s); } :where(input,textarea,select):focus-visible{outline-offset:0} /* ---------- 11) BUTONLAR ---------- */ .btn{border-radius:var(--bt3-r-m);font-weight:600;letter-spacing:0; transition:background var(--bt3-fast),border-color var(--bt3-fast),box-shadow var(--bt3-fast),transform var(--bt3-fast) var(--bt3-ease)} .btn:active:not(:disabled){transform:translateY(1px) scale(.985)} .btn-primary,.btn-red,.btn-danger{box-shadow:0 1px 2px rgba(20,24,39,.12),0 6px 14px -6px rgba(180,21,47,.45)} .btn-primary:hover,.btn-red:hover{box-shadow:0 2px 4px rgba(20,24,39,.12),0 10px 20px -8px rgba(180,21,47,.5)} .btn-ghost-dark,.btn-ghost-secondary{border-radius:12px} html body.tr-chat-shell .scroll-to-bottom-btn,html body.tr-chat-shell .new-messages-indicator{ border-radius:999px !important;border:1px solid var(--bt3-hair) !important;background:rgba(255,255,255,.92) !important; box-shadow:var(--bt3-sh-3) !important;color:var(--bt3-ink) !important; } /* ---------- 12) FORM ALANLARI ---------- */ .form-control,.form-select,.select2-container--default .select2-selection--single,.ts-control{ border-radius:var(--bt3-r-m) !important;border-color:var(--bt3-hair-strong);background-color:rgba(20,24,39,.02); transition:border-color var(--bt3-fast),box-shadow var(--bt3-fast),background-color var(--bt3-fast); } .form-control:hover,.form-select:hover{border-color:rgba(20,24,39,.24)} .form-control:focus,.form-select:focus,.ts-control.focus{ background-color:#fff;border-color:rgba(216,31,60,.55) !important;box-shadow:0 0 0 4px var(--bt3-red-tint) !important; } .form-control::placeholder{color:var(--bt3-muted);opacity:.85} .form-label{font-weight:600;font-size:.82rem;color:var(--bt3-ink-2)} /* ---------- 13) ANA SAYFA KARTLARI ---------- */ .bt-room-grid > *{border-radius:var(--bt3-r-l);overflow:hidden;background:var(--bt3-surface); border:1px solid var(--bt3-hair);box-shadow:var(--bt3-sh-1); transition:transform var(--bt3-med) var(--bt3-ease),box-shadow var(--bt3-med) var(--bt3-ease),border-color var(--bt3-fast)} .bt-room-grid > *:hover{transform:translateY(-3px);box-shadow:var(--bt3-sh-3);border-color:var(--bt3-hair-strong)} .bt-room-grid img{transition:transform .6s var(--bt3-ease)} .bt-room-grid > *:hover img{transform:scale(1.04)} .card{border-radius:var(--bt3-r-l);border:1px solid var(--bt3-hair);box-shadow:var(--bt3-sh-1)} .bt-home-search input{border-radius:999px !important} .bt-region-pills > *{border-radius:999px;transition:background var(--bt3-fast),color var(--bt3-fast)} /* ---------- 14) MODAL + AÇILIR MENÜ ---------- */ .modal-backdrop.show{opacity:.42;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .modal-content{border:1px solid var(--bt3-hair);border-radius:var(--bt3-r-l);box-shadow:var(--bt3-sh-3);overflow:hidden} .modal-header{border-bottom:1px solid var(--bt3-hair)} .modal-footer{border-top:1px solid var(--bt3-hair)} .modal.fade .modal-dialog{transform:translateY(14px) scale(.985);transition:transform var(--bt3-med) var(--bt3-ease)} .modal.show .modal-dialog{transform:none} .dropdown-menu{border:1px solid var(--bt3-hair);border-radius:var(--bt3-r-m);box-shadow:var(--bt3-sh-3);padding:6px;animation:bt3Pop .16s var(--bt3-ease)} .dropdown-item{border-radius:9px;font-weight:500;transition:background var(--bt3-fast)} .dropdown-item:hover,.dropdown-item:focus{background:rgba(20,24,39,.055)} /* ---------- 15) AVATAR + ÇEVRİMİÇİ DURUMU ---------- */ html body.tr-chat-shell .cht .avatar{border:2px solid var(--bt3-surface) !important;box-shadow:0 0 0 1px var(--bt3-hair),var(--bt3-sh-1) !important; transition:transform var(--bt3-fast) var(--bt3-ease)} html body.tr-chat-shell .cht .avatar:hover{transform:scale(1.06)} .online-status,.status-dot{box-shadow:0 0 0 2px var(--bt3-surface)} /* ---------- 16) ROZET / LEVEL ---------- */ html body.tr-chat-shell .sender-name .user-badge{flex:0 0 auto;filter:drop-shadow(0 1px 1px rgba(20,24,39,.18));margin-left:5px !important} .badge{font-weight:600;letter-spacing:.01em;border-radius:999px} /* ---------- 17) MOBİL ALT MENÜ ---------- */ @media (max-width:768px){ .tr-mobile-chat-nav,.tr-mobile-nav{ background:rgba(255,255,255,.88) !important;backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid var(--bt3-hair) !important;padding-bottom:max(env(safe-area-inset-bottom),4px); } .tr-mobile-nav-item{position:relative;transition:color var(--bt3-fast),transform var(--bt3-fast) var(--bt3-ease)} .tr-mobile-nav-item.active{color:var(--bt3-red) !important} .tr-mobile-nav-item.active::after{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:0 0 3px 3px;background:var(--bt3-red)} .tr-mobile-nav-item:active{transform:scale(.94)} html body.tr-chat-shell .editor-container.editor-controller{border-radius:22px !important} html body.tr-chat-shell .chat-scroll{padding-inline:4px} } /* ---------- 18) KOYU TEMA ---------- */ html[data-bs-theme="dark"]{ --bt3-ink:#eceef6;--bt3-ink-2:#b8bdd0;--bt3-muted:#7f86a2;--bt3-canvas:#0f1220;--bt3-surface:#171b2d; --bt3-hair:rgba(255,255,255,.08);--bt3-hair-strong:rgba(255,255,255,.14); --bt3-sh-1:0 1px 2px rgba(0,0,0,.35);--bt3-sh-2:0 6px 18px rgba(0,0,0,.35);--bt3-sh-3:0 18px 44px rgba(0,0,0,.5); --bt3-red-tint:rgba(255,82,102,.12); } html[data-bs-theme="dark"] body.tr-chat-shell .cht.replies .message-data{background:#1d2238 !important;color:var(--bt3-ink) !important;border-color:var(--bt3-hair) !important} html[data-bs-theme="dark"] body.tr-chat-shell .topbar,html[data-bs-theme="dark"] body.tr-chat-shell .topbar-channels{background:rgba(23,27,45,.85) !important} html[data-bs-theme="dark"] body.tr-chat-shell .sidebar-wrapper{background:var(--bt3-surface) !important} html[data-bs-theme="dark"] body.tr-chat-shell .editor-container.editor-controller{background:var(--bt3-surface) !important} html[data-bs-theme="dark"] body.tr-chat-shell .new-date p{background:rgba(23,27,45,.85) !important} html[data-bs-theme="dark"] body.tr-chat-shell .channel-item:hover{background:rgba(255,255,255,.06) !important} html[data-bs-theme="dark"] .form-control,html[data-bs-theme="dark"] .form-select{background-color:rgba(255,255,255,.04)} html[data-bs-theme="dark"] .form-control:focus{background-color:rgba(255,255,255,.07)} html[data-bs-theme="dark"] *{scrollbar-color:rgba(255,255,255,.22) transparent} html[data-bs-theme="dark"] ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);background-clip:content-box} html[data-bs-theme="dark"] .tr-mobile-chat-nav,html[data-bs-theme="dark"] .tr-mobile-nav{background:rgba(23,27,45,.9) !important} /* ---------- 19) YÖNETİM PANELİ ---------- */ .page-wrapper,.page{background:var(--bt3-canvas)} .navbar-vertical{border-right:1px solid var(--bt3-hair);box-shadow:none} .navbar-vertical .nav-link{border-radius:10px;margin:1px 8px;font-weight:500;transition:background var(--bt3-fast)} .navbar-vertical .nav-link:hover{background:rgba(20,24,39,.05)} .navbar-vertical .nav-link.active,.navbar-vertical .nav-item.active>.nav-link{background:var(--bt3-red-tint);color:var(--bt3-red-deep);font-weight:650} .table{--bs-table-hover-bg:rgba(20,24,39,.03)} .table thead th{font-size:.72rem;font-weight:650;letter-spacing:.04em;text-transform:none;color:var(--bt3-muted);border-bottom:1px solid var(--bt3-hair-strong)} .table td,.table th{border-color:var(--bt3-hair);vertical-align:middle} .dataTables_wrapper .dataTables_filter input,.dt-search input{border-radius:999px;padding-inline:14px} .page-link{border-radius:9px;margin:0 2px;border-color:transparent} .toast,.toast-success,.toast-error,#toast-container>div{border-radius:14px !important;box-shadow:var(--bt3-sh-3) !important} /* ---------- 20) HAREKET + ERİŞİLEBİLİRLİK ---------- */ @keyframes bt3Pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} @keyframes bt3In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes bt3Shimmer{from{background-position:200% 0}to{background-position:-200% 0}} html.bt3-ready body.tr-chat-shell .cht.bt3-new{animation:bt3In .28s var(--bt3-ease) both} .skeleton,.placeholder-glow .placeholder{background:linear-gradient(90deg,rgba(20,24,39,.05) 25%,rgba(20,24,39,.10) 37%,rgba(20,24,39,.05) 63%); background-size:400% 100%;animation:bt3Shimmer 1.4s ease infinite;border-radius:8px} a{transition:color var(--bt3-fast)} img{image-rendering:auto} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } @media print{.topbar,.room-editor,.tr-mobile-chat-nav{display:none !important}}