body, html {
    margin: 0px;
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    text-align: var(--bs-body-text-align);
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    background: rgb(236, 240, 244);
    overflow-x: hidden;
}
/* GÖVDE YAZI BOYU — 2026-08-02
   font-size YALNIZ body'ye verilir. Eskiden bu bildirim yukarıdaki
   `body, html` kuralının içindeydi ve --bs-body-font-size (0.875rem) İKİ KEZ
   uygulanıyordu:
       html → 16 × 0.875 = 14px      (rem kökte başlangıç değerine göre çözülür)
       body → 14 × 0.875 = 12,25px
   Sonuç: tüm site %87,5 ölçekte çiziliyordu — yalnız yazı değil, rem tabanlı
   HER ölçü (buton yazısı, iç boşluk, dokunma hedefi). Kullanıcılar "yazılar
   okunmuyor" diyordu; canlı sitede (katiponline.com) html 16px / body 14px.
   Ölçüm: /duello'da 12px altı görünür metin 266 öğe → düzeltme sonrası ölçüldü.
   Bootstrap'in kendi reboot'u da (core.css:99) html'e font-size vermez.
   Sınav/yazma ekranları etkilenmez: .yazilacak-metin 13pt, .yazilan-metin 17px,
   #yazialani-hizsavasisinavmodu 30px — hepsi mutlak birim. */
body { font-size: var(--bs-body-font-size); }


html {
    text-size-adjust: none;
}

input[type="submit"] {
    appearance: none;
}

*, ::after, ::before {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: rgb(85, 85, 85);
}

a:focus, a:hover {
    outline: 0px;
    text-decoration: none;
}

:focus {
    outline: 0px;
}

img {
    border: 0px;
    vertical-align: top;
    max-width: 100%;
    height: auto;
}

input, select, textarea {
    resize: none;
    font-family: Inter, sans-serif;
}

select, textarea {
    outline: 0px;
}

.slick-slide, a, button, input {
    outline: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    padding: 0px;
    font-weight: 700;
    color: rgb(32, 35, 66);
    font-family: Inter, sans-serif;
}

ol, p, ul {
    padding: 0px;
}

ol, ul {
    margin: 0px;
    list-style: none;
}

p {
    margin: 0px 0px 15px;
}

.container {
    max-width: 1120px;
    width: 100%;
}

.pre-loader {
    background: center center / 13% rgb(255, 255, 255);
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 12345;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.pre-loader .loader-logo {
    padding-bottom: 15px;
}

.pre-loader .loader-progress {
    height: 8px;
    border-radius: 15px;
    max-width: 200px;
    margin: 0px auto;
    display: block;
    background: rgb(236, 240, 244);
    overflow: hidden;
}

.pre-loader .bar {
    width: 0%;
    height: 8px;
    display: block;
    background: rgb(27, 0, 255);
}

.pre-loader .percent {
    text-align: center;
    font-size: 24px;
    display: none;
}

.pre-loader .loading-text {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding-top: 15px;
}

.mx-w-150 {
    max-width: 150px;
}

.mx-h-300 {
    max-height: 300px;
}

.mx-h-350 {
    max-height: 350px;
}

.mx-h-380 {
    max-height: 380px;
}

.mx-h-400 {
    max-height: 400px;
}

.mx-h-450 {
    max-height: 450px;
}

.pd-0 {
    padding: 0px;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-30 {
    padding-top: 30px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.pd-5 {
    padding: 5px;
}

.pd-10 {
    padding: 10px;
}

.pd-20 {
    padding: 20px;
}

.chat-box .chat-desc ul, .pd-ltr-20 {
    padding: 20px 0px 0px 5px;
}

.pd-30 {
    padding: 30px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-30 {
    padding-top: 30px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-30 {
    padding-right: 30px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-30 {
    padding-left: 30px;
}

.margin-5 {
    margin: 5px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-30 {
    margin-top: 30px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.font-30 {
    font-size: 30px;
    line-height: 1.33em;
}

.font-24 {
    font-size: 24px;
    line-height: 1.42em;
}

.font-20 {
    font-size: 20px;
    line-height: 1.5em;
}

.font-18 {
    font-size: 18px;
    line-height: 1.65em;
}

.font-16 {
    font-size: 16px;
    line-height: 1.62em;
}

.font-14 {
    font-size: 14px;
    line-height: 1.71em;
}

.font-12 {
    font-size: 12px;
    line-height: 1.83em;
}

.h1 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
}

.h1, .h2, .h3 {
    color: rgb(27, 49, 51);
    font-family: Inter, sans-serif;
}

.h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

.h3 {
    font-size: 24px;
    line-height: 1.5;
}

.h3, .h4 {
    font-weight: 700;
}

.h4, .h5, .page-header h4 {
    font-size: 20px;
    line-height: 1.35;
    color: rgb(27, 49, 51);
    font-family: Inter, sans-serif;
}

.h5 {
    font-size: 18px;
    font-weight: 600;
}

.line-height-1 {
    line-height: 1;
}

.line-height-1-2 {
    line-height: 1.2;
}

.line-height-1-3 {
    line-height: 1.3;
}

.weight-300 {
    font-weight: 300;
}

.weight-400 {
    font-weight: 400;
}

.weight-500 {
    font-weight: 500;
}

.weight-600 {
    font-weight: 600;
}

.weight-700 {
    font-weight: 700;
}

.weight-800 {
    font-weight: 800;
}

.height-auto {
    height: auto;
}

.height-100-p {
    height: 100%;
}

.width-50-p {
    width: 50%;
}

.width-box {
    width: 50px;
    height: 50px;
}

.max-width-100 {
    max-width: 100px;
}

.max-width-150 {
    max-width: 150px;
}

.max-width-200 {
    max-width: 200px;
}

.max-width-300 {
    max-width: 300px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-500 {
    max-width: 500px;
}

.max-width-600 {
    max-width: 600px;
}

.max-width-700 {
    max-width: 700px;
}

.max-width-800 {
    max-width: 800px;
}

.max-width-900 {
    max-width: 900px;
}

.max-width-1000 {
    max-width: 1000px;
}

.min-height-200px {
    min-height: 200px;
}

.bg-cover {
    background-size: cover !important;
}

.bg-light-blue {
    background-color: rgb(225, 225, 245);
}

.color-light-blue {
    color: rgb(225, 225, 245);
}

.bg-light-gray {
    background-color: rgb(236, 240, 244);
}

.bg-white {
    background: rgb(255, 255, 255);
}

.color-white {
    color: rgb(255, 255, 255);
}

.bg-light-green {
    background-color: rgb(65, 204, 186);
}

.text-light-green {
    color: rgb(0, 224, 145);
}

.bg-blue {
    background-color: rgb(27, 0, 255);
}

.text-blue {
    color: rgb(27, 0, 255);
}

.text-light-blue {
    color: rgb(41, 118, 170);
}

.bg-light-orange {
    background-color: rgb(245, 103, 103) !important;
}

.text-light-orange {
    color: rgb(245, 103, 103);
}

.bg-light-purple {
    background-color: rgb(166, 131, 235) !important;
}

.text-light-purple {
    color: rgb(166, 131, 235);
}

.bg-orange {
    background-color: rgb(245, 149, 108);
}

.text-orange {
    color: rgb(245, 149, 108);
}

.text-yellow {
    color: rgb(236, 199, 47);
}

.text-green {
    color: rgb(70, 190, 138);
}

.text-orange-50 {
    color: rgb(242, 166, 84);
}

.text-blue-50 {
    color: rgb(98, 168, 234);
}

.text-red-50 {
    color: rgb(225, 78, 80);
}

.mCSB_inside > .mCSB_container {
    margin-right: 0px;
}

.border-radius-0 {
    border-radius: 0px;
}

.border-radius-4 {
    border-radius: 4px;
}

.border-radius-5 {
    border-radius: 5px;
}

.border-radius-6 {
    border-radius: 6px;
}

.border-radius-8 {
    border-radius: 8px;
}

.border-radius-10 {
    border-radius: 10px;
}

.border-radius-100, .user-info-dropdown .dropdown-toggle .user-icon img {
    object-fit: cover;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 10px;
}

.box-shadow {
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
}

.wave1 {
    background-image: url("../images/wave.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.card-box, .da-card {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
}

.card-img-top {
    border-radius: 10px 10px 0px 0px;
}

.card-img-bottom {
    border-radius: 0px 0px 10px 10px;
}

.card-img {
    border-radius: 10px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
}

.card-header {
    font-weight: 500;
    font-size: 16px;
}

.card-text, .price del {
    font-size: 15px;
}

.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1;
    color: rgb(255, 255, 255);
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-sm {
    padding: 0.45em 0.55em;
    font-size: 60%;
}

.badge-md {
    padding: 0.65em 0.75em;
    font-size: 70%;
}

.page-link:focus {
    box-shadow: none;
}

.highcharts-root {
    font-family: Inter, sans-serif !important;
}

.bootstrap-select .dropdown-toggle {
    height: 45px;
    padding-right: 30px;
    font-size: 14px;
    font-weight: 400;
}

.bootstrap-select.form-control-sm .dropdown-toggle {
    height: 38px;
    padding-right: 30px;
}

.bootstrap-select .dropdown-toggle .filter-option {
    height: auto;
}

.bootstrap-select .dropdown-toggle.btn-light {
    background-color: transparent;
    border-color: rgb(212, 212, 212);
}

.bootstrap-select .dropdown-toggle.btn-light:not(:disabled):not(.disabled):active {
    background-color: transparent;
    border-color: rgb(212, 212, 212);
}

.dropdown-toggle::after {
    content: "";
    font-family: FontAwesome;
    vertical-align: unset;
    width: auto;
    height: auto;
    border: 0px !important;
}

.bootstrap-select .dropdown-toggle::after {
    position: absolute;
    right: 10px;
}

.dropdown.show > .dropdown-toggle::after {
    content: "";
}

.dropdown-toggle.no-arrow::after {
    display: none;
}

.dropdown-menu {
    border: 0px;
    padding: 0px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 28px;
}

.dropdown-item {
    font-size: 15px;
    font-weight: 400;
    padding: 0.657rem 1rem;
    letter-spacing: 0px;
    color: rgb(68, 68, 68);
    font-family: Inter, sans-serif;
    transition: 0.3s ease-in-out;
}

.dropdown-item:focus, .dropdown-item:hover {
    background: rgb(236, 240, 244);
    color: rgb(27, 0, 255);
}

.form-group {
    margin-bottom: 20px;
}

.form-group > label {
    font-weight: 500;
    font-size: 12px;
}

.custom-file-input, .custom-file-label, .custom-select, .form-control {
    font-family: Inter, sans-serif;
    color: rgb(19, 30, 34);
    font-weight: 400;
    height: 35px;
    border-color: rgb(212, 212, 212);
    transition: 0.3s ease-in-out;
}

.custom-file-input, .custom-select, .form-control {
    font-size: 12px;
    border-radius: 8px;
}

.form-control.form-control-sm {
    height: 38px;
}

.form-control.form-control-line {
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 0px;
}

.custom-file-label {
    padding-top: 0.475rem;
    letter-spacing: 0.035em;
}

.custom-file-label::after {
    height: 100%;
    padding-top: 0.475rem;
}

textarea.form-control {
    height: 180px;
}

.custom-file-input:focus, .custom-select:focus, .form-control:focus {
    color: rgb(19, 30, 34);
    border-color: rgb(27, 0, 255);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 28px;
}

.form-control.height-auto {
    height: auto;
}

.input-group {
    margin-bottom: 25px;
}

.input-group.custom > .custom-select, .input-group.custom > .form-control {
    width: 100%;
}

.input-group.custom > .custom-select:not(:first-child), .input-group.custom > .form-control:not(:first-child) {
    border-radius: 0.25rem;
    padding-left: 50px;
}

.input-group.custom > .custom-select:not(:last-child), .input-group.custom > .form-control:not(:last-child) {
    border-radius: 0.25rem;
    padding-right: 50px;
}

.input-group-prepend.custom {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 12;
    height: 100%;
}

.input-group-append.custom {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 12;
    height: 100%;
}

.input-group-text {
    border: 0px;
    background: 0px 0px;
}

.input-group-text i {
    font-size: 20px;
}

.form-control:focus ~ .input-group-append .fa {
    color: rgb(27, 0, 255);
}

.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-append > .btn, .input-group-lg > .input-group-append > .input-group-text, .input-group-lg > .input-group-prepend > .btn, .input-group-lg > .input-group-prepend > .input-group-text {
    height: 50px;
    font-size: 16px;
}

.has-success {
    color: rgb(40, 167, 69);
}

.form-control-success {
    border-color: rgb(40, 167, 69);
    background-image: url("../images/check-mark-green.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}

.form-control-success:focus {
    border-color: rgb(40, 167, 69);
    box-shadow: rgb(40, 167, 69) 0px 0px 0px 1px;
}

.has-warning {
    color: rgb(255, 193, 7);
}

.form-control-warning {
    border-color: rgb(255, 193, 7);
    background-image: url("../images/caution-sign.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}

.form-control-warning:focus {
    border-color: rgb(255, 193, 7);
    box-shadow: rgb(255, 193, 7) 0px 0px 0px 1px;
}

.has-danger {
    color: rgb(220, 53, 69);
}

.form-control-danger {
    border-color: rgb(220, 53, 69);
    background-image: url("../images/cross.png");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px 14px;
}

.form-control-danger:focus {
    border-color: rgb(220, 53, 69);
    box-shadow: rgb(220, 53, 69) 0px 0px 0px 1px;
}

.btn {
    font-family: Inter, sans-serif;
    letter-spacing: 0px;
    font-weight: 500;
    padding: 0.719rem 1rem;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
}

.btn-lg {
    padding: 0.657rem 1rem;
}

.btn-group-lg > .btn, .btn-lg {
    font-size: 16px;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 11px;
}

.btn-xs {
    padding: 0px 0.4rem;
    font-size: 12px;
}

.btn.focus, .btn:focus {
    box-shadow: none !important;
}

.btn-rounded {
    border-radius: 25px;
}

.breadcrumb {
    background: 0px 0px;
    padding: 0.75rem 0px;
}

.breadcrumb-item.active {
    color: rgb(27, 0, 255);
    font-weight: 500;
}

.breadcrumb-item a {
    color: rgb(3, 30, 35);
}

.breadcrumb-item + .breadcrumb-item::before {
    font-family: FontAwesome;
    content: "";
}

.customscroll-10-p > .mCustomScrollBox > .mCSB_container {
    padding: 10px;
}

.datepicker {
    z-index: 1060;
}

.datepicker--day-name, .datepicker--time-current-hours, .datepicker--time-current-minutes {
    color: rgb(27, 0, 255);
}

.datepicker--nav-action path {
    stroke: rgb(27, 0, 255);
}

.datepicker--cell.-focus-, .datepicker--nav-action:hover, .datepicker--nav-title:hover {
    background: rgb(225, 225, 245);
    color: rgb(27, 0, 255);
}

.datepicker--cell.-selected- {
    color: rgb(255, 255, 255);
}

.datepicker--time-current-hours::after, .datepicker--time-current-minutes::after {
    display: none;
}

.datepicker-inline .datepicker {
    margin: 0px auto;
}

.form-control.time-picker-default:disabled, .form-control.time-picker-default[readonly], .form-control.time-picker:disabled, .form-control.time-picker[readonly] {
    background: rgb(255, 255, 255);
}

.custom-control {
    padding-left: 35px;
    cursor: pointer;
    padding-bottom: 5px;
}

.custom-control-label {
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    padding-top: 2px;
}

.custom-control-label::before {
    width: 20px;
    height: 20px;
    top: 2px;
    left: -30px;
    background-color: transparent;
    border: 2px solid rgb(27, 0, 255);
}

.custom-control-label::after {
    width: 20px;
    height: 20px;
    left: -30px;
    background-size: 60%;
    top: 2px;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: rgb(27, 0, 255);
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("../images/check-mark.png");
    background-repeat: no-repeat;
    background-position: center center;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: rgb(27, 0, 255);
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    border: 2px solid transparent;
}

.select2-container .select2-selection--single {
    height: 35px;
    border-color: rgb(212, 212, 212);
    outline: 0px;
    letter-spacing: 0.035em;
    transition: 0.3s ease-in-out;
}

.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-dropdown {
    border-color: rgb(212, 212, 212);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 33px;
    font-size: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgb(27, 0, 255);
    color: rgb(255, 255, 255);
    border-color: rgb(27, 0, 255);
}

.select2-container--default .select2-selection--multiple {
    min-height: 45px;
    border-color: rgb(212, 212, 212);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding-top: 3px;
}

.select2-container--default .select2-selection__rendered {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container {
    width: 100% !important;
}

.select2-container .selection {
    width: 100%;
}

.select2-container--default .select2-selection--single {
    width: 100%;
    box-sizing: border-box;
}

.select2-container--default .select2-selection__rendered {
    display: block;
    width: calc(100% - 20px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.select2-container--default .select2-selection__arrow {
    width: 30px;
}

.select2-selection__clear {
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgb(255, 255, 255);
}

.select2-dropdown {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 28px;
}

.select2-search--dropdown {
    padding: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-radius: 5px;
}

.bootstrap-select .dropdown-menu li .dropdown-item.active:hover, .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgb(27, 0, 255);
    color: rgb(255, 255, 255);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: rgb(27, 0, 255);
}

.bootstrap-select.btn-group .dropdown-menu.inner, table.dataTable > tbody > tr.child ul.dtr-details .dtr-title {
    display: block;
}

.bootstrap-select .dropdown-toggle:focus {
    outline: 0px !important;
}

.bootstrap-select .dropdown-header {
    color: rgb(34, 34, 34);
    font-weight: 700;
    font-size: 15px;
}

.bootstrap-select .dropdown-menu li .dropdown-item:hover {
    color: rgb(27, 0, 255);
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    top: 13px;
}

.bootstrap-select .bs-ok-default::after {
    border-width: 0px 2px 2px 0px;
}

.dropup .dropdown-toggle::after {
    content: "";
    font-family: FontAwesome;
    vertical-align: unset;
    width: auto;
    height: auto;
    border: 0px !important;
}

.bootstrap-select.btn-group .dropdown-menu li a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    padding: 0.55rem 1rem;
    color: rgb(102, 127, 135);
    font-family: Inter, sans-serif;
    transition: 0.3s ease-in-out;
}

.bootstrap-select.btn-group .dropdown-menu li.divider {
    border: 1px solid rgb(234, 234, 234);
}

.bootstrap-select.btn-group .dropdown-menu li.selected a {
    background: rgb(225, 225, 245);
    color: rgb(19, 30, 34);
}

.bootstrap-select.btn-group .dropdown-menu li.disabled a {
    color: rgb(206, 206, 206);
}

.bootstrap-select.btn-group .dropdown-menu li a:hover {
    background: rgb(225, 225, 245);
    color: rgb(19, 30, 34);
}

.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
    background: url("../images/check-mark-green.png") 0% 0% / contain;
    width: 15px;
    height: 15px;
}

.label-info {
    background-color: rgb(0, 158, 251);
}

.bootstrap-tagsinput .tag {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px;
    font-size: 15px;
    border-radius: 2px;
}

.docs-options .dropdown-menu {
    max-height: 250px;
    overflow: auto;
}

.docs-buttons {
    padding-top: 15px;
}

.docs-buttons label, .notification-list ul li a p, .project-info-right p {
    margin-bottom: 0px;
}

.docs-buttons .btn {
    margin-bottom: 5px;
}

.table thead th {
    font-weight: 600;
    font-size: 15px;
    border-bottom: 0px;
    padding-left: 1rem;
}

.table td, .table th {
    vertical-align: middle;
}

.table td {
    font-size: 14px;
    font-weight: 500;
    padding: 1rem;
}

.table-striped tbody tr:nth-of-type(2n+1) {
    background: rgb(234, 238, 242);
}

table.dataTable.display tbody tr.odd, table.dataTable.display tbody tr:hover, table.dataTable.hover tbody tr:hover, table.dataTable.stripe tbody tr.odd {
    background: rgb(236, 240, 243) !important;
}

table.dataTable tbody tr.selected, table.dataTable.display tbody tr:hover.selected, table.dataTable.hover tbody tr:hover.selected {
    background-color: rgb(24, 31, 72) !important;
    color: rgb(255, 255, 255);
}

table.dataTable.display tbody tr.odd.selected, table.dataTable.stripe tbody tr.odd.selected {
    background-color: rgb(27, 0, 255) !important;
}

table.dataTable thead .sorting::after, table.dataTable thead .sorting::before, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_asc_disabled::before, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc_disabled::after, table.dataTable thead .sorting_desc_disabled::before {
    font-family: dropways;
    font-size: 14px;
}

table.dataTable thead .sorting::before, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_asc_disabled::before, table.dataTable thead .sorting_desc::before, table.dataTable thead .sorting_desc_disabled::before {
    content: "";
}

table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_desc_disabled::after {
    content: "";
    right: 0.2em;
}

.blog-list ul li:hover .blog-caption h4 a, .fontawesome-icon-list .fa-hover:hover a, table.dataTable thead .sorting_asc::before, table.dataTable thead .sorting_desc::after {
    color: rgb(27, 0, 255);
}

table.dataTable > tbody > tr.child ul.dtr-details {
    white-space: normal;
}

.dataTables_length, .dt-buttons, div.dataTables_wrapper div.dataTables_filter, div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
    padding-left: 15px;
    padding-right: 15px;
}

.dt-checkbox, .dt-checkbox input {
    width: 20px;
    height: 20px;
    position: relative;
}

.dt-checkbox input {
    position: absolute;
    opacity: 0;
    z-index: 1;
    left: 0px;
    top: 0px;
}

.dt-checkbox span, .dt-checkbox span::before {
    width: 20px;
    height: 20px;
    transition: 0.3s ease-in-out;
}

.dt-checkbox span {
    position: relative;
    display: block;
    border: 1px solid rgb(158, 158, 158);
    border-radius: 4px;
}

.dt-checkbox span::before {
    content: "";
    background: url("../images/check-mark.png") center center / 12px 12px no-repeat;
    position: absolute;
    left: 0px;
    top: -1px;
    transform: scale(0);
}

.dt-checkbox input:checked ~ span {
    background: rgb(27, 0, 255);
    border-color: rgb(27, 0, 255);
    color: rgb(255, 255, 255);
}

.dt-checkbox input:checked ~ span::before {
    transform: scale(1);
}

.plyr {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px 2px;
}

.popover-header {
    font-weight: 500;
}

.list-group-flush .list-group-item {
    border-top: 0px;
    margin-bottom: 0px;
}

.docs-cropped .modal-body > canvas, .docs-cropped .modal-body > img, .img-preview > img {
    max-width: 100%;
}

.apexcharts-svg * {
    font-family: Inter, sans-serif !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
    box-shadow: none;
    border: 0px;
    border-radius: 0px;
    font-family: FontAwesome;
    background: 0px 0px;
    content: "";
    color: rgb(68, 68, 68);
    font-size: 23px;
    left: 7px;
    top: 50%;
    margin-top: -7px;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
    content: "";
    background: 0px 0px;
}

.header {
    position: fixed;
    height: 60px;
    /* Sidebar 250px (left-sidebar.ejs:1458). 240 kalinca basligin sol 10px'i
       sidebar altinda kaliyordu; .main-container ile ayni hatanin ikiziydi.
       Asagidaki @media (1301-1400px) blogu zaten 250 veriyordu. */
    width: calc(100% - 250px);
    background: rgb(255, 255, 255);
    right: 0px;
    top: 0px;
    z-index: 123;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    transition: 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 25px;
}

.header-left {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    height: 100%;
    width: 20%;
}

.brand-logo a .dark-logo, .header-left .search-toggle-icon, .sidebar-light .brand-logo a .light-logo {
    display: none;
}

.header-left .header-search {
    width: 100%;
    padding-left: 20px;
}

.header-left .header-search .form-group {
    position: relative;
}

.header-left .header-search .search-icon {
    position: absolute;
    left: 17px;
    top: 12px;
    font-size: 20px;
    color: rgb(119, 119, 119);
}

.header-left .header-search .dropdown {
    position: static;
    right: 0px;
    top: 0px;
    padding-right: 10px;
}

.header-left .header-search .dropdown .dropdown-toggle {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 45px;
    height: 45px;
    font-size: 20px;
    line-height: 45px;
    text-align: center;
    border-radius: 0px 0.25rem 0.25rem 0px;
    color: rgb(119, 119, 119);
    transition: 0.3s ease-in-out;
}

.contact-directory-box:hover .view-contact a, .header-left .header-search .dropdown .dropdown-toggle:hover, .header-left .header-search .dropdown.show .dropdown-toggle {
    background: rgb(27, 0, 255);
    color: rgb(255, 255, 255);
}

.header-left .header-search .dropdown .dropdown-menu {
    width: 100%;
    min-width: 100%;
    margin-top: 5px;
    padding: 20px;
}

.header-left .header-search .search-input {
    padding-left: 50px;
    padding-right: 55px;
}

.header-right {
    display: flex;
    -webkit-box-pack: end;
    justify-content: flex-end;
    height: 50px;
    width: 80%;
}

.header-left .brand-logo {
    max-width: 240px;
    display: block;
}

.header-right .brand-logo a {
    padding: 0px 6px;
}

.header-right .menu-icon {
    position: relative;
    right: 0px;
    float: left;
    display: none;
}

.user-info-dropdown {
    padding: 5px 10px 5px 0px;
}

.user-info-dropdown .dropdown-toggle {
    display: block;
    padding: 5px 0px;
    font-size: 16px;
}

.user-info-dropdown .dropdown-toggle .user-icon {
    width: 40px;
    height: 40px;
    font-size: 24px;
    background: rgb(235, 239, 243);
    color: rgb(27, 0, 255);
    line-height: 42px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 0px 10px;
}

.user-info-dropdown .dropdown-toggle .user-name {
    font-weight: 500;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    color: rgb(19, 30, 34);
    font-family: Inter, sans-serif;
}

.user-info-dropdown .dropdown-menu {
    min-width: 185px;
}

.dropdown-menu-icon-list .dropdown-item {
    position: relative;
    padding-left: 45px;
}

.dropdown-menu-icon-list .dropdown-item i {
    position: absolute;
    left: 16px;
    top: 50%;
    font-size: 18px;
    transform: translate(0px, -50%);
}

.user-notification {
    float: right;
    margin-right: 10px;
    padding: 17px 5px 10px 0px;
}

.user-notification .dropdown-toggle {
    font-size: 20px;
    padding: 10px;
    color: rgb(85, 85, 85);
    position: relative;
}

.user-notification .dropdown-toggle .badge {
    position: absolute;
    right: 8px;
    top: 10px;
    background: rgb(245, 103, 138);
    width: 8px;
    height: 8px;
    display: block;
    padding: 0px;
}

.user-notification .dropdown-menu {
    width: 400px;
    padding: 20px 10px;
}

.notification-list ul li a {
    display: block;
    position: relative;
    padding: 5px 15px 0px 55px;
    min-height: 50px;
    cursor: pointer;
    color: rgb(102, 102, 102);
    font-size: 14px;
    font-weight: 500;
    font-family: Inter, sans-serif;
    border-radius: 5px;
}

.notification-list ul li a img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    top: 6px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 13px;
}

.notification-list ul li a h3 {
    font-size: 16px;
    color: rgb(32, 35, 66);
    font-weight: 700;
    text-transform: capitalize;
    font-family: Inter, sans-serif;
    padding-bottom: 5px;
}

.notification-list ul li a h3 span {
    float: right;
    font-size: 12px;
    font-weight: 500;
    padding-top: 2px;
}

.header-dark .header, .header-dark .header-left .header-search {
    background: rgb(20, 33, 39);
}

.header-dark .header .user-info-dropdown .dropdown-toggle, .header-dark .header .user-info-dropdown .dropdown-toggle .user-name, .header-dark .menu-icon, .header-dark .search-toggle-icon, .header-dark .user-notification .dropdown-toggle {
    color: rgb(236, 240, 244);
}

.header-dark .header .header-left .header-search .search-input {
    background: rgba(236, 236, 236, 0.1);
    border-color: transparent;
    color: rgb(236, 240, 244);
}

.header-dark .header .header-left .header-search .search-input:focus {
    border-color: rgb(75, 77, 80);
}

.header-dark .header .header-left .header-search .search-input::-webkit-input-placeholder {
    opacity: 1;
    color: rgb(191, 196, 202);
}

.header-dark .header .header-left .header-search .search-icon {
    color: rgb(236, 240, 244);
}

.footer-wrap {
    width: 100%;
    position: relative;
    text-align: center;
    font-weight: 500;
}

.footer-wrap a {
    color: rgb(27, 0, 255);
    text-decoration: underline;
}

.menu-icon, .search-toggle-icon {
    width: 47px;
    height: 47px;
    font-size: 28px;
    line-height: 1;
    color: rgb(85, 85, 85);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer;
}

.search-toggle-icon {
    font-size: 20px;
}

.brand-logo {
    width: 240px;
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.brand-logo a {
    display: flex;
    vertical-align: middle;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    height: 100%;
    font-size: 22px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.05em;
    font-weight: 500;
    line-height: 45px;
    font-family: Inter, sans-serif;
    padding: 0px 20px;
}

.brand-logo a .light-logo, .sidebar-light .brand-logo a .dark-logo {
    display: block;
}

.brand-logo a span {
    display: block;
    margin-left: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-logo a .svg, .brand-logo a img {
    max-width: 160px;
    display: block;
    height: auto;
}

.left-side-bar, .left-side-bar::before {
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    transition: 0.3s ease-in-out;
}

.left-side-bar {
    width: 240px;
    z-index: 1000;
    background: rgb(20, 33, 39);
}

.left-side-bar .mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: rgb(236, 240, 244);
}

.left-side-bar::before {
    content: "";
    z-index: -1;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: none;
}

.left-side-bar.open {
    left: 0px;
}

.left-side-bar .menu-block {
    height: calc(-60px + 100vh);
    padding: 6px 0px;
}

.left-side-bar .close-sidebar {
    font-size: 18px;
    color: rgb(136, 136, 136);
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 20px;
    display: none;
}

.sidebar-menu {
    padding: 0px 10px 20px 0px;
}

.sidebar-menu > ul > li {
    padding: 3px;
}

.sidebar-menu .dropdown-toggle {
    display: block;
    padding: 4px 5px 4px 36px;
    font-size: 13px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    position: relative;
    border-radius: 8px;
    font-family: Inter, sans-serif;
    transition: 0.3s ease-in-out;
}

.sidebar-menu .dropdown-toggle::after {
    content: "";
    position: absolute;
    right: 15px;
    font-size: 16px;
    font-weight: 700;
    top: 50%;
    transform: translate(0px, -50%);
    display: block;
    font-family: bootstrap-icons;
}

.sidebar-menu .dropdown.show > .dropdown-toggle::after {
    content: "";
}

.sidebar-menu .dropdown-toggle.no-arrow::after, .sidebar-menu .submenu li.dropdown::before {
    display: none;
}

.sidebar-menu.icon-style-2 .dropdown-toggle::after {
    content: "";
    font-size: 22px;
    font-weight: 700;
    font-family: bootstrap-icons;
}

.sidebar-menu.icon-style-2 .dropdown.show .dropdown-toggle::after {
    content: "";
}

.sidebar-menu.icon-style-3 .dropdown-toggle::after {
    content: "";
    font-weight: 400;
}

.sidebar-menu.icon-style-3 .dropdown.show .dropdown-toggle::after {
    content: "";
}

.sidebar-menu .dropdown-toggle:hover, .sidebar-menu .show > .dropdown-toggle {
    background: rgba(236, 240, 244, 0.19);
    color: rgb(255, 255, 255);
}

.sidebar-menu .show > .dropdown-toggle {
    border-radius: 8px 8px 0px 0px;
}

.sidebar-menu .dropdown-toggle .micon {
    position: absolute;
    left: 10px;
    width: 22px;
    height: 22px;
    font-size: 22px;
    font-weight: 400;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    background-color: transparent;
    top: 50%;
    text-align: center;
    border-radius: 4px;
    transition: 0.3s ease-in-out;
    transform: translate(0px, -50%);
}

.sidebar-light .sidebar-menu > ul > li > .dropdown-toggle.active .micon, .sidebar-menu .dropdown-toggle:hover .micon, .sidebar-menu .show > .dropdown-toggle .micon {
    color: rgb(255, 255, 255);
}

.sidebar-menu .dropdown-toggle .new {
    font-size: 24px;
    line-height: 14px;
    display: inline-block;
    vertical-align: middle;
}

.sidebar-menu .dropdown-toggle .new::before {
    line-height: 14px;
}

.sidebar-menu .submenu {
    position: relative;
    width: 100%;
    display: none;
    background: rgba(236, 240, 244, 0.1);
    padding: 4px 6px;
    border-radius: 0px 0px 8px 8px;
}

.sidebar-menu .submenu::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 31px;
    top: 0px;
    display: none;
    background: 0px 0px;
    border-left: 2px dashed rgb(27, 0, 255);
}

.sidebar-menu .submenu li {
    position: relative;
    padding: 2px 0px;
}

.sidebar-menu .submenu li > a::before {
    content: "";
    position: absolute;
    line-height: 1;
    left: 28px;
    top: 50%;
    transform: translate(0px, -50%);
    font-family: Ionicons;
}

.sidebar-menu.icon-list-style-2 .submenu li > a::before {
    content: "";
    font-family: FontAwesome;
}

.sidebar-menu.icon-list-style-3 .submenu li > a::before {
    content: "";
    font-family: dropways;
}

.sidebar-menu.icon-list-style-4 .submenu li > a::before {
    content: "";
    font-family: dropways;
}

.sidebar-menu.icon-list-style-5 .submenu li > a::before {
    content: "";
    font-family: dropways;
}

.sidebar-menu.icon-list-style-6 .submenu li > a::before {
    content: "";
    font-family: dropways;
}

.mobile-menu-overlay, .sidebar-menu .submenu li a, .sidebar-menu .submenu li > a::before {
    transition: 0.3s ease-in-out;
}

.sidebar-menu .submenu li a {
    display: block;
    padding: 14px 15px 14px 60px;
    font-size: 14px;
    color: rgb(255, 255, 255);
    font-weight: 400;
    border-radius: 8px;
    position: relative;
    font-family: Inter, sans-serif;
}

.chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .left .overlay, .chat-box .chat-desc ul li.upload-file.admin_chat .upload-file-box .right a, .sidebar-menu .submenu li.dropdown > a::before, .sitemap ul li.child::after, .sitemap ul li.child::before {
    display: none;
}

.sidebar-menu .submenu li a.dropdown-toggle {
    padding: 14px 15px 14px 60px;
    font-size: 15px;
}

.sidebar-menu .submenu.child {
    padding-left: 15px;
}

.sidebar-menu .submenu li:hover > a::before {
    left: 18px;
}

.sidebar-menu .submenu li a.active, .sidebar-menu .submenu li a:hover {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.4);
}

.sidebar-menu > ul > li > .dropdown-toggle.active {
    background-color: rgba(236, 240, 244, 0.19);
}

.sidebar-light .sidebar-menu > ul > li > .dropdown-toggle.active {
    background-color: rgb(20, 33, 39);
    color: rgb(255, 255, 255);
}

.sidebar-light .sidebar-menu .dropdown-toggle:hover .micon, .sidebar-light .sidebar-menu .show > .dropdown-toggle .micon, .sidebar-menu .dropdown-toggle.active, .sidebar-menu .dropdown-toggle.active .micon {
    color: rgb(255, 255, 255);
}

.mobile-menu-overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: 98% 15px / 20px rgb(18, 20, 33);
    opacity: 0.6;
    z-index: 123;
    display: none;
}

.sidebar-light .left-side-bar {
    background: rgb(255, 255, 255);
}

.sidebar-light .sidebar-menu .dropdown-toggle {
    color: rgb(11, 19, 43);
}

.sidebar-light .sidebar-menu .dropdown-toggle .micon {
    color: rgb(11, 19, 43);
}

.sidebar-light .sidebar-menu .submenu li a {
    color: rgb(11, 19, 43);
    font-weight: 400;
}

.sidebar-light .sidebar-menu .submenu {
    background: rgb(230, 235, 240);
}

.sidebar-light .sidebar-menu .dropdown-toggle:hover, .sidebar-light .sidebar-menu .show > .dropdown-toggle, .sidebar-light .sidebar-menu .submenu li a.active, .sidebar-light .sidebar-menu .submenu li a:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(20, 33, 39);
}

.sidebar-light .menu-block .mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
    background-color: rgb(14, 19, 43);
}

.sidebar-menu .dropdown-divider {
    margin: 20px 0px;
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 2px;
}

.sidebar-light .sidebar-menu .dropdown-divider {
    border-color: rgba(0, 0, 0, 0.2);
}

.sidebar-menu .sidebar-small-cap {
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgb(255, 255, 255);
    padding: 0px 15px 10px;
}

.sidebar-light .sidebar-menu .sidebar-small-cap {
    color: rgb(21, 2, 189);
}

.login-header {
    position: relative;
    padding: 0px 15px;
    background-color: rgb(255, 255, 255);
    z-index: 1;
}

.login-header .brand-logo {
    width: auto;
    border: 0px;
}

.login-menu a {
    font-size: 20px;
    font-weight: 600;
    color: rgb(27, 0, 255);
}

.login-wrap {
    height: calc(100% - 70px);
    overflow: auto;
    padding: 30px 0px;
}

body.IE .login-wrap, body.IE .register-page-wrap {
    padding: 0px;
    display: block !important;
}

body.IE .login-wrap .container, body.IE .register-page-wrap .container {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.login-wrap .container, .register-page-wrap .container {
    max-width: 1300px;
}

.login-wrap .mCustomScrollBox {
    height: auto;
    width: 100%;
}

.login-box {
    max-width: 400px;
    width: 100%;
    padding: 40px 20px;
    margin: 5px auto;
}

.select-role {
    margin-bottom: 25px;
    padding: 0px 5px;
}

.select-role .btn-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0px -10px;
}

.select-role .btn-group .btn {
    margin: 0px 5px;
    border: 1px solid rgb(212, 212, 212);
    text-align: left;
    padding-left: 60px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: calc(50% - 10px);
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: rgb(51, 51, 51);
    position: relative;
    border-radius: 5px !important;
}

.select-role .btn-group .btn.active, .select-role .btn-group .btn.active:focus, .select-role .btn-group .btn.focus.active {
    background-color: rgba(27, 0, 255, 0.05);
    border-color: rgba(27, 0, 255, 0.5);
    color: rgb(27, 0, 255);
}

.select-role .btn-group .btn .icon {
    position: absolute;
    left: 15px;
    width: 30px;
    height: 30px;
    top: 50%;
    margin-top: -15px;
}

.select-role .btn-group .btn .icon .svg {
    width: 30px;
    height: 30px;
}

.select-role .btn-group .btn span {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgb(34, 34, 34);
}

.login-box .login-title {
    padding: 0px 0px 10px;
    margin-bottom: 30px;
}

.login-box .login-title h2 {
    font-size: 24px;
    font-weight: 700;
}

.login-box .login-img {
    display: block;
    margin: 0px auto 20px;
    max-width: 100px;
}

.forgot-password {
    text-align: right;
}

.register-page-wrap {
    height: calc(100% - 70px);
    padding: 30px 0px;
}

.register-page-wrap .register-box {
    max-width: 410px;
    margin: 0px auto;
}

.register-page-wrap, .register-page-wrap .wizard-content .wizard {
    position: relative;
    overflow: auto;
}

.register-page-wrap .wizard-content .wizard .steps {
    position: relative;
}

.register-page-wrap .wizard-content .wizard > .steps .step {
    position: relative;
    top: 0px;
    left: 0px;
    display: block;
    margin: 0px auto;
    border-width: 2px;
    background-color: rgb(255, 255, 255);
    border-color: rgba(24, 31, 72, 0.3);
    transition: 0.3s ease-in-out;
}

.register-page-wrap .wizard-content .wizard > .steps > ul > li.done > a .step {
    background: url("../images/tick.svg") center center / 22px no-repeat rgb(236, 240, 244);
    font-size: 0px;
    border-color: rgba(24, 31, 72, 0.3);
}

.register-page-wrap .wizard-content .wizard.wizard-circle > .steps > ul > li::after, .register-page-wrap .wizard-content .wizard.wizard-circle > .steps > ul > li::before, .wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li::after, .wizard-content .wizard.wizard-circle > .steps > ul > li.current ~ li::before {
    background: rgba(24, 31, 72, 0.3);
}

.wizard-content .wizard.vertical.wizard-circle > .steps > ul > li.current ~ li::after, .wizard-content .wizard.vertical.wizard-circle > .steps > ul > li.current ~ li::before {
    background-color: transparent;
}

.register-page-wrap .wizard-content .wizard > .steps > ul > li.current .step {
    border-color: rgb(27, 0, 255);
    color: rgb(24, 31, 72);
    background-color: rgb(255, 255, 255);
}

.register-page-wrap .wizard-content .wizard > .steps .info {
    display: block;
    width: 100%;
    padding-top: 10px;
}

.register-page-wrap .wizard-content .wizard > .steps > ul {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    justify-content: center;
    height: 100%;
    padding: 0px 10px;
}

.register-page-wrap .wizard-content .wizard > .steps > ul > li {
    width: 25%;
}

.main-container, .register-page-wrap .wizard-content .wizard > .steps .info, .register-page-wrap .wizard-content .wizard > .steps > ul > li a {
    transition: 0.3s ease-in-out;
}

.register-page-wrap .wizard-content .wizard > .steps > ul > li a {
    padding: 20px 10px;
    margin: 0px;
    text-align: center;
    color: rgba(24, 31, 72, 0.6);
    font-size: 11px;
    font-weight: 700;
}

.register-page-wrap .wizard-content .wizard > .steps > ul > li.current > a, .register-page-wrap .wizard-content .wizard > .steps > ul > li.done > a {
    color: rgb(24, 31, 72);
}

.register-page-wrap .wizard-content .wizard > .content {
    overflow: hidden;
    padding: 15px 15px 0px;
    min-height: 320px;
}

.register-page-wrap .wizard-content .wizard > .actions {
    padding: 0px 15px 20px;
    text-align: right;
}

.register-info li {
    margin-bottom: 15px;
    font-size: 14px;
}

/* Sol dolgu SIDEBAR GENISLIGIYLE ESLESMEK ZORUNDA.
   Tek kaynak: views/partials/left-sidebar.ejs:1458 -> .left-side-bar.ko-sidebar{width:250px!important}
   Sidebar .ko-sidebar yenilemesiyle 240'tan 250'ye buyudu, bu kural 240'ta kalmisti:
   >=1401px'te icerigin sol 10px'i sidebar altinda kaliyordu. (1301-1400px araliginda
   sorun yoktu, cunku asagidaki media query zaten 250 veriyor.)
   Sidebar genisligi degisirse BURASI ve duello_mesaj_mobil.css'teki kopyasi
   (+ .header calc(100% - Npx), style.css:1399 ve duello_mesaj_mobil.css:1393)
   birlikte guncellenmeli. Ucu de 2026-08-13'te 250'ye cekildi. */
.main-container {
    padding: 60px 0px 2px 250px;
}

.page-header .dropdown-menu {
    border-radius: 5px;
}

.page-header {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
    margin-bottom: 30px;
    padding: 20px;
}

.page-header .row {
    -webkit-box-align: center;
    align-items: center;
}

.page-header h4 {
    font-weight: 600;
    padding-bottom: 5px;
}

.page-header .breadcrumb {
    padding: 0px;
    margin: 0px;
}

.search-icon-box, .timeline ul {
    position: relative;
}

.search-icon-box input {
    height: 70px;
    width: 100%;
    font-size: 20px;
    padding: 0px 60px 0px 30px;
    font-weight: 300;
    border: 0px;
    color: rgb(255, 255, 255);
    background: rgb(98, 9, 171);
}

.search-icon-box input::-webkit-input-placeholder {
    opacity: 1;
    color: rgb(255, 255, 255);
}

.search-icon-box .search_icon {
    position: absolute;
    font-size: 24px;
    line-height: 1;
    right: 20px;
    top: 26px;
    color: rgb(255, 255, 255);
}

.fontawesome-icon-list {
    padding-top: 20px;
}

.fontawesome-icon-list.custom-icon-list, .sitemap ul li.child h5 {
    padding-top: 0px;
}

.fontawesome-icon-list .fa-hover, .fontawesome-icon-list a {
    transition: 0.3s ease-in-out;
}

.fontawesome-icon-list .fa-hover {
    padding-top: 13px;
    padding-bottom: 13px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 8px;
}

.fontawesome-icon-list .fa-hover:hover {
    background: rgba(68, 66, 87, 0.13);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 18px;
}

.fontawesome-icon-list a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding-left: 45px;
    color: rgb(19, 30, 34);
}

.fontawesome-icon-list a .icon-copy {
    position: absolute;
    left: 10px;
    top: 4px;
    font-size: 18px;
}

.fontawesome-icon-list a .icon-copy.bi::before {
    display: block;
}

.fontawesome-icon-list.custom-icon-list a {
    font-size: 14px;
    line-height: 24px;
}

.fontawesome-icon-list.custom-icon-list a .icon-copy {
    font-size: 24px;
    line-height: 1;
    top: 0px;
}

.foundation-icon.fontawesome-icon-list a .icon-copy {
    top: 0px;
    font-size: 24px;
    line-height: 24px;
}

.ionicons-list li {
    width: 8.3%;
    text-align: center;
}

.ionicons-list.fontawesome-icon-list a {
    padding-left: 0px;
}

.ionicons-list.fontawesome-icon-list a .icon-copy {
    font-size: 24px;
    left: 0px;
    position: relative;
}

.wysihtml5-toolbar .dropdown-menu a {
    display: block;
    font-size: 15px;
    font-weight: 400;
    padding: 0.55rem 1rem;
    color: rgb(102, 127, 135);
    font-family: Inter, sans-serif;
    transition: 0.3s ease-in-out;
}

.html-editor textarea.form-control {
    height: 300px;
    font-weight: 400;
}

.copy-notification {
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 12px 20px;
    border-radius: 30px;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 150px;
    margin-top: -30px;
    margin-left: -85px;
    display: none;
    text-align: center;
}

.error-page h1, .error-page-wrap {
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    color: rgb(34, 34, 34);
}

.error-page h1 {
    font-size: 210px;
    text-shadow: rgb(24, 31, 72) 2px 2px 0px, rgb(255, 255, 255) 4px 4px 0px, rgb(24, 31, 72) 8px 8px 0px;
    line-height: 1;
    color: rgb(24, 31, 72);
}

.error-page h3 {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 30px;
}

.project-info {
    padding-bottom: 15px;
}

.project-info-left {
    float: left;
    width: 60px;
    padding-top: 10px;
}

.project-info-left .icon {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}

.project-info-right {
    float: right;
    width: calc(100% - 60px);
    text-align: right;
}

.device-manage-progress-chart ul li, .error-page h3 {
    margin-bottom: 30px;
}

.device-manage-progress-chart ul li:last-child {
    margin-bottom: 0px;
}

.device-manage-progress-chart .device-name {
    width: 75px;
    float: left;
    text-align: right;
}

.device-manage-progress-chart .device-total {
    float: left;
    width: 45px;
    font-size: 14px;
}

.device-manage-progress-chart .device-progress {
    float: left;
    width: calc(100% - 120px);
    padding: 7px 10px 0px;
}

.device-manage-progress-chart .device-progress .grand_total {
    float: right;
}

.device-manage-progress-chart .device-progress .progress {
    margin-bottom: 0px;
    height: 10px;
}

.device-manage-progress-chart .device-progress .progress .progress-bar {
    height: 100%;
}

.device-manage-progress-chart .device-progress .progress .progress-bar.window {
    background: rgb(0, 188, 242);
}

.device-manage-progress-chart .device-progress .progress .progress-bar.mac {
    background: rgb(2, 116, 150);
}

.device-manage-progress-chart .device-progress .progress .progress-bar.android {
    background: rgb(0, 89, 178);
}

.device-manage-progress-chart .device-progress .progress .progress-bar.linux {
    background: rgb(138, 177, 183);
}

.to-do-list ul li {
    padding: 15px;
}

.to-do-list ul li, .to-do-list ul li:hover {
    background: rgb(236, 240, 244);
}

.to-do-list ul li:nth-child(2n) {
    background: rgb(255, 255, 255);
}

#browservisit path.jvectormap-region.jvectormap-element {
    stroke-width: 0.5px;
    stroke: rgb(102, 127, 135);
}

.jvectormap-goback, .jvectormap-zoomin, .jvectormap-zoomout {
    background: rgb(102, 127, 135);
}

.browser-visits ul li {
    margin-bottom: 40px;
}

.browser-visits ul li .icon, .browser-visits ul li .visit {
    width: 50px;
}

.browser-visits ul li .browser-name {
    width: calc(100% - 100px);
    font-size: 14px;
    font-weight: 600;
}

.docs-preview {
    margin-right: -1rem;
}

.img-preview {
    float: left;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem;
    overflow: hidden;
}

.preview-lg {
    height: 9rem;
    width: 16rem;
}

.preview-md {
    height: 4.5rem;
    width: 8rem;
}

.preview-sm {
    height: 2.25rem;
    width: 4rem;
}

.preview-xs {
    height: 1.125rem;
    margin-right: 0px;
    width: 2rem;
}

.btn-list .btn {
    margin: 5px;
}

#login-modal .modal-dialog {
    max-width: 380px;
}

#login-modal .login-box {
    margin: 0px;
}

.confirmation-btn {
    width: 50px;
    height: 50px;
    margin: 0px auto;
}

.da-card .da-card-content {
    padding: 20px 15px;
    background: rgb(255, 255, 255);
    font-size: 14px;
}

.da-card, .da-card .da-card-photo {
    position: relative;
    overflow: hidden;
}

.da-card .da-card-photo img {
    position: relative;
    display: block;
    width: 100%;
    transition: 0.4s linear;
}

.da-card .da-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    opacity: 0;
    overflow: hidden;
    background: rgba(19, 30, 34, 0.7);
    transition: 0.3s ease-in-out;
}

.da-card .da-overlay.da-slide-left {
    left: -100%;
}

.da-card .da-card-photo:hover .da-overlay.da-slide-left {
    left: 0px;
}

.da-card .da-overlay.da-slide-bottom, .da-card .da-overlay.da-slide-left, .da-card .da-overlay.da-slide-right, .da-card .da-overlay.da-slide-top {
    transition: 0.5s ease-in-out;
}

.da-card .da-overlay.da-slide-right {
    right: -100%;
    left: inherit;
}

.da-card .da-card-photo:hover .da-overlay.da-slide-right {
    right: 0px;
}

.da-card .da-overlay.da-slide-bottom, .da-card .da-overlay.da-slide-top {
    top: -100%;
}

.da-card .da-card-photo:hover .da-overlay.da-slide-bottom, .da-card .da-card-photo:hover .da-overlay.da-slide-top {
    top: 0px;
}

.da-card .da-overlay.da-slide-bottom {
    top: 100%;
}

.da-card .da-card-photo:hover img {
    transform: scale(1.2) translateZ(0px);
}

.da-card .da-card-photo:hover .da-overlay {
    opacity: 1;
    transform: translateZ(0px);
}

.da-card .da-card-photo:hover .da-social {
    opacity: 1;
}

.da-card .da-social {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    -webkit-box-pack: center;
    justify-content: center;
    color: rgb(255, 255, 255);
    opacity: 0;
    transition: 0.4s ease-in-out;
}

.da-card .da-social h5 {
    position: absolute;
    top: 0px;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 500;
}

.chat-box .chat-desc ul li .chat-img, .da-card .da-social ul li {
    float: left;
}

.da-card .da-social ul li a {
    display: block;
    width: 45px;
    height: 45px;
    border: 1px solid rgb(255, 255, 255);
    line-height: 43px;
    font-size: 20px;
    text-align: center;
    color: rgb(255, 255, 255);
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px;
    transition: 0.3s ease-in-out;
}

.da-card .da-social ul li:first-child a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.da-card .da-social ul li:last-child a {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.da-card .da-social ul li a:hover {
    background: rgb(255, 255, 255);
    color: rgb(27, 0, 255);
}

.nav-tabs.customtab .nav-item.show .nav-link, .nav-tabs.customtab .nav-link.active {
    color: rgb(27, 0, 255);
    border-width: 0px 0px 2px;
    border-style: none none solid;
    border-color: currentcolor currentcolor rgb(27, 0, 255);
    border-image: initial;
}

.nav-tabs.customtab .nav-item {
    margin-bottom: 0px;
}

.nav-tabs.customtab .nav-link {
    color: rgb(24, 31, 72);
    border-width: 0px 0px 2px;
    border-style: none none solid;
    border-color: currentcolor currentcolor transparent;
    border-image: initial;
    transition: 0.3s ease-in-out;
}

.nav-tabs.customtab .nav-link:focus, .nav-tabs.customtab .nav-link:hover {
    color: rgb(27, 0, 255);
    border-width: 0px 0px 2px;
    border-style: none none solid;
    border-color: currentcolor currentcolor rgb(27, 0, 255);
    border-image: initial;
}

.nav.vtabs {
    border-bottom: 0px;
    border-right: 1px solid rgb(222, 226, 230);
    height: 100%;
}

.nav.vtabs .nav-link {
    border-radius: 0px;
}

.nav.vtabs .nav-item.show .nav-link, .nav.vtabs .nav-link.active {
    border-right: 0px rgb(222, 226, 230);
    border-top-color: rgb(222, 226, 230);
    border-bottom-color: rgb(222, 226, 230);
    border-left-color: rgb(222, 226, 230);
    color: rgb(27, 0, 255);
}

.nav.vtabs.nav-pills .nav-item.show .nav-link, .nav.vtabs.nav-pills .nav-link.active {
    border-right: 0px rgb(222, 226, 230);
    border-top-color: rgb(222, 226, 230);
    border-bottom-color: rgb(222, 226, 230);
    border-left-color: rgb(222, 226, 230);
    color: rgb(255, 255, 255);
}

.nav.vtabs.customtab .nav-item.show .nav-link, .nav.vtabs.customtab .nav-link.active {
    border-color: rgb(27, 0, 255);
}

.timeline ul::before {
    content: "";
    width: 3px;
    height: 100%;
    background: rgb(27, 0, 255);
    position: absolute;
    left: 150px;
}

.timeline ul li {
    position: relative;
    padding-left: 180px;
    padding-top: 20px;
    padding-bottom: 30px;
}

.timeline ul li::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 142px;
    width: 18px;
    height: 18px;
    background: rgb(255, 255, 255);
    border-radius: 100%;
    box-shadow: rgb(27, 0, 255) 0px 0px 0px 3px;
}

.timeline .timeline-date {
    position: absolute;
    left: 0px;
    top: 20px;
    width: 120px;
    background: rgb(27, 0, 255);
    color: rgb(255, 255, 255);
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 5px;
}

.list-unstyled > li > ul {
    margin-left: 35px;
}

.list-unstyled > li > ul li {
    list-style: circle;
}

.sitemap {
    border-left: 2px dashed rgb(27, 0, 255);
}

.sitemap h5 {
    padding: 15px;
    margin-bottom: 10px;
    font-weight: 600;
    color: rgb(27, 0, 255);
}

.sitemap ul, .sitemap ul li {
    position: relative;
    padding-left: 25px;
}

.sitemap ul li {
    min-height: 40px;
    padding-left: 35px;
    margin-bottom: 10px;
    padding-top: 2px;
}

.sitemap ul li:last-child {
    margin-bottom: 0px;
}

.sitemap ul li::before {
    content: "";
    background: rgb(255, 255, 255);
    width: 20px;
    height: 20px;
    border: 2px solid rgb(27, 0, 255);
    border-radius: 100%;
    position: absolute;
    left: 6px;
    top: 5px;
}

.sitemap ul li::after {
    content: "";
    width: 25px;
    left: -25px;
    top: 40%;
    position: absolute;
    border-top: 2px dashed rgb(27, 0, 255);
}

.blog-list ul li, .sitemap ul li a {
    transition: 0.3s ease-in-out;
}

.fc th, .sitemap ul li a {
    font-weight: 500;
    font-size: 15px;
}

.sitemap ul li a {
    display: inline-block;
    color: rgb(11, 19, 43);
}

.sitemap ul li a:hover {
    color: rgb(0, 0, 0);
}

.sitemap ul li.child {
    padding-left: 0px;
    padding-top: 0px;
    border-left: 2px dashed rgb(41, 118, 170);
}

.calendar-wrap .fc-event.ui-draggable-handle {
    padding: 5px;
    margin-bottom: 5px;
}

.fc th {
    background: rgb(225, 225, 245);
    line-height: 1;
    padding: 10px !important;
}

.fc-day-grid-event .fc-time {
    font-weight: 500 !important;
}

.fc-day-grid-event .fc-content {
    padding: 3px 9px;
}

.fc-header-toolbar h2 {
    font-size: 18px;
    padding-top: 7px;
}

.blog-wrap {
    padding-bottom: 50px;
}

.blog-list ul li {
    border-radius: 10px;
    margin-bottom: 40px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
    background: rgb(255, 255, 255);
}

.blog-list ul li:hover {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 48px;
}

.blog-list ul li .blog-img {
    height: 100%;
    min-height: 200px;
    border-radius: 10px 0px 0px 10px;
    background-size: cover !important;
}

.blog-list ul li .blog-caption {
    padding: 20px;
    font-size: 16px;
    line-height: 1.5;
    color: rgb(3, 30, 35);
}

.blog-list ul li .blog-caption h4 {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 12px;
}

.blog-list ul li .blog-caption h4 a, .product-caption h4 a {
    color: rgb(19, 30, 34);
}

.latest-post ul li {
    padding: 0.75rem 1.25rem;
    font-size: 14px;
    color: rgb(120, 144, 156);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.latest-post ul li h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 5px;
}

.blog-list ul li .blog-caption h4 a, .latest-post ul li h4 a, .product-box, .product-caption h4 a {
    transition: 0.3s ease-in-out;
}

.latest-post ul li h4 a {
    display: block;
    color: rgb(19, 30, 34);
}

.latest-post ul li h4 a:hover {
    color: rgb(27, 0, 255);
}

.blog-detail, .product-box {
    background: rgb(255, 255, 255);
}

.blog-detail .blog-caption {
    padding: 20px;
    font-size: 16px;
    color: rgb(120, 144, 156);
}

.blog-detail ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 5px;
    line-height: 28px;
}

.blog-detail ul li::before {
    content: "";
    font-family: FontAwesome;
    position: absolute;
    color: rgb(64, 81, 88);
    left: 0px;
    top: 0px;
}

.blog-detail ol, .blog-detail ul {
    padding-left: 15px;
}

.blog-detail ol > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
}

.blog-detail ol, .blog-detail ol > li > ol, .blog-detail ol > li > ol > li > ol {
    counter-reset: my-badass-counter 0;
}

.blog-detail ol > li > ol > li::before {
    content: counter(my-badass-counter, lower-alpha);
    counter-increment: my-badass-counter 1;
}

.blog-detail ol > li::before, .blog-detail ol > li > ol > li > ol > li::before {
    content: counter(my-badass-counter, lower-roman);
    counter-increment: my-badass-counter 1;
}

.blog-detail ol > li::before {
    content: counter(my-badass-counter);
    position: absolute;
    left: 0px;
    top: 0px;
    color: rgb(64, 81, 88);
    font-weight: 500;
}

.gallery-wrap > ul > li, .product-list ul li {
    margin-bottom: 30px;
}

.product-box {
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
    height: 100%;
}

.producct-img {
    overflow: hidden;
}

.producct-img img {
    position: relative;
    border-radius: 10px 10px 0px 0px;
    transition: 0.8s ease-in-out;
}

.product-list ul li:hover .producct-img img {
    transform: scale(1.3);
}

.product-caption {
    padding: 20px;
}

.product-caption h4 {
    font-size: 18px;
    margin-bottom: 8px;
}

.product-caption .btn {
    border-radius: 22px;
}

.price {
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 15px;
    color: rgb(120, 144, 156);
}

.price ins {
    text-decoration: none;
    display: inline-block;
    margin-left: 10px;
    color: rgb(19, 30, 34);
}

.product-slider {
    margin-bottom: 20px;
}

.slider-arrow .slick-arrow, .slider-arrow .slick-arrow::before {
    transition: 0.3s ease-in-out;
}

.slider-arrow .slick-arrow {
    position: absolute;
    bottom: 0px;
    width: 40px;
    height: 40px;
    top: 50%;
    margin-top: -20px;
    border: 1px solid rgb(27, 0, 255);
    background: rgb(27, 0, 255);
    border-radius: 0px;
    cursor: pointer;
    font-size: 0px;
    text-align: center;
}

.slider-arrow .slick-arrow:hover {
    border-color: rgb(42, 45, 49);
}

.slider-arrow .slick-arrow:hover::before {
    color: rgb(255, 255, 255);
}

.slider-arrow .slick-arrow::before {
    font-family: dropways;
    font-size: 16px;
    color: rgb(255, 255, 255);
    line-height: 38px;
}

.slider-arrow .slick-arrow.slick-prev {
    z-index: 12;
    left: 15px;
}

.slider-arrow .slick-arrow.slick-prev::before {
    content: "";
}

.slider-arrow .slick-arrow.slick-next {
    right: 15px;
}

.slider-arrow .slick-arrow.slick-next::before {
    content: "";
}

.product-slide-nav {
    padding: 10px;
}

.product-detail-desc {
    font-size: 16px;
    line-height: 1.5;
}

.faq-wrap .card {
    margin-bottom: 20px;
    border: 0px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
}

.faq-wrap .card-header {
    background: rgb(255, 255, 255);
    text-align: left;
    border: 0px;
    padding: 0px;
}

.faq-wrap .card-header .btn {
    background: 0px 0px;
    border-radius: 0px;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    padding: 16px 40px 16px 16px;
    position: relative;
    white-space: normal;
    color: rgb(27, 0, 255);
    transition: 0.3s ease-in-out;
}

.faq-wrap .card-header .btn.collapsed {
    color: rgb(34, 34, 34);
}

.faq-wrap .card-header .btn::after {
    content: "";
    font-family: Ionicons;
    position: absolute;
    right: 10px;
    color: rgb(27, 0, 255);
    top: 16px;
}

.faq-wrap .card-header .btn.collapsed::after {
    content: "";
}

.faq-wrap .card-body {
    padding-top: 0px;
}

.pricing-table-wrap .card {
    border: 0px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 48px;
}

.pricing-table-wrap .btn {
    padding-left: 30px;
    padding-right: 30px;
}

.pricing-table-wrap .list-group-flush .list-group-item {
    background: 0px 0px;
}

.pricing-card {
    text-align: center;
}

.pricing-card .price-title, .pricing-card .pricing-icon {
    padding-bottom: 30px;
    text-align: center;
}

.pricing-card .pricing-icon img {
    margin-top: -30px;
}

.pricing-card .price-title {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    color: rgb(27, 0, 255);
    letter-spacing: 0.15em;
}

.pricing-card .pricing-price {
    font-size: 60px;
    line-height: 1;
    font-weight: 400;
    padding-bottom: 40px;
    padding-top: 20px;
    color: rgb(27, 0, 255);
}

.pricing-card .pricing-price sub {
    font-size: 16px;
    font-weight: 400;
    color: rgb(253, 72, 110);
}

.pricing-card .pricing-price sup {
    font-size: 20px;
    font-weight: 400;
    color: rgb(253, 72, 110);
    top: 10px;
    vertical-align: top;
}

.pricing-card .text {
    padding-bottom: 30px;
}

.pricing-card .cta {
    max-width: 170px;
    margin: 0px auto;
    transform: translate(0px, 50%);
}

.pricing-card .cta .btn {
    display: block;
    text-align: center;
}

.pricing-card-style2, .profile-setting .profile-edit-list > li {
    padding: 20px;
}

.pricing-card-style2 .pricing-card-header {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 15px;
    border-bottom: 2px solid rgb(240, 242, 247);
}

.pricing-card-style2 .pricing-card-header .left {
    width: 60%;
}

.pricing-card-style2 .pricing-card-header .left h5 {
    color: rgb(27, 0, 255);
    font-size: 18px;
    font-weight: 700;
}

.pricing-card-style2 .pricing-card-header .left p, .pricing-points ul li {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0px;
}

.pricing-card-style2 .pricing-card-header .right {
    width: 40%;
    text-align: right;
    color: rgb(0, 0, 0);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

.pricing-card-style2 .pricing-card-header .right span {
    display: block;
    font-size: 12px;
}

.pricing-card-style2 .pricing-card-body {
    padding-top: 30px;
    padding-bottom: 10px;
}

.pricing-points ul li {
    padding: 0px 30px 0px 0px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    position: relative;
}

.pricing-points ul li::after {
    content: "";
    font-family: Ionicons;
    font-size: 18px;
    line-height: 1;
    color: rgb(16, 97, 228);
    position: absolute;
    right: 0px;
    top: 0px;
}

.pricing-card-style2 .cta {
    max-width: 170px;
    margin: 0px auto;
    padding-top: 10px;
    padding-bottom: 20px;
}

.pricing-card-style2 .cta .btn {
    display: block;
    text-align: center;
}

.profile-photo {
    width: 160px;
    margin: 0px auto 15px;
    position: relative;
}

.profile-photo .edit-avatar {
    position: absolute;
    right: -15px;
    top: 0px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px;
}

.contact-directory-box .contact-avatar span img, .profile-photo .avatar-photo, .profile-photo .edit-avatar {
}

.profile-info, .profile-skills, .profile-social {
    border-top: 2px dashed rgb(236, 240, 244);
    padding: 15px;
}

.profile-info ul li {
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: break-word;
}

.profile-info ul li span {
    display: block;
    font-size: 14px;
    color: rgb(27, 0, 255);
    font-weight: 500;
    padding-bottom: 5px;
}

.profile-info ul li:last-child {
    margin-bottom: 0px;
}

.profile-social ul li {
    float: left;
    margin: 5px;
}

.profile-social ul li .btn {
    padding: 0px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
}

.notification-list.chat-notification-list ul li.active a, .notification-list.chat-notification-list ul li:hover a, .profile-tab .nav-tabs.customtab {
    background: rgb(255, 255, 255);
}

.profile-tab .nav-tabs.customtab .nav-link {
    padding: 9px 23px;
    background: 0px 0px;
    font-weight: 500;
    font-size: 15px;
}

.profile-setting {
    height: 100%;
}

.profile-setting .container {
    max-width: 800px;
}

.profile-tab .tab-content {
    height: calc(100% - 63px);
}

.profile-setting .profile-edit-list {
    padding: 30px 0px;
    margin: 0px;
}

.profile-setting .btn-outline-secondary {
    border-color: rgb(206, 212, 218);
}

.profile-setting .profile-edit-list .form-control {
    font-weight: 400;
}

.task-title {
    padding-bottom: 30px;
}

.task-title a {
    padding-left: 20px;
    padding-right: 20px;
}

.profile-task-wrap .container {
    max-width: 800px;
}

.profile-task-list ul li {
    position: relative;
    padding-left: 30px;
    font-size: 18px;
    line-height: 24px;
    color: rgb(38, 50, 56);
    margin-bottom: 25px;
}

.profile-task-list.close-tasks ul li {
    color: rgb(144, 164, 174);
    text-decoration: line-through;
}

.profile-task-list ul li .task-type {
    font-size: 16px;
    color: rgb(144, 164, 174);
    font-weight: 500;
}

.profile-task-list ul li .task-assign {
    font-size: 16px;
    color: rgb(144, 164, 174);
    font-weight: 300;
}

.profile-task-list ul li .due-date {
    display: inline-block;
    padding-left: 10px;
}

.profile-task-list ul li .due-date::before {
    content: "";
    font-family: FontAwesome;
    display: inline-block;
    font-size: 8px;
    vertical-align: middle;
    margin-right: 8px;
    opacity: 0.5;
}

.profile-task-list ul li .custom-control, .profile-timeline-list ul::before {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.profile-task-list ul li .custom-control-label {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
}

.profile-task-list ul li .custom-control-label::after, .profile-task-list ul li .custom-control-label::before {
    top: 50%;
    margin-top: -12px;
    left: 0px;
}

.task-list-scroll {
    height: 303px;
}

.task-list-form > ul > li {
    padding: 30px 20px;
    background: rgb(231, 238, 240);
    position: relative;
    border-bottom: 2px dashed rgb(41, 118, 170);
}

.task-list-form > ul > li .remove-task {
    position: absolute;
    right: 22px;
    top: 3px;
    font-size: 18px;
    color: rgb(41, 118, 170);
}

.task-list-form .form-control {
    font-weight: 400;
}

.task-list-form textarea.form-control {
    height: 80px;
}

.task-list-form .btn-outline-primary {
    border-color: rgb(206, 212, 218);
}

.add-more-task, .chat-body .chat_time {
    text-align: right;
}

.add-more-task a {
    display: inline-block;
    padding: 10px;
    color: rgb(41, 118, 170);
}

.profile-timeline {
    padding: 30px;
}

.profile-timeline .timeline-month {
    margin-bottom: 20px;
}

.profile-timeline .timeline-month h5 {
    font-size: 16px;
    font-weight: 700;
}

.profile-timeline-list ul {
    padding-left: 15px;
    position: relative;
}

.profile-timeline-list ul::before {
    content: "";
    width: 2px;
    left: 4px;
    background-color: rgb(27, 0, 255);
}

.profile-timeline-list ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 100px;
    line-height: 24px;
    padding-top: 8px;
}

.profile-timeline-list ul li p {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.profile-timeline-list ul li::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid rgb(27, 0, 255);
    border-radius: 22px;
    position: absolute;
    left: -16px;
    top: 15px;
    background: rgb(27, 0, 255);
}

.profile-timeline-list .date {
    position: absolute;
    top: 8px;
    left: 5px;
    font-weight: 700;
    font-size: 13px;
}

.profile-timeline-list .task-name {
    text-transform: uppercase;
    font-weight: 600;
    color: rgb(27, 0, 255);
    font-size: 14px;
    line-height: 22px;
    position: relative;
}

.profile-timeline-list .task-name i {
    position: absolute;
    left: -22px;
    top: 0px;
    font-size: 18px;
}

.profile-timeline-list .task-time {
    color: rgba(24, 31, 72, 0.71);
    font-size: 12px;
    font-weight: 700;
}

.contact-directory-list > ul > li {
    margin-bottom: 30px;
}

.contact-directory-box {
    background: rgb(255, 255, 255);
    min-height: 400px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 28px;
    border-radius: 10px;
}

.contact-dire-info {
    padding: 30px 25px 20px;
}

.contact-directory-box .contact-avatar span {
    display: block;
    margin: 0px auto 20px;
    width: 150px;
    height: 150px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
    border-radius: 100%;
    overflow: hidden;
}

.contact-directory-box .contact-name, .contact-directory-box .contact-skill {
    padding-bottom: 20px;
}

.contact-directory-box .contact-name h4 {
    font-weight: 600;
    font-size: 18px;
}

.contact-directory-box .contact-name p {
    margin-bottom: 2px;
    color: rgb(127, 146, 169);
    font-size: 14px;
}

.contact-directory-box .contact-skill .badge {
    border: 1px solid rgb(206, 217, 238);
    font-weight: 500;
    font-size: 16px;
    padding: 7px 11px;
    margin: 3px 0px;
}

.contact-directory-box .contact-skill .badge.badge-primary {
    background: rgb(27, 0, 255);
    border-color: rgb(27, 0, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
}

.contact-directory-box .profile-sort-desc {
    font-weight: 400;
    color: rgb(111, 124, 141);
}

.contact-directory-box .view-contact a {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    padding: 20px 5px;
    letter-spacing: 0.05em;
    position: relative;
    border-radius: 0px 0px 6px 6px;
}

.contact-directory-box:hover .view-contact a::before {
    opacity: 0;
}

.contact-directory-box .view-contact a, .contact-directory-box .view-contact a::before, .notification-list.chat-notification-list ul li a {
    transition: 0.3s ease-in-out;
}

.contact-directory-box .view-contact a::before {
    content: "";
    width: 80px;
    height: 1px;
    background: rgb(27, 0, 255);
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: 0px auto;
}

.invoice-wrap {
    overflow: auto;
}

.invoice-box {
    background: rgb(255, 255, 255);
    width: 800px;
    margin: 0px auto;
    padding: 20px;
}

.invoice-header {
    padding-bottom: 30px;
}

.invoice-desc .invoice-sub {
    width: 40%;
    float: left;
    padding: 8px 15px;
}

.invoice-desc .invoice-hours, .invoice-desc .invoice-rate {
    width: 20%;
    float: left;
    padding: 8px 15px;
}

.invoice-desc .invoice-subtotal {
    width: 20%;
    float: right;
    padding: 8px 15px;
}

.invoice-desc .invoice-desc-head {
    background: rgb(234, 234, 234);
    font-weight: 500;
}

.invoice-desc .invoice-desc-body {
    padding-top: 15px;
    min-height: 400px;
}

.invoice-desc .invoice-desc-footer .invoice-desc-body {
    min-height: 50px;
}

.invoice-desc .invoice-desc-body ul li {
    border-bottom: 1px solid rgb(234, 234, 234);
    padding-bottom: 5px;
}

.chat-list {
    border: 1px solid rgb(236, 240, 244);
    border-radius: 5px;
    height: 72vh;
}

.chat-search {
    border-bottom: 1px solid rgb(204, 204, 204);
    padding: 10px;
    position: relative;
    height: 45px;
}

.chat-search > span {
    position: absolute;
    left: 30px;
    color: rgb(51, 72, 79);
}

.chat-search input {
    width: 100%;
    border: 0px;
    background: 0px 0px;
    padding-left: 50px;
    color: rgb(51, 72, 79);
}

.chat-list .notification-list {
    height: calc(100% - 76px);
    padding: 10px;
}

.notification-list.chat-notification-list ul li a {
}

.notification-list.chat-notification-list ul li a p, .upload-file-box .right h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-list.chat-notification-list ul li a p .fa {
    font-size: 11px;
}

.notification-list.chat-notification-list ul li a img {
    box-shadow: none;
}

.chat-detail {
}

.chat-profile-header {
    padding: 10px 30px 10px 20px;
    border-bottom: 1px solid rgb(239, 240, 244);
}

.chat-profile-header .left {
    float: left;
    width: 60%;
}

.chat-profile-header .left .chat-profile-photo {
    float: left;
    width: 90px;
}

.chat-profile-header .left .chat-profile-photo img {
    width: 66px;
    height: 66px;
    border-radius: 100%;
}

.chat-profile-header .left .chat-profile-name {
    float: left;
    padding-top: 15px;
}

.chat-profile-header .left .chat-profile-name h3 {
    font-size: 18px;
    color: rgb(68, 174, 255);
}

.chat-profile-header .left .chat-profile-name span {
    font-size: 12px;
    color: rgb(164, 164, 164);
    display: block;
    margin-bottom: 6px;
}

.chat-profile-header .left .chat-profile-name a {
    font-size: 11px;
    color: rgb(68, 174, 255);
    display: inline-block;
}

.chat-profile-header .right {
    float: right;
    width: 40%;
    padding-top: 15px;
}

.chat-profile-header .right .text-light-orange {
    color: rgb(245, 103, 103) !important;
}

.chat-box .chat-desc {
    height: calc(100% - 58px);
    padding: 8px 10px 14px;
}

.chat-box .chat-desc ul li {
    margin-bottom: 7px;
}

.chat-box .chat-desc ul li .chat-img img {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px;
}

.chat-box .chat-desc ul li .chat-body {
    margin-left: 44px;
    position: relative;
    margin-bottom: 14px;
}

.chat-box .chat-desc ul li .mesaj-alani {
    position: relative;
    text-align: left;
    background: rgb(244, 246, 251);
    border: 1px solid rgb(219, 226, 238);
    border-radius: 12px;
    padding: 10px 12px;
    word-break: break-word;
    line-height: 1.5;
    color: rgb(31, 41, 55);
    font-size: 0.92rem;
    font-weight: 500;
    box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 2px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.chat-box .chat-desc ul li:hover .mesaj-alani {
    background: rgb(248, 250, 255);
    border-color: rgb(206, 216, 231);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 10px;
}

.chat-box .chat-desc ul li .mesaj-alani::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -10px;
    width: 0px;
    height: 0px;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-right: 10px solid rgb(219, 226, 238);
}

.chat-box .chat-desc ul li .mesaj-alani::after {
    content: "";
    position: absolute;
    top: 12px;
    left: -8px;
    width: 0px;
    height: 0px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 9px solid rgb(244, 246, 251);
}

.chat-box .chat-desc ul li .mesajkullanicisi, .chat-box .chat-desc ul li .chat-name, .chat-box .chat-desc ul li .username {
    font-size: 0.92rem;
    font-weight: 700;
    color: rgb(91, 61, 245);
    line-height: 1.1;
}

.chat-box .chat-desc ul li .rutbe, .chat-box .chat-desc ul li .rank {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgb(102, 112, 133);
    margin-left: 4px;
}

.chat-box .chat-desc ul li .chat-body .chat_time {
    font-size: 11px;
    color: rgb(152, 162, 179);
    float: right;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.chat-box .chat-desc ul li .mesaj-alani, .chat-box .chat-desc ul li .mesaj-alani p, .chat-box .chat-desc ul li .mesaj-alani span, .chat-box .chat-desc ul li .mesaj-alani div {
    color: rgb(0, 0, 0);
    font-weight: 500;
}

.chat-box .chat-desc ul li.admin_chat .chat-img {
    float: left;
}

.chat-box .chat-desc ul li.admin_chat .chat-body {
    margin-right: 0px;
    margin-left: 46px;
    text-align: left;
}

.chat-box .chat-desc ul li.admin_chat .mesaj-alani::after {
    opacity: 1;
}

.chat-footer {
    height: auto;
    min-height: 58px;
    border-top: 1px solid rgb(231, 237, 245);
    background: rgb(255, 255, 255);
    padding: 6px 8px;
    display: flex;
    align-items: center;
}

.chat-footer .chat_text_area {
    float: none;
    width: calc(100% - 60px);
}

.chat-footer .chat_text_area textarea {
    width: 100%;
    min-height: 42px;
    max-height: 100px;
    border: 1px solid rgb(219, 226, 238);
    border-radius: 12px;
    font-size: 14px;
    color: rgb(31, 41, 55);
    background: rgb(248, 250, 252);
    padding: 10px 12px;
    resize: none;
    line-height: 1.4;
    transition: 0.15s;
}

.chat-footer .chat_text_area textarea:focus {
    outline: none;
    border-color: rgb(101, 113, 255);
    background: rgb(255, 255, 255);
    box-shadow: rgba(101, 113, 255, 0.1) 0px 0px 0px 3px;
}

.chat-footer .chat_send {
    float: none;
    width: 52px;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-footer .chat_send .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(101, 113, 255), rgb(79, 94, 255));
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
    padding: 0px;
    box-shadow: rgba(101, 113, 255, 0.24) 0px 8px 18px;
}

.chat-footer .chat_send .btn:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.chat-reply-box {
    border-radius: 10px;
    background: rgb(244, 246, 251);
    border: 1px solid rgb(219, 226, 238);
    padding: 6px 10px;
    margin-bottom: 6px;
    font-size: 12px;
    color: rgb(71, 84, 103);
}

.message-actions.visible {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgb(217, 223, 235);
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 14px;
}

.upload-file-box {
    padding-bottom: 10px;
}

.upload-file-box .left {
    float: left;
    position: relative;
    width: 114px;
    height: 84px;
    overflow: hidden;
    border-radius: 5px;
}

.upload-file-box .left .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.upload-file-box .left .overlay a {
    display: block;
    width: 100%;
    height: 100%;
}

.upload-file-box .left .overlay a span {
    width: 35px;
    height: 35px;
    display: block;
    position: absolute;
    inset: 0px;
    margin: auto;
    background: rgb(255, 255, 255);
    color: rgb(34, 34, 34);
    line-height: 35px;
    text-align: center;
    font-size: 22px;
}

.upload-file-box .right {
    float: left;
    width: calc(100% - 114px);
    padding-left: 17px;
    padding-top: 17px;
}

.upload-file-box .right h3 {
    display: block;
    font-size: 14px;
    color: rgb(0, 0, 0);
    margin-bottom: 5px;
}

.upload-file-box .right a {
    display: inline-block;
    color: rgb(29, 141, 241);
    font-size: 14px;
}

.chat-profile-section {
    height: calc(-274px + 100vh);
}

.chat-profile-section .chat--profile-desc {
    height: 100%;
    padding: 20px;
}

.wizard-content .wizard > .actions > ul > li > a {
    background-color: rgb(27, 0, 255);
    font-weight: 600;
}

.wizard-content .wizard > .actions > ul > li > a[href="#previous"] {
    border-color: rgb(27, 0, 255);
    border-width: 2px;
    color: rgb(27, 0, 255);
}

.wizard-content .wizard > .actions > ul > li.disabled > a[href="#previous"] {
    display: none;
    border-color: rgb(27, 0, 255);
}

.widget-style1 {
    padding: 10px;
}

.widget-style1 .widget-data {
    width: calc(100% - 80px);
    padding: 0px 5px 0px 15px;
}

.widget-style1 .progress-data {
    width: 80px;
}

.widget-style1 .progress-data .apexcharts-canvas {
    margin: 0px auto;
}

.right-sidebar .right-sidebar-body .right-sidebar-body-content, .widget-style2 .widget-data {
    padding: 20px;
}

.widget-style3 {
    padding: 0px;
    overflow: hidden;
}

.widget-style3 .widget-data {
    width: calc(100% - 40px);
    padding: 5px;
}

.widget-style3 .widget-icon {
    width: 40px;
    font-size: 30px;
    line-height: 1;
    text-align: center;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: rgb(51, 65, 72);
    color: rgb(255, 255, 255);
}

.right-sidebar {
    position: fixed;
    right: -400px;
    top: 0px;
    width: 400px;
    height: 100%;
    background: rgb(255, 255, 255);
    z-index: 160;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 18px;
    transition: 0.3s ease-in-out;
}

.right-sidebar-visible {
    right: 0px;
}

.right-sidebar .sidebar-title {
    height: 70px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 5px 15px;
    border-bottom: 1px solid rgb(212, 212, 212);
}

.right-sidebar .sidebar-title h3 {
    font-weight: 600;
}

.right-sidebar .sidebar-title h3 span {
    font-weight: 400;
    color: rgb(0, 0, 0);
}

.right-sidebar .close-sidebar {
    font-size: 18px;
    color: rgb(136, 136, 136);
    cursor: pointer;
}

.right-sidebar .right-sidebar-body {
    height: calc(100% - 70px);
}

.sidebar-btn-group {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.sidebar-btn-group .btn {
    width: 48%;
}

.sidebar-radio-group .custom-control-inline {
    margin-right: 0px;
    width: 25%;
    margin-bottom: 10px;
}

.bootstrap-tagsinput .label-info {
    background: rgb(27, 0, 255);
}

.bootstrap-touchspin .btn {
    background: rgb(27, 0, 255);
    height: 100%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 0px;
    -webkit-box-pack: center;
    justify-content: center;
}

.bootstrap-touchspin .input-group-btn-vertical .btn {
    height: 52%;
}

.bootstrap-touchspin .bootstrap-touchspin-postfix, .bootstrap-touchspin .bootstrap-touchspin-prefix {
    border-top: 1px solid rgb(212, 212, 212);
    border-bottom: 1px solid rgb(212, 212, 212);
}

.asColorPicker-buttons a, .asColorPicker-gradient-control a {
    font-size: 13px;
    font-weight: 500;
}

.dropzone {
    border-color: rgb(27, 0, 255);
}

.dropzone .dz-preview .dz-remove {
    color: red;
}

.fc-view-container tr:first-child > td > .fc-day-grid-event {
    background: rgb(27, 0, 255);
}

.fc-today.alert-info {
    background: rgb(224, 222, 239);
}

.fc-day-number, .fc-ltr .fc-axis {
    font-size: 13px;
    font-weight: 500;
}

.swal2-popup .swal2-title {
    font-size: 18px;
    font-weight: 600;
}

.swal2-popup .swal2-styled.swal2-confirm {
    background: rgb(16, 0, 153);
}

.documentation-wrap {
    position: relative;
    height: 100%;
    padding-left: 300px;
}

.documentation-wrap .doc-sidebar {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgb(255, 255, 255);
    width: 300px;
    height: 100%;
}

.doc-content-wrap {
    padding: 30px;
}

.table-badge {
    padding: 8px 20px;
    font-size: 14px;
    background: rgb(27, 0, 255);
    color: rgb(235, 236, 239);
    font-weight: 500;
}

.user-list > ul > li {
    padding: 5px 0px;
}

.table-actions {
    display: flex;
}

.table-actions a {
    display: inline-block;
    font-size: 18px;
    color: rgb(19, 30, 34);
}

.table-actions a + a {
    margin-left: 10px;
}

.welcome-modal, .welcome-modal-btn {
    position: fixed;
    right: 24px;
    z-index: 12;
}

.welcome-modal {
    bottom: 0px;
    width: 320px;
    background: rgb(255, 255, 255);
    border-radius: 12px 12px 0px 0px;
    padding: 0px 24px 16px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 44px;
}

.welcome-modal iframe {
    pointer-events: none;
    max-width: 200px;
    margin: 0px auto;
    display: block;
}

.welcome-modal .welcome-modal-close {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    border: 0px;
    background: rgb(230, 235, 240);
    border-radius: 4px;
    color: rgb(0, 0, 0);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.welcome-modal .welcome-modal-close i::before {
    font-weight: 700 !important;
}

.welcome-modal-btn {
    bottom: 4px;
    height: 44px;
    padding: 0px 20px;
    background: rgb(3, 30, 35);
    color: rgb(255, 255, 255);
    font-size: 15px;
    border: 0px;
    border-radius: 8px;
    transition: 0.3s ease-in-out;
}

.welcome-modal-btn.active {
    bottom: -50px;
}

.welcome-modal-btn i {
    margin-top: 6px;
}

@media (min-width: 1301px) and (max-width: 1400px) {
    .header {
        width: calc(100% - 250px);
    }

    .brand-logo, .left-side-bar {
        width: 250px;
    }

    .main-container {
        padding-left: 250px;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .device-usage-chart .width-50-p {
        width: 100%;
    }
}

@media (min-width: 1301px) {
    .sidebar-shrink .left-side-bar, .sidebar-shrink .left-side-bar.open {
        left: -281px;
    }

    .sidebar-shrink .header {
        width: 100%;
    }

    .sidebar-shrink .main-container {
        padding-left: 0px;
    }
}

@media (max-width: 1300px) {
    .main-container {
        padding-left: 0px;
    }

    .header-left .menu-icon {
        display: flex;
    }

    .header {
        width: 100%;
    }

    .left-side-bar {
        left: -281px;
    }

    .left-side-bar .close-sidebar {
        display: block;
    }

    .left-side-bar::before {
        display: block;
        opacity: 0;
        visibility: hidden;
    }

    .left-side-bar.open::before {
        opacity: 1;
        visibility: visible;
        display: none;
    }

    .left-side-bar .brand-logo a {
        text-align: left;
        padding: 5px 15px;
    }

    .left-side-bar .brand-logo a .svg, .left-side-bar .brand-logo a img {
        margin: 0px;
    }

    .header-right .brand-logo {
        display: table;
    }

    .header-right .menu-icon {
        display: block;
        padding-left: 15px;
        padding-top: 7px;
    }

    .footer-wrap {
        width: 100%;
    }

    .mobile-menu-overlay {
        display: block;
        opacity: 0;
        visibility: hidden;
    }

    .mobile-menu-overlay.show {
        opacity: 0.6;
        visibility: visible;
    }
}

@media (min-width: 1025px) {
    .header-left .header-search {
        display: block !important;
    }
}

@media (max-width: 1024px) {
    .header {
        position: relative;
    }

    .header-left {
        width: 25%;
    }

    .header-right {
        width: 75%;
    }

    .main-container {
        padding-top: 0px;
    }

    .header-left .search-toggle-icon {
        display: flex;
    }

    .header-left .header-search {
        padding: 15px 20px;
        position: absolute;
        left: 0px;
        top: 100%;
        background: rgb(255, 255, 255);
        display: none;
    }

    .register-page-wrap .wizard-content .wizard {
        padding-left: 300px;
    }

    .register-page-wrap .wizard-content .wizard .steps {
        width: 300px;
    }
}

@media (max-width: 991px) {
    .device-usage-chart .width-50-p {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .header {
        position: fixed;
        left: 0px;
        top: 0px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 25px;
    }

    .main-container {
        padding-top: 50px;
    }

    .login-box {
        padding: 40px 15px;
    }

    .login-header .brand-logo a img {
        max-width: 150px;
    }

    .pre-loader {
        background-size: 43%;
    }

    .xs-pd-20-10 {
        padding: 20px 10px;
    }

    .xs-mb-20 {
        margin-bottom: 20px;
    }

    .h1, h1 {
        font-size: 2rem;
    }

    .h2, h2 {
        font-size: 1.6rem;
    }

    .h4, h4 {
        font-size: 1.4rem;
    }

    .main-container, .timeline ul li {
        padding-bottom: 0px;
    }

    .footer-wrap {
        position: relative;
        height: auto;
    }

    .user-notification {
        margin-right: 5px;
    }

    .user-notification .dropdown-menu {
        width: 100%;
        min-width: 300px;
    }

    .user-info-dropdown .dropdown-toggle .user-name {
        display: none;
    }

    .page-header {
        margin-bottom: 30px;
    }

    .forgot-password {
        text-align: center;
    }

    .ionicons-list li {
        width: 16.6%;
    }

    .timeline .timeline-date {
        position: relative;
        top: 0px;
        margin-bottom: 20px;
        left: 35px;
    }

    .timeline ul::before {
        left: 10px;
    }

    .timeline ul li {
        padding-left: 0px;
    }

    .timeline ul li::before {
        left: 2px;
        top: 28px;
    }

    .fc-toolbar .fc-left, .fc-toolbar .fc-right {
        float: none !important;
        padding-bottom: 10px;
    }

    .fc-toolbar .fc-left::after, .fc-toolbar .fc-right::after {
        content: "";
        clear: both;
        display: table;
    }

    .faq-wrap .card-header .btn {
        font-size: 17px;
    }

    .error-page h1 {
        font-size: 150px;
    }
}

@media (max-width: 660px) {
    .docs-buttons .btn-group-crop {
        display: block;
    }

    .select-role .btn-group .btn {
        padding-left: 35px;
        font-size: 14px;
    }

    .select-role .btn-group .btn .icon {
        left: 5px;
        width: 25px;
        height: 25px;
    }

    .select-role .btn-group .btn .icon .svg {
        width: 25px;
        height: 25px;
    }

    .forgot-password a {
        font-size: 14px;
        font-weight: 600;
    }

    .btn-group-lg > .btn, .btn-lg {
        font-size: 16px;
    }

    .register-page-wrap .wizard-content .wizard {
        padding-left: 0px;
    }

    .register-page-wrap .wizard-content .wizard .steps {
        display: none;
    }
}

.row.row-g6 {
    margin-left: -6px;
    margin-right: -6px;
}

.row.row-g6 > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.row.row-g3 {
    margin-left: -3px;
    margin-right: -3px;
}

.row.row-g3 > [class*="col-"] {
    padding-left: 3px;
    padding-right: 3px;
}

.rounded-right-0 {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.rounded-left-0 {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.blog-caption h4 a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-caption p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.small-gutter-row {
    margin-left: -5px;
    margin-right: -5px;
}

.small-gutter-row > [class^="col-"] {
    padding-left: 5px;
    padding-right: 5px;
}

.text-black {
    color: rgb(0, 0, 0) !important;
}

.message-item {
    position: relative;
}

.message-actions.visible {
    position: absolute;
    right: 0px;
    bottom: -14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgb(217, 223, 235);
    border-radius: 999px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 14px;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.message-actions .action-btn {
    width: 21px;
    height: 20px;
    border: 0px;
    border-radius: 50%;
    background: transparent;
    color: rgb(75, 85, 99);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    transition: 0.15s;
}

.message-actions .action-btn:hover {
    background: rgb(238, 242, 255);
    color: rgb(76, 99, 255);
    transform: translateY(-1px);
}

.message-actions .action-btn.edit:hover {
    background: rgb(255, 244, 229);
    color: rgb(217, 119, 6);
}

.message-actions .action-btn.reply:hover {
    background: rgb(238, 242, 255);
    color: rgb(76, 99, 255);
}

.message-actions .action-btn.react:hover {
    background: rgb(245, 243, 255);
    color: rgb(124, 58, 237);
}

.message-actions .reaction-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.reaction-wrapper {
    position: relative;
}

.reaction-box {
    position: absolute;
    bottom: 32px;
    right: 0px;
    display: flex;
    gap: 6px;
    padding: 6px 8px;
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 10px;
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
    transition: 0.15s;
    z-index: 5;
}

.reaction-wrapper.open .reaction-box {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
}

.reaction-box span {
    cursor: pointer;
    font-size: 18px;
    transition: transform 0.15s;
}

.reaction-box span:hover {
    transform: scale(1.3);
}

.reaction-item {
    display: flex;
    align-items: center;
    padding: 2px;
    background: rgb(240, 242, 245);
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
}

.reaction-item .count {
    font-size: 11px;
    opacity: 0.7;
}

.reaction-list {
    position: absolute;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    bottom: -9px;
}

.reaction-item.mine {
    background-color: rgb(151, 179, 209);
    color: white;
}

.mesaj-alani {
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 8px 10px;
    word-break: break-word;
}

.message-header {
    color: rgb(85, 85, 85);
    margin-bottom: 4px;
    font-weight: bolder;
}

.message-text {
    margin-bottom: 5px;
}

.reply-highlight .mesaj-alani {
    animation: 1.5s ease 0s 1 normal none running replyFlash;
}

@keyframes replyFlash {
    0% {
        background-color: rgb(255, 243, 205);
    }

    100% {
        background-color: rgb(255, 255, 255);
    }
}

.message-reply {
    margin: 0px 8px 6px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-left: 3px solid rgb(61, 102, 123);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.reply-user {
    font-size: 0.75em;
    font-weight: bolder;
}

.replytext {
    padding-right: 0px;
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    color: rgb(51, 72, 79);
}

.chat-reply-box {
    position: absolute;
    bottom: 81px;
    width: 98%;
    display: none;
    border-left: 3px solid rgb(0, 123, 255);
    margin-bottom: -4px;
    padding: 5px 30px 5px 5px;
    z-index: 33;
    background: rgb(241, 241, 241);
}

.cancel-reply {
    float: right;
    background: none;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    position: absolute;
    right: 5px;
    top: 5px;
}

.duel-card {
    transition: transform 0.18s, box-shadow 0.18s, border-top-color 0.18s;
}

.duel-card:hover {
    transform: translateY(-2px);
    box-shadow: rgba(255, 140, 26, 0.28) 0px 12px 28px, rgba(255, 140, 26, 0.18) 0px 2px 10px;
    border-top-color: rgb(255, 166, 77);
}

body.dark .duel-card:hover {
    box-shadow: rgba(255, 140, 26, 0.4) 0px 12px 28px, rgba(255, 140, 26, 0.28) 0px 2px 10px;
}

.duel-card {
    border-width: 6px 0px 0px;
    border-style: solid none none;
    border-color: rgb(255, 140, 26) currentcolor currentcolor;
    border-image: initial;
    border-radius: 0.75rem;
    margin-bottom: 5px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 8px 24px;
}

.duel-card .card-header {
    background-color: white;
}

.tduel-card {
    border-top: 6px solid red;
}

.duel-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.duel-sep {
    border-width: 1px 0px 0px;
    border-style: solid none none;
    border-color: rgba(0, 0, 0, 0.06) currentcolor currentcolor;
    border-image: initial;
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    white-space: nowrap;
}

.chip-blue {
    background: rgb(229, 237, 255);
    color: rgb(59, 91, 255);
    border: 1px solid rgb(201, 213, 255);
}

.chip-indigo {
    border: 1px solid rgb(211, 215, 255);
    background: rgb(228, 231, 255) !important;
    color: rgb(92, 108, 255) !important;
}

.chip-teal {
    background: rgb(217, 244, 239);
    color: rgb(14, 165, 168);
    border: 1px solid rgb(191, 233, 227);
}

.chip-green {
    background: rgb(220, 248, 232);
    color: rgb(15, 157, 88);
    border: 1px solid rgb(197, 239, 215);
}

.chip-amber {
    background: rgb(255, 232, 163);
    color: rgb(185, 119, 0);
    border: 1px solid rgb(255, 215, 119);
    transition: 0.2s;
}

.chip-amber:hover {
    background: rgb(255, 215, 102);
    color: rgb(138, 90, 0);
    border-color: rgb(255, 201, 51);
}

.chip-amber:active {
    background: rgb(255, 201, 51);
    color: rgb(112, 72, 0);
}

.badge-rose {
    background: rgb(255, 86, 112);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 0.35rem 0.6rem;
}

.btn-indigo {
    background: rgb(92, 108, 255);
    color: rgb(255, 255, 255);
    border: 0px;
    box-shadow: rgba(92, 108, 255, 0.3) 0px 6px 16px;
}

.btn-indigo:hover {
    filter: brightness(1.03);
}

.btn-pill {
    border-radius: 0.75rem;
}

@media (max-width: 576px) {
    .duel-avatar {
        width: 36px;
        height: 36px;
    }

    .chip {
        font-size: 0.82rem;
        padding: 0.3rem 0.5rem;
    }

    .badge-rose {
        padding: 0.3rem 0.5rem;
    }
}

body.dark .duel-card {
    background: rgb(11, 18, 32);
    color: rgb(229, 231, 235);
    border-top-color: rgb(255, 140, 26);
}

body.dark .duel-sep {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark .chip-blue {
    background: rgb(31, 41, 55);
    color: rgb(147, 197, 253);
    border-color: rgb(31, 37, 51);
}

body.dark .chip-indigo {
    background: rgb(31, 37, 51);
    color: rgb(165, 180, 252);
    border-color: rgb(34, 40, 58);
}

body.dark .chip-teal {
    background: rgb(19, 58, 56);
    color: rgb(45, 212, 191);
    border-color: rgb(21, 66, 64);
}

body.dark .chip-green {
    background: rgb(19, 54, 31);
    color: rgb(34, 197, 94);
    border-color: rgb(21, 64, 33);
}

body.dark .chip-amber {
    background: rgb(58, 44, 18);
    color: rgb(251, 191, 36);
    border-color: rgb(74, 55, 22);
}

.topic-bar {
    font-size: 0.9rem;
    border-radius: 0.5rem;
}

.info-box {
    font-size: 0.85rem;
    border-radius: 0.5rem;
}

.label-icon {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.bg-teal {
    background-color: rgb(14, 165, 168) !important;
}

.duello-page {
}

@media (min-width: 992px) {
    .duello-page .col-lg-9 {
        position: relative;
    }

    .duello-page .row-g6:not(.duellocardrow) {
        position: relative;
        z-index: 2;
    }

    .duello-page .card-box {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .duello-page #bekleyenbireyselduellolar, .duello-page #bekleyentopluduellolar {
        flex: 1 1 0%;
        overflow: auto;
    }
}

@media (max-width: 991.98px) {
}

@media (max-width: 991.98px) {
    .duello-page .card-box, .duello-page #bekleyenbireyselduellolar, .duello-page #bekleyentopluduellolar {
        height: auto;
        overflow: visible;
    }
}

@media (max-width: 991.98px) {
    .sm-pl-0 {
        padding-left: 0px !important;
    }

    .duello-page {
        margin-top: 15px;
    }

    .duello-page #bekleyenbireyselduellolar, .duello-page #bekleyentopluduellolar {
        max-height: 520px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .duello-page .card-box {
        height: auto;
    }
}

.duello-chat-col {
    order: 1;
}

.duello-main-col {
    order: 2;
}

@media (max-width: 991.98px) {
    .duello-main-col {
        order: 1;
    }

    .duello-chat-col {
        order: 2;
    }

    .duello-chat-col .card {
        position: static !important;
        top: auto !important;
    }
}

@media (min-width: 768px) {
    .duellocardrow.tab-content > .tab-pane {
        display: block !important;
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .pd-md-1 {
        padding: 0.25rem !important;
    }

    .duellocardrow.tab-content > .tab-pane {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .duellocardrow.tab-content > .tab-pane.fade {
        opacity: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .duellocardrow.tab-content > .tab-pane {
        display: none;
        opacity: 0;
    }

    .duellocardrow.tab-content > .tab-pane.active.show {
        display: block;
        opacity: 1;
    }
}

.sidebar-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    background: linear-gradient(135deg, rgb(255, 234, 160), rgb(255, 183, 3));
    color: rgb(90, 58, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 18px 40px, rgba(255, 183, 3, 0.18) 0px 0px 0px 6px, rgba(255, 183, 3, 0.75) 0px 0px 34px, rgba(255, 255, 255, 0.65) 0px 2px 0px inset;
    animation: 1.1s ease 0s 1 normal none running fab-bounce, 2.6s ease 1.1s infinite normal none running fab-pulse-strong;
    transition: transform 0.25s, box-shadow 0.25s;
}

.sidebar-fab:hover {
    transform: translateY(-5px) scale(1.07);
    box-shadow: rgba(0, 0, 0, 0.42) 0px 22px 48px, rgba(255, 183, 3, 0.22) 0px 0px 0px 6px, rgba(255, 183, 3, 0.9) 0px 0px 46px, rgba(255, 255, 255, 0.7) 0px 2px 0px inset;
}

.sidebar-fab > img {
    width: 88px;
    height: 68px;
    max-width: unset;
    pointer-events: none;
}

@keyframes fab-bounce {
    0% {
        transform: translateY(0px);
    }

    30% {
        transform: translateY(-12px);
    }

    60% {
        transform: translateY(0px);
    }

    80% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fab-pulse-strong {
    0% {
        box-shadow: rgba(255, 183, 3, 0.75) 0px 0px 0px 0px, rgba(255, 183, 3, 0.55) 0px 0px 0px 0px;
    }

    60% {
        box-shadow: rgba(255, 183, 3, 0) 0px 0px 0px 26px, rgba(255, 183, 3, 0) 0px 0px 0px 44px;
    }

    100% {
        box-shadow: rgba(255, 183, 3, 0) 0px 0px 0px 0px, rgba(255, 183, 3, 0) 0px 0px 0px 0px;
    }
}

.fab-tooltip {
    position: absolute;
    right: 72px;
    background: rgb(255, 183, 3);
    color: rgb(61, 42, 0);
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(6px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 20px;
    transition: 0.2s;
}

.sidebar-fab:hover .fab-tooltip {
    opacity: 1;
    transform: translateY(0px);
}

.sidebar-fab .fab-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: rgb(220, 53, 69);
    color: rgb(255, 255, 255);
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0px 5px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgba(220, 53, 69, 0.9) 0px 0px 16px;
}

.sidebar-fab .fab-badge:empty {
    display: none;
}

.sidebar-fab.has-notification {
    animation: 2.2s ease 0s infinite normal none running fab-pulse-strong;
}

@media (max-width: 768px) {
    .right-sidebar {
    }

    .sidebar-fab {
        bottom: 20px;
        right: 20px;
    }
}

.right-sidebar-body-content, .tab, .tab-content, .tab-pane {
    height: 100%;
}

#aktif-uyeler-rsidebar {
    flex-direction: column;
}

#aktif-uyeler-rsidebar .chat-search {
    flex-shrink: 0;
}

#aktif-uyeler-rsidebar .chat-notification-list {
    flex: 1 1 0%;
    overflow-y: auto;
    height: calc(100% - 140px);
}

.aktiftumuyelerlist li a, .friend-list li a {
    display: flex;
    align-items: center;
    padding: 6px;
    border-radius: 6px;
}

.aktiftumuyelerlist, .friend-list {
    height: 100%;
    padding: 5px;
}

.aktiftumuyelerlist li, .friend-list li {
    border: 1px solid rgba(0, 0, 0, 0.125);
    padding: 5px;
}

.aktiftumuyelerlist li a:hover, .friend-list li a:hover {
}

.aktiftumuyelerlist img, .friend-list img, .profilfoto {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.aktiftumuyelerlist li, .friend-list li {
    animation: 0.2s ease 0s 1 normal none running fadeInUp;
}

.aktiftumuyelerlist li, .friend-list li {
    border-radius: 6px;
    transition: background 0.15s;
    margin-bottom: 3px;
}

.aktiftumuyelerlist li:hover {
    background: rgba(0, 0, 0, 0.04);
}

.aktiftumuyelerlist li.vip {
    background: linear-gradient(90deg, rgb(255, 243, 205), rgb(255, 255, 255));
    border-left: 4px solid rgb(255, 193, 7);
}

.aktiftumuyelerlist li.friend {
    background: linear-gradient(90deg, rgb(232, 245, 233), rgb(255, 255, 255));
    border-left: 4px solid rgb(40, 167, 69);
}

.aktiftumuyelerlist li.vip.friend {
    background: linear-gradient(90deg, rgb(255, 243, 205), rgb(232, 245, 233));
    border-left: 4px solid rgb(220, 53, 69);
}

.aktiftumuyelerlist li.friend:hover {
    background: linear-gradient(90deg, rgb(208, 240, 214), rgb(255, 255, 255));
}

.aktiftumuyelerlist li.vip.friend:hover {
    background: linear-gradient(90deg, rgb(255, 248, 220), rgb(208, 240, 214));
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.friend-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.profilfoto {
    flex-shrink: 0;
}

.friend-info {
    min-width: 0px;
    margin-right: auto;
}

.friend-actions {
    flex-shrink: 0;
    white-space: nowrap;
}

.friend-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.friend-badges {
    display: flex;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.friend-badges .badge {
    flex-shrink: 0;
}

.name-avatar .txt {
    max-width: calc(100% - 45px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-icon > img {
    max-height: 70px;
}

.friend-list li.friend.online {
    background: linear-gradient(90deg, rgb(232, 245, 233), rgb(255, 255, 255));
    border-left: 4px solid rgb(40, 167, 69);
}

.friend-list > li.friend.online:hover {
    background: linear-gradient(90deg, rgb(208, 240, 214), rgb(255, 255, 255));
}

.friend-list li.friend.offline {
    background: linear-gradient(90deg, rgb(253, 234, 234), rgb(255, 255, 255));
    border-left: 4px solid rgb(220, 53, 69);
    opacity: 0.85;
}

.friend-list li.friend.offline:hover {
    background: linear-gradient(90deg, rgb(249, 207, 207), rgb(255, 255, 255));
}

.text-nowrap {
    white-space: nowrap;
}

#sidebarNotifCount {
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center center;
}

.fab-bump {
    animation: 0.35s ease 0s 1 normal none running fabBump;
}

@keyframes fabBump {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.3);
    }

    60% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.fab-down {
    animation: 0.25s ease 0s 1 normal none running fabDown;
}

@keyframes fabDown {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.7);
        opacity: 0.5;
    }
}

.chat-meta {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 2px;
}

.chat-msg.me .chat-meta {
    color: rgb(230, 243, 255);
}

.chat-status.read {
    color: rgb(79, 195, 247);
}

.okunmamis-badge {
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 10px;
}

.ozel-sohbet-kutu.has-new-message {
    border: 2px solid rgb(255, 152, 0);
}

.ozel-sohbet-kutu.has-new-message .chat-header {
    background: rgb(255, 152, 0);
    color: rgb(255, 255, 255);
}

.plus-chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.plus-avatar-wrap {
    position: relative;
}

.plus-chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.plus-unread {
    margin-left: auto;
    background: rgb(220, 53, 69);
    color: rgb(255, 255, 255);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.ozel-sohbet-icerik {
    flex: 1 1 0%;
    padding: 10px;
    font-size: 13px;
    overflow-y: auto;
}

.ozel-sohbet-input {
    border-top: 1px solid rgb(222, 226, 230);
    padding: 6px;
}

.ozel-sohbet-kutu {
    width: 260px;
    height: 360px;
    margin-left: 5px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(222, 226, 230);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 20px;
}

.ozel-sohbet-kutu.minimized {
    height: 50px;
}

/* `.ozelmesaj-kalan-hak` (gunluk mesaj kotasi gostergesi, 2026-08-21)
   bu listeye EKLENMELI: kutu kucultuldugunde icerik ve giris alani
   gizleniyor ama gosterge listede olmadigi icin basliga sizabiliyordu. */
.ozel-sohbet-kutu.minimized .ozel-sohbet-icerik,
.ozel-sohbet-kutu.minimized .ozelmesaj-kalan-hak,
.ozel-sohbet-kutu.minimized .ozel-sohbet-input {
    display: none;
}

.ozel-sohbet-header {
    height: 50px;
    background: rgb(52, 58, 64);
    color: rgb(255, 255, 255);
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.badge-truncate {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0px;
}

.badge-truncate .badge {
    flex-shrink: 0;
}

.badge-truncate .badge:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ozel-sohbet-kutu:hover .ozel-sohbet-header {
    background: rgb(33, 37, 41);
}

.ozel-sohbet-baslik {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sohbet-plus {
    position: fixed;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    background: rgb(52, 58, 64);
    color: rgb(255, 255, 255);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1051;
}

#sohbet-plus-menu {
    position: absolute;
    bottom: 50px;
    right: 30px;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(222, 226, 230);
    border-radius: 6px;
    width: 200px;
    display: none;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
}

#sohbet-plus-menu div {
    padding: 8px 10px;
    font-size: 13px;
    cursor: pointer;
    color: black;
}

#sohbet-plus-menu div:hover {
    background: rgb(241, 241, 241);
}

.ozel-sohbet-kutu.hidden {
    display: none !important;
}

#ozel-sohbet-bar {
    position: fixed;
    right: 100px;
    bottom: 0px;
    z-index: 1050;
    display: flex;
    transition: right 0.3s ease-in-out;
}

:root {
    --chat-offset: 140px;
}

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #7987a1;
    --bs-gray-dark: #212a3a;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #7987a1;
    --bs-gray-700: #495057;
    --bs-gray-800: #212a3a;
    --bs-gray-900: #060c17;
    --bs-primary: #6571ff;
    --bs-secondary: #7987a1;
    --bs-success: #05a34a;
    --bs-info: #66d1d1;
    --bs-warning: #fbbc06;
    --bs-danger: #ff3366;
    --bs-light: #e9ecef;
    --bs-dark: #060c17;
    --bs-primary-rgb: 101, 113, 255;
    --bs-secondary-rgb: 121, 135, 161;
    --bs-success-rgb: 5, 163, 74;
    --bs-info-rgb: 102, 209, 209;
    --bs-warning-rgb: 251, 188, 6;
    --bs-danger-rgb: 255, 51, 102;
    --bs-light-rgb: 233, 236, 239;
    --bs-dark-rgb: 6, 12, 23;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-body-bg-rgb: 249, 250, 251;
    --bs-font-sans-serif: "Roboto", Helvetica, sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #000;
    --bs-body-bg: #f9fafb;
}

#ozel-sohbet-bar {
    position: fixed;
    right: var(--chat-offset);
    bottom: 0px;
    display: flex;
    transition: right 0.3s ease-in-out;
}

#sohbet-plus {
    position: fixed;
    right: calc(var(--chat-offset) - 50px);
    bottom: 10px;
    transition: right 0.3s ease-in-out;
}

.right-sidebar-visible {
    --chat-offset: 405px;
}

:root {
    --chat-offset: 100px;
}

body.chat-plus-visible {
    --chat-offset: 140px;
}

body.right-sidebar-visible {
    --chat-offset: 405px;
}

#ozel-sohbet-bar {
    position: fixed;
    right: var(--chat-offset);
    bottom: 0px;
    display: flex;
    transition: right 0.3s ease-in-out;
}

#sohbet-plus {
    position: fixed;
    right: calc(var(--chat-offset) - 50px);
    bottom: 10px;
    transition: right 0.3s ease-in-out;
}

@keyframes chat-enter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes chat-enter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes chat-pop {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes chat-minimize {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.ozel-sohbet-kutu.anim-enter {
    animation: 0.28s ease-out 0s 1 normal none running chat-enter;
}

.ozel-sohbet-kutu.anim-pop {
    animation: 0.22s ease-out 0s 1 normal none running chat-pop;
}

.ozel-sohbet-kutu.anim-minimize {
    animation: 0.18s ease-in 0s 1 normal forwards running chat-minimize;
}

.ozel-sohbet-kutu {
    transition: transform 0.28s, opacity 0.2s;
}

.ozel-sohbet-pin {
    cursor: pointer;
    margin-right: 6px;
    opacity: 0.7;
}

.ozel-sohbet-pin:hover {
    opacity: 1;
}

.ozel-sohbet-kutu.pinned {
    border: 2px solid rgb(255, 193, 7);
}

.ozel-sohbet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
}

.ozel-sohbet-user {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0px;
}

.ozel-sohbet-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ozel-sohbet-baslik {
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ozel-sohbet-actions span {
    cursor: pointer;
    margin-left: 6px;
}

.plus-chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plus-chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.plus-chat-name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plus-chat-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.plus-avatar-wrap {
    position: relative;
}

.plus-chat-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.plus-online-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
}

.online .plus-online-dot {
    background: rgb(40, 167, 69);
}

.offline .plus-online-dot {
    background: rgb(220, 53, 69);
}

.plus-unread {
    margin-left: auto;
    background: rgb(220, 53, 69);
    color: rgb(255, 255, 255);
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.chat-msg {
    max-width: 85%;
    padding: 6px 10px;
    margin-bottom: 6px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.chat-msg.me {
    background: rgb(13, 110, 253);
    color: rgb(255, 255, 255);
    margin-left: auto;
}

.chat-msg.other {
    background: rgb(241, 241, 241);
    color: rgb(0, 0, 0);
}

.chat-msg.me {
    margin-left: auto;
    text-align: right;
}

.chat-msg.other {
    margin-right: auto;
    text-align: left;
}

.chat-text {
    font-size: 13px;
}

.chat-time {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 2px;
}

.chat-status {
    font-size: 11px;
    opacity: 0.5;
    margin-left: 4px;
}

.chat-status.read {
    color: rgb(79, 195, 247);
    opacity: 1;
}

.ozel-sohbet-baslik-wrap {
    display: flex;
    flex-direction: column;
}

.ozel-sohbet-baslik {
    font-weight: 600;
    line-height: 18px;
}

.ozel-sohbet-typing {
    height: 16px;
    font-size: 12px;
    color: rgb(136, 136, 136);
    line-height: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.ozel-sohbet-header.typing .ozel-sohbet-typing {
    opacity: 1;
    visibility: visible;
}

.select2-container {
    display: flex;
    padding: 0px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgb(153, 153, 153);
    font-size: 12px;
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b, .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgb(136, 136, 136) transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0px;
    height: 0px;
    left: 50%;
    margin-left: -4px;
    margin-top: -5px;
    position: absolute;
    top: 50%;
    width: 0px;
}

.select2-results__options {
    font-size: 12px;
}

.duel-card .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.duel-card .card-body .mt-auto-wrapper {
    margin-top: auto !important;
}

.modal-fullscreen .modal-content {
    height: 100%;
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0px;
    border-radius: 0px;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0px;
    padding-right: 0px !important;
}

.yazilan-metin {
    font-family: Roboto, Helvetica, sans-serif;
    font-size: 17px;
}

/*
 * Anlık yazım hatası işareti — YAZI ALANI TİTREMESİNİN ÇÖZÜMÜ (2026-08-07).
 *
 * Eskiden main.js hatalı girişte Bootstrap'ın `border` + `border-danger`
 * sınıflarını EKLEYİP KALDIRIYORDU. Performans girişinin sınıfı `border-1`
 * ama projede `.border-1` diye bir kural YOK; eleman tarayıcı varsayılanı
 * 2px kenarlıkla duruyor. Bootstrap `.border` (core.css: `1px solid
 * !important`) onu 2px'ten 1px'e düşürüyor, hata geçince geri 2px yapıyordu.
 * Ölçüldü (Performans modu, yazarken): yükseklik 60 ↔ 62 px, üst konum
 * 651 ↔ 652 px. Kullanıcı bunu "yazı alanı titriyor" diye bildirdi ve geri
 * sayımdan sandı; ölçüm sayacın SUÇSUZ olduğunu gösterdi — yazmadan 8 sayaç
 * tikinde sıfır değişiklik, yazarken 14 değişiklik.
 *
 * ÇÖZÜM: kalınlığa HİÇ dokunma, yalnız RENGİ değiştir. Genişlik sabit
 * kaldığı için reflow olmuyor; görünüm eskisiyle aynı (kırmızı kenarlık).
 * `!important` gerekli, çünkü taban kenarlık kuralları da !important taşıyor.
 *
 * KAPSAM: bu gösterge yalnız `#yazilan-metin-performanssinavmodu`'nda
 * görünür. Hız Savaşı girişinin sınıfı `border-0` (kalınlık 0) olduğundan
 * orada hiçbir renk boyanmaz — eskiden de böyleydi, ayrı iş.
 */
.yazilan-metin.ko-giris-hatali {
    border-color: #dc3545 !important;
}

/*
 * KİLİT UYARISI — üst üste 7 yanlış (2026-10-13, hata raporları #763/#714/#711).
 *
 * Performans/Hız Savaşı'nda 7 yanlıştan sonra main.js kelimeyi ilerletmiyor ve
 * boşluğu yutuyor. Üyeye gösterilen tek işaret yukarıdaki kırmızı kenarlıktı;
 * Hız Savaşı girişi `border-0` olduğu için orada HİÇBİR piksel değişmiyordu.
 * Üyeler bunu "boşluk tuşu çalışmıyor / klavyem bozuldu" diye bildirdi.
 *
 * `min-height` ZORUNLU ve kap DAİMA DOM'da: metin sonradan belirip yazı
 * alanını aşağı iterse yukarıdaki titreme regresyonunun aynısı doğar.
 * Gizlemek için `display:none` DEĞİL boş metin kullanılır — `aria-live`
 * gizlenmiş elemanda tetiklenmez ve ekran okuyucu uyarıyı hiç duyurmaz.
 */
.ko-kilit-uyari {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    background: #fff3f3;
    color: #b02a37;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
.ko-kilit-uyari:empty {
    background: transparent;
}

#yazialani-gerceksinavmodu {
    padding-bottom: 100px !important;
}

#yazialani-hizsavasisinavmodu {
    background: rgb(255, 255, 255);
    border: 2px solid rgb(233, 236, 239);
    text-align: justify;
    display: block !important;
    height: 100px !important;
    padding: 8px 10px 0px !important;
    font-size: 30px !important;
    line-height: 40px !important;
    overflow: hidden !important;
    text-indent: 0px !important;
    box-sizing: border-box !important;
}

#yazialani-hizsavasisinavmodu span {
    padding: 1px 0px;
    vertical-align: top !important;
    margin: 0px !important;
    line-height: 45px !important;
}

#yazialani-hizsavasisinavmodu > .golge {
    border-bottom: 1px dotted;
    color: rgb(0, 0, 0);
}

.yazdiklarimigizle {
    color: black !important;
    background-color: black !important;
}

.kutulu > span.golge {
    border: 1px solid black;
}

.isaretsiz > span.golge {
    border-bottom-width: medium !important;
    border-bottom-style: none !important;
    border-bottom-color: currentcolor !important;
    background: none !important;
}

.fw-bold {
    font-weight: 500 !important;
}

.fs-4 {
    font-size: 1.25rem !important;
}

.fs-3 {
    font-size: calc(1.275rem + 0.3vw) !important;
}

.display-1 {
    font-size: calc(1.625rem + 4.5vw);
    font-weight: 300;
    line-height: 1.2;
}

.message-header .badge {
    font-size: 1em;
    padding: 0.35em 0.45em;
}

.rakipbilgisi, .rakipcard {
    display: none !important;
}

.duello-modu .rakipbilgisi, .duello-modu .rakipcard {
    display: flex !important;
}

.scoreTable {
    width: 100%;
    display: flex;
    float: left;
    margin-top: 30px;
    margin-bottom: 10px;
}

.minw80 {
    width: 100%;
    max-width: 80%;
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
}

.matchdesc {
    font-size: 17px;
    color: rgb(0, 46, 116);
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
    padding: 7px;
}

.opponentScore {
    color: rgb(39, 195, 159);
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
}

.scoreTable ul li:nth-child(2n+1) {
    background: rgb(241, 241, 241);
}

.scoreTable ul li {
    display: flex;
    width: 100%;
    align-items: center;
}

.scoreTable {
    width: 100%;
    display: flex;
    float: left;
    margin-top: 30px;
    margin-bottom: 10px;
}

.scoreBoard {
    width: 100%;
    max-width: 900px;
    margin: 0px auto;
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.42) 1px 1px 11px 4px;
    border-radius: 7px;
}

.cardbox {
    display: flex;
    align-items: center;
    background: rgb(14, 135, 130);
    padding: 12px 13px;
}

.cardDesc {
    color: rgb(198, 198, 198);
    font-size: 11px;
    font-weight: 600;
    border-left: 3px solid rgb(198, 198, 198);
    margin-left: 10px;
    padding-left: 10px;
    line-height: 16px;
}

.cardDesc.rakipDesc {
    color: rgb(198, 198, 198);
    font-size: 11px;
    font-weight: 600;
    border-right: 3px solid rgb(198, 198, 198);
    margin-right: 10px;
    border-left: 0;
    padding-right: 10px;
    line-height: 16px;
}

.cardDesc p {
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    margin: 0px;
}

.matchdesc.flexColum {
    flex-direction: column;
}

.keystroke {
    font-size: 13px;
    color: red;
}

html:has(.sinav-arayuz-paneli.show) {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

html:has(#gerisayimmodal.show) {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

html:has(#skor-ekrani1.show) {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

body:has(.sinav-arayuz-paneli.show) {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

body:has(#gerisayimmodal.show) {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

.sinav-arayuz-paneli {
    position: fixed;
    width: 100%;
    overflow: hidden !important;
    padding-right: 0px !important;
}

.coach-sticky-container {
    position: fixed;
    right: 2%;
    bottom: 80px;
    z-index: 1060;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 15%;
    max-width: 250px;
    min-width: 180px;
    pointer-events: none;
}

.coach-bubble {
    pointer-events: auto;
    background: rgb(255, 255, 255);
    border: 2px solid rgb(78, 115, 223);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px;
    position: relative;
    font-size: 13px;
    line-height: 1.4;
    color: rgb(51, 51, 51);
    animation: 3s ease-in-out 0s infinite normal none running floatCoach;
    width: 100%;
}

.coach-avatar-circle {
    pointer-events: auto;
    width: 120px;
    height: 130px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 5px 10px);
    transition: transform 0.3s;
}

.coach-bubble::after {
    content: "";
    position: absolute;
    bottom: -9px;
    right: 52px;
    width: 15px;
    height: 15px;
    background: white;
    border-right: 2px solid rgb(78, 115, 223);
    border-bottom: 2px solid rgb(78, 115, 223);
    transform: rotate(45deg);
    z-index: 1;
}

@media (max-width: 992px) {
    .coach-bubble::after {
        right: 32px;
        width: 12px;
        height: 12px;
        bottom: -7px;
    }
}

@media (max-width: 992px) {
    .coach-sticky-container {
        width: 160px;
        bottom: 90px;
        right: 10px;
    }

    .coach-bubble {
        font-size: 11px;
        padding: 10px;
    }

    .coach-avatar-circle {
        width: 80px;
        height: 80px;
    }
}

.duel-vs-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(248, 249, 250);
    border-radius: 14px;
    padding: 15px;
}

.duel-player {
    width: 40%;
    text-align: center;
    padding: 10px;
    transition: 0.3s;
}

.duel-player.winner {
    background: rgb(230, 255, 237);
    border-radius: 12px;
    transform: scale(1.05);
    box-shadow: rgba(40, 167, 69, 0.4) 0px 0px 12px;
}

.duel-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 2px solid rgb(221, 221, 221);
    object-fit: cover;
}

.duel-name {
    font-weight: 600;
    margin-top: 5px;
}

.duel-score {
    font-size: 26px;
    font-weight: bold;
}

.duel-sub {
    font-size: 12px;
    color: rgb(102, 102, 102);
}

.duel-center {
    width: 20%;
    text-align: center;
}

.vs-text {
    font-size: 18px;
    font-weight: bold;
    color: rgb(153, 153, 153);
}

.duel-result {
    font-weight: bold;
    margin-top: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.duel-result.win {
    background: rgb(40, 167, 69);
    color: rgb(255, 255, 255);
}

.duel-result.lose {
    background: rgb(220, 53, 69);
    color: rgb(255, 255, 255);
}

.duel-time {
    font-size: 11px;
    color: rgb(119, 119, 119);
    margin-top: 3px;
}

.duel-vs-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: rgb(248, 249, 250);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.duel-player {
    text-align: center;
    width: 30%;
}

.duel-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid rgb(221, 221, 221);
    object-fit: cover;
}

.winner .duel-avatar {
    border-color: rgb(255, 193, 7);
    box-shadow: rgba(255, 193, 7, 0.5) 0px 0px 15px;
}

.duel-score {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 5px 0px;
}

.vs-text {
    font-style: italic;
    font-weight: bold;
    color: rgb(187, 187, 187);
    font-size: 1.5rem;
}

.locked-blur {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

.vip-upsell-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border: 1px solid rgb(255, 193, 7);
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px;
}

.minw80 {
    max-width: 100% !important;
}

.sol-resim-kapsayici {
    background-color: white;
    background-image: url("/assets/images/bilgisayar2.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100%;
}

@media (min-width: 768px) {
    .sol-resim-kapsayici {
        min-height: 100%;
    }
}

@media (max-width: 767px) {
    .sol-resim-kapsayici {
        height: 250px;
        min-height: 250px;
    }
}

.custom-card {
    position: relative;
    border: 2px solid rgb(163, 163, 163) !important;
    border-radius: 15px !important;
}

.custom-title {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 0px 15px;
    font-weight: 800;
    font-size: 1.2rem;
    white-space: nowrap;
    color: rgb(33, 37, 41);
}

.badge-custom {
    background-color: rgb(97, 102, 245);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-weight: 500;
    margin-bottom: 8px;
    display: inline-block;
}

.metinsonucu span {
    margin-right: 3px;
}

.ortala {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 50px;
}

.swal2-container {
    z-index: 999999 !important;
}

.fs-5 {
    font-size: 1rem !important;
}

.wysiwyg-color-silver {
    color: silver;
}

.wysiwyg-color-gray {
    color: gray;
}

.wysiwyg-color-white {
    color: white;
}

.wysiwyg-color-maroon {
    color: maroon;
}

.wysiwyg-color-red {
    color: red;
}

.wysiwyg-color-purple {
    color: purple;
}

.wysiwyg-color-fuchsia {
    color: fuchsia;
}

.wysiwyg-color-green {
    color: green;
}

.wysiwyg-color-lime {
    color: lime;
}

.wysiwyg-color-olive {
    color: olive;
}

.wysiwyg-color-yellow {
    color: yellow;
}

.wysiwyg-color-navy {
    color: navy;
}

.wysiwyg-color-blue {
    color: blue;
}

.wysiwyg-color-teal {
    color: teal;
}

.wysiwyg-color-aqua {
    color: aqua;
}

.wysiwyg-color-orange {
    color: orange;
}

.wysihtml5-toolbar a[data-wysihtml5-command="insertImage"], .wysihtml5-toolbar a[data-wysihtml5-command="createLink"] {
    display: none !important;
}

.ani-icerik .p-3 ol, .ani-icerik .p-3 ul {
    margin: 1em 0px 1em 2em !important;
    padding-left: 20px !important;
}

.ani-icerik .p-3 ol {
    list-style: decimal !important;
}

.ani-icerik .p-3 ul {
    list-style: disc !important;
}

.ani-icerik .p-3 li {
    display: list-item !important;
    margin-bottom: 5px;
}

.wizard > .steps a, .wizard > .steps a:active, .wizard > .steps a:hover {
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0.5rem !important;
    border-width: medium !important;
    border-style: none !important;
    border-color: currentcolor !important;
    border-image: initial !important;
}

.wizard > .steps a, .wizard > .steps a:active, .wizard > .steps a:hover {
    padding: 0.469rem 0.8rem;
    border-radius: 0.25rem;
    width: 100%;
    background-color: rgb(233, 236, 239);
}

.wizard > .steps a, .wizard > .steps a:active, .wizard > .steps a:hover {
    display: block;
    width: auto;
    margin: 0px 0.5em 0.5em;
    padding: 1em;
    text-decoration: none;
    border-radius: 5px;
}

.list-group-item.active {
    z-index: 2;
    color: rgb(255, 255, 255);
    border-color: rgb(101, 113, 255);
    background-color: rgb(101, 113, 255) !important;
}

.wizard > .steps a, .wizard > .steps a:active, .wizard > .steps a:hover {
    cursor: pointer;
    border-radius: 0.25rem;
    width: 100%;
    background-color: rgb(233, 236, 239);
    padding: 0.469rem 0.8rem !important;
    font-size: 0.875rem !important;
}

.wizard > .steps a:hover {
    color: white;
    background-color: rgb(149, 157, 255);
}

.wizard.altbolum > .steps li {
    margin-right: 2px !important;
    font-weight: bold;
}

#fklavye > ul > li {
    border-color: black;
    background-color: lightgray;
}

.bot-logo img {
    max-width: 200px;
    display: flex;
    right: 0px;
    float: right;
}

.tx-12 {
    font-size: 12px;
}

.dropzone.dz-clickable .dz-message *, .text-muted {
    --bs-text-opacity: 1;
    color: rgb(134, 134, 134) !important;
}

.pageButton.pagecenter {
    justify-content: center;
}

.pageButton {
    width: 100%;
    display: flex;
    margin: 0px auto;
    max-width: 810px;
    align-items: center;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.home-button {
    background: rgb(240, 136, 100) !important;
}

.fs-2 {
    font-size: calc(1.325rem + 0.9vw) !important;
}

.ms-auto {
    margin-left: auto !important;
}

.overflow-auto {
    overflow: auto !important;
}

.pageButton a {
    background: rgb(201, 60, 60);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 15px 60px;
    border-radius: 5px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    text-align: center;
    font-size: 12px;
}

body:has(.modal.show) {
    overflow: hidden !important;
}

.star-gold i {
    color: rgb(204, 204, 204);
    transition: color 0.3s;
}

.star-gold.active i {
    color: gold !important;
}

.bg-body {
    --bs-bg-opacity: 1;
    background-color: rgb(236, 240, 244) !important;
}

.sticky-profile {
    position: sticky;
    top: 65px;
    z-index: 99;
    height: fit-content !important;
}

.hata-notification {
    background: rgb(255, 255, 255);
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid transparent;
}

.hata-notification:hover {
    background-color: rgb(253, 242, 242);
    border-color: rgb(245, 198, 203);
    transform: translateY(-2px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px;
}

.hata-notification:hover strong {
    color: rgb(220, 53, 69) !important;
}

body.dark .message-text {
    color: rgb(108, 117, 125) !important;
}

body.dark .hata-notification {
    background-color: rgb(30, 42, 49) !important;
    color: rgb(108, 117, 125) !important;
}

body.dark .text-dark {
    color: rgb(108, 117, 125) !important;
}

#mention-list {
    position: absolute;
    background: rgb(34, 34, 34);
    border: 1px solid rgb(68, 68, 68);
    border-radius: 4px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: none;
    color: rgb(255, 255, 255);
    width: 200px;
}

#mention-list li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgb(51, 51, 51);
}

#mention-list li:hover, #mention-list li.active {
    background: rgb(204, 15, 15);
}

.owner-menu {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 5px;
    display: flex;
    gap: 3px;
}

.owner-menu .action-btn i {
    font-size: 14px;
}

.hata-chat-container {
    background-color: rgb(248, 249, 250);
    border-radius: 8px;
    border: 1px solid rgb(222, 226, 230);
}

.hata-msg-bubble {
    width: 85%;
    padding: 5px 15px;
    border-radius: 15px;
    margin-bottom: 5px;
    position: relative;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
}

.hata-msg-user {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    border-bottom-left-radius: 2px;
    align-self: flex-start;
    border: 1px solid rgb(233, 236, 239);
}

.hata-msg-admin {
    background-color: rgb(0, 123, 255);
    color: white;
    border-bottom-right-radius: 2px;
    align-self: flex-end;
    margin-left: auto;
}

.hata-msg-info {
    font-size: 11px;
    margin-bottom: 4px;
    font-weight: bold;
    display: block;
}

.hata-msg-time {
    font-size: 11px;
    display: block;
    margin-top: 5px;
    opacity: 0.7;
    text-align: right;
}

.hata-msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 2px;
}

.hata-msg-info {
    font-size: 11px;
    font-weight: bold;
}

.hata-msg-time {
    font-size: 11px;
    opacity: 0.7;
    margin-left: 10px;
}

.msg-admin .hata-msg-header {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Talep mesajlarinda saklanan satir sonlari ekranda da satir sonu olsun.
   Kardes kopya: public/assets/css/duello_mesaj_mobil.css (ikisi de servilir,
   ayrismasinlar). Rakip white-space bildirimi yok, bu yuzden !important gereksiz. */
.hata-msg-text {
    font-size: 14px;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

#adminChatBox {
    background-color: rgb(253, 253, 253);
    background-image: radial-gradient(rgb(229, 231, 235) 0.5px, transparent 0.5px);
    background-size: 10px 10px;
    border-color: rgb(238, 238, 238) !important;
}

#adminChatBox::-webkit-scrollbar {
    width: 4px;
}

#adminChatBox::-webkit-scrollbar-thumb {
    background: rgb(204, 204, 204);
    border-radius: 10px;
}

.border-dashed {
    opacity: 0.8;
    margin-bottom: 20px;
    border: 1px dashed rgb(206, 212, 218) !important;
}

html:has(.modal.show), body:has(.modal.show) {
    overflow: hidden !important;
}

body.modal-open {
    overflow: hidden !important;
}

.kriter-scroll {
    max-height: 95vh;
    overflow: hidden auto;
    padding: 6px;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 10px;
    background: rgb(255, 255, 255);
}

.metin-kutu {
    white-space: pre-wrap;
    overflow-y: auto;
    max-height: 75vh;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 10px;
    padding: 10px 12px;
    background: rgb(255, 255, 255);
    line-height: 1.65;
    font-size: 14px;
}

.w-ok {
    background: rgb(230, 247, 237);
    color: rgb(27, 94, 32);
    border-radius: 6px;
    padding: 0px 3px;
}

.w-bad {
    background: rgb(253, 236, 234);
    color: rgb(183, 28, 28);
    border-radius: 6px;
    padding: 0px 3px;
}

.w-skip {
    background: rgb(255, 243, 208);
    color: rgb(255, 96, 7);
    border-radius: 6px;
    padding: 0px 3px;
}

#sonucEkrani.modal .modal-dialog {
    max-width: 100%;
    margin: 0px;
    height: 100vh;
    display: flex;
}

#sonucEkrani.modal .modal-content {
    height: 100%;
    border-radius: 0px;
    border: 0px;
}

#sonucEkrani.modal .modal-body {
    background: rgb(244, 246, 251);
    overflow: hidden auto;
}

.skorTopbar {
    background: linear-gradient(90deg, rgb(11, 43, 75), rgb(26, 166, 166));
    color: rgb(255, 255, 255);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: rgba(16, 24, 40, 0.18) 0px 10px 28px;
}

.skorTopbar .title {
    font-weight: 900;
    font-size: 18px;
    line-height: 1.1;
}

.skorTopbar .sub {
    opacity: 0.9;
    font-size: 12px;
}

.cardX {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: rgba(16, 24, 40, 0.08) 0px 10px 26px;
}

.cardX-h {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 900;
    color: rgb(51, 65, 85);
}

.cardX-b {
    padding: 12px;
}

/* Program sonuc karti: bu iki renk ONCEDEN SATIR ICI yaziliyordu
   (vip-calisma-merkezi.js:664,668). Satir ici bildirim CSS'ten EZILEMEDIGI icin
   gece modunda .cardX zemini koyulasinca yazi okunmuyordu (kontrast 1,12).
   Renkler ayni, yalnizca satir icinden sinifa tasindi. Gece karsiliklari
   style_dark_mode.css dosya sonunda. */
.prog-durum-baslik   { color: #101828; }
.prog-durum-aciklama { color: #667085; }

/* KİLİTLİ ALANLAR GÖRSEL OLARAK BELLİ OLSUN.
   E-posta ve (30 gün dolmadıysa) kullanıcı adı alanları `disabled` ile kilitli ama
   hiçbir stil yoktu — kullanıcı neden yazamadığını anlamıyordu (2026-08-13 geri
   bildirimi). Bootstrap'in kendi :disabled kuralı bu formda ezildiği için burada
   açıkça veriliyor. */
.ko-field input:disabled,
.ko-field textarea:disabled,
.ko-field select:disabled {
    background-color: #eef1f5;
    color: #6b7280;
    cursor: not-allowed;
    border-color: #dde3ea;
}

.kpiGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

@media (max-width: 1200px) {
    .kpiGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .kpiGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.kpiCard {
    --accent: #1565c0;
    background: rgb(238, 243, 253);
    color: rgb(17, 24, 39);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 10px 22px;
    position: relative;
    overflow: hidden;
}

.kpiCard::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 6px;
    background: var(--accent);
    border-radius: 14px 0px 0px 14px;
}

.kpiCard .t {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: rgb(107, 114, 128);
}

.kpiCard .v {
    font-size: 22px;
    font-weight: 950;
    line-height: 1.05;
    margin-top: 4px;
    color: var(--accent);
}

.kpiCard .s {
    font-size: 12px;
    color: rgb(107, 114, 128);
    margin-top: 2px;
}

.kpiIcon {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--accent);
}

.kpi-ok {
    background: rgb(230, 247, 237);
    --accent: #2e7d32;
}

.kpi-bad {
    background: rgb(253, 236, 234);
    --accent: #c62828;
}

.kpi-blue {
    background: rgb(238, 243, 253);
    --accent: #1565c0;
}

.kpi-orange {
    background: rgb(255, 243, 224);
    --accent: #ef6c00;
}

.kpi-purple {
    background: rgb(243, 229, 245);
    --accent: #6a1b9a;
}

.kpi-gray {
    background: rgb(236, 239, 241);
    --accent: #455a64;
}

.kpi-total {
    background: rgb(245, 245, 245);
    --accent: #424242;
}

.kpi-pink {
    background: rgb(252, 228, 236);
    --accent: #880e4f;
}

.kpi-warn {
    background: rgb(255, 248, 225);
    --accent: #ff8f00;
}

.sideList {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.sideList li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.09);
}

.sideList .lbl {
    font-size: 12px;
    color: rgb(71, 85, 105);
    font-weight: 800;
}

.sideList .val {
    font-size: 12px;
    font-weight: 950;
    color: rgb(15, 23, 42);
}

.sideList .val.ok {
    color: rgb(22, 163, 74);
}

.sideList .val.bad {
    color: rgb(220, 38, 38);
}

.vip-lock {
    position: relative;
}

.vip-blur {
    filter: blur(2px);
    opacity: 0.65;
    pointer-events: none;
    user-select: none;
}

.vip-lock::after {
    content: "🔒 VIP";
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(245, 158, 11, 0.95);
    color: rgb(255, 255, 255);
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    z-index: 10;
}

.pill {
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 900;
    display: inline-block;
}

.pill-ok {
    background: rgb(231, 247, 238);
    color: rgb(22, 101, 52);
}

.pill-bad {
    background: rgb(253, 232, 232);
    color: rgb(153, 27, 27);
}

.pill-warn {
    background: rgb(255, 247, 237);
    color: rgb(154, 52, 18);
}

.pill-skip {
    background: rgb(227, 242, 253);
    color: rgb(13, 71, 161);
}

.miniRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.miniBar {
    flex: 1 1 0%;
    height: 6px;
    border-radius: 999px;
    background: rgb(229, 231, 235);
    overflow: hidden;
}

.miniBar > div {
    height: 100%;
    border-radius: 999px;
}

.vitrinBox {
    background: rgb(11, 18, 32);
    border-radius: 14px;
    padding: 12px;
    max-height: 250px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 26px;
}

.vitrinLegend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.vTag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.08);
    color: rgb(255, 255, 255);
}

.vDot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.vText {
    color: rgb(229, 231, 235);
    line-height: 1.9;
    font-size: 14px;
    word-break: break-word;
}

.tok {
    display: inline-block;
    padding: 1px 6px;
    margin: 2px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.08s, filter 0.08s;
}

.tok:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.t-ok {
    background: rgba(34, 197, 94, 0.35);
    color: rgb(220, 252, 231);
    border: 1px solid rgba(34, 197, 94, 0.6);
}

.t-bad {
    background: rgba(239, 68, 68, 0.35);
    color: rgb(254, 226, 226);
    border: 1px solid rgba(239, 68, 68, 0.6);
}

.t-skip {
    background: rgba(245, 158, 11, 0.35);
    color: rgb(255, 237, 213);
    border: 1px solid rgba(245, 158, 11, 0.6);
}

.t-jump {
    background: rgba(249, 115, 22, 0.4);
    color: rgb(255, 237, 213);
    border: 1px solid rgba(249, 115, 22, 0.65);
}

.t-none {
    background: rgba(148, 163, 184, 0.2);
    color: rgb(229, 231, 235);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.tok small {
    opacity: 0.75;
    font-size: 11px;
    margin-left: 6px;
}

.vMoreBtn {
    margin-top: 10px;
    border-radius: 12px;
    font-weight: 900;
}

.vMoreBtn .expanded {
    display: none;
}

.vMoreBtn[aria-expanded="true"] .collapsed {
    display: none;
}

.vMoreBtn[aria-expanded="true"] .expanded {
    display: inline;
}

.vDots {
    opacity: 0.7;
    margin: 0px 4px;
}

.miniTileGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.miniTile {
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 10px;
    box-shadow: rgba(16, 24, 40, 0.06) 0px 8px 20px;
}

.miniTile .t {
    font-size: 11px;
    color: rgb(107, 114, 128);
    font-weight: 900;
    text-transform: uppercase;
}

.miniTile .v {
    font-size: 16px;
    font-weight: 950;
    line-height: 1.1;
    margin-top: 4px;
}

.miniTile.ok .v {
    color: rgb(22, 163, 74);
}

.miniTile.bad .v {
    color: rgb(220, 38, 38);
}

.miniTile.warn .v {
    color: rgb(245, 158, 11);
}

.miniTile.mute .v {
    color: rgb(148, 163, 184);
}

.kbdWrap {
    background: rgb(11, 18, 32);
    border-radius: 14px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.kbdRow {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
}

.kKey {
    flex: 1 1 0%;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(229, 231, 235);
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(148, 163, 184, 0.1);
    position: relative;
}

.kKey.small {
    flex: 0.9 1 0%;
}

.kKey.wide {
    flex: 4 1 0%;
}

.kKey .cnt {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 11px;
    opacity: 0.85;
}

.kbdHint {
    color: rgb(148, 163, 184);
    font-size: 11px;
    margin-top: 6px;
}

.miniTile {
    border-radius: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: rgba(16, 24, 40, 0.06) 0px 8px 18px;
    position: relative;
    background: rgb(255, 255, 255);
}

.miniTile::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 5px;
    border-radius: 12px 0px 0px 12px;
    background: rgb(204, 204, 204);
}

.miniTile .t {
    font-size: 11px;
    color: rgb(107, 114, 128);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.miniTile .v {
    font-size: 18px;
    font-weight: 950;
    line-height: 1.1;
    margin-top: 4px;
    color: rgb(17, 24, 39);
}

.miniTile .ico {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    color: rgb(107, 114, 128);
    font-size: 13px;
}

.miniTile:hover {
    transform: translateY(-1px);
    transition: 0.12s;
}

.mt-ok {
    background: rgb(230, 247, 237);
}

.mt-ok::before {
    background: rgb(46, 125, 50);
}

.mt-ok .v, .mt-ok .ico {
    color: rgb(46, 125, 50);
}

.mt-bad {
    background: rgb(253, 236, 234);
}

.mt-bad::before {
    background: rgb(198, 40, 40);
}

.mt-bad .v, .mt-bad .ico {
    color: rgb(198, 40, 40);
}

.mt-blue {
    background: rgb(238, 243, 253);
}

.mt-blue::before {
    background: rgb(21, 101, 192);
}

.mt-blue .v, .mt-blue .ico {
    color: rgb(21, 101, 192);
}

.mt-orange {
    background: rgb(255, 243, 224);
}

.mt-orange::before {
    background: rgb(239, 108, 0);
}

.mt-orange .v, .mt-orange .ico {
    color: rgb(239, 108, 0);
}

.mt-purple {
    background: rgb(243, 229, 245);
}

.mt-purple::before {
    background: rgb(106, 27, 154);
}

.mt-purple .v, .mt-purple .ico {
    color: rgb(106, 27, 154);
}

.mt-gray {
    background: rgb(236, 239, 241);
}

.mt-gray::before {
    background: rgb(69, 90, 100);
}

.mt-gray .v, .mt-gray .ico {
    color: rgb(69, 90, 100);
}

.mt-total {
    background: rgb(245, 245, 245);
}

.mt-total::before {
    background: rgb(66, 66, 66);
}

.mt-total .v, .mt-total .ico {
    color: rgb(66, 66, 66);
}

.mt-pink {
    background: rgb(252, 228, 236);
}

.mt-pink::before {
    background: rgb(136, 14, 79);
}

.mt-pink .v, .mt-pink .ico {
    color: rgb(136, 14, 79);
}

.mt-warn {
    background: rgb(255, 248, 225);
}

.mt-warn::before {
    background: rgb(255, 143, 0);
}

.mt-warn .v, .mt-warn .ico {
    color: rgb(255, 143, 0);
}

.miniTile.locked {
    background: rgb(245, 245, 245);
}

.miniTile.locked::before {
    background: rgb(158, 158, 158);
}

.miniTile.locked .v, .miniTile.locked .ico {
    color: rgb(158, 158, 158);
}

.detailChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: rgb(245, 245, 245);
    color: rgb(55, 65, 81);
}

.chip.ok {
    background: rgb(230, 247, 237);
    color: rgb(46, 125, 50);
}

.chip.bad {
    background: rgb(253, 236, 234);
    color: rgb(198, 40, 40);
}

.chip.warn {
    background: rgb(255, 248, 225);
    color: rgb(255, 143, 0);
}

.chip.info {
    background: rgb(238, 243, 253);
    color: rgb(21, 101, 192);
}

.chip.pink {
    background: rgb(252, 228, 236);
    color: rgb(136, 14, 79);
}

.chip.gray {
    background: rgb(236, 239, 241);
    color: rgb(69, 90, 100);
}

.playerCard {
    padding: 10px;
    min-height: unset;
}

.playerCard .pHead {
    margin-bottom: 8px;
}

.playerCard .avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.playerCard .name {
    font-size: 14px;
    line-height: 1.05;
}

.playerCard .dqBadge {
    font-size: 11px;
    padding: 1px 7px;
}

.playerCard .miniKpiGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 6px;
    margin-top: 8px;
}

.playerCard .miniKpi {
    padding: 6px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: rgba(255, 255, 255, 0.02) 0px 0px 0px 1px inset;
}

.playerCard .miniKpi .k {
    font-size: 11px;
    letter-spacing: 0.6px;
    font-weight: 900;
    color: rgb(148, 163, 184);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.playerCard .miniKpi .v {
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.05;
    margin-top: 2px;
    color: rgb(229, 231, 235);
}

.playerCard .miniKpi-score {
    border-color: rgba(34, 197, 94, 0.25);
}

.playerCard .miniKpi-wrong {
    border-color: rgba(239, 68, 68, 0.25);
}

.playerCard .miniKpi-hit {
    border-color: rgba(59, 130, 246, 0.22);
}

@media (max-width: 420px) {
    .playerCard .miniKpiGrid {
        gap: 5px;
    }

    .playerCard .miniKpi {
        padding: 5px 7px;
    }

    .playerCard .miniKpi .v {
        font-size: 15px;
    }
}

.duelloVs, .playerCard, .vsText, .miniKpiGrid, .miniKpi, .pHead, .pTitle, .name, .stat, .stats {
    box-sizing: border-box;
}

.duelloVs {
    display: grid;
    grid-template-columns: minmax(0px, 340px) auto minmax(0px, 340px);
    justify-content: center;
    gap: 14px;
}

@media (max-width: 576px) {
    .duelloVs {
        grid-template-columns: 1fr;
    }

    .duelloVs .vsText {
        order: 2;
        margin: 6px auto;
    }

    .duelloVs .playerCard:first-child {
        order: 1;
    }

    .duelloVs .playerCard:last-child {
        order: 3;
    }
}

.vsText {
    place-self: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: rgb(229, 231, 235);
}

.playerCard {
    max-width: 340px;
    width: 100%;
}

.playerCard.winner {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: rgba(34, 197, 94, 0.2) 0px 0px 0px 2px, rgba(0, 0, 0, 0.25) 0px 10px 26px;
}

.playerCard.winner::after {
    content: "KAZANAN";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgb(34, 197, 94);
    color: rgb(5, 46, 22);
    font-weight: 900;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: 0.4px;
}

.playerCard .pHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.playerCard .avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.playerCard .pTitle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0px;
}

.playerCard .name {
    font-weight: 900;
    line-height: 1.1;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.playerCard .dqBadge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: rgb(254, 202, 202);
}

.playerCard .stat {
    font-size: 12px;
    color: rgb(203, 213, 225);
    margin-top: 4px;
}

.playerCard .stat b {
    color: rgb(229, 231, 235);
    font-weight: 1000;
}

.playerCard .stats {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    font-size: 12px;
    margin-top: 8px;
}

.playerCard .stats .lbl {
    color: rgb(148, 163, 184);
}

.playerCard .stats .val {
    font-weight: 900;
    color: rgb(229, 231, 235);
}

.playerCard .miniKpiGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.playerCard .miniKpi {
    border-radius: 12px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: rgba(255, 255, 255, 0.02) 0px 0px 0px 1px inset;
}

.playerCard .miniKpi .k {
    font-size: 11px;
    letter-spacing: 0.6px;
    font-weight: 900;
    color: rgb(148, 163, 184);
}

.playerCard .miniKpi .v {
    font-size: 18px;
    font-weight: 1000;
    line-height: 1.1;
    margin-top: 2px;
    color: rgb(229, 231, 235);
}

.playerCard .miniKpi-score {
    border-color: rgba(34, 197, 94, 0.25);
}

.playerCard .miniKpi-wrong {
    border-color: rgba(239, 68, 68, 0.25);
}

.playerCard .miniKpi-hit {
    border-color: rgba(59, 130, 246, 0.22);
}

.duelloWrap {
    margin-top: 8px;
}

.duelloTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 10px;
}

.duelloTopLeft {
    min-width: 0px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.duelloBadge {
    font-size: 11px;
    font-weight: 900;
    color: rgb(15, 23, 42);
    opacity: 0.8;
}

.duelloResult {
    font-size: 20px;
    font-weight: 1000;
    line-height: 1.1;
}

.duelloMeta {
    font-size: 12px;
    color: rgb(100, 116, 139);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 720px;
}

.duelloMsg {
    font-size: 12px;
    font-weight: 800;
    color: rgb(15, 23, 42);
}

.duelloTopRight {
    flex: 0 0 auto;
}

.duelloVs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: stretch;
}

@media (max-width: 576px) {
    .duelloVs {
        grid-template-columns: 1fr;
    }

    .vsBlock {
        order: 2;
        margin: 6px auto;
    }
}

.vsBlock {
    place-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.vsText {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    background: rgba(148, 163, 184, 0.18);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: rgb(15, 23, 42);
}

.vsDiff {
    font-weight: 1000;
    font-size: 16px;
}

.vsDiff.pos {
    color: rgb(34, 197, 94);
}

.vsDiff.neg {
    color: rgb(239, 68, 68);
}

.vsHint {
    font-size: 11px;
    color: rgb(100, 116, 139);
}

.playerCard {
    position: relative;
    background: rgb(11, 18, 32);
    border-radius: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 26px;
    color: rgb(229, 231, 235);
}

.playerCard.winner {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: rgba(34, 197, 94, 0.2) 0px 0px 0px 2px, rgba(0, 0, 0, 0.25) 0px 10px 26px;
}

.playerCard.winner::after {
    content: "KAZANAN";
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgb(34, 197, 94);
    color: rgb(5, 46, 22);
    font-weight: 900;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 999px;
}

.pHeadRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pLeft {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pTitle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0px;
}

.name {
    font-weight: 1000;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    line-height: 1.05;
}

.dqBadge {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 1000;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: rgb(254, 202, 202);
}

.pKpis {
    width: 100%;
    justify-content: space-between;
}

.pKpi {
    min-width: 56px;
    border-radius: 12px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    text-align: left;
}

.pKpi .k {
    font-size: 11px;
    letter-spacing: 0.6px;
    font-weight: 1000;
    color: rgb(148, 163, 184);
    line-height: 1;
}

.pKpi .v {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 1000;
    line-height: 1.05;
    color: rgb(229, 231, 235);
}

.pKpi-score {
    border-color: rgba(34, 197, 94, 0.25);
}

.pKpi-wrong {
    border-color: rgba(239, 68, 68, 0.25);
}

.pKpi-hit {
    border-color: rgba(59, 130, 246, 0.22);
}

@media (max-width: 420px) {
    .pHeadRow {
        align-items: flex-start;
    }

    .pKpis {
        gap: 6px;
    }

    .pKpi {
        padding: 5px 7px;
        min-width: 52px;
    }

    .pKpi .v {
        font-size: 15px;
    }
}

.fifa-matchup {
    display: grid;
    grid-template-columns: minmax(0px, 340px) 220px minmax(0px, 340px);
    gap: 16px;
    align-items: stretch;
    justify-content: center;
    margin: 10px auto 0px;
}

@media (max-width: 768px) {
    .fifa-matchup {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .fifa-center {
        order: 2;
    }

    .fifa-side:first-child {
        order: 1;
    }

    .fifa-side:last-child {
        order: 3;
    }
}

.fifa-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fifa-shield {
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.fifa-shield {
    width: 280px;
    min-height: 240px;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(120px 120px at 30% 20%, rgba(255, 255, 255, 0.1), transparent 60%), radial-gradient(140px 140px at 70% 80%, rgba(34, 197, 94, 0.1), transparent 60%), linear-gradient(rgb(11, 18, 32), rgb(10, 15, 28));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 14px 34px;
    padding: 14px 12px;
    text-align: center;
}

.fifa-shield::before {
    content: "";
    position: absolute;
    inset: -60px;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0px, rgba(255, 255, 255, 0.06) 10px, transparent 10px, transparent 22px);
    opacity: 0.22;
    transform: rotate(12deg);
    pointer-events: none;
}

.fifa-shieldTop {
    position: relative;
    z-index: 1;
}

.fifa-mode {
    font-weight: 1000;
    font-size: 11px;
    letter-spacing: 0.8px;
    color: rgba(226, 232, 240, 0.85);
    text-transform: uppercase;
}

.fifa-result {
    margin-top: 6px;
    font-weight: 1000;
    font-size: 14px;
    color: rgb(229, 231, 235);
}

.fifa-scoreLine {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fifa-score {
    font-size: 34px;
    line-height: 1;
    color: rgb(229, 231, 235);
    text-shadow: rgba(0, 0, 0, 0.55) 0px 6px 18px;
}

.fifa-dash {
    font-weight: 900;
    font-size: 26px;
    color: rgba(148, 163, 184, 0.9);
}

.fifa-meta {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-size: 11px;
    color: rgba(148, 163, 184, 0.9);
    min-height: 14px;
}

.fifa-diff {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    font-weight: 1000;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.9);
}

.fifa-diff.pos {
    color: rgb(34, 197, 94);
}

.fifa-diff.neg {
    color: rgb(239, 68, 68);
}

.fifa-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 10px;
    background: radial-gradient(160px 130px at 20% 15%, rgba(59, 130, 246, 0.18), transparent 60%), radial-gradient(160px 140px at 80% 90%, rgba(245, 158, 11, 0.16), transparent 60%), linear-gradient(rgb(11, 18, 32), rgb(10, 15, 28));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: rgba(0, 0, 0, 0.32) 0px 14px 34px;
    color: rgb(229, 231, 235);
}

.fifa-card::before {
    content: "";
    position: absolute;
    inset: -60px;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.09), transparent 45%);
    opacity: 0.65;
    pointer-events: none;
}

.fifa-cardTop {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fifa-tag {
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: 0.6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: rgba(226, 232, 240, 0.95);
}

.fifa-dq {
    font-size: 11px;
    font-weight: 1000;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: rgb(254, 202, 202);
}

.fifa-cardBody {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fifa-avatarWrap {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    padding: 3px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.06));
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 22px;
}

.fifa-avatar {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    object-fit: cover;
    display: block;
}

.fifa-name {
    font-size: 15px;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.fifa-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.fifa-stat {
    border-radius: 16px;
    padding: 8px 10px;
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fifa-stat .k {
    font-size: 11px;
    letter-spacing: 0.7px;
    font-weight: 1000;
    color: rgba(148, 163, 184, 0.95);
    line-height: 1;
}

.fifa-stat .v {
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.05;
    color: rgb(229, 231, 235);
}

.fifa-card.isWinner {
    border-color: rgba(34, 197, 94, 0.55);
    box-shadow: rgba(34, 197, 94, 0.18) 0px 0px 0px 2px, rgba(0, 0, 0, 0.32) 0px 14px 34px;
}

.fifa-ribbon {
    position: absolute;
    top: 12px;
    right: -46px;
    transform: rotate(32deg);
    width: 160px;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.8px;
    padding: 6px 0px;
    color: rgb(5, 46, 22);
    background: linear-gradient(90deg, rgb(34, 197, 94), rgb(134, 239, 172));
    box-shadow: rgba(0, 0, 0, 0.25) 0px 12px 22px;
}

.fifa-card.isDQ {
    filter: grayscale(0.2);
    border-color: rgba(239, 68, 68, 0.35);
}

.fifa-dqLine {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.28);
}

.fifa-dqText {
    font-size: 12px;
    line-height: 1.35;
    color: rgb(254, 226, 226);
    font-weight: 600;
}

.fifa-pillDQ {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 999px;
    margin-right: 6px;
    background: rgba(239, 68, 68, 0.22);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: rgb(254, 202, 202);
}

.fifa-cardDQReason {
    margin: 10px 10px 0px;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.35;
    color: rgb(254, 202, 202);
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    text-align: center;
}

.duelloSummaryGrid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
    align-items: start;
}

@media (max-width: 992px) {
    .duelloSummaryGrid {
        grid-template-columns: 1fr;
    }
}

.duelloRight .cardX .table-responsive {
    max-height: 280px;
    overflow: auto;
}

@media (min-width: 992px) {
    .duelloRight {
        position: sticky;
        top: 10px;
    }
}

.fifa-matchup-v2 {
    display: grid;
    gap: 14px;
    align-items: start;
}

@media (max-width: 992px) {
    .fifa-matchup-v2 {
        grid-template-columns: 1fr;
    }

    .fifa-center-v2 {
        order: 3;
    }
}

.fifa-center-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.duelloStrip {
    padding: 10px 12px;
}

.duelloStripRow {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 10px;
    align-items: center;
}

.duelloStripSide .nm {
    font-size: 12px;
    color: rgb(107, 114, 128);
    font-weight: 800;
}

.duelloStripSide .sc {
    font-size: 20px;
    font-weight: 900;
    line-height: 1.1;
}

.duelloStripSide.right {
    text-align: right;
}

.duelloStripMid {
    text-align: center;
}

.duelloStripMid .mode {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: rgb(55, 65, 81);
}

.duelloStripMid .res {
    font-size: 14px;
    font-weight: 900;
    margin-top: 2px;
}

.duelloStripMid .dq {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: rgb(185, 28, 28);
}

.duelloStripMid .vs {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 900;
    color: rgb(17, 24, 39);
}

.duelloStripMid .vs span {
    opacity: 0.45;
    margin: 0px 6px;
}

.fifa-cardBody-compact {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.winCell {
    background: rgba(34, 197, 94, 0.1);
    font-weight: 900;
}

.duelloCompareTable {
    max-height: 260px;
    overflow: auto;
}

.fifa-matchup-v2 {
    display: grid;
    gap: 22px;
    align-items: start;
    justify-content: center;
}

.fifa-center-v2 {
    width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.duelloStrip.cardX {
    width: 100%;
    border-radius: 18px;
}

.duelloCompareWrap {
    width: 100%;
}

.duelloCompareWrap table {
    width: 100%;
}

.duelloCompareTable td {
    padding: 10px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-weight: 700;
}

.duelloCompareTable td:first-child {
    width: 55%;
    color: rgb(17, 24, 39);
    font-weight: 900;
}

.duelloCompareTable td:nth-child(2), .duelloCompareTable td:nth-child(3) {
    width: 22.5%;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.duelloCompareTable td.winCell {
    background: rgba(34, 197, 94, 0.12);
    border-left: 1px solid rgba(34, 197, 94, 0.18);
    border-right: 1px solid rgba(34, 197, 94, 0.18);
}

.duelloStripRow2 {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.duelloStripRow2 .side .nm {
    font-size: 13px;
    font-weight: 900;
    color: rgb(55, 65, 81);
}

.duelloStripRow2 .side.right {
    text-align: right;
}

.duelloStripRow2 .mid {
    text-align: center;
}

.duelloStripRow2 .mid .mode {
    font-size: 12px;
    font-weight: 900;
    opacity: 0.85;
}

.duelloStripRow2 .mid .res {
    font-size: 14px;
    font-weight: 1000;
    margin-top: 2px;
}

.duelloStripRow2 .mid .dq {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 900;
    color: rgb(185, 28, 28);
}

.duelloStripRow2 .mid .score {
    margin-top: 6px;
    font-size: 22px;
    font-weight: 1000;
    letter-spacing: 0.5px;
}

.duelloStripRow2 .mid .score span {
    opacity: 0.45;
    margin: 0px 10px;
}

.fifa-cardBody-compact {
    padding-top: 10px;
    padding-bottom: 16px;
}

.fifa-name {
    margin-top: 6px;
    font-size: 16px;
    font-weight: 900;
}

.duelloStripMini {
    max-width: 420px;
    margin: 0px auto 10px;
    padding: 8px 10px;
}

.duelloStripRow3 {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
}

.duelloStripRow3 .mid {
    text-align: center;
    line-height: 1.1;
}

.duelloStripRow3 .mode {
    font-weight: 900;
    font-size: 12px;
    opacity: 0.75;
    letter-spacing: 0.06em;
}

.duelloStripRow3 .res {
    font-weight: 900;
    font-size: 14px;
    margin-top: 2px;
}

.duelloStripRow3 .dq {
    font-size: 12px;
    margin-top: 3px;
    color: rgb(185, 28, 28);
    font-weight: 700;
}

.duelloStripRow3 .vs {
    margin-top: 4px;
    font-weight: 900;
    font-size: 13px;
    opacity: 0.85;
}

.stripAv {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(0, 0, 0, 0.08);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 14px;
}

.duelloCompareWrap {
    max-width: 420px;
    margin: 0px auto;
}

.duelloCompareTable3 td {
    vertical-align: middle;
    padding: 8px 10px;
}

.duelloCompareTable3 td.lbl {
    text-align: center;
    font-weight: 900;
    color: rgb(100, 116, 139);
    letter-spacing: 0.02em;
    width: 34%;
    white-space: nowrap;
}

.duelloCompareTable3 td.val {
    text-align: center;
    font-weight: 900;
    width: 33%;
}

.duelloCompareTable3 td.val.left {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.duelloCompareTable3 td.val.right {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

.winCell {
    background: rgba(34, 197, 94, 0.12);
    color: rgb(22, 101, 52);
    border-radius: 8px;
}

.dqCell {
    background: rgba(239, 68, 68, 0.12);
    color: rgb(153, 27, 27);
    border-radius: 8px;
}

.duelloCompareTable3 td.lbl {
    text-align: center;
    font-weight: 900;
    color: rgb(51, 65, 85);
}

.duelloCompareTable3 td.lbl::before {
    content: "";
}

.duelloCompareTable3 td.lbl {
    background: rgba(148, 163, 184, 0.12);
    border-radius: 10px;
}

.fifa-card {
    position: relative;
    overflow: hidden;
}

.fifa-scoreBig {
    position: absolute;
    top: 10px;
    right: 12px;
    font-weight: 1000;
    font-size: 34px;
    letter-spacing: -0.02em;
    opacity: 0.95;
    color: rgb(255, 255, 255);
    text-shadow: rgba(0, 0, 0, 0.35) 0px 10px 18px;
}

.fifa-card.isDQ .fifa-scoreBig {
    opacity: 0.55;
}

.fifa-cardTop {
    position: relative;
    min-height: 56px;
}

.duelloCenterBadge {
    width: 220px;
    margin: 0px auto 10px;
    padding: 10px;
    text-align: center;
    border-radius: 16px;
    background: rgb(255, 255, 255);
}

.duelloCenterBadge .t {
    font-weight: 900;
    font-size: 12px;
    opacity: 0.7;
    letter-spacing: 0.08em;
}

.duelloCenterBadge .r {
    font-weight: 1000;
    font-size: 16px;
    margin-top: 2px;
}

.duelloCenterBadge .dq {
    font-weight: 900;
    font-size: 12px;
    margin-top: 4px;
    color: rgb(185, 28, 28);
}

.duelloCenterBadge .vsIcon {
    width: 44px;
    height: 44px;
    margin: 8px auto 0px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 1000;
    background: radial-gradient(circle at 30% 30%, rgb(253, 230, 138), rgb(245, 158, 11));
    color: rgb(17, 24, 39);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 22px;
}

.duelloCompareWrap {
    max-width: 420px;
    margin: 0px auto;
}

.duelloCompareTable3 td {
    padding: 10px 12px;
    border-top: 0px !important;
}

.duelloCompareTable3 tr:nth-child(2n+1) td {
    background: rgba(148, 163, 184, 0.1);
}

.duelloCompareTable3 tr:nth-child(2n) td {
    background: rgba(148, 163, 184, 0.06);
}

.duelloCompareTable3 td.lbl {
    text-align: center;
    font-weight: 1000;
    color: rgb(15, 23, 42);
    letter-spacing: 0.01em;
    width: 40%;
    white-space: nowrap;
}

.duelloCompareTable3 td.val {
    text-align: center;
    font-weight: 1000;
    width: 30%;
}

.duelloCompareTable3 td.val.left {
    color: rgb(239, 68, 68);
}

.duelloCompareTable3 td.val.right {
    color: rgb(16, 185, 129);
}

.winCell {
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.16) !important;
}

.dqCell {
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.14) !important;
}

.duelloImageStyle {
    overflow: hidden;
}

.duelloImageStyle {
    margin: 0px auto;
    padding: 8px;
}

.vsHead {
    grid-template-columns: 1fr 140px 1fr;
    padding: 8px;
}

.vsSide {
    padding: 8px 10px;
    min-height: 70px;
}

.vsSide .nm {
    font-size: 13px;
}

.vsSide .sc {
    font-size: 24px;
}

.vsAvatar {
    width: 34px;
    height: 34px;
}

.vsRow {
    padding: 6px 10px;
}

.vsRow .vL, .vsRow .vR {
    font-size: 16px;
}

.vsRow .vM .tx {
    font-size: 13px;
}

.vsBadge {
    width: 70px;
    height: 46px;
    font-size: 13px;
    border-radius: 10px;
}

.vsMid {
    transform: translateY(-6px);
}

.vsSide.right {
    box-shadow: rgba(16, 185, 129, 0.3) 0px 0px 0px 2px;
}

.vsSide.left.dq {
    opacity: 0.7;
}

.vsHead {
    display: grid;
    grid-template-columns: 1fr 180px 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 12px;
    background: rgb(255, 255, 255);
}

.vsSide {
    position: relative;
    color: rgb(255, 255, 255);
    border-radius: 6px;
    padding: 10px 12px;
    min-height: 86px;
}

.vsSide.left {
    background: rgb(226, 75, 75);
}

.vsSide.right {
    background: rgb(57, 198, 165);
}

.vsSide .mini {
    font-size: 11px;
    opacity: 0.9;
    font-weight: 900;
    letter-spacing: 0.5px;
}

.vsSide .nm {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
    margin-top: 2px;
}

.vsSide .sc {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    margin-top: 6px;
}

.vsSide .trophy {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 22px;
}

.vsSide.dq {
    filter: saturate(0.8);
    opacity: 0.85;
}

.vsSide .dqTag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.25);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
}

.vsMid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.vsBadge {
    width: 86px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    border-radius: 12px;
    background: rgb(255, 255, 255);
    border: 2px solid rgba(0, 0, 0, 0.12);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px;
}

.vsSub {
    margin-top: 6px;
    font-size: 12px;
    color: rgb(185, 28, 28);
    font-weight: 700;
    line-height: 1.2;
}

.vsTable {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgb(255, 255, 255);
}

.vsRow {
    display: grid;
    grid-template-columns: 160px 1fr 160px;
    align-items: center;
    padding: 0px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
}

.vsRow.alt {
    background: rgb(243, 244, 246);
}

.vsRow .vL {
    text-align: left;
    font-weight: 900;
    color: rgb(212, 58, 58);
    font-size: 20px;
}

.vsRow .vR {
    text-align: right;
    font-weight: 900;
    color: rgb(31, 182, 148);
    font-size: 20px;
    top: 0px;
}

.vsRow .vM {
    text-align: center;
    font-weight: 900;
    color: rgb(18, 78, 122);
}

.vsRow .vM .st {
    color: rgb(243, 198, 35);
    margin-right: 6px;
}

.vsRow .vM .tx {
    font-size: 15px;
}

.vsRow .subMid {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 800;
    color: rgb(209, 29, 29);
}

.vsRow .subL, .vsRow .subR {
    position: absolute;
    bottom: 0px;
    font-size: 11px;
    font-weight: 800;
    color: rgb(209, 29, 29);
    opacity: 0.95;
}

.vsRow .subL {
    left: 12px;
}

.vsRow .subR {
    right: 12px;
}

.vsUser {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vsAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.7);
    background: rgb(255, 255, 255);
}

.vsSide.left .vsAvatar {
    border-color: rgba(255, 255, 255, 0.9);
}

.vsSide.right .vsAvatar {
    border-color: rgba(255, 255, 255, 0.9);
}

.vsSide.dq .vsAvatar {
    border-color: rgb(239, 68, 68);
    filter: grayscale(60%);
}

.vsHead {
    grid-template-columns: 1fr 140px 1fr;
    padding: 8px;
}

.vsSide {
    padding: 8px 10px;
    min-height: 90px;
}

.vsSide .nm {
    font-size: 13px;
}

.vsSide .sc {
    font-size: 24px;
}

.fifa-scoreBig {
    text-align: center;
    width: 100%;
    font-size: 30px;
    font-weight: 900;
    margin-top: 6px;
}

.fifa-cardTop {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vsMiddleFifa {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vsBadgeBig {
    font-size: 18px;
    font-weight: 900;
    background: rgb(255, 255, 255);
    padding: 6px 14px;
    border-radius: 12px;
    border: 2px solid rgb(221, 221, 221);
}

.vsSub {
    font-size: 12px;
    color: rgb(220, 38, 38);
    margin-top: 4px;
}

.vsSide {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, rgb(15, 23, 42), rgb(30, 41, 59));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vsSide.winnerFifa {
    background: linear-gradient(145deg, rgb(5, 46, 22), rgb(22, 101, 52));
    border: 1px solid rgba(34, 197, 94, 0.4);
    box-shadow: rgba(34, 197, 94, 0.25) 0px 6px 18px;
}

.vsSide:not(.winnerFifa) {
    opacity: 0.92;
}

.vsSide.dq {
    background: linear-gradient(145deg, rgb(63, 11, 11), rgb(127, 29, 29));
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.fifaRibbonMini {
    position: absolute;
    top: 14px;
    right: -34px;
    transform: rotate(45deg);
    font-size: 11px;
    font-weight: 900;
    padding: 3px 30px;
    color: rgb(255, 255, 255);
    letter-spacing: 0.4px;
}

.fifaRibbonMini:not(.red) {
    background: rgb(34, 197, 94);
    box-shadow: rgba(34, 197, 94, 0.4) 0px 2px 6px;
}

.fifaRibbonMini.red {
    background: rgb(239, 68, 68);
    box-shadow: rgba(239, 68, 68, 0.45) 0px 2px 6px;
}

.vsSide .sc {
    font-size: 24px;
    font-weight: 900;
    margin-top: 6px;
}

.dqRow {
    background: rgba(239, 68, 68, 0.08) !important;
    border-top: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.dqText {
    color: rgb(220, 38, 38) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.vsMid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vsIcon {
    font-size: 47px;
    font-weight: 1000;
}

.vsSubMini {
    margin-top: 4px;
    font-size: 11px;
    color: rgb(248, 113, 113);
    text-align: center;
    max-width: 120px;
    line-height: 1.2;
}

.vsSide.dq {
    animation: 0.35s ease-in-out 0s 1 normal none running shakeDQ;
}

@keyframes shakeDQ {
    0% {
        transform: translateX(0px);
    }

    25% {
        transform: translateX(-2px);
    }

    50% {
        transform: translateX(2px);
    }

    75% {
        transform: translateX(-1px);
    }

    100% {
        transform: translateX(0px);
    }
}

.duelloInfoBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0px 4px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.infoItem {
    opacity: 0.9;
    white-space: nowrap;
}

.infoSep {
    opacity: 0.3;
}

.textEllipsis {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.duelloInfoBar {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.08), rgba(59, 130, 246, 0.08));
}

.badge-canli-nokta {
    position: absolute;
    top: 10px;
    right: 4px;
    width: 10px;
    height: 10px;
    background-color: rgb(255, 59, 48);
    border-radius: 50%;
    border: 2px solid rgb(255, 255, 255);
    display: block;
    z-index: 10;
}

.badge-canli-nokta::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(255, 59, 48);
    border-radius: 50%;
    animation: 1.5s ease-out 0s infinite normal none running bildirimPulsar;
    opacity: 0;
}

@keyframes bildirimPulsar {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.profile-card-custom {
    background: radial-gradient(circle at center top, rgb(26, 26, 26), rgb(0, 0, 0));
    border-radius: 18px;
    border: 2px solid rgb(202, 168, 92);
    overflow: hidden;
    position: relative;
    color: rgb(255, 255, 255);
}

.profile-card-custom::before {
    content: "";
    position: absolute;
    inset: 0px;
    background: radial-gradient(circle, rgba(202, 168, 92, 0.15), transparent 70%);
    pointer-events: none;
}

.pc-avatar-wrap {
    position: relative;
}

.pc-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid rgb(202, 168, 92);
    object-position: center top;
    object-fit: cover;
    background: rgb(0, 0, 0);
}

.pc-name {
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
}

.pc-score {
    color: rgb(255, 211, 105);
    font-weight: bold;
    font-size: 18px;
}

.pc-stat {
    font-size: 20px;
    font-weight: bold;
}

.pc-label {
    font-size: 12px;
    color: rgb(187, 187, 187);
}

.pc-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, rgb(202, 168, 92), transparent);
    margin: 15px 0px;
}

.profile-card-custom {
    position: relative;
    z-index: 1065;
}

.js-profilecard {
    cursor: pointer;
}

.chat-box {
    position: relative;
}

.chat-box {
    & position#newMsgPill {
        display: none;
        position: absolute;
        right: 16px;
        bottom: 90px;
        z-index: 5;
    }

    & .fs-4 {
        font-size: 1.25rem !important;
    }
}

.genel-aktif-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgb(238, 250, 241);
    border: 1px solid rgb(207, 233, 214);
    border-radius: 999px;
    padding: 6px 12px;
    min-height: 36px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px;
    user-select: none;
    white-space: nowrap;
}

.genel-aktif-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(40, 167, 69);
    box-shadow: rgba(40, 167, 69, 0.12) 0px 0px 0px 3px;
    flex: 0 0 auto;
}

.genel-aktif-label {
    font-size: 13px;
    color: rgb(75, 91, 79);
    font-weight: 600;
    line-height: 1;
}

.genelAktifSayisi {
    font-size: 14px;
    font-weight: 700;
    color: rgb(31, 122, 53);
    line-height: 1;
    min-width: 18px;
    text-align: right;
}

@media (max-width: 991.98px) {
    .genel-aktif-label {
        display: none;
    }

    .genel-aktif-pill {
        padding: 6px 10px;
    }
}

.header-right {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
}

.gece-modu-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 38px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgb(245, 247, 251);
    border: 1px solid rgb(223, 229, 239);
    color: rgb(47, 59, 82);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 2px;
    transition: 0.2s;
    margin-bottom: 0px !important;
}

.gece-modu-pill:hover {
    background: rgb(238, 242, 248);
    border-color: rgb(207, 216, 230);
}

.gece-modu-label {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    color: rgb(61, 74, 98);
}

.gece-modu-label i {
    font-size: 15px;
    color: rgb(94, 108, 132);
}

.gece-modu-switch-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
}

.gece-modu-pill .switchery, .gece-modu-pill .switch-btn {
    vertical-align: middle;
    margin: 0px !important;
}

.genel-aktif-pill, .gece-modu-pill {
    min-height: 38px;
}

.user-notification {
    display: flex;
    align-items: center;
    margin-left: 6px;
}

@media (max-width: 991.98px) {
    .gece-modu-label {
        font-size: 12px;
    }

    .gece-modu-pill {
        padding: 6px 10px;
        gap: 8px;
    }
}

@media (max-width: 767.98px) {
    .gece-modu-label span, .gece-modu-label-text {
        display: none;
    }
}

.pill-vip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    background: rgba(245, 158, 11, 0.16);
    color: rgb(154, 103, 0);
    border: 1px solid rgba(245, 158, 11, 0.38);
    white-space: nowrap;
}

.toplist {
    position: relative;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(238, 240, 246);
    border-radius: 12px;
    margin-bottom: 6px;
    transition: 0.25s;
}

.toplist:hover {
    background: rgb(245, 247, 255);
    transform: translateY(-4px);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 20px;
    cursor: pointer;
}

.toplist img {
    transition: 0.25s;
}

.toplist:hover img {
    transform: scale(1.08);
}

.toplist .txt .font-14 {
    transition: 0.25s;
}

.toplist:hover .font-14 {
    color: rgb(38, 94, 215);
}

.toplist .cta img {
    transition: 0.3s;
}

.toplist:hover .cta img {
    transform: rotate(-8deg) scale(1.1);
}

.toplist::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 10%;
    bottom: 10%;
    width: 4px;
    border-radius: 4px;
    background: rgb(203, 213, 225);
}

.toplist:nth-child(1) {
    background: rgb(255, 248, 230);
    border: 1px solid rgb(243, 227, 179);
}

.toplist:nth-child(2) {
    background: rgb(247, 248, 250);
    border: 1px solid rgb(227, 230, 235);
}

.toplist:nth-child(3) {
    background: rgb(255, 244, 236);
    border: 1px solid rgb(240, 212, 194);
}

.toplist:nth-child(1)::before {
    background: rgb(250, 204, 21);
}

.toplist:nth-child(2)::before {
    background: rgb(156, 163, 175);
}

.toplist:nth-child(3)::before {
    background: rgb(217, 119, 6);
}

li.message-item.vip-message .mesaj-alani {
    position: relative;
    background: var(--vip-bg, rgba(255, 215, 0, 0.12)) !important;
    border-top-color: !important;
    border-top-style: !important;
    border-top-width: !important;
    border-right-color: !important;
    border-right-style: !important;
    border-right-width: !important;
    border-bottom-color: !important;
    border-bottom-style: !important;
    border-bottom-width: !important;
    border-image-source: !important;
    border-image-slice: !important;
    border-image-width: !important;
    border-image-outset: !important;
    border-image-repeat: !important;
    border-left: 4px solid var(--vip-border-strong, rgba(255, 215, 0, 0.75)) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
}

.chat-box .chat-desc ul li.message-item.vip-message .mesaj-alani::before {
    border-right-color: var(--vip-border, rgba(255, 215, 0, 0.35)) !important;
}

.chat-box .chat-desc ul li.message-item.vip-message .mesaj-alani::after {
    border-right-color: var(--vip-bg, rgba(255, 215, 0, 0.12)) !important;
}

.chat-box .chat-desc ul li .mesaj-alani .badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    overflow: hidden;
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    font-weight: 700;
    font-size: 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px;
    vertical-align: middle;
}

.chat-box .chat-desc ul li .mesaj-alani .badge::before {
    content: "";
    position: absolute;
    inset: 0px;
    background: linear-gradient(rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.chat-box .chat-desc ul li .mesaj-alani .badge i {
    font-size: 0.85em;
    line-height: 1;
}

.badge-role {
    background: var(--badge-bg, #cc0f0f);
    color: rgb(255, 255, 255) !important;
}

.badge-vip {
    background: rgb(241, 185, 11);
    color: rgb(17, 17, 17);
    border-color: rgba(0, 0, 0, 0.1);
}

.vip-text {
    letter-spacing: 0.4px;
}

.chat-box .chat-desc ul li .mesaj-alani .badge-vip i {
    color: rgba(0, 0, 0, 0.85);
}

@media (max-height: 600px) {
    .duello-topbar {
        padding: 5px !important;
    }
}
.vip-center-teaser {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform .18s ease, box-shadow .18s ease;
}

.vip-center-teaser:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(127, 86, 217, 0.22);
}

.vip-center-teaser-inner {
    position: relative;
    padding: 16px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #7F56D9 0%, #A855F7 55%, #F59E0B 140%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(127, 86, 217, 0.18);
}

.vip-center-teaser-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.28), transparent 35%),
        radial-gradient(circle at bottom left, rgba(255,255,255,.18), transparent 30%);
    pointer-events: none;
}

.vip-center-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}

.vip-center-icon-wrap {
    width: 52px;
    height: 52px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.26);
    font-size: 22px;
    animation: vipPulse 1.8s infinite;
}

.vip-center-title {
    position: relative;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
}

.vip-center-subtitle {
    position: relative;
    font-size: 12px;
    line-height: 1.45;
    opacity: .96;
    max-width: 220px;
    margin: 0 auto;
}

.vip-center-cta {
    position: relative;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: #fff;
    color: #7F56D9;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

@keyframes vipPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,.25); }
    70% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.vip-side-link {
    background: linear-gradient(90deg, rgba(127,86,217,.10), rgba(245,158,11,.10));
    border: 1px solid rgba(127,86,217,.18);
    border-radius: 12px;
    /* margin: 6px 8px; */
    /* padding: 12px 14px !important; */
}

.vip-side-link .mtext {
    font-weight: 700;
    color: #5B21B6;
}
/* =========================================================
   Duello özel mesaj kutusu ve toplanma alanı tasarım düzeni
   Not: Sadece .ozel-sohbet-* / #ozel-sohbet-bar / #sohbet-plus alanlarını etkiler.
   ========================================================= */

#ozel-sohbet-bar {
    position: fixed;
    right: var(--chat-offset);
    bottom: 0;
    z-index: 1050;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    transition: right 0.3s ease-in-out;
}

.ozel-sohbet-kutu {
    width: 300px;
    height: 410px;
    margin-left: 0;
    background: linear-gradient(180deg, rgb(246, 250, 255), rgb(239, 247, 255));
    border: 1px solid rgba(50, 98, 143, 0.22);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: rgba(13, 42, 78, 0.16) 0 18px 42px, rgba(70, 126, 180, 0.14) 0 4px 12px;
    transition: transform 0.28s ease, opacity 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.ozel-sohbet-kutu:hover {
    border-color: rgba(28, 86, 136, 0.34);
    box-shadow: rgba(13, 42, 78, 0.2) 0 22px 48px, rgba(70, 126, 180, 0.16) 0 6px 16px;
}

.ozel-sohbet-kutu.minimized {
    width: 300px;
    height: 58px;
    border-radius: 18px 18px 0 0;
}

.ozel-sohbet-kutu.hidden {
    display: none;
}

.ozel-sohbet-kutu.pinned {
    border: 1px solid rgba(251, 188, 6, 0.72);
    box-shadow: rgba(251, 188, 6, 0.18) 0 16px 40px, rgba(13, 42, 78, 0.15) 0 8px 22px;
}

.ozel-sohbet-kutu.has-new-message {
    border: 1px solid rgba(255, 123, 38, 0.72);
    box-shadow: rgba(255, 123, 38, 0.22) 0 16px 42px, rgba(13, 42, 78, 0.14) 0 8px 22px;
}

.ozel-sohbet-header,
.ozel-sohbet-kutu.has-new-message .ozel-sohbet-header {
    min-height: 58px;
    height: 58px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(18, 78, 124), rgb(13, 70, 114));
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.25s ease;
}

.ozel-sohbet-kutu:hover .ozel-sohbet-header {
    background: linear-gradient(135deg, rgb(17, 84, 135), rgb(11, 63, 105));
}

.ozel-sohbet-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.ozel-sohbet-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: rgb(255, 255, 255);
    border: 3px solid rgba(255, 255, 255, 0.78);
    box-shadow: rgba(0, 0, 0, 0.18) 0 5px 12px;
}

.ozel-sohbet-baslik-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ozel-sohbet-baslik {
    max-width: 150px;
    font-size: 14px;
    font-weight: 800;
    line-height: 16px;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ozel-sohbet-typing {
    height: 14px;
    font-size: 11px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.ozel-sohbet-header.typing .ozel-sohbet-typing {
    opacity: 1;
    visibility: visible;
}

.ozel-sohbet-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.ozel-sohbet-actions span,
.ozel-sohbet-pin {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.ozel-sohbet-actions span:hover,
.ozel-sohbet-pin:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.36);
}

.ozel-sohbet-icerik {
    flex: 1 1 auto;
    padding: 12px 12px 10px;
    font-size: 13px;
    overflow-y: auto;
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 161, 221, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(238, 247, 255, 0.92));
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 132, 185, 0.45) transparent;
}

.ozel-sohbet-icerik::-webkit-scrollbar {
    width: 8px;
}

.ozel-sohbet-icerik::-webkit-scrollbar-track {
    background: transparent;
}

.ozel-sohbet-icerik::-webkit-scrollbar-thumb {
    background: rgba(71, 132, 185, 0.42);
    border-radius: 999px;
    border: 2px solid rgba(246, 250, 255, 0.96);
}

.chat-msg {
    position: relative;
    max-width: 82%;
    padding: 9px 12px 7px;
    margin-bottom: 9px;
    border-radius: 16px;
    font-size: 13px;
    line-height: 1.36;
    overflow-wrap: break-word;
    box-shadow: rgba(29, 63, 92, 0.08) 0 6px 14px;
}

.chat-msg.other {
    margin-right: auto;
    text-align: left;
    color: rgb(38, 54, 74);
    background: rgb(255, 255, 255);
    border: 1px solid rgba(205, 222, 238, 0.9);
    border-top-left-radius: 6px;
}

.chat-msg.me {
    margin-left: auto;
    text-align: left;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(33, 129, 245), rgb(29, 111, 225));
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top-right-radius: 6px;
    box-shadow: rgba(31, 125, 242, 0.2) 0 8px 18px;
}

.chat-text {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.chat-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 4px;
    font-size: 11px;
    line-height: 12px;
    opacity: 0.78;
}

.chat-msg.me .chat-meta {
    color: rgba(235, 246, 255, 0.92);
}

.chat-msg.other .chat-meta {
    color: rgb(111, 130, 151);
}

.chat-time {
    font-size: 11px;
    margin-top: 0;
    opacity: 0.9;
}

.chat-status {
    font-size: 11px;
    margin-left: 2px;
    opacity: 0.72;
}

.chat-status.read {
    color: rgb(180, 230, 255);
    opacity: 1;
}

.ozel-sohbet-input {
    padding: 9px 10px 10px;
    background: rgba(255, 255, 255, 0.82);
    border-top: 1px solid rgba(187, 213, 237, 0.8);
    box-shadow: rgba(45, 91, 130, 0.06) 0 -6px 16px;
}

.ozel-sohbet-input textarea,
.ozel-sohbet-input input[type="text"] {
    width: 100%;
    min-height: 58px;
    max-height: 92px;
    padding: 12px 13px;
    color: rgb(39, 55, 76);
    background: rgb(250, 252, 255);
    border: 1px solid rgba(177, 206, 231, 0.96);
    border-radius: 14px;
    resize: none;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: rgba(26, 78, 122, 0.06) 0 4px 12px inset;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ozel-sohbet-input textarea:focus,
.ozel-sohbet-input input[type="text"]:focus {
    background: rgb(255, 255, 255);
    border-color: rgba(46, 130, 207, 0.8);
    box-shadow: rgba(46, 130, 207, 0.13) 0 0 0 4px, rgba(26, 78, 122, 0.04) 0 4px 12px inset;
}

.ozel-sohbet-input textarea::placeholder,
.ozel-sohbet-input input[type="text"]::placeholder {
    color: rgb(124, 141, 161);
}

#sohbet-plus {
    position: fixed;
    right: calc(var(--chat-offset) - 50px);
    bottom: 10px;
    width: 48px;
    height: 48px;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(91, 105, 214), rgb(245, 123, 45));
    border-radius: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1051;
    box-shadow: rgba(33, 64, 124, 0.22) 0 14px 30px;
    transition: right 0.3s ease-in-out, transform 0.2s ease, box-shadow 0.2s ease;
}

#sohbet-plus:hover {
    transform: translateY(-2px);
    box-shadow: rgba(33, 64, 124, 0.28) 0 18px 34px;
}

#sohbet-plus-menu {
    position: absolute;
    right: 0;
    bottom: 58px;
    width: 235px;
    display: none;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(204, 220, 236, 0.9);
    border-radius: 18px;
    box-shadow: rgba(13, 42, 78, 0.18) 0 16px 40px;
    backdrop-filter: blur(8px);
}

#sohbet-plus-menu div,
.plus-chat-item {
    padding: 9px 10px;
    font-size: 13px;
    color: rgb(37, 54, 74);
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

#sohbet-plus-menu div:hover,
.plus-chat-item:hover {
    background: rgb(240, 247, 255);
}

.plus-chat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
}

.plus-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.plus-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    background: rgb(255, 255, 255);
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: rgba(23, 67, 107, 0.14) 0 5px 12px;
}

.plus-online-dot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 50%;
}

.online .plus-online-dot {
    background: rgb(40, 167, 69);
}

.offline .plus-online-dot {
    background: rgb(220, 53, 69);
}

.plus-chat-name {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: rgb(39, 55, 76);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plus-unread {
    min-width: 20px;
    margin-left: auto;
    padding: 2px 7px;
    color: rgb(255, 255, 255);
    background: linear-gradient(135deg, rgb(255, 88, 88), rgb(255, 123, 38));
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: rgba(255, 88, 88, 0.22) 0 5px 12px;
}

@media (max-width: 991px) {
    #ozel-sohbet-bar {
        right: 12px;
        left: 12px;
        justify-content: flex-end;
        gap: 8px;
        overflow-x: auto;
        padding-left: 4px;
    }

    .ozel-sohbet-kutu {
        width: min(300px, calc(100vw - 24px));
    }

    #sohbet-plus {
        right: 14px;
    }
}

/* =========================================================
   Özel sohbet kutusu - durum bilgisi ve yazıyor animasyonu
   Not: Kutu boyutu korunmuştur. Sadece mesaj kutusu ve toplanma alanını etkiler.
   ========================================================= */

.ozel-sohbet-baslik-wrap {
    gap: 1px;
}

.ozel-sohbet-baslik {
    line-height: 15px;
}

.ozel-sohbet-durum,
.ozel-sohbet-status,
.user-status,
.ozel-sohbet-typing {
    min-height: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 13px;
    font-weight: 700;
    color: rgba(232, 244, 255, 0.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    visibility: visible;
}

.ozel-sohbet-durum::before,
.ozel-sohbet-status::before,
.user-status::before,
.ozel-sohbet-typing::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
    background: rgb(156, 174, 193);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}

.ozel-sohbet-kutu.online .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.online .ozel-sohbet-status::before,
.ozel-sohbet-kutu.online .user-status::before,
.ozel-sohbet-kutu.online .ozel-sohbet-typing::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-durum::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-status::before,
.ozel-sohbet-kutu[data-status="online"] .user-status::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-typing::before {
    background: rgb(32, 201, 121);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px rgba(32, 201, 121, 0.72);
}

.ozel-sohbet-kutu.offline .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-status::before,
.ozel-sohbet-kutu.offline .user-status::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-typing::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-durum::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-status::before,
.ozel-sohbet-kutu[data-status="offline"] .user-status::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-typing::before {
    background: rgb(158, 176, 195);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.ozel-sohbet-header.typing .ozel-sohbet-durum,
.ozel-sohbet-header.typing .ozel-sohbet-status,
.ozel-sohbet-header.typing .user-status,
.ozel-sohbet-header.typing .ozel-sohbet-typing,
.ozel-sohbet-kutu.typing .ozel-sohbet-durum,
.ozel-sohbet-kutu.typing .ozel-sohbet-status,
.ozel-sohbet-kutu.typing .user-status,
.ozel-sohbet-kutu.typing .ozel-sohbet-typing {
    color: rgba(233, 251, 244, 0.96);
}

.ozel-sohbet-header.typing .ozel-sohbet-durum::before,
.ozel-sohbet-header.typing .ozel-sohbet-status::before,
.ozel-sohbet-header.typing .user-status::before,
.ozel-sohbet-header.typing .ozel-sohbet-typing::before,
.ozel-sohbet-kutu.typing .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.typing .ozel-sohbet-status::before,
.ozel-sohbet-kutu.typing .user-status::before,
.ozel-sohbet-kutu.typing .ozel-sohbet-typing::before {
    background: rgb(32, 201, 121);
    animation: koTypingPulse 1.1s ease-in-out infinite;
}

.ozel-sohbet-header.typing .ozel-sohbet-durum::after,
.ozel-sohbet-header.typing .ozel-sohbet-status::after,
.ozel-sohbet-header.typing .user-status::after,
.ozel-sohbet-header.typing .ozel-sohbet-typing::after,
.ozel-sohbet-kutu.typing .ozel-sohbet-durum::after,
.ozel-sohbet-kutu.typing .ozel-sohbet-status::after,
.ozel-sohbet-kutu.typing .user-status::after,
.ozel-sohbet-kutu.typing .ozel-sohbet-typing::after {
    content: "";
    width: 20px;
    height: 8px;
    margin-left: 1px;
    display: inline-block;
    background:
        radial-gradient(circle, rgba(233, 251, 244, 0.95) 0 2px, transparent 2.5px) 0 50% / 6px 6px no-repeat,
        radial-gradient(circle, rgba(233, 251, 244, 0.95) 0 2px, transparent 2.5px) 7px 50% / 6px 6px no-repeat,
        radial-gradient(circle, rgba(233, 251, 244, 0.95) 0 2px, transparent 2.5px) 14px 50% / 6px 6px no-repeat;
    animation: koTypingDots 1.2s infinite ease-in-out;
}

.ozel-sohbet-kutu.minimized .ozel-sohbet-durum,
.ozel-sohbet-kutu.minimized .ozel-sohbet-status,
.ozel-sohbet-kutu.minimized .user-status,
.ozel-sohbet-kutu.minimized .ozel-sohbet-typing {
    max-width: 168px;
}

.plus-chat-item .plus-status,
.plus-chat-item .plus-chat-status {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    line-height: 12px;
    font-weight: 700;
    color: rgb(118, 137, 158);
}

.plus-chat-item.typing .plus-status,
.plus-chat-item.typing .plus-chat-status {
    color: rgb(23, 155, 92);
}

.plus-chat-item.typing .plus-status::after,
.plus-chat-item.typing .plus-chat-status::after {
    content: "";
    width: 18px;
    height: 8px;
    margin-left: 4px;
    display: inline-block;
    vertical-align: -1px;
    background:
        radial-gradient(circle, currentColor 0 2px, transparent 2.5px) 0 50% / 6px 6px no-repeat,
        radial-gradient(circle, currentColor 0 2px, transparent 2.5px) 7px 50% / 6px 6px no-repeat,
        radial-gradient(circle, currentColor 0 2px, transparent 2.5px) 14px 50% / 6px 6px no-repeat;
    animation: koTypingDots 1.2s infinite ease-in-out;
}

@keyframes koTypingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 8px rgba(32, 201, 121, 0.52);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 14px rgba(32, 201, 121, 0.9);
    }
}

@keyframes koTypingDots {
    0% {
        opacity: 0.35;
        transform: translateY(0);
    }

    35% {
        opacity: 1;
        transform: translateY(-1px);
    }

    70%, 100% {
        opacity: 0.55;
        transform: translateY(0);
    }
}

/* =========================================================
   DÜZELTME - Yazıyor durumu sadece gerçek typing class ile görünür
   Not: Mesaj kutusu boyutu korunmuştur. important kullanılmamıştır.
   ========================================================= */

.ozel-sohbet-kutu .ozel-sohbet-durum,
.ozel-sohbet-kutu .ozel-sohbet-status,
.ozel-sohbet-kutu .user-status,
.ozel-sohbet-kutu .ozel-sohbet-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 13px;
    font-size: 0;
    line-height: 13px;
    font-weight: 700;
    color: rgba(232, 244, 255, 0.86);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ozel-sohbet-kutu .ozel-sohbet-durum::before,
.ozel-sohbet-kutu .ozel-sohbet-status::before,
.ozel-sohbet-kutu .user-status::before,
.ozel-sohbet-kutu .ozel-sohbet-typing::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 7px;
    background: rgb(158, 176, 195);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
    animation: none;
}

.ozel-sohbet-kutu .ozel-sohbet-durum::after,
.ozel-sohbet-kutu .ozel-sohbet-status::after,
.ozel-sohbet-kutu .user-status::after,
.ozel-sohbet-kutu .ozel-sohbet-typing::after {
    content: "Çevrimdışı";
    font-size: 10.5px;
    line-height: 13px;
    color: rgba(232, 244, 255, 0.78);
    background: none;
    width: auto;
    height: auto;
    margin-left: 0;
    animation: none;
}

.ozel-sohbet-kutu.online .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.online .ozel-sohbet-status::before,
.ozel-sohbet-kutu.online .user-status::before,
.ozel-sohbet-kutu.online .ozel-sohbet-typing::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-durum::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-status::before,
.ozel-sohbet-kutu[data-status="online"] .user-status::before,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-typing::before {
    background: rgb(32, 201, 121);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px rgba(32, 201, 121, 0.72);
}

.ozel-sohbet-kutu.online .ozel-sohbet-durum::after,
.ozel-sohbet-kutu.online .ozel-sohbet-status::after,
.ozel-sohbet-kutu.online .user-status::after,
.ozel-sohbet-kutu.online .ozel-sohbet-typing::after,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-durum::after,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-status::after,
.ozel-sohbet-kutu[data-status="online"] .user-status::after,
.ozel-sohbet-kutu[data-status="online"] .ozel-sohbet-typing::after {
    content: "Çevrimiçi";
    color: rgba(233, 251, 244, 0.96);
}

.ozel-sohbet-kutu.offline .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-status::before,
.ozel-sohbet-kutu.offline .user-status::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-typing::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-durum::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-status::before,
.ozel-sohbet-kutu[data-status="offline"] .user-status::before,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-typing::before {
    background: rgb(158, 176, 195);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.16);
}

.ozel-sohbet-kutu.offline .ozel-sohbet-durum::after,
.ozel-sohbet-kutu.offline .ozel-sohbet-status::after,
.ozel-sohbet-kutu.offline .user-status::after,
.ozel-sohbet-kutu.offline .ozel-sohbet-typing::after,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-durum::after,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-status::after,
.ozel-sohbet-kutu[data-status="offline"] .user-status::after,
.ozel-sohbet-kutu[data-status="offline"] .ozel-sohbet-typing::after {
    content: "Çevrimdışı";
    color: rgba(232, 244, 255, 0.78);
}

.ozel-sohbet-kutu.typing .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.typing .ozel-sohbet-status::before,
.ozel-sohbet-kutu.typing .user-status::before,
.ozel-sohbet-kutu.typing .ozel-sohbet-typing::before,
.ozel-sohbet-header.typing .ozel-sohbet-durum::before,
.ozel-sohbet-header.typing .ozel-sohbet-status::before,
.ozel-sohbet-header.typing .user-status::before,
.ozel-sohbet-header.typing .ozel-sohbet-typing::before {
    background: rgb(32, 201, 121);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 0 10px rgba(32, 201, 121, 0.72);
    animation: koTypingPulse 1.1s ease-in-out infinite;
}

.ozel-sohbet-kutu.typing .ozel-sohbet-durum::after,
.ozel-sohbet-kutu.typing .ozel-sohbet-status::after,
.ozel-sohbet-kutu.typing .user-status::after,
.ozel-sohbet-kutu.typing .ozel-sohbet-typing::after,
.ozel-sohbet-header.typing .ozel-sohbet-durum::after,
.ozel-sohbet-header.typing .ozel-sohbet-status::after,
.ozel-sohbet-header.typing .user-status::after,
.ozel-sohbet-header.typing .ozel-sohbet-typing::after {
    content: "Yazıyor...";
    font-size: 10.5px;
    line-height: 13px;
    color: rgba(233, 251, 244, 0.96);
    width: auto;
    height: auto;
    margin-left: 0;
    background: none;
    animation: none;
}

.plus-chat-item .plus-status,
.plus-chat-item .plus-chat-status {
    font-size: 0;
}

.plus-chat-item .plus-status::after,
.plus-chat-item .plus-chat-status::after {
    content: "Çevrimdışı";
    font-size: 10px;
    color: rgb(118, 137, 158);
    background: none;
    width: auto;
    height: auto;
    margin-left: 0;
    animation: none;
}

.plus-chat-item.online .plus-status::after,
.plus-chat-item.online .plus-chat-status::after,
.plus-chat-item[data-status="online"] .plus-status::after,
.plus-chat-item[data-status="online"] .plus-chat-status::after {
    content: "Çevrimiçi";
    color: rgb(23, 155, 92);
}

.plus-chat-item.offline .plus-status::after,
.plus-chat-item.offline .plus-chat-status::after,
.plus-chat-item[data-status="offline"] .plus-status::after,
.plus-chat-item[data-status="offline"] .plus-chat-status::after {
    content: "Çevrimdışı";
    color: rgb(118, 137, 158);
}

.plus-chat-item.typing .plus-status::after,
.plus-chat-item.typing .plus-chat-status::after {
    content: "Yazıyor...";
    color: rgb(23, 155, 92);
}

/* === Katip Online - Özel Mesaj Kutusu Son İnce Ayarlar ===
   Yalnızca özel sohbet penceresi, mesaj alanı, durum göstergesi ve mesaj yazma alanını hedefler. */

.ozel-sohbet-kutu {
    border: 1px solid rgba(198, 210, 226, 0.9);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}

.ozel-sohbet-kutu:hover {
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.22);
}

.ozel-sohbet-header {
    background: linear-gradient(135deg, #172554 0%, #1d4ed8 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ozel-sohbet-kutu:hover .ozel-sohbet-header {
    background: linear-gradient(135deg, #14204a 0%, #1e40af 100%);
}

.ozel-sohbet-avatar,
.ozel-sohbet-user .plus-chat-avatar {
    border: 2px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.ozel-sohbet-user .plus-avatar-wrap,
.ozel-sohbet-header .plus-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.ozel-sohbet-user .plus-online-dot,
.ozel-sohbet-header .plus-online-dot {
    width: 11px;
    height: 11px;
    right: 0px;
    bottom: 0px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.ozel-sohbet-kutu.online .plus-online-dot,
.ozel-sohbet-header.online .plus-online-dot,
.ozel-sohbet-user.online .plus-online-dot,
.ozel-sohbet-kutu .online .plus-online-dot {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08), 0 0 10px rgba(34, 197, 94, 0.65);
}

.ozel-sohbet-kutu.offline .plus-online-dot,
.ozel-sohbet-header.offline .plus-online-dot,
.ozel-sohbet-user.offline .plus-online-dot,
.ozel-sohbet-kutu .offline .plus-online-dot {
    background: #94a3b8;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08);
}

.ozel-sohbet-header.typing .plus-online-dot,
.ozel-sohbet-kutu.typing .plus-online-dot,
.ozel-sohbet-user.typing .plus-online-dot {
    background: #facc15;
    animation: sohbetTypingPulse 1.15s ease-in-out infinite;
}

.ozel-sohbet-baslik-wrap {
    gap: 2px;
    min-width: 0px;
}

.ozel-sohbet-baslik {
    color: #ffffff;
    letter-spacing: 0.01em;
}

.ozel-sohbet-typing,
.ozel-sohbet-durum,
.ozel-sohbet-status {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 16px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.78);
}

.ozel-sohbet-durum::before,
.ozel-sohbet-status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    background: #94a3b8;
}

.ozel-sohbet-durum.online,
.ozel-sohbet-status.online,
.ozel-sohbet-kutu.online .ozel-sohbet-durum,
.ozel-sohbet-kutu.online .ozel-sohbet-status {
    color: #bbf7d0;
}

.ozel-sohbet-durum.online::before,
.ozel-sohbet-status.online::before,
.ozel-sohbet-kutu.online .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.online .ozel-sohbet-status::before {
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.65);
}

.ozel-sohbet-durum.offline,
.ozel-sohbet-status.offline,
.ozel-sohbet-kutu.offline .ozel-sohbet-durum,
.ozel-sohbet-kutu.offline .ozel-sohbet-status {
    color: rgba(226, 232, 240, 0.78);
}

.ozel-sohbet-durum.offline::before,
.ozel-sohbet-status.offline::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-durum::before,
.ozel-sohbet-kutu.offline .ozel-sohbet-status::before {
    background: #94a3b8;
    box-shadow: none;
}

.ozel-sohbet-header.typing .ozel-sohbet-typing {
    color: #fde68a;
    opacity: 1;
    visibility: visible;
}

.ozel-sohbet-header.typing .ozel-sohbet-typing::after {
    content: '•••';
    display: inline-block;
    margin-left: 3px;
    letter-spacing: 1px;
    animation: sohbetTypingDots 1.2s ease-in-out infinite;
}

.ozel-sohbet-icerik {
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 99, 235, 0.45) rgba(226, 232, 240, 0.8);
}

.ozel-sohbet-icerik::-webkit-scrollbar {
    width: 6px;
}

.ozel-sohbet-icerik::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.8);
    border-radius: 20px;
}

.ozel-sohbet-icerik::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.45);
    border-radius: 20px;
}

.ozel-sohbet-icerik::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.68);
}

.chat-msg {
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.08);
}

.chat-msg.me {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}

.chat-msg.other {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
}

.ozel-sohbet-input {
    background: #ffffff;
    border-top: 1px solid rgba(203, 213, 225, 0.78);
    padding: 8px;
}

.ozel-sohbet-input textarea,
.ozel-sohbet-input input[type='text'],
.ozel-sohbet-input .form-control {
    border: 1px solid #d6deea;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    padding: 8px 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.ozel-sohbet-input textarea:hover,
.ozel-sohbet-input input[type='text']:hover,
.ozel-sohbet-input .form-control:hover {
    border-color: #b7c4d8;
    background: #ffffff;
}

.ozel-sohbet-input textarea:focus,
.ozel-sohbet-input input[type='text']:focus,
.ozel-sohbet-input .form-control:focus {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16);
}

.ozel-sohbet-kutu.minimized {
    border-radius: 14px 14px 0 0;
}

.ozel-sohbet-kutu.minimized .ozel-sohbet-header {
    border-radius: 14px 14px 0 0;
}

@keyframes sohbetTypingPulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08), 0 0 0 rgba(250, 204, 21, 0);
    }

    50% {
        box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08), 0 0 12px rgba(250, 204, 21, 0.8);
    }
}

@keyframes sohbetTypingDots {
    0%, 100% {
        opacity: 0.35;
        transform: translateY(0px);
    }

    50% {
        opacity: 1;
        transform: translateY(-1px);
    }
}


/* === Katip Online - Özel Mesaj Kutusu Modern Balon / Gönder / Okundu İnce Ayarları ===
   Sadece .ozel-sohbet-kutu içindeki özel mesaj penceresini hedefler. */

.ozel-sohbet-kutu .chat-msg {
    position: relative;
    max-width: 82%;
    padding: 10px 13px 8px;
    margin-bottom: 10px;
    border-radius: 17px;
    line-height: 1.38;
    letter-spacing: -0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    will-change: transform;
}

.ozel-sohbet-kutu .chat-msg:hover {
    transform: translateY(-1px);
}

.ozel-sohbet-kutu .chat-msg.other {
    color: #233247;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(203, 216, 232, 0.95);
    border-top-left-radius: 7px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.ozel-sohbet-kutu .chat-msg.other:hover {
    border-color: rgba(166, 189, 217, 0.95);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.ozel-sohbet-kutu .chat-msg.me {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #2f7df4 52%, #3b82f6 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-top-right-radius: 7px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.ozel-sohbet-kutu .chat-msg.me:hover {
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.31);
}

.ozel-sohbet-kutu .chat-text {
    font-size: 13px;
    font-weight: 600;
}

.ozel-sohbet-kutu .chat-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 5px;
    font-size: 11px;
    line-height: 12px;
}

.ozel-sohbet-kutu .chat-msg.me .chat-meta {
    color: rgba(235, 246, 255, 0.92);
}

.ozel-sohbet-kutu .chat-msg.other .chat-meta {
    color: #7b8da5;
}

.ozel-sohbet-kutu .chat-time {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.82;
}

.ozel-sohbet-kutu .chat-status,
.ozel-sohbet-kutu .message-status,
.ozel-sohbet-kutu .read-receipt,
.ozel-sohbet-kutu .msg-check,
.ozel-sohbet-kutu .chat-tick,
.ozel-sohbet-kutu .ticks {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 2px;
    font-size: 11px;
    line-height: 1;
    opacity: 0.8;
}

.ozel-sohbet-kutu .chat-status.read,
.ozel-sohbet-kutu .message-status.read,
.ozel-sohbet-kutu .read-receipt.read,
.ozel-sohbet-kutu .msg-check.read,
.ozel-sohbet-kutu .chat-tick.read,
.ozel-sohbet-kutu .ticks.read,
.ozel-sohbet-kutu .chat-msg.me.read .chat-status,
.ozel-sohbet-kutu .chat-msg.me.seen .chat-status,
.ozel-sohbet-kutu .chat-msg.me.okundu .chat-status {
    color: #bae6fd;
    opacity: 1;
    text-shadow: 0 1px 5px rgba(186, 230, 253, 0.35);
}

.ozel-sohbet-kutu .chat-msg.me.delivered .chat-status,
.ozel-sohbet-kutu .chat-msg.me.sent .chat-status {
    color: rgba(235, 246, 255, 0.76);
    opacity: 0.9;
}

.ozel-sohbet-kutu .chat-msg.me.read .chat-status:empty::before,
.ozel-sohbet-kutu .chat-msg.me.seen .chat-status:empty::before,
.ozel-sohbet-kutu .chat-msg.me.okundu .chat-status:empty::before {
    content: '✓✓';
}

.ozel-sohbet-kutu .chat-msg.me.sent .chat-status:empty::before {
    content: '✓';
}

.ozel-sohbet-kutu .chat-msg.me.delivered .chat-status:empty::before {
    content: '✓✓';
}

.ozel-sohbet-kutu .ozel-sohbet-input,
.ozel-sohbet-kutu .chat-footer {
    position: relative;
}

.ozel-sohbet-kutu .ozel-sohbet-input {
    gap: 8px;
}

.ozel-sohbet-kutu .ozel-sohbet-input textarea,
.ozel-sohbet-kutu .ozel-sohbet-input input[type='text'],
.ozel-sohbet-kutu .ozel-sohbet-input .form-control {
    min-height: 62px;
    padding: 12px 14px;
    border-radius: 15px;
    background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
    box-shadow: inset 0 4px 12px rgba(15, 23, 42, 0.045);
}

.ozel-sohbet-kutu .ozel-sohbet-input textarea:hover,
.ozel-sohbet-kutu .ozel-sohbet-input input[type='text']:hover,
.ozel-sohbet-kutu .ozel-sohbet-input .form-control:hover {
    box-shadow: inset 0 4px 12px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(37, 99, 235, 0.08);
}

.ozel-sohbet-kutu .ozel-sohbet-input textarea:focus,
.ozel-sohbet-kutu .ozel-sohbet-input input[type='text']:focus,
.ozel-sohbet-kutu .ozel-sohbet-input .form-control:focus {
    box-shadow: inset 0 3px 10px rgba(15, 23, 42, 0.035), 0 0 0 3px rgba(59, 130, 246, 0.16), 0 8px 20px rgba(37, 99, 235, 0.1);
}

.ozel-sohbet-kutu .ozel-sohbet-input button,
.ozel-sohbet-kutu .ozel-sohbet-input .btn,
.ozel-sohbet-kutu .chat-footer .chat_send .btn,
.ozel-sohbet-kutu .chat-footer button[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.ozel-sohbet-kutu .ozel-sohbet-input button:hover,
.ozel-sohbet-kutu .ozel-sohbet-input .btn:hover,
.ozel-sohbet-kutu .chat-footer .chat_send .btn:hover,
.ozel-sohbet-kutu .chat-footer button[type='submit']:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.34);
}

.ozel-sohbet-kutu .ozel-sohbet-input button:active,
.ozel-sohbet-kutu .ozel-sohbet-input .btn:active,
.ozel-sohbet-kutu .chat-footer .chat_send .btn:active,
.ozel-sohbet-kutu .chat-footer button[type='submit']:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

.ozel-sohbet-kutu .ozel-sohbet-input button::before,
.ozel-sohbet-kutu .ozel-sohbet-input .btn::before,
.ozel-sohbet-kutu .chat-footer .chat_send .btn::before,
.ozel-sohbet-kutu .chat-footer button[type='submit']::before {
    content: '➤';
    display: block;
    font-size: 18px;
    line-height: 1;
    transform: translateX(1px);
}

.ozel-sohbet-kutu .ozel-sohbet-input button svg,
.ozel-sohbet-kutu .ozel-sohbet-input .btn svg,
.ozel-sohbet-kutu .chat-footer .chat_send .btn svg {
    width: 18px;
    height: 18px;
}

.ozel-sohbet-kutu .ozel-sohbet-input button:has(svg)::before,
.ozel-sohbet-kutu .ozel-sohbet-input .btn:has(svg)::before,
.ozel-sohbet-kutu .chat-footer .chat_send .btn:has(svg)::before {
    content: '';
    display: none;
}

/* =========================================================
   Katip Online - Özel Mesaj Kutusu Final Mikro Etkileşimler
   Kapsam: Sadece özel mesaj kutusu / mesaj alanı / mesaj girişi
   Not: Kutu boyutları korunmuştur, important kullanılmamıştır.
   ========================================================= */

#ozel-sohbet-bar .ozel-sohbet-kutu {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

#ozel-sohbet-bar .ozel-sohbet-kutu:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20), 0 6px 18px rgba(37, 99, 235, 0.12);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.active,
#ozel-sohbet-bar .ozel-sohbet-kutu.is-active,
#ozel-sohbet-bar .ozel-sohbet-kutu.focused,
#ozel-sohbet-bar .ozel-sohbet-kutu:focus-within {
    border-color: rgba(59, 130, 246, 0.48);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22), 0 0 0 3px rgba(59, 130, 246, 0.12);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.active .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.is-active .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.focused .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu:focus-within .ozel-sohbet-header {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 58%, #3b82f6 100%);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.has-new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.unread {
    animation: privateChatNewPulse 0.9s ease both;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.has-new-message .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.new-message .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.unread .ozel-sohbet-header {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 55%, #0ea5e9 100%);
}

#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-header.typing .user-status,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-typing,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-typing {
    color: transparent;
    font-size: 0;
    gap: 4px;
}

#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-header.typing .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-typing::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-typing::after {
    content: "Yazıyor...";
    color: #e9fbf4;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 13px;
    letter-spacing: -0.01em;
}

#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-durum::before,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-status::before,
#ozel-sohbet-bar .ozel-sohbet-header.typing .user-status::before,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-typing::before,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-durum::before,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-status::before,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .user-status::before,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-typing::before {
    background: #facc15;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.20), 0 0 12px rgba(250, 204, 21, 0.70);
    animation: privateChatTypingPulse 1.05s ease-in-out infinite;
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg,
#ozel-sohbet-bar .ozel-sohbet-kutu .message,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj {
    transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .message:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj:hover {
    transform: translateY(-1px);
    filter: saturate(1.03);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.new,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.incoming-new,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.new,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj.new,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj.new {
    animation: privateMessageIn 0.24s ease-out both;
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.me .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.me .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj.me .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj.me .chat-bubble {
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.25);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.other .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.other .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj.other .chat-bubble,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj.other .chat-bubble {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .read-receipt,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-check,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-tick,
#ozel-sohbet-bar .ozel-sohbet-kutu .ticks {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -0.08em;
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.me.read .chat-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.me.seen .chat-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.me.okundu .chat-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.me.read .message-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.me.seen .message-status,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.me.okundu .message-status {
    color: #dbeafe;
    text-shadow: 0 1px 6px rgba(219, 234, 254, 0.35);
}

#ozel-sohbet-bar .ozel-sohbet-input button,
#ozel-sohbet-bar .ozel-sohbet-input .btn,
#ozel-sohbet-bar .chat-footer .chat_send .btn,
#ozel-sohbet-bar .chat-footer button[type='submit'] {
    overflow: hidden;
    position: relative;
}

#ozel-sohbet-bar .ozel-sohbet-input button::after,
#ozel-sohbet-bar .ozel-sohbet-input .btn::after,
#ozel-sohbet-bar .chat-footer .chat_send .btn::after,
#ozel-sohbet-bar .chat-footer button[type='submit']::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.42), transparent 34%);
    opacity: 0;
    transition: opacity 0.18s ease;
}

#ozel-sohbet-bar .ozel-sohbet-input button:hover::after,
#ozel-sohbet-bar .ozel-sohbet-input .btn:hover::after,
#ozel-sohbet-bar .chat-footer .chat_send .btn:hover::after,
#ozel-sohbet-bar .chat-footer button[type='submit']:hover::after {
    opacity: 1;
}

@keyframes privateChatTypingPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.65;
        transform: scale(0.84);
    }
}

@keyframes privateChatNewPulse {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
    35% {
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 18px 44px rgba(37, 99, 235, 0.22);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes privateMessageIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}



/* =========================================================
   Katip Online - Özel Mesaj Kutusu Premium Son Dokunuşlar
   Kapsam: Sadece #ozel-sohbet-bar içindeki özel mesaj kutuları
   Not: !important kullanılmadı.
   ========================================================= */

#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-header {
    background: linear-gradient(135deg, #174a8f 0%, #1f54b6 52%, #2357c7 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px rgba(15, 23, 42, 0.12);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.active .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.is-active .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu:focus-within .ozel-sohbet-header {
    background: linear-gradient(135deg, #1550a0 0%, #2563eb 54%, #2f6df2 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 24px rgba(37, 99, 235, 0.26);
}

#ozel-sohbet-bar .ozel-sohbet-avatar-wrap,
#ozel-sohbet-bar .avatar-wrap,
#ozel-sohbet-bar .chat-avatar-wrap,
#ozel-sohbet-bar .ozel-sohbet-user .avatar,
#ozel-sohbet-bar .ozel-sohbet-user .user-avatar {
    position: relative;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.online .ozel-sohbet-avatar,
#ozel-sohbet-bar .ozel-sohbet-header.online .ozel-sohbet-avatar,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-avatar.online,
#ozel-sohbet-bar .ozel-sohbet-kutu.online img.ozel-sohbet-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.80), 0 0 12px rgba(34, 197, 94, 0.42), 0 8px 20px rgba(15, 23, 42, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-sohbet-avatar,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-sohbet-avatar,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-avatar.typing {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.80), 0 0 13px rgba(250, 204, 21, 0.50), 0 8px 20px rgba(15, 23, 42, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.online .online-dot,
#ozel-sohbet-bar .ozel-sohbet-kutu.online .status-dot,
#ozel-sohbet-bar .ozel-sohbet-kutu.online .ozel-online-dot,
#ozel-sohbet-bar .ozel-sohbet-header.online .online-dot,
#ozel-sohbet-bar .ozel-sohbet-header.online .status-dot,
#ozel-sohbet-bar .ozel-sohbet-header.online .ozel-online-dot {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86), 0 0 10px rgba(34, 197, 94, 0.62);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.typing .online-dot,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .status-dot,
#ozel-sohbet-bar .ozel-sohbet-kutu.typing .ozel-online-dot,
#ozel-sohbet-bar .ozel-sohbet-header.typing .online-dot,
#ozel-sohbet-bar .ozel-sohbet-header.typing .status-dot,
#ozel-sohbet-bar .ozel-sohbet-header.typing .ozel-online-dot {
    background: #facc15;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.86), 0 0 11px rgba(250, 204, 21, 0.70);
    animation: privateChatTypingPulse 1.05s ease-in-out infinite;
}

#ozel-sohbet-bar .ozel-sohbet-input,
#ozel-sohbet-bar .chat-footer,
#ozel-sohbet-bar .message-input-area {
    position: relative;
}

#ozel-sohbet-bar .ozel-sohbet-input textarea,
#ozel-sohbet-bar .ozel-sohbet-input input[type='text'],
#ozel-sohbet-bar .chat-footer textarea,
#ozel-sohbet-bar .chat-footer input[type='text'],
#ozel-sohbet-bar .message-input-area textarea,
#ozel-sohbet-bar .message-input-area input[type='text'] {
    padding-right: 48px;
}

#ozel-sohbet-bar .ozel-sohbet-input button,
#ozel-sohbet-bar .ozel-sohbet-input .btn,
#ozel-sohbet-bar .chat-footer .chat_send .btn,
#ozel-sohbet-bar .chat-footer button[type='submit'],
#ozel-sohbet-bar .message-input-area button[type='submit'] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2f7df6 0%, #2563eb 55%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#ozel-sohbet-bar .ozel-sohbet-input button::before,
#ozel-sohbet-bar .ozel-sohbet-input .btn::before,
#ozel-sohbet-bar .chat-footer .chat_send .btn::before,
#ozel-sohbet-bar .chat-footer button[type='submit']::before,
#ozel-sohbet-bar .message-input-area button[type='submit']::before {
    content: "\f1d8";
    font-family: FontAwesome;
    font-size: 15px;
    line-height: 1;
    transform: translateX(1px) rotate(-2deg);
}

#ozel-sohbet-bar .ozel-sohbet-input button:hover,
#ozel-sohbet-bar .ozel-sohbet-input .btn:hover,
#ozel-sohbet-bar .chat-footer .chat_send .btn:hover,
#ozel-sohbet-bar .chat-footer button[type='submit']:hover,
#ozel-sohbet-bar .message-input-area button[type='submit']:hover {
    transform: translateY(-1px);
    filter: saturate(1.06);
    box-shadow: 0 13px 25px rgba(37, 99, 235, 0.34);
}

#ozel-sohbet-bar .ozel-sohbet-input button:active,
#ozel-sohbet-bar .ozel-sohbet-input .btn:active,
#ozel-sohbet-bar .chat-footer .chat_send .btn:active,
#ozel-sohbet-bar .chat-footer button[type='submit']:active,
#ozel-sohbet-bar .message-input-area button[type='submit']:active {
    transform: translateY(0) scale(0.97);
}

#ozel-sohbet-bar .ozel-sohbet-input button i,
#ozel-sohbet-bar .ozel-sohbet-input .btn i,
#ozel-sohbet-bar .chat-footer .chat_send .btn i,
#ozel-sohbet-bar .chat-footer button[type='submit'] i,
#ozel-sohbet-bar .message-input-area button[type='submit'] i {
    font-size: 0;
}


/* =========================================================
   Katip Online - Özel Mesaj Kutusu ve Toplanma Alanı Son Düzenleme
   Kapsam: Sadece #ozel-sohbet-bar içindeki özel mesaj kutuları ve küçültülmüş sohbet kartları
   Not: !important kullanılmadı.
   ========================================================= */

/* Alt görev çubuğuna yapışık görünümü azaltmak için tüm sohbet barını hafif yukarı alır */
#ozel-sohbet-bar {
    bottom: 24px;
}

/* Açık ve küçültülmüş kutulara daha nefesli, modern konum hissi */
#ozel-sohbet-bar .ozel-sohbet-kutu {
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

#ozel-sohbet-bar .ozel-sohbet-kutu:hover {
    transform: translateY(-2px);
}

/* Küçültülmüş / toplanmış sohbet kartları */
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
    height: 58px;
    min-height: 58px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(23, 74, 143, 0.98) 0%, rgba(31, 84, 182, 0.98) 55%, rgba(35, 87, 199, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized:hover {
    transform: translateY(-3px);
    filter: saturate(1.04);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(96, 165, 250, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.active,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.is-active,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.focused,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized:focus-within {
    background: linear-gradient(135deg, #1550a0 0%, #2563eb 54%, #0ea5e9 100%);
    border-color: rgba(125, 211, 252, 0.72);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.28), 0 0 0 1px rgba(14, 165, 233, 0.38);
}

/* Küçültülmüş kart avatar kalitesi */
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-avatar {
    width: 46px;
    height: 46px;
    border-width: 3px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.72), 0 8px 18px rgba(15, 23, 42, 0.24);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.online .ozel-sohbet-avatar,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized[data-status="online"] .ozel-sohbet-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.74), 0 0 12px rgba(34, 197, 94, 0.42), 0 8px 18px rgba(15, 23, 42, 0.24);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-avatar {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.74), 0 0 13px rgba(250, 204, 21, 0.54), 0 8px 18px rgba(15, 23, 42, 0.24);
}

/* Küçültülmüş kart başlık/metin okunurluğu */
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-baslik {
    font-size: 14.5px;
    font-weight: 850;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 6px rgba(15, 23, 42, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-typing {
    color: rgba(232, 244, 255, 0.92);
    font-weight: 800;
}

/* Yazıyor bilgisini küçültülmüş kartta net metin olarak gösterir */
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-typing {
    color: transparent;
    font-size: 0;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.typing .ozel-sohbet-typing::after {
    content: "Yazıyor...";
    color: #e9fbf4;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 13px;
}

/* Yeni mesaj rozeti daha premium */
#ozel-sohbet-bar .ozel-sohbet-kutu .unread-badge,
#ozel-sohbet-bar .ozel-sohbet-kutu .new-message-badge,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-count,
#ozel-sohbet-bar .ozel-sohbet-kutu .badge-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ff5c75 0%, #ef4444 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 850;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.34);
}

/* Toplanma alanındaki artı / sohbet açma butonu */
#ozel-sohbet-bar .ozel-sohbet-plus,
#ozel-sohbet-bar .chat-plus,
#ozel-sohbet-bar .add-chat,
#ozel-sohbet-bar .new-chat-button,
#ozel-sohbet-bar .sohbet-ekle,
#ozel-sohbet-bar .plus-btn {
    width: 58px;
    height: 58px;
    border-radius: 18px 18px 0 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.96) 0%, rgba(14, 165, 233, 0.92) 58%, rgba(249, 115, 22, 0.90) 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#ozel-sohbet-bar .ozel-sohbet-plus:hover,
#ozel-sohbet-bar .chat-plus:hover,
#ozel-sohbet-bar .add-chat:hover,
#ozel-sohbet-bar .new-chat-button:hover,
#ozel-sohbet-bar .sohbet-ekle:hover,
#ozel-sohbet-bar .plus-btn:hover {
    transform: translateY(-3px);
    filter: saturate(1.08);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.26), 0 0 0 1px rgba(125, 211, 252, 0.32);
}

/* Yeni mesaj geldiğinde küçültülmüş kartta kısa dikkat animasyonu */
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread {
    animation: koMinimizedChatAttention 0.9s ease both;
    border-color: rgba(255, 92, 117, 0.70);
}

@keyframes koMinimizedChatAttention {
    0%, 100% {
        transform: translateY(0);
    }
    35% {
        transform: translateY(-4px);
    }
    65% {
        transform: translateY(-2px);
    }
}

/* =========================================================
   Katip Online - Mesaj Kutusu & Toplanma Alanı Bildirim Rötuşları
   Kapsam: Sadece #ozel-sohbet-bar ve #sohbet-plus alanları
   Not: important kullanılmamıştır.
   ========================================================= */

#ozel-sohbet-bar {
    bottom: 24px;
    align-items: flex-end;
    gap: 10px;
}

#sohbet-plus {
    bottom: 24px;
    width: 46px;
    height: 46px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.96) 0%, rgba(37, 99, 235, 0.96) 55%, rgba(14, 165, 233, 0.94) 100%);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.24), 0 6px 18px rgba(37, 99, 235, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.26);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#sohbet-plus::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
    pointer-events: none;
}

#sohbet-plus:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.28), 0 8px 24px rgba(37, 99, 235, 0.30);
    filter: saturate(1.05);
}

#sohbet-plus .plus-unread,
#sohbet-plus .unread-badge,
#sohbet-plus .badge,
#sohbet-plus [data-unread] {
    position: absolute;
    right: -5px;
    top: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.36);
    font-size: 11px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
    height: 58px;
    overflow: visible;
    border-radius: 18px 18px 12px 12px;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.98) 0%, rgba(37, 99, 235, 0.98) 60%, rgba(59, 130, 246, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    box-shadow: 0 15px 36px rgba(15, 23, 42, 0.22), 0 6px 18px rgba(37, 99, 235, 0.16);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -7px;
    height: 8px;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0), rgba(37, 99, 235, 0.35), rgba(37, 99, 235, 0));
    filter: blur(2px);
    opacity: 0.72;
    pointer-events: none;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-header {
    height: 58px;
    border-radius: 18px 18px 12px 12px;
    background: transparent;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.26), 0 8px 24px rgba(37, 99, 235, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread {
    border-color: rgba(251, 113, 133, 0.76);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.26), 0 0 0 3px rgba(251, 113, 133, 0.16), 0 8px 26px rgba(239, 68, 68, 0.20);
    animation: minimizedUnreadPulse 1.4s ease-in-out infinite;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-header,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-header {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.98) 0%, rgba(37, 99, 235, 0.98) 48%, rgba(14, 165, 233, 0.98) 100%);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-header::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-header::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-header::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-header::after {
    content: "1";
    position: absolute;
    right: -7px;
    top: -8px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 10px 20px rgba(239, 68, 68, 0.36);
    font-size: 11px;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .user-status {
    color: transparent;
    font-size: 0;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-durum::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .user-status::after,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .user-status::after {
    content: "Yeni mesaj";
    color: #fff7ed;
    font-size: 10.5px;
    font-weight: 900;
    line-height: 13px;
    letter-spacing: -0.01em;
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message .ozel-sohbet-baslik,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message .ozel-sohbet-baslik,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread .ozel-sohbet-baslik,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread .ozel-sohbet-baslik {
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(255, 255, 255, 0.18);
}

#sohbet-plus-menu {
    bottom: 60px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.20);
    overflow: hidden;
}

#sohbet-plus-menu .plus-chat-item,
#sohbet-plus-menu div {
    transition: background 0.18s ease, transform 0.18s ease;
}

#sohbet-plus-menu .plus-chat-item:hover,
#sohbet-plus-menu div:hover {
    background: linear-gradient(90deg, rgba(239, 246, 255, 0.95), rgba(255, 255, 255, 0.95));
    transform: translateX(2px);
}

#sohbet-plus-menu .plus-unread,
#sohbet-plus-menu .unread-badge,
#sohbet-plus-menu [data-unread] {
    background: linear-gradient(135deg, #fb7185 0%, #ef4444 100%);
    border: 2px solid #ffffff;
    box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
}

@keyframes minimizedUnreadPulse {
    0%, 100% {
        transform: translateY(0);
        filter: saturate(1);
    }

    50% {
        transform: translateY(-2px);
        filter: saturate(1.08);
    }
}


/* =========================================================
   Katip Online - Mesaj Kutusu Emoji / Yanıtla / Gönder Görsel Hazırlığı
   Kapsam: Sadece #ozel-sohbet-bar içindeki özel mesaj kutusu
   Not: Bu bölüm sadece görsel hazırlıktır; tıklama işlevi için EJS/JS gerekir.
   important kullanılmamıştır.
   ========================================================= */

/* Mesaj yazma alanında emoji ve gönder simgesi için iç boşluk */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area {
    position: relative;
}

/* Textarea / input metni simgelerin altında kalmasın */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input textarea,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input input,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer textarea,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer input,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area textarea,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area input,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area textarea,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area input {
    padding-left: 42px;
    padding-right: 48px;
}

/* Emoji butonu görünümü - sol taraf */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input::before,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer::before,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area::before,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area::before {
    content: "😊";
    position: absolute;
    left: 14px;
    bottom: 18px;
    width: 26px;
    height: 26px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 246, 255, 0.92);
    border: 1px solid rgba(191, 219, 254, 0.95);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.10);
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
    z-index: 2;
}

/* Gönder butonu görünümü - sağ taraf */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area::after {
    content: "➤";
    position: absolute;
    right: 14px;
    bottom: 18px;
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 58%, #0ea5e9 100%);
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-size: 14px;
    line-height: 1;
    transform: translateX(1px);
    pointer-events: none;
    z-index: 2;
}

/* Input odakta iken görsel gönder simgesine premium vurgu */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input:focus-within::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-footer:focus-within::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-input-area:focus-within::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .input-area:focus-within::after {
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.34), 0 0 0 3px rgba(59, 130, 246, 0.15);
    filter: saturate(1.07);
}

/* Mesaj balonu üzerinde yanıtla simgesi görünümü */
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg,
#ozel-sohbet-bar .ozel-sohbet-kutu .message,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-row,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-row {
    position: relative;
}

/* Yanıtla görseli varsayılan gizli */
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-row::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-row::after {
    content: "↩";
    position: absolute;
    top: 50%;
    width: 25px;
    height: 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.96);
    color: #2563eb;
    border: 1px solid rgba(191, 219, 254, 0.95);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    font-size: 14px;
    font-weight: 800;
    opacity: 0;
    transform: translateY(-50%) scale(0.86);
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    pointer-events: none;
    z-index: 3;
}

/* Gelen mesajlarda sağda, giden mesajlarda solda yanıtla simgesi */
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-row::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-row::after {
    right: -30px;
}

#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-row.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-row.me::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg.sent::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.sent::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj.sent::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj.sent::after {
    left: -30px;
    right: auto;
}

/* Hover ile yanıtla simgesi görünür */
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-msg:hover::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message:hover::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj:hover::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-mesaj:hover::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .msg-row:hover::after,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-row:hover::after {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

/* Dar mesaj kutularında yanıt ikonunun dışarı taşmasını yumuşat */
#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-mesajlar,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-body,
#ozel-sohbet-bar .ozel-sohbet-kutu .messages,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-list {
    overflow-x: hidden;
}


/* =========================================================
   Katip Online - Mesaj Kutusu Renk Dengesi Son Rötuş
   Kapsam: Sadece #ozel-sohbet-bar içindeki özel mesaj kutuları ve #sohbet-plus
   Amaç: Mavi doygunluğunu azaltmak, sayfa geneliyle daha kurumsal uyum sağlamak
   Not: important kullanılmamıştır.
   ========================================================= */

#ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header {
    background: linear-gradient(180deg, #245fc7 0%, #1f4fa8 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 20px rgba(15, 23, 42, 0.08);
}

#ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized):hover .ozel-sohbet-header {
    background: linear-gradient(180deg, #2867cf 0%, #2154ad 100%);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
    background: linear-gradient(180deg, #2f69d2 0%, #285dc1 100%);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.20), 0 5px 14px rgba(15, 23, 42, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    filter: saturate(0.94);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized:hover {
    background: linear-gradient(180deg, #3474dc 0%, #2b63c8 100%);
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24), 0 7px 18px rgba(15, 23, 42, 0.18);
    filter: saturate(0.98);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.active,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.is-active,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.open,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-focus {
    background: linear-gradient(180deg, #3777df 0%, #2862c8 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 18px rgba(59, 130, 246, 0.25), 0 16px 34px rgba(37, 99, 235, 0.22);
    filter: saturate(1);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-baslik,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .chat-user-name,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-name {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(15, 23, 42, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-durum,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-status,
#ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-typing {
    color: rgba(255, 255, 255, 0.78);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.gonderilen,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.me,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-bubble.me,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.outgoing,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-message.outgoing {
    background: linear-gradient(180deg, #2f73e5 0%, #2563eb 100%);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.gonderilen:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.me:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-bubble.me:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.outgoing:hover,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-message.outgoing:hover {
    background: linear-gradient(180deg, #3479eb 0%, #2867ee 100%);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.22);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.gelen,
#ozel-sohbet-bar .ozel-sohbet-kutu .mesaj-alani.other,
#ozel-sohbet-bar .ozel-sohbet-kutu .message-bubble.other,
#ozel-sohbet-bar .ozel-sohbet-kutu .message.incoming,
#ozel-sohbet-bar .ozel-sohbet-kutu .chat-message.incoming {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.07);
}

#ozel-sohbet-bar .ozel-sohbet-kutu .ozel-sohbet-input {
    background: rgba(248, 251, 255, 0.94);
    border-top-color: rgba(203, 213, 225, 0.72);
}

#sohbet-plus {
    background: linear-gradient(180deg, #2f69d2 0%, #285dc1 100%);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.20), 0 5px 14px rgba(15, 23, 42, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
    filter: saturate(0.94);
}

#sohbet-plus:hover {
    background: linear-gradient(180deg, #3474dc 0%, #2b63c8 100%);
    box-shadow: 0 18px 38px rgba(37, 99, 235, 0.24), 0 7px 18px rgba(15, 23, 42, 0.18);
    filter: saturate(0.98);
}

/* =========================================================
   Katip Online - Mobil Sohbet Deneyimi
   Kapsam: Sadece #ozel-sohbet-bar içindeki özel mesaj kutuları ve #sohbet-plus
   Amaç: Mobilde tam ekran sohbet paneli, alt sohbet barı, sekme hissi ve yeni mesaj vurgusu
   Not: Bu bölüm sadece CSS düzenidir; sekme geçişi, swipe ve gerçek önizleme için EJS/JS gerekir.
   important kullanılmamıştır.
   ========================================================= */

@media (max-width: 768px) {
    #ozel-sohbet-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        z-index: 2140;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 8px;
        padding: 0 10px calc(10px + env(safe-area-inset-bottom));
        pointer-events: none;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu,
    #sohbet-plus,
    #sohbet-plus-menu {
        pointer-events: auto;
    }

    /* Mobilde açık sohbet: küçük pencere yerine tam ekran panel */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100vw;
        height: 100dvh;
        max-width: none;
        max-height: none;
        margin: 0;
        border-radius: 0;
        border: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #f3f6fb;
        box-shadow: none;
        z-index: 2160;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized).active,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized).is-active,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized).has-focus {
        z-index: 2170;
    }

    /* Mobil header: uygulama hissi veren sabit üst alan */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header {
        min-height: 64px;
        padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
        border-radius: 0 0 18px 18px;
        background: linear-gradient(180deg, #245fc7 0%, #1f4fa8 100%);
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
        flex-shrink: 0;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-baslik,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-name,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-name {
        max-width: 58vw;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 15px;
        font-weight: 800;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-typing {
        font-size: 12px;
        font-weight: 700;
        opacity: 0.9;
    }

    /* Mesaj gövdesi: tam ekran kullanımda daha ferah */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-mesajlar,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-body,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .messages,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-list {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        padding: 14px 12px 104px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background:
            radial-gradient(circle at top left, rgba(191, 219, 254, 0.38), transparent 32%),
            linear-gradient(180deg, #f6f8fc 0%, #edf2f9 100%);
    }

    /* Mobil mesaj balonları: parmak kullanımına uygun */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .mesaj-alani,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-bubble,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-message {
        max-width: 82%;
        font-size: 13px;
        line-height: 1.45;
    }

    /* Mesaj yazma alanı: mobilde alta sabit ve güvenli alan destekli */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-footer,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 76px;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        background: rgba(248, 251, 255, 0.96);
        border-top: 1px solid rgba(203, 213, 225, 0.82);
        box-shadow: 0 -14px 32px rgba(15, 23, 42, 0.12);
        z-index: 2180;
        backdrop-filter: blur(12px);
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input textarea,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-footer textarea,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-footer input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area textarea,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area textarea,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area input {
        min-height: 44px;
        border-radius: 16px;
        font-size: 14px;
    }

    /* Emoji ve gönder simgelerini mobilde hizala */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input::before,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-footer::before,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area::before,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area::before {
        left: 18px;
        bottom: calc(20px + env(safe-area-inset-bottom));
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-footer::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area::after {
        right: 18px;
        bottom: calc(18px + env(safe-area-inset-bottom));
        width: 34px;
        height: 34px;
        border-radius: 14px;
    }

    /* Açık sohbet yokken alt sohbet barı: bağımlılık hissi veren dock */
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
        position: relative;
        width: auto;
        min-width: 118px;
        max-width: 168px;
        height: 52px;
        padding: 8px 12px 8px 44px;
        border-radius: 18px;
        flex: 0 0 auto;
        transform: translateY(0);
        white-space: nowrap;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized:hover,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized:active {
        transform: translateY(-2px);
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-avatar,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .chat-avatar,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-baslik,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .chat-user-name,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-name {
        max-width: 96px;
        font-size: 12px;
        line-height: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-durum,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-typing {
        font-size: 11px;
        line-height: 12px;
        font-weight: 800;
    }

    /* Yeni mesaj gelen kapalı sohbet mobilde daha belirgin olsun */
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread {
        animation: mobileChatPulse 1.45s ease-in-out infinite;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 24px rgba(59, 130, 246, 0.32), 0 16px 34px rgba(37, 99, 235, 0.24);
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-new-message::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.new-message::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.unread::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized.has-unread::after {
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        font-size: 10px;
        line-height: 13px;
    }

    /* Mobil + sohbet butonu: alt dock ile aynı tasarım ailesi */
    #sohbet-plus {
        position: relative;
        width: 52px;
        min-width: 52px;
        height: 52px;
        border-radius: 18px;
        flex: 0 0 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        background: linear-gradient(180deg, #2f69d2 0%, #285dc1 100%);
        box-shadow: 0 14px 32px rgba(37, 99, 235, 0.22), 0 5px 14px rgba(15, 23, 42, 0.16);
    }

    #sohbet-plus:hover,
    #sohbet-plus:active {
        transform: translateY(-2px);
        background: linear-gradient(180deg, #3474dc 0%, #2b63c8 100%);
    }

    #sohbet-plus-menu {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: calc(72px + env(safe-area-inset-bottom));
        width: auto;
        max-height: min(54vh, 420px);
        overflow-y: auto;
        border-radius: 18px;
        box-shadow: 0 22px 54px rgba(15, 23, 42, 0.24);
    }

    /* Çok sayıda kapalı sohbet varsa yatay kaydırılabilir sekme/dock hissi */
    #ozel-sohbet-bar {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    #ozel-sohbet-bar::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 420px) {
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
        min-width: 104px;
        max-width: 136px;
        padding-right: 10px;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .ozel-sohbet-baslik,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .chat-user-name,
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized .user-name {
        max-width: 76px;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .mesaj-alani,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-bubble,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-message {
        max-width: 86%;
    }
}

@keyframes mobileChatPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: saturate(0.98);
    }

    50% {
        transform: translateY(-2px) scale(1.015);
        filter: saturate(1.08);
    }
}


/* =========================================================
   MOBİL SOHBET DÜZELTME - sadece mobil görünüm
   - Son mesajların sabit yazma alanının altında kalmasını önler
   - Yazıyor bilgisini yalnızca typing class'ı varsa gösterir
   - Mobilde sol üstte görünen toplanma/dock alanını gizler
   Not: Masaüstü kurallara dokunmaz, important kullanılmamıştır.
   ========================================================= */

@media (max-width: 768px) {
    /* Açık sohbet mobilde tam ekran kalsın; içerik sabit input altında ezilmesin */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) {
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-icerik,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-body,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .messages,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-list,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-mesajlar {
        padding-bottom: calc(136px + env(safe-area-inset-bottom));
        scroll-padding-bottom: calc(136px + env(safe-area-inset-bottom));
    }

    /* Sabit input alanını koru; son mesajlar artık arkasında kalmaz */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .input-area,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-input,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .message-input-area {
        position: sticky;
        bottom: 0;
        z-index: 8;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(239, 246, 255, 0), rgba(239, 246, 255, 0.96) 22%, rgba(239, 246, 255, 1));
    }

    /* Mobilde toplanma/dock alanı açık sohbetin üstünde sol üstte görünmesin */
    #ozel-sohbet-bar:has(.ozel-sohbet-kutu:not(.minimized)) .ozel-sohbet-kutu.minimized,
    #ozel-sohbet-bar:has(.ozel-sohbet-kutu:not(.minimized)) #sohbet-plus,
    #ozel-sohbet-bar:has(.ozel-sohbet-kutu:not(.minimized)) #sohbet-plus-menu {
        display: none;
    }

    /* :has desteklemeyen tarayıcılar için: mobilde açık sohbet dışındaki kapalı kartları pasifleştir */
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
        pointer-events: auto;
    }

    /* Durum metni: varsayılan olarak yazıyor gösterme */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-typing {
        opacity: 0;
        visibility: hidden;
        display: none;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header.typing .ozel-sohbet-typing,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .typing .ozel-sohbet-typing {
        opacity: 1;
        visibility: visible;
        display: inline-flex;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum.online,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status.online,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status.online,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-status.online {
        color: #8ff7a7;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum.offline,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status.offline,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status.offline,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-status.offline {
        color: rgba(255, 255, 255, 0.74);
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum.typing,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status.typing,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status.typing,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-status.typing {
        color: #ffd76a;
    }

    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-durum.typing::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-status.typing::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .user-status.typing::after,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .chat-user-status.typing::after {
        content: "Yazıyor...";
    }

    /* Mobilde hatalı birleşik "Yazıyor... Çevrimiçi" hissini azaltmak için typing durumunda diğer statüyü sadeleştir */
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header.typing .ozel-sohbet-status.online,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header.typing .user-status.online,
    #ozel-sohbet-bar .ozel-sohbet-kutu:not(.minimized) .ozel-sohbet-header.typing .chat-user-status.online {
        color: #ffd76a;
    }
}

@media (max-width: 768px) and (not (selector(:has(*)))) {
    /* Eski mobil tarayıcılar için güvenli davranış: kapalı dock alanı açık sohbet tasarımını bozmasın */
    #ozel-sohbet-bar .ozel-sohbet-kutu.minimized {
        display: none;
    }

    #sohbet-plus,
    #sohbet-plus-menu {
        display: none;
    }
}


/* =========================================================
   MOBIL DUZELTME - #sohbet-plus kalinti gizleme
   Sadece mobil ekranda sosyal panel sol üstünde görünen + kalıntısını
   görsel olarak kapatır. Inline display:flex olduğu için display yerine
   boyut/opacity/pointer-events sıfırlaması kullanıldı.
========================================================= */
@media (max-width: 768px) {
    #sohbet-plus,
    body.chat-plus-visible #sohbet-plus,
    body.chat-plus-visible .right-sidebar #sohbet-plus,
    .right-sidebar #sohbet-plus,
    .right-sidebar-visible #sohbet-plus,
    .right-sidebar-visible .right-sidebar #sohbet-plus {
        width: 0;
        min-width: 0;
        max-width: 0;
        height: 0;
        min-height: 0;
        max-height: 0;
        flex: 0 0 0;
        padding: 0;
        margin: 0;
        border: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        transform: scale(0);
        box-shadow: none;
        background: transparent;
    }

    #sohbet-plus::before,
    #sohbet-plus::after,
    #sohbet-plus *,
    .right-sidebar #sohbet-plus::before,
    .right-sidebar #sohbet-plus::after,
    .right-sidebar #sohbet-plus * {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        content: none;
    }

    #sohbet-plus-menu {
        width: 0;
        height: 0;
        max-height: 0;
        padding: 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
        transform: scale(0);
    }
}

/* =========================================================
   Katip Online - İletişim / Destek Merkezi Sayfası
   Bu bölüm yalnızca .ko-support-page kapsamındaki iletişim sayfasını etkiler.
========================================================= */
.ko-support-page {
    background: linear-gradient(180deg, #f7fbff 0%, #f8fafc 48%, #ffffff 100%);
}

.ko-support-page .pd-5 {
    padding: 18px;
}

.ko-support-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 205px;
    padding: 34px 38px;
    margin-bottom: 18px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(239, 247, 255, .98) 0%, rgba(247, 251, 255, .96) 55%, rgba(255, 249, 235, .92) 100%);
    border: 1px solid rgba(124, 170, 234, .22);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
}

.ko-support-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 15%, rgba(96, 165, 250, .12), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(245, 158, 11, .12), transparent 26%);
    pointer-events: none;
}

.ko-support-hero-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
}

.ko-support-eyebrow,
.ko-section-mini-title {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 7px 12px;
    border-radius: 999px;
    background: #edf6ff;
    border: 1px solid #d9ebff;
    color: #3d7dcb;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .01em;
    margin-bottom: 13px;
}

.ko-support-hero h1 {
    color: #0f2a4f;
    font-size: 31px;
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: -0.45px;
    margin-bottom: 12px;
}

.ko-support-hero p {
    max-width: 760px;
    color: #52677f;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 16px;
}

.ko-support-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    color: #5f7288;
    font-size: 12px;
    font-weight: 650;
}

.ko-support-mail-link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dcecff;
    color: #3278d8;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .045);
    transition: all .18s ease;
}

.ko-support-mail-link:hover {
    color: #175cb5;
    transform: translateY(-1px);
}

.ko-support-hero-pattern {
    position: relative;
    z-index: 1;
    width: 250px;
    min-width: 250px;
    height: 140px;
    opacity: .58;
}

.ko-support-hero-pattern span {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(150, 185, 230, .28);
    color: rgba(60, 104, 160, .62);
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}

.ko-support-hero-pattern span:nth-child(1) { left: 24px; top: 20px; }
.ko-support-hero-pattern span:nth-child(2) { left: 78px; top: 42px; }
.ko-support-hero-pattern span:nth-child(3) { left: 132px; top: 18px; }
.ko-support-hero-pattern span:nth-child(4) { left: 50px; top: 86px; }
.ko-support-hero-pattern span:nth-child(5) { left: 106px; top: 96px; }
.ko-support-hero-pattern span:nth-child(6) { left: 174px; top: 62px; }

.ko-support-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.ko-support-stat-card {
    min-height: 96px;
    padding: 20px 20px 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(124, 170, 234, .16);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ko-support-stat-card:hover,
.ko-support-info-panel:hover,
.ko-support-form-panel:hover,
.ko-support-faq-section:hover,
.ko-support-bottom-note:hover {
    transform: translateY(-2px);
    border-color: rgba(91, 143, 214, .28);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .06);
}

.ko-support-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #edf6ff;
    color: #3d7dcb;
    font-size: 11px;
    font-weight: 900;
    border: 1px solid #d9ebff;
}

.ko-support-stat-card strong {
    position: relative;
    display: block;
    color: #0f2a4f;
    font-size: 14px;
    font-weight: 850;
    margin-bottom: 9px;
    padding-bottom: 8px;
}

.ko-support-stat-card strong::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: #b9d9ff;
}

.ko-support-stat-card small {
    display: block;
    color: #63758b;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}

.ko-support-main-row {
    align-items: stretch;
}

.ko-support-info-panel,
.ko-support-form-panel,
.ko-support-faq-section,
.ko-support-bottom-note {
    height: 100%;
    padding: 26px;
    border-radius: 21px;
    background: #ffffff;
    border: 1px solid rgba(124, 170, 234, .16);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ko-support-info-panel h2,
.ko-support-form-panel h2,
.ko-support-faq-section h2 {
    color: #0f2a4f;
    font-size: 22px;
    line-height: 1.28;
    font-weight: 850;
    letter-spacing: -0.3px;
    margin-bottom: 10px;
}

.ko-support-info-panel p,
.ko-support-form-title p,
.ko-support-faq-section p {
    color: #607388;
    font-size: 13px;
    line-height: 1.75;
    margin-bottom: 18px;
}

.ko-support-topic-list {
    display: grid;
    gap: 10px;
    margin: 18px 0 18px;
}

.ko-support-topic-list div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    padding: 10px 12px;
    border-radius: 13px;
    background: #f7fbff;
    border: 1px solid rgba(124, 170, 234, .16);
    color: #334155;
    font-size: 13px;
    font-weight: 750;
}

.ko-support-topic-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #edf6ff;
    color: #3d7dcb;
    font-style: normal;
    font-size: 13px;
    font-weight: 900;
}

.ko-support-note-box {
    display: grid;
    gap: 8px;
    padding: 17px;
    border-radius: 16px;
    background: #fffaf0;
    border: 1px solid rgba(245, 158, 11, .20);
}

.ko-support-note-box strong {
    color: #8a5b08;
    font-size: 13px;
    font-weight: 850;
}

.ko-support-note-box ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 17px;
    list-style: disc;
}

.ko-support-note-box li {
    color: #6b5a36;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 600;
}

.ko-support-form-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.ko-support-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #edf6ff;
    border: 1px solid #d9ebff;
    color: #3d7dcb;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.ko-support-form label {
    display: block;
    color: #263b55;
    font-size: 12px;
    font-weight: 850;
    margin-bottom: 8px;
}

.ko-support-form .form-control {
    width: 100%;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #d5e6fb;
    background: #f8fbff;
    color: #172b44;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 13px;
    box-shadow: none;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.ko-support-form textarea.form-control {
    min-height: 145px;
    height: auto;
    resize: vertical;
    line-height: 1.6;
}

.ko-support-form .form-control::placeholder {
    color: #91a4bb;
}

.ko-support-form .form-control:focus {
    border-color: #6aa7ff;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(106, 167, 255, .13);
}

.ko-support-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #5f9df7 0%, #3f7fd7 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(63, 127, 215, .20);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ko-support-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 13px 24px rgba(63, 127, 215, .25);
    filter: saturate(1.03);
}

.ko-support-trust-row {
    margin-top: 14px;
    padding: 14px 15px;
    border-radius: 13px;
    background: #f8fbff;
    border: 1px dashed rgba(124, 170, 234, .34);
    color: #607388;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 650;
}

.ko-support-faq-section {
    height: auto;
    margin-bottom: 18px;
}

.ko-support-faq-head {
    margin-bottom: 16px;
}

.ko-support-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ko-support-faq-grid details {
    border-radius: 13px;
    background: #f8fbff;
    border: 1px solid rgba(124, 170, 234, .18);
    overflow: hidden;
}

.ko-support-faq-grid summary {
    position: relative;
    cursor: pointer;
    list-style: none;
    padding: 14px 38px 14px 15px;
    color: #233953;
    font-size: 13px;
    font-weight: 850;
}

.ko-support-faq-grid summary::-webkit-details-marker {
    display: none;
}

.ko-support-faq-grid summary::after {
    content: "+";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #4b8fe6;
    font-size: 18px;
    font-weight: 900;
}

.ko-support-faq-grid details[open] summary::after {
    content: "−";
}

.ko-support-faq-grid details p {
    margin: 0;
    padding: 0 15px 15px;
    color: #63758b;
    font-size: 12px;
    line-height: 1.65;
    font-weight: 600;
}

.ko-support-bottom-note {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 20px 24px;
    background: linear-gradient(90deg, #ffffff 0%, #f8fbff 100%);
}

.ko-support-bottom-note strong {
    color: #0f2a4f;
    font-size: 15px;
    font-weight: 850;
}

.ko-support-bottom-note span {
    color: #607388;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 650;
    text-align: right;
}

@media (max-width: 1199px) {
    .ko-support-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ko-support-hero-pattern {
        display: none;
    }
}

@media (max-width: 768px) {
    .ko-support-page .pd-5 {
        padding: 12px;
    }

    .ko-support-hero {
        min-height: unset;
        padding: 26px 20px;
        border-radius: 18px;
    }

    .ko-support-hero h1 {
        font-size: 25px;
    }

    .ko-support-hero p {
        font-size: 13px;
    }

    .ko-support-stats,
    .ko-support-faq-grid {
        grid-template-columns: 1fr;
    }

    .ko-support-info-panel,
    .ko-support-form-panel,
    .ko-support-faq-section,
    .ko-support-bottom-note {
        padding: 20px;
        border-radius: 18px;
    }

    .ko-support-bottom-note {
        display: block;
    }

    .ko-support-bottom-note span {
        display: block;
        margin-top: 7px;
        text-align: left;
    }

    .ko-support-form-title {
        align-items: flex-start;
    }
}

/* =========================================================
   Katip Online - İletişim Sayfası Son Dokunuş
   Sadece hero/header ve iletişim formu bölümünü önceki tasarım çizgisine yaklaştırır.
========================================================= */
.ko-support-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 255px;
    margin-bottom: 22px;
    padding: 38px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 84% 18%, rgba(255, 213, 128, .28), transparent 26%),
        radial-gradient(circle at 12% 12%, rgba(106, 167, 255, .18), transparent 28%),
        linear-gradient(135deg, #f6faff 0%, #edf6ff 54%, #fffaf0 100%);
    border: 1px solid rgba(111, 157, 216, .18);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
}

.ko-support-hero::before {
    content: none;
}

.ko-support-hero::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -85px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(106, 167, 255, .12);
}

.ko-support-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.ko-support-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4f7fbf;
    background: rgba(106, 167, 255, .12);
    border: 1px solid rgba(106, 167, 255, .16);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
    margin-bottom: 0;
}

.ko-support-hero h1 {
    margin: 16px 0 12px;
    color: #172554;
    font-size: 36px;
    line-height: 1.18;
    font-weight: 900;
    letter-spacing: -.03em;
}

.ko-support-hero p {
    max-width: 700px;
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}

.ko-support-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.ko-support-mail-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 9px 14px;
    color: #2563eb;
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .08);
    font-size: 13px;
    font-weight: 900;
}

.ko-support-mail-link:hover {
    color: #1d4ed8;
    transform: translateY(-1px);
}

.ko-support-hero-pattern {
    display: none;
}

.ko-support-hero-visual {
    position: relative;
    z-index: 2;
    width: 220px;
    min-width: 220px;
    height: 170px;
}

.ko-support-visual-card {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(106, 167, 255, .18);
    box-shadow: 0 16px 32px rgba(15, 23, 42, .08);
    font-size: 32px;
}

.ko-support-visual-card.card-one {
    left: 14px;
    top: 52px;
}

.ko-support-visual-card.card-two {
    right: 18px;
    top: 10px;
}

.ko-support-visual-card.card-three {
    right: 58px;
    bottom: 6px;
}

.ko-support-form-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.ko-support-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    min-width: 56px;
    height: 56px;
    border-radius: 19px;
    background: #eef6ff;
    border: 0;
    color: inherit;
    font-size: 25px;
    font-weight: normal;
    letter-spacing: normal;
}

.ko-support-form-title h2 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 900;
}

.ko-support-form label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.ko-support-form .form-control {
    width: 100%;
    height: 50px;
    border-radius: 15px;
    border: 1px solid #dceafe;
    background: #f8fbff;
    color: #1e293b;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    box-shadow: none;
}

.ko-support-form textarea.form-control {
    height: auto;
    min-height: 150px;
    resize: vertical;
    padding-top: 14px;
    line-height: 1.6;
}

.ko-support-form .form-control::placeholder {
    color: #94a3b8;
}

.ko-support-form .form-control:focus {
    border-color: #93c5fd;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(147, 197, 253, .22);
}

.ko-support-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #6aa7ff, #4f8ef7);
    color: #ffffff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 14px 30px rgba(79, 142, 247, .20);
    transition: all .22s ease;
    cursor: pointer;
}

.ko-support-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(79, 142, 247, .26);
    filter: none;
}

.ko-support-trust-row {
    display: grid;
    gap: 8px;
    margin-top: 16px;
    padding: 15px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px dashed rgba(106, 167, 255, .24);
}

.ko-support-trust-row span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .ko-support-hero {
        align-items: flex-start;
        padding: 30px;
    }

    .ko-support-hero-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .ko-support-hero {
        min-height: auto;
        padding: 24px 20px;
        border-radius: 22px;
    }

    .ko-support-hero h1 {
        font-size: 27px;
    }

    .ko-support-hero p {
        font-size: 14px;
    }

    .ko-support-form-icon {
        width: 48px;
        min-width: 48px;
        height: 48px;
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .ko-support-hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .ko-support-mail-link {
        width: 100%;
        justify-content: center;
    }
}


/* Katip Online - Sıralamalar Sayfası */
.ko-ranking-page{
    --ko-rank-ink:#20384f;
    --ko-rank-muted:#617789;
    --ko-rank-line:#dce8f1;
    --ko-rank-soft:#f6fbff;
    --ko-rank-cyan:#3aaec3;
    --ko-rank-teal:#62c6b7;
    --ko-rank-gold:#f6c85f;
    color:var(--ko-rank-ink);
}

.ko-ranking-page *{box-sizing:border-box;}

.ko-ranking-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:142px;
    margin:10px 8px 14px;
    padding:18px 24px;
    border-radius:28px;
    border:1px solid #d3eaf3;
    background:radial-gradient(circle at 90% 10%, rgba(98,198,183,.16), transparent 30%), linear-gradient(135deg, #eaf8ff 0%, #fff8de 62%, #ffffff 100%);
    box-shadow:0 18px 42px rgba(31,48,68,.10);
    overflow:hidden;
    position:relative;
}

.ko-ranking-hero::before,
.ko-ranking-hero::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.ko-ranking-hero::before{
    width:190px;
    height:190px;
    right:-86px;
    top:-88px;
    background:rgba(53,169,182,.13);
}

.ko-ranking-hero::after{
    width:170px;
    height:170px;
    left:-86px;
    bottom:-102px;
    background:rgba(255,202,58,.18);
}

.ko-ranking-hero-content,
.ko-ranking-hero-side{
    position:relative;
    z-index:2;
}

.ko-ranking-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
    padding:6px 12px;
    border-radius:999px;
    border:1px solid #d8edf3;
    background:rgba(255,255,255,.88);
    color:#31566f;
    font-size:12px;
    font-weight:900;
    box-shadow:0 6px 14px rgba(31,48,68,.06);
}

.ko-ranking-hero h1{
    margin:0;
    color:var(--ko-rank-ink);
    font-size:29px;
    line-height:1.15;
    font-weight:950;
    letter-spacing:-.45px;
}

.ko-ranking-hero p{
    max-width:760px;
    margin:7px 0 11px;
    color:#536879;
    font-size:14.5px;
    line-height:1.6;
    font-weight:600;
}

.ko-ranking-hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.ko-ranking-hero-tags span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 11px;
    border-radius:13px;
    border:1px solid #e2eef5;
    background:#fff;
    color:#365a72;
    font-size:12px;
    font-weight:850;
    box-shadow:0 6px 14px rgba(31,48,68,.055);
}

.ko-ranking-hero-side{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:10px;
    min-width:205px;
}

.ko-ranking-podium{
    width:56px;
    border-radius:18px 18px 12px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:950;
    box-shadow:0 16px 30px rgba(31,48,68,.14);
    border:4px solid rgba(255,255,255,.78);
    position:relative;
}

.ko-ranking-podium span{font-size:22px;}
.ko-ranking-podium i{position:absolute;top:-24px;color:#f4bc3f;font-size:22px;filter:drop-shadow(0 5px 8px rgba(31,48,68,.15));}
.ko-rank-1{height:90px;background:linear-gradient(145deg,#2f819a,#62c6b7);}
.ko-rank-2{height:70px;background:linear-gradient(145deg,#7d8b99,#bfc8d2);}
.ko-rank-3{height:61px;background:linear-gradient(145deg,#bc7b41,#d99a55);}

.ko-ranking-ad{margin:14px 8px 18px;}

.ko-ranking-ad-slot{
    min-height:100px;
    border:1px solid #dce8f1;
    border-radius:22px;
    background:linear-gradient(135deg,#eef4f8 0%,#f6f9fb 54%,#ffffff 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.78), 0 10px 24px rgba(38,56,78,.055);
    overflow:hidden;
}

.ko-ranking-leaderboard-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:16px;
    align-items:stretch;
    margin:0 8px 18px;
}

.ko-ranking-top-section,
.ko-ranking-table-card,
.ko-ranking-guide,
.ko-ranking-user-card{
    border:1px solid #e1edf4;
    border-radius:26px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbfd 100%);
    box-shadow:0 14px 32px rgba(31,48,68,.065);
    overflow:hidden;
}

.ko-ranking-table-card,
.ko-ranking-guide{margin:0 8px 18px;}

.ko-ranking-section-head,
.ko-ranking-table-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:16px 22px;
    border-bottom:1px solid #e4eef5;
    background:linear-gradient(135deg,#f8fcff 0%,#eef8fb 100%);
}

.ko-ranking-section-head span,
.ko-ranking-table-head span,
.ko-ranking-guide-head span,
.ko-ranking-user-copy span{
    display:block;
    color:#607789;
    font-size:12.5px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.35px;
    margin-bottom:4px;
}

.ko-ranking-section-head h2,
.ko-ranking-table-head h2,
.ko-ranking-guide-head h2{
    color:var(--ko-rank-ink);
    font-size:23px;
    line-height:1.25;
    font-weight:950;
    letter-spacing:-.25px;
}

.ko-ranking-section-head small,
.ko-ranking-table-head small{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#5f778c;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.ko-ranking-top-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    padding:12px;
}

.ko-ranking-top-card{
    min-height:150px;
    border:1px solid #e4eef5;
    border-radius:22px;
    background:#fff;
    box-shadow:0 10px 24px rgba(31,48,68,.055);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px 10px;
    position:relative;
    overflow:hidden;
}

.ko-ranking-top-card::before{
    content:"★";
    position:absolute;
    right:18px;
    top:12px;
    color:rgba(49,86,111,.10);
    font-size:24px;
    font-weight:900;
}

.ko-ranking-top-card::after{
    content:"";
    position:absolute;
    right:-46px;
    bottom:-56px;
    width:104px;
    height:104px;
    border-radius:50%;
    background:rgba(53,169,182,.08);
}

.ko-ranking-top-card.ko-first{background:linear-gradient(180deg,#fff8df 0%,#ffffff 70%);border-color:#f2dfa2;}
.ko-ranking-top-card.ko-second{background:linear-gradient(180deg,#f8f9fb 0%,#ffffff 70%);border-color:#d9e1e8;}
.ko-ranking-top-card.ko-third{background:linear-gradient(180deg,#fff4ec 0%,#ffffff 70%);border-color:#f0d0b2;}
.ko-ranking-top-card.ko-fourth{background:linear-gradient(180deg,#eefaff 0%,#ffffff 72%);border-color:#cfeaf2;}
.ko-ranking-top-card.ko-fifth{background:linear-gradient(180deg,#f1fbf8 0%,#ffffff 72%);border-color:#d4eee7;}

.ko-top-rank{
    position:absolute;
    top:11px;
    left:11px;
    min-width:34px;
    height:28px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#253d54;
    font-size:12px;
    font-weight:950;
    box-shadow:0 7px 16px rgba(31,48,68,.08);
    z-index:2;
}

.ko-top-avatar{
    width:84px;
    height:84px;
    border-radius:50%;
    padding:4px;
    background:#fff;
    box-shadow:0 10px 22px rgba(31,48,68,.12);
    margin-bottom:7px;
    position:relative;
    z-index:2;
    overflow:hidden;
}

.ko-top-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.ko-avatar-fallback{
    width:100%;
    height:100%;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eef8fb;
    color:#327f99;
}

.ko-ranking-top-card strong{
    color:#263f55;
    font-size:15.8px;
    line-height:1.2;
    font-weight:950;
    position:relative;
    z-index:2;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ko-top-rutbe{
    margin-top:4px;
    color:#607789;
    font-size:12px;
    font-weight:800;
    position:relative;
    z-index:2;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ko-top-point{
    margin-top:6px;
    padding:5px 11px;
    border-radius:999px;
    border:1px solid #dce8f1;
    background:#ffffff;
    color:#31566f;
    font-size:12px;
    font-weight:950;
    position:relative;
    z-index:2;
}

.ko-skeleton{
    background:linear-gradient(90deg,#f6fbff 25%,#eef5fa 37%,#f6fbff 63%);
    background-size:400% 100%;
    animation:koRankSkeleton 1.4s ease infinite;
}

@keyframes koRankSkeleton{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

.ko-ranking-empty{
    grid-column:1/-1;
    padding:22px;
    border:1px solid #e4eef5;
    border-radius:18px;
    color:#607789;
    background:#fff;
    text-align:center;
    font-weight:800;
}

.ko-ranking-user-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:20px;
    background:linear-gradient(135deg,#f8fcff 0%,#fffdf5 100%);
}

.ko-ranking-user-main{
    display:flex;
    align-items:center;
    gap:14px;
}

.ko-ranking-user-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(145deg,#24708c,#48b8bf);
    color:#fff;
    font-size:26px;
    box-shadow:0 12px 24px rgba(31,48,68,.13);
    flex:0 0 auto;
    overflow:hidden;
    padding:4px;
}

.ko-ranking-user-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:16px;
    border:2px solid rgba(255,255,255,.86);
}

.ko-ranking-user-copy{flex:1;min-width:0;}
.ko-ranking-user-copy strong{display:block;color:#20384f;font-size:21px;font-weight:950;line-height:1.18;}
.ko-ranking-user-copy small{display:block;margin-top:4px;color:#607789;font-size:13px;font-weight:750;line-height:1.35;}

.ko-ranking-user-stats{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.ko-ranking-user-stat{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:11px 13px;
    border:1px solid #dce8f1;
    border-radius:16px;
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 18px rgba(31,48,68,.045);
}

.ko-ranking-user-stat span{
    color:#607789;
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.35px;
}

.ko-ranking-user-stat strong{
    color:#20384f;
    font-size:16px;
    line-height:1.25;
    font-weight:950;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:right;
}

.ko-ranking-user-stat-soft{background:linear-gradient(135deg,#eefaff 0%,#fffdf5 100%);}

.ko-ranking-user-tip{
    margin:2px 0 0;
    padding:13px 14px;
    border:1px solid #dce8f1;
    border-radius:16px;
    background:rgba(255,255,255,.72);
    color:#526879;
    font-size:13px;
    line-height:1.55;
    font-weight:700;
}

.ko-ranking-table-wrap{padding:16px;}

.ko-ranking-table{
    border-collapse:separate;
    border-spacing:0 8px;
}

.ko-ranking-table thead th{
    color:#4f6b80;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:.3px;
    font-weight:950;
    border:0;
    background:#f8fbfd;
    padding:14px 16px;
}

.ko-ranking-table tbody tr{
    background:#ffffff;
    box-shadow:0 8px 18px rgba(38,56,78,.045);
    transition:transform .22s ease, box-shadow .22s ease;
}

.ko-ranking-table tbody tr:hover{
    transform:translateY(-1px);
    box-shadow:0 13px 26px rgba(38,56,78,.10);
}

.ko-ranking-table tbody td{
    border-top:1px solid #e8eef5;
    border-bottom:1px solid #e8eef5;
    color:#263b4f;
    font-size:15px;
    font-weight:800;
    padding:10px 16px;
}

.ko-ranking-table tbody td:first-child{
    border-left:1px solid #e8eef5;
    border-radius:16px 0 0 16px;
    font-weight:950;
    color:#31566f;
}

.ko-ranking-table tbody td:first-child::before{content:"#";opacity:.65;margin-right:1px;}

.ko-ranking-table tbody td:last-child{
    border-right:1px solid #e8eef5;
    border-radius:0 16px 16px 0;
}

.ko-ranking-table tbody img{
    width:44px;
    height:44px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 4px 10px rgba(34,54,74,.10);
}

.ko-ranking-table tbody td:nth-child(5) img{
    width:38px;
    height:38px;
}

.ko-ranking-table tbody td:nth-child(6) .btn,
.ko-ranking-table tbody td:nth-child(6) a{
    border-radius:10px;
    font-size:12px;
    font-weight:850;
}

.ko-ranking-table tbody tr.ko-ranking-current-user{
    background:linear-gradient(135deg,#eefaff 0%,#ffffff 78%);
    box-shadow:inset 5px 0 0 #3aaec3, 0 10px 24px rgba(38,56,78,.09);
}

.ko-ranking-page .dataTables_wrapper .dataTables_filter label,
.ko-ranking-page .dataTables_wrapper .dataTables_length label{
    color:#4f6b80;
    font-size:14px;
    font-weight:800;
}

.ko-ranking-page .dataTables_wrapper .dataTables_filter input,
.ko-ranking-page .dataTables_wrapper .dataTables_length select{
    border:1px solid #dce8f1;
    border-radius:12px;
    background:#fff;
    color:#263b4f;
    font-size:14px;
    box-shadow:none;
}

.ko-ranking-page .dataTables_wrapper .dataTables_info{
    color:#607789;
    font-size:14px;
    font-weight:700;
}

.ko-ranking-page .page-item.active .page-link{
    background:#327f99;
    border-color:#327f99;
}

.ko-ranking-page .page-link{
    color:#31566f;
    border-color:#dce8f1;
    border-radius:10px;
    margin:0 2px;
    font-weight:700;
}

.ko-ranking-guide{
    padding:22px;
}

.ko-ranking-guide-head{
    max-width:880px;
    margin:0 auto 18px;
    text-align:center;
}

.ko-ranking-guide-head p{
    margin:8px auto 0;
    color:#607789;
    font-size:14.5px;
    line-height:1.7;
    font-weight:600;
}

.ko-ranking-guide-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.ko-ranking-guide-grid > div{
    padding:17px;
    border:1px solid #e4eef5;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 18px rgba(31,48,68,.045);
}

.ko-ranking-guide-grid i{
    width:46px;
    height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    margin-bottom:12px;
    background:linear-gradient(135deg,#e9f8ff,#fff8df);
    color:#31566f;
    font-size:18px;
}

.ko-ranking-guide-grid h3{
    color:#253d54;
    font-size:17px;
    font-weight:950;
    margin-bottom:8px;
}

.ko-ranking-guide-grid p{
    margin:0;
    color:#607789;
    font-size:13.5px;
    line-height:1.65;
    font-weight:600;
}

.ko-ranking-rise-card{
    margin-top:15px;
    padding:17px 18px;
    border-radius:22px;
    border:1px solid #dce8f1;
    background:linear-gradient(135deg,#eefaff 0%,#fff8df 58%,#ffffff 100%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.ko-ranking-rise-card span{
    display:block;
    color:#607789;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.35px;
    margin-bottom:4px;
}

.ko-ranking-rise-card strong{
    display:block;
    color:#20384f;
    font-size:18px;
    font-weight:950;
}

.ko-ranking-rise-card p{
    margin:5px 0 0;
    color:#607789;
    font-size:13px;
    font-weight:650;
}

.ko-ranking-rise-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
    padding:12px 15px;
    border-radius:16px;
    background:linear-gradient(135deg,#2f819a,#48b7a6);
    color:#fff;
    font-weight:950;
    box-shadow:0 12px 26px rgba(47,129,154,.22);
}

.ko-ranking-rise-btn:hover{color:#fff;transform:translateY(-1px);}

@media (max-width: 1400px){
    .ko-ranking-leaderboard-wrap{grid-template-columns:1fr;}
    .ko-ranking-user-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);align-items:center;}
    .ko-ranking-user-stats{grid-column:2;grid-row:1 / span 2;}
    .ko-ranking-user-tip{grid-column:1;}
}

@media (max-width: 1199px){
    .ko-ranking-top-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (max-width: 991px){
    .ko-ranking-hero{flex-direction:column;align-items:flex-start;}
    .ko-ranking-hero-side{width:100%;justify-content:flex-start;}
    .ko-ranking-top-grid,.ko-ranking-guide-grid{grid-template-columns:1fr;}
    .ko-ranking-section-head,.ko-ranking-table-head{align-items:flex-start;flex-direction:column;}
    .ko-ranking-user-card{display:flex;align-items:stretch;flex-direction:column;}
    .ko-ranking-section-head small,.ko-ranking-table-head small{white-space:normal;}
    .ko-ranking-rise-card{align-items:flex-start;flex-direction:column;}
}

@media (max-width: 575px){
    .ko-ranking-hero{margin:8px 0 14px;padding:20px;border-radius:22px;}
    .ko-ranking-hero h1{font-size:26px;}
    .ko-ranking-ad,.ko-ranking-table-card,.ko-ranking-guide,.ko-ranking-leaderboard-wrap{margin-left:0;margin-right:0;}
    .ko-ranking-table-wrap{padding:10px;}
    .ko-ranking-user-main{align-items:flex-start;}
    .ko-ranking-user-stat{align-items:flex-start;flex-direction:column;}
    .ko-ranking-user-stat strong{text-align:left;}
}


/* Sıralamalar sayfası son rötuşları */
.ko-ranking-page .ko-ranking-ad-slot{
    background:linear-gradient(135deg,#edf3f7 0%,#f4f8fb 55%,#ffffff 100%);
    border-color:#d7e4ee;
}

.ko-ranking-page .ko-ranking-section-head small,
.ko-ranking-page .ko-ranking-table-head small{
    color:#4f6b80;
    font-size:13.5px;
    font-weight:850;
}

.ko-ranking-page .ko-top-medal{
    position:absolute;
    right:13px;
    top:11px;
    width:30px;
    height:30px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.88);
    color:#d4a13b;
    box-shadow:0 8px 18px rgba(31,48,68,.075);
    z-index:3;
}

.ko-ranking-page .ko-ranking-top-card.ko-fourth .ko-top-medal,
.ko-ranking-page .ko-ranking-top-card.ko-fifth .ko-top-medal{
    color:#327f99;
}

.ko-ranking-page .ko-top-avatar img,
.ko-ranking-page .ko-top-avatar .border-radius-100,
.ko-ranking-page .ko-top-avatar [class*="border-radius"]{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    max-width:100%;
    object-fit:cover;
    border-radius:50%;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    object-fit:cover;
    border-radius:16px;
    box-shadow:none;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table thead th{
    color:#3f5f76;
    font-size:15.5px;
    font-weight:950;
    padding:15px 18px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td{
    color:#20384f;
    font-size:15.5px;
    font-weight:850;
    padding:11px 18px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(3),
.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(4){
    font-size:16px;
    font-weight:900;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(6) a,
.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(6) .btn{
    background:linear-gradient(135deg,#327f99,#48b7a6);
    border:0;
    color:#fff;
    border-radius:12px;
    padding:7px 12px;
    font-size:12.5px;
    font-weight:900;
}

@media (max-width: 1400px){
    .ko-ranking-page .ko-ranking-user-icon{width:66px;height:66px;}
}

/* Sıralamalar - lider kartı avatar oran düzeltmesi */
.ko-ranking-page .ko-top-avatar{
    width:96px;
    height:96px;
    padding:3px;
}

.ko-ranking-page .ko-top-avatar > *,
.ko-ranking-page .ko-top-avatar a,
.ko-ranking-page .ko-top-avatar div,
.ko-ranking-page .ko-top-avatar span,
.ko-ranking-page .ko-top-avatar .avatar,
.ko-ranking-page .ko-top-avatar .user-icon{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    display:block;
    border-radius:50%;
}

.ko-ranking-page .ko-top-avatar img,
.ko-ranking-page .ko-top-avatar .border-radius-100,
.ko-ranking-page .ko-top-avatar [class*="border-radius"]{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:cover;
    border-radius:50%;
    box-shadow:none;
}

.ko-ranking-page .ko-avatar-fallback{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:82px;
    height:82px;
    padding:4px;
}

.ko-ranking-page .ko-ranking-user-icon > *,
.ko-ranking-page .ko-ranking-user-icon a,
.ko-ranking-page .ko-ranking-user-icon div,
.ko-ranking-page .ko-ranking-user-icon span{
    width:100%;
    height:100%;
    display:block;
    border-radius:18px;
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img{
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    max-width:100%;
    max-height:100%;
    object-fit:cover;
    border-radius:18px;
    box-shadow:none;
}

@media (max-width: 1400px){
    .ko-ranking-page .ko-top-avatar{width:88px;height:88px;}
    .ko-ranking-page .ko-ranking-user-icon{width:74px;height:74px;}
}

/* Sıralamalar - son profesyonel rötuşlar */
.ko-ranking-page .ko-ranking-top-card{
    min-height:126px;
    padding:7px 9px;
}

.ko-ranking-page .ko-top-avatar{
    width:78px;
    height:78px;
    margin-bottom:5px;
}

.ko-ranking-page .ko-ranking-top-card strong{
    font-size:15px;
    line-height:1.14;
}

.ko-ranking-page .ko-top-rutbe{
    margin-top:2px;
    font-size:11.3px;
}

.ko-ranking-page .ko-top-point{
    margin-top:5px;
    padding:6px 13px;
    color:#20384f;
    font-size:14px;
    font-weight:950;
    background:linear-gradient(135deg,#ffffff 0%,#eefaff 100%);
    border-color:#bfdce8;
    box-shadow:0 7px 15px rgba(31,48,68,.07);
}

.ko-ranking-page .ko-ranking-user-stats{
    grid-template-columns:1fr;
    gap:11px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table thead th{
    color:#365a72;
    font-size:16.2px;
    font-weight:850;
    letter-spacing:.06px;
    padding:13px 17px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td{
    color:#334b60;
    font-size:14.4px;
    font-weight:650;
    padding:9px 17px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(3),
.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(4){
    color:#20384f;
    font-size:14.8px;
    font-weight:760;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:first-child{
    font-weight:800;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody img{
    width:42px;
    height:42px;
}

.ko-ranking-page table#dataTableExample3.ko-ranking-table tbody td:nth-child(5) img{
    width:36px;
    height:36px;
}

.ko-ranking-ranks{
    margin:0 8px 18px;
}

.rutbe-section-modern{
    background:linear-gradient(135deg,#f8fcff 0%,#fffdf5 100%);
    border:1px solid #e0ebf3;
    border-radius:26px;
    padding:18px 12px 14px;
    box-shadow:0 14px 32px rgba(31,48,68,.065);
    overflow:hidden;
}

.rutbe-section-title{
    text-align:center;
    margin-bottom:10px;
}

.rutbe-section-title span{
    display:block;
    color:#20384f;
    font-size:21px;
    font-weight:950;
    letter-spacing:.25px;
}

.rutbe-section-title small{
    display:block;
    color:#607789;
    font-size:12.5px;
    font-weight:750;
    margin-top:3px;
}

.rutbe-scroll-container{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:4px 3px 8px;
}

.rutbe-scroll-container::-webkit-scrollbar{height:6px;}
.rutbe-scroll-container::-webkit-scrollbar-thumb{background:#cfdce6;border-radius:10px;}

.rutbe-wrapper{
    display:flex;
    gap:10px;
    padding:0 5px;
    min-width:max-content;
}

.rutbe-card{
    width:125px;
    min-height:132px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow:hidden;
    border-radius:20px;
    border:1px solid #e0ebf3;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 22px rgba(31,48,68,.07);
    padding:10px 5px 13px;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    isolation:isolate;
}

.rutbe-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-85%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
    transform:skewX(-22deg);
    transition:left .55s ease;
    z-index:1;
}

.rutbe-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 30px rgba(31,48,68,.13);
    border-color:#b7dfea;
}

.rutbe-card:hover::before{left:140%;}

.rank-badge-wrapper,
.rank-info,
.rank-progress-bar{
    position:relative;
    z-index:2;
}

.rank-badge-wrapper img{
    width:70px;
    height:60px;
    object-fit:contain;
    margin-bottom:5px;
    filter:drop-shadow(0 8px 12px rgba(31,48,68,.12));
    transition:all .28s ease;
}

.rutbe-card:hover .rank-badge-wrapper img{
    transform:scale(1.08) rotate(-3deg);
    filter:drop-shadow(0 12px 16px rgba(31,48,68,.18));
}

.rank-name{
    display:block;
    color:#263b4f;
    font-size:12.5px;
    font-weight:950;
    letter-spacing:.12px;
    text-transform:uppercase;
    line-height:1.2;
}

.rank-points{
    display:inline-block;
    margin-top:5px;
    background:#f4f8fb;
    border:1px solid #e1ebf2;
    border-radius:999px;
    padding:4px 8px;
    color:#587086;
    font-size:11px;
    font-weight:850;
}

.rank-progress-bar{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:5px;
}

.bg-gold{background:linear-gradient(90deg,#ffd700,#ffae00);}
.bg-silver{background:linear-gradient(90deg,#c0c0c0,#8e8e8e);}

@media (max-width:575px){
    .ko-ranking-ranks{margin-left:0;margin-right:0;}
    .ko-ranking-page .ko-top-avatar{width:74px;height:74px;}
}

/* Sıralamalar - son kullanıcı kartı ve liderlik mikro rötuşları */
.ko-ranking-page .ko-ranking-top-section{
    display:flex;
    flex-direction:column;
}

.ko-ranking-page .ko-ranking-top-grid{
    flex:1;
    align-items:center;
}

.ko-ranking-page .ko-ranking-top-card{
    min-height:122px;
    padding:7px 8px;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ko-ranking-page .ko-ranking-top-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(31,48,68,.11);
}

.ko-ranking-page .ko-top-avatar{
    transition:transform .22s ease, box-shadow .22s ease;
}

.ko-ranking-page .ko-ranking-top-card:hover .ko-top-avatar{
    transform:scale(1.03);
}

.ko-ranking-page .ko-top-point{
    font-size:14.4px;
    font-weight:950;
    letter-spacing:.02em;
    padding:6px 14px;
}

.ko-ranking-page .ko-first .ko-top-point{
    color:#8a5b00;
    background:linear-gradient(135deg,#fffaf0 0%,#fff0c7 100%);
    border-color:#f0d58d;
}

.ko-ranking-page .ko-second .ko-top-point{
    color:#405164;
    background:linear-gradient(135deg,#ffffff 0%,#edf2f6 100%);
    border-color:#d6e0e8;
}

.ko-ranking-page .ko-third .ko-top-point{
    color:#a04418;
    background:linear-gradient(135deg,#fff7f1 0%,#ffe0cf 100%);
    border-color:#efc5ae;
}

.ko-ranking-page .ko-fourth .ko-top-point{
    color:#1d6394;
    background:linear-gradient(135deg,#f2fbff 0%,#dcefff 100%);
    border-color:#b7d8f2;
}

.ko-ranking-page .ko-fifth .ko-top-point{
    color:#237246;
    background:linear-gradient(135deg,#f4fff8 0%,#dff5e8 100%);
    border-color:#bde2cc;
}

.ko-ranking-page .ko-ranking-user-card{
    padding:16px 17px 17px;
}

.ko-ranking-page .ko-ranking-user-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px;
    gap:14px;
    align-items:center;
    margin-bottom:15px;
}

.ko-ranking-page .ko-ranking-user-copy span{
    display:block;
    color:#526f84;
    font-size:14px;
    font-weight:900;
    letter-spacing:.1px;
    text-transform:none;
    margin-bottom:8px;
}

.ko-ranking-page .ko-ranking-user-copy em{
    display:block;
    color:#526f84;
    font-size:13px;
    font-weight:850;
    font-style:normal;
    margin-bottom:4px;
}

.ko-ranking-page .ko-ranking-user-copy strong{
    display:block;
    color:#17334f;
    font-size:26px;
    line-height:1.05;
    font-weight:950;
    letter-spacing:-.35px;
}

.ko-ranking-page .ko-ranking-user-copy small{
    display:block;
    color:#526f84;
    font-size:12.5px;
    font-weight:800;
    margin-top:6px;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:92px;
    height:92px;
    border-radius:28px;
    padding:5px;
    background:linear-gradient(145deg,#238299,#46b9bd);
    box-shadow:0 14px 26px rgba(31,48,68,.14);
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:23px;
    display:block;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-user-icon i{
    font-size:42px;
}

.ko-ranking-page .ko-ranking-user-tip{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:13px 14px;
    margin-top:14px;
    background:linear-gradient(135deg,#f6fbff 0%,#fffdf4 100%);
}

.ko-ranking-page .ko-ranking-user-tip p{
    margin:0;
    color:#526879;
    font-size:13px;
    line-height:1.55;
    font-weight:750;
}

.ko-ranking-page .ko-ranking-tip-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:13px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #e1ebf2;
    box-shadow:0 8px 16px rgba(31,48,68,.06);
    font-size:18px;
}

@media (max-width: 1400px){
    .ko-ranking-page .ko-ranking-user-hero{
        grid-template-columns:minmax(0,1fr) 82px;
    }
    .ko-ranking-page .ko-ranking-user-icon{
        width:82px;
        height:82px;
        border-radius:24px;
    }
    .ko-ranking-page .ko-ranking-user-icon img,
    .ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img{
        border-radius:20px;
    }
    .ko-ranking-page .ko-ranking-user-copy strong{
        font-size:23px;
    }
}

@media (max-width: 991px){
    .ko-ranking-page .ko-ranking-user-hero{
        grid-template-columns:minmax(0,1fr) 78px;
    }
    .ko-ranking-page .ko-ranking-user-icon{
        width:78px;
        height:78px;
    }
}


/* Sıralamalar - mockup oranlarına yakın son liderlik düzeni */
.ko-ranking-page .ko-ranking-leaderboard-wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:16px;
    align-items:stretch;
    margin-bottom:14px;
}

.ko-ranking-page .ko-ranking-top-section{
    min-height:430px;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.ko-ranking-page .ko-ranking-section-head{
    min-height:92px;
    padding:24px 28px 20px;
    align-items:flex-start;
}

.ko-ranking-page .ko-ranking-section-head small{
    font-size:14px;
    font-weight:850;
    color:#4c6579;
    padding-top:12px;
}

.ko-ranking-page .ko-ranking-top-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    align-items:center;
    padding:24px 26px 30px;
}

.ko-ranking-page .ko-ranking-top-card{
    min-height:268px;
    height:268px;
    padding:22px 14px 18px;
    border-radius:18px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ko-ranking-page .ko-ranking-top-card:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 36px rgba(31,48,68,.13);
}

.ko-ranking-page .ko-top-rank{
    top:18px;
    left:16px;
    width:28px;
    height:28px;
    font-size:13px;
    font-weight:950;
}

.ko-ranking-page .ko-top-medal{
    top:18px;
    right:18px;
    width:38px;
    height:38px;
    font-size:17px;
}

.ko-ranking-page .ko-first .ko-top-rank,
.ko-ranking-page .ko-second .ko-top-rank,
.ko-ranking-page .ko-third .ko-top-rank,
.ko-ranking-page .ko-fourth .ko-top-rank,
.ko-ranking-page .ko-fifth .ko-top-rank{
    border-radius:50%;
}

.ko-ranking-page .ko-top-avatar{
    width:104px;
    height:104px;
    margin:18px auto 16px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 16px 30px rgba(31,48,68,.14);
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease;
}

.ko-ranking-page .ko-ranking-top-card:hover .ko-top-avatar{
    transform:scale(1.03);
}

.ko-ranking-page .ko-top-avatar > *,
.ko-ranking-page .ko-top-avatar a,
.ko-ranking-page .ko-top-avatar div,
.ko-ranking-page .ko-top-avatar span,
.ko-ranking-page .ko-top-avatar .avatar,
.ko-ranking-page .ko-top-avatar .user-icon{
    width:100%;
    height:100%;
    display:block;
}

.ko-ranking-page .ko-top-avatar img,
.ko-ranking-page .ko-top-avatar .border-radius-100,
.ko-ranking-page .ko-top-avatar [class*="border-radius"]{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-top-card strong{
    font-size:17px;
    line-height:1.2;
    font-weight:950;
    margin:0 0 5px;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ko-ranking-page .ko-top-rutbe{
    font-size:13px;
    font-weight:900;
    margin-bottom:16px;
    color:#8956c9;
}

.ko-ranking-page .ko-top-rutbe::before{
    content:'♦';
    margin-right:5px;
    color:#a774df;
    font-size:12px;
}

.ko-ranking-page .ko-top-point{
    margin-top:auto;
    font-size:16px;
    line-height:1;
    font-weight:950;
    letter-spacing:.01em;
    min-width:128px;
    padding:11px 18px;
    border-radius:999px;
    text-align:center;
}

.ko-ranking-page .ko-first .ko-top-rank{
    width:46px;
    height:46px;
    left:15px;
    top:16px;
    color:#fff;
    font-size:20px;
    background:linear-gradient(135deg,#ffb21a,#e78500);
    box-shadow:0 10px 18px rgba(208,128,0,.25);
}

.ko-ranking-page .ko-first .ko-top-rank::after,
.ko-ranking-page .ko-second .ko-top-rank::after,
.ko-ranking-page .ko-third .ko-top-rank::after{
    content:'';
    position:absolute;
    left:7px;
    right:7px;
    bottom:-14px;
    height:18px;
    clip-path:polygon(0 0,50% 100%,100% 0);
    background:inherit;
    opacity:.9;
}

.ko-ranking-page .ko-second .ko-top-rank{
    width:42px;
    height:42px;
    left:16px;
    top:17px;
    color:#fff;
    font-size:18px;
    background:linear-gradient(135deg,#aeb8c2,#667480);
    box-shadow:0 10px 18px rgba(80,95,105,.22);
}

.ko-ranking-page .ko-third .ko-top-rank{
    width:42px;
    height:42px;
    left:16px;
    top:17px;
    color:#fff;
    font-size:18px;
    background:linear-gradient(135deg,#e98135,#c95816);
    box-shadow:0 10px 18px rgba(190,89,20,.2);
}

.ko-ranking-page .ko-fourth .ko-top-rank,
.ko-ranking-page .ko-fifth .ko-top-rank{
    width:35px;
    height:35px;
    left:18px;
    top:19px;
    color:#fff;
    font-size:16px;
}

.ko-ranking-page .ko-fourth .ko-top-rank{background:linear-gradient(135deg,#4aa6eb,#267cc7);}
.ko-ranking-page .ko-fifth .ko-top-rank{background:linear-gradient(135deg,#49bd7c,#209d5a);}

.ko-ranking-page .ko-first .ko-top-point{
    color:#9a5c00;
    background:linear-gradient(135deg,#fff7df 0%,#ffe9aa 100%);
    border-color:#efcf7d;
}

.ko-ranking-page .ko-second .ko-top-point{
    color:#43515d;
    background:linear-gradient(135deg,#ffffff 0%,#e6ebf0 100%);
    border-color:#d0d9e2;
}

.ko-ranking-page .ko-third .ko-top-point{
    color:#aa4518;
    background:linear-gradient(135deg,#fff7f1 0%,#ffdac6 100%);
    border-color:#efc3a8;
}

.ko-ranking-page .ko-fourth .ko-top-point{
    color:#1e65a3;
    background:linear-gradient(135deg,#f3fbff 0%,#d8ebff 100%);
    border-color:#b7d6f0;
}

.ko-ranking-page .ko-fifth .ko-top-point{
    color:#247548;
    background:linear-gradient(135deg,#f4fff8 0%,#d9f1e3 100%);
    border-color:#b9dfc8;
}

.ko-ranking-page .ko-ranking-user-card{
    padding:20px 20px 18px;
    border-radius:22px;
    min-height:430px;
    background:linear-gradient(135deg,#ffffff 0%,#fffdf5 100%);
}

.ko-ranking-page .ko-ranking-user-hero{
    grid-template-columns:minmax(0,1fr) 116px;
    gap:18px;
    align-items:start;
    margin-bottom:18px;
}

.ko-ranking-page .ko-ranking-user-copy span{
    margin-bottom:13px;
    color:#24435d;
    font-size:15px;
    font-weight:850;
}

.ko-ranking-page .ko-ranking-user-copy em{
    color:#567086;
    font-size:14px;
    font-weight:850;
    margin-bottom:8px;
}

.ko-ranking-page .ko-ranking-user-copy strong{
    font-size:34px;
    line-height:.98;
    letter-spacing:-.6px;
    color:#203a54;
}

.ko-ranking-page .ko-ranking-user-copy small{
    color:#3e5f76;
    font-size:13px;
    font-weight:850;
    margin-top:9px;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:116px;
    height:116px;
    border-radius:50%;
    padding:7px;
    background:linear-gradient(135deg,#228097,#60c9cc);
    box-shadow:0 16px 30px rgba(31,48,68,.16);
}

.ko-ranking-page .ko-ranking-user-icon > *,
.ko-ranking-page .ko-ranking-user-icon a,
.ko-ranking-page .ko-ranking-user-icon div,
.ko-ranking-page .ko-ranking-user-icon span{
    width:100%;
    height:100%;
    display:block;
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon [class*="border-radius"]{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-user-stats{
    display:grid;
    gap:12px;
    margin-top:4px;
}

.ko-ranking-page .ko-ranking-user-stat{
    min-height:45px;
    padding:9px 13px;
    border-radius:14px;
    background:#fff;
    border:1px solid #dce9f2;
    box-shadow:0 6px 16px rgba(31,48,68,.045);
}

.ko-ranking-page .ko-ranking-user-stat span{
    font-size:11px;
    letter-spacing:.04em;
    color:#456176;
    font-weight:900;
}

.ko-ranking-page .ko-ranking-user-stat strong{
    color:#0f2b43;
    font-size:14.5px;
    font-weight:900;
}

.ko-ranking-page .ko-ranking-user-tip{
    margin-top:16px;
    padding:14px 15px;
    border-radius:16px;
    align-items:flex-start;
    background:linear-gradient(135deg,#f6fbff 0%,#fffdf4 100%);
}

.ko-ranking-page .ko-ranking-user-tip p{
    font-size:13px;
    line-height:1.55;
    font-weight:760;
    color:#526879;
}

.ko-ranking-page .ko-ranking-tip-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:16px;
    font-size:22px;
}

@media (max-width: 1500px){
    .ko-ranking-page .ko-ranking-leaderboard-wrap{grid-template-columns:minmax(0,1fr) 320px;}
    .ko-ranking-page .ko-ranking-top-grid{gap:12px;padding-left:20px;padding-right:20px;}
    .ko-ranking-page .ko-ranking-top-card{height:248px;min-height:248px;}
    .ko-ranking-page .ko-top-avatar{width:92px;height:92px;}
    .ko-ranking-page .ko-top-point{font-size:14.5px;min-width:116px;padding:10px 14px;}
    .ko-ranking-page .ko-ranking-user-card{min-height:410px;}
    .ko-ranking-page .ko-ranking-user-hero{grid-template-columns:minmax(0,1fr) 96px;}
    .ko-ranking-page .ko-ranking-user-icon{width:96px;height:96px;}
    .ko-ranking-page .ko-ranking-user-copy strong{font-size:29px;}
}

@media (max-width: 1200px){
    .ko-ranking-page .ko-ranking-leaderboard-wrap{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-user-card{min-height:auto;}
    .ko-ranking-page .ko-ranking-user-hero{grid-template-columns:minmax(0,1fr) 86px;}
    .ko-ranking-page .ko-ranking-user-icon{width:86px;height:86px;}
}

@media (max-width: 767px){
    .ko-ranking-page .ko-ranking-top-grid{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-top-card{height:auto;min-height:220px;}
    .ko-ranking-page .ko-ranking-user-hero{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-user-icon{order:-1;margin-bottom:6px;}
}


/* Sıralamalar - sade liderlik düzenine dönüş ve oran düzeltmesi */
.ko-ranking-page .ko-ranking-leaderboard-wrap{
    align-items:start;
}

.ko-ranking-page .ko-ranking-top-section{
    min-height:398px;
    display:flex;
    flex-direction:column;
}

.ko-ranking-page .ko-ranking-section-head{
    min-height:78px;
    padding:18px 24px 16px;
    align-items:flex-start;
}

.ko-ranking-page .ko-ranking-section-head small{
    padding-top:8px;
    font-size:13.5px;
    font-weight:850;
}

.ko-ranking-page .ko-ranking-top-grid{
    flex:1;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
    padding:18px 16px 20px;
}

.ko-ranking-page .ko-ranking-top-card{
    min-height:300px;
    height:300px;
    padding:22px 12px 18px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ko-ranking-page .ko-ranking-top-card:hover{
    transform:translateY(-2px);
    box-shadow:0 18px 34px rgba(31,48,68,.13);
}

.ko-ranking-page .ko-ranking-top-card:hover .ko-top-avatar{
    transform:scale(1.03);
}

.ko-ranking-page .ko-top-rank,
.ko-ranking-page .ko-first .ko-top-rank,
.ko-ranking-page .ko-second .ko-top-rank,
.ko-ranking-page .ko-third .ko-top-rank,
.ko-ranking-page .ko-fourth .ko-top-rank,
.ko-ranking-page .ko-fifth .ko-top-rank{
    top:11px;
    left:11px;
    width:auto;
    min-width:30px;
    height:26px;
    border-radius:999px;
    color:#fff;
    font-size:12px;
    font-weight:950;
    background:#697b89;
    box-shadow:0 7px 16px rgba(31,48,68,.10);
}

.ko-ranking-page .ko-first .ko-top-rank::after,
.ko-ranking-page .ko-second .ko-top-rank::after,
.ko-ranking-page .ko-third .ko-top-rank::after{
    content:none;
}

.ko-ranking-page .ko-first .ko-top-rank{background:#f0a422;}
.ko-ranking-page .ko-second .ko-top-rank{background:#8a98a6;}
.ko-ranking-page .ko-third .ko-top-rank{background:#c9773a;}
.ko-ranking-page .ko-fourth .ko-top-rank{background:#327f99;}
.ko-ranking-page .ko-fifth .ko-top-rank{background:#37a770;}

.ko-ranking-page .ko-top-medal{
    top:12px;
    right:13px;
    width:30px;
    height:30px;
    border-radius:12px;
    font-size:14px;
}

.ko-ranking-page .ko-top-avatar{
    width:96px;
    height:96px;
    margin:0 auto 14px;
    padding:4px;
    border-radius:50%;
    transition:transform .22s ease, box-shadow .22s ease;
}

.ko-ranking-page .ko-ranking-top-card strong{
    font-size:16px;
    line-height:1.18;
    margin:0;
}

.ko-ranking-page .ko-top-rutbe{
    margin-top:3px;
    margin-bottom:0;
    color:#607789;
    font-size:11.8px;
    font-weight:850;
}

.ko-ranking-page .ko-top-rutbe::before{
    content:none;
}

.ko-ranking-page .ko-top-point{
    margin-top:14px;
    min-width:auto;
    padding:8px 16px;
    border-radius:999px;
    font-size:14.5px;
    line-height:1;
    font-weight:950;
    letter-spacing:0;
}

.ko-ranking-page .ko-ranking-user-card{
    min-height:auto;
    padding:18px;
    border-radius:24px;
    gap:13px;
}

.ko-ranking-page .ko-ranking-user-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 92px;
    gap:14px;
    align-items:start;
    margin-bottom:4px;
}

.ko-ranking-page .ko-ranking-user-copy span{
    margin-bottom:7px;
    color:#24435d;
    font-size:14px;
    font-weight:850;
    line-height:1.25;
}

.ko-ranking-page .ko-ranking-user-copy em{
    display:block;
    color:#607789;
    font-size:13px;
    font-weight:850;
    font-style:normal;
    margin-bottom:5px;
}

.ko-ranking-page .ko-ranking-user-copy strong{
    display:block;
    color:#20384f;
    font-size:29px;
    line-height:1.02;
    letter-spacing:-.45px;
    font-weight:950;
}

.ko-ranking-page .ko-ranking-user-copy small{
    color:#3e5f76;
    font-size:12.5px;
    line-height:1.35;
    font-weight:850;
    margin-top:7px;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:92px;
    height:92px;
    border-radius:50%;
    padding:6px;
    background:linear-gradient(135deg,#228097,#60c9cc);
    box-shadow:0 15px 28px rgba(31,48,68,.15);
}

.ko-ranking-page .ko-ranking-user-icon > *,
.ko-ranking-page .ko-ranking-user-icon a,
.ko-ranking-page .ko-ranking-user-icon div,
.ko-ranking-page .ko-ranking-user-icon span{
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon [class*="border-radius"]{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-user-stats{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:2px;
}

.ko-ranking-page .ko-ranking-user-stat{
    min-height:43px;
    padding:9px 13px;
    border-radius:14px;
}

.ko-ranking-page .ko-ranking-user-stat span{
    font-size:11px;
    font-weight:900;
}

.ko-ranking-page .ko-ranking-user-stat strong{
    font-size:15.5px;
    font-weight:950;
}

.ko-ranking-page .ko-ranking-user-tip{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:3px;
    padding:13px 14px;
    border-radius:16px;
    background:linear-gradient(135deg,#f6fbff 0%,#fffdf4 100%);
}

.ko-ranking-page .ko-ranking-tip-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 16px rgba(31,48,68,.07);
    font-size:20px;
}

.ko-ranking-page .ko-ranking-user-tip p{
    margin:0;
    font-size:12.8px;
    line-height:1.55;
    font-weight:750;
    color:#526879;
}

@media (max-width: 1500px){
    .ko-ranking-page .ko-ranking-leaderboard-wrap{grid-template-columns:minmax(0,1fr) 320px;}
    .ko-ranking-page .ko-ranking-top-section{min-height:386px;}
    .ko-ranking-page .ko-ranking-top-grid{padding:16px 14px 18px;gap:11px;}
    .ko-ranking-page .ko-ranking-top-card{height:288px;min-height:288px;padding:20px 10px 17px;}
    .ko-ranking-page .ko-top-avatar{width:90px;height:90px;margin-bottom:13px;}
    .ko-ranking-page .ko-top-point{font-size:14px;padding:8px 14px;margin-top:13px;}
    .ko-ranking-page .ko-ranking-user-hero{grid-template-columns:minmax(0,1fr) 84px;}
    .ko-ranking-page .ko-ranking-user-icon{width:84px;height:84px;}
    .ko-ranking-page .ko-ranking-user-copy strong{font-size:27px;}
}

@media (max-width: 1200px){
    .ko-ranking-page .ko-ranking-leaderboard-wrap{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-user-card{min-height:auto;}
}

@media (max-width: 767px){
    .ko-ranking-page .ko-ranking-top-grid{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-top-card{height:auto;min-height:186px;}
    .ko-ranking-page .ko-ranking-user-hero{grid-template-columns:1fr;}
    .ko-ranking-page .ko-ranking-user-icon{order:-1;margin-bottom:6px;}
}

/* Sıralamalar - sağ panel üst bilgi hiyerarşisi ve avatar son düzenleme */
.ko-ranking-page .ko-ranking-user-card{
    background:linear-gradient(135deg,#ffffff 0%,#f7fbfd 100%);
    border:1px solid #d9e8f0;
    box-shadow:0 16px 34px rgba(31,48,68,.08);
}

.ko-ranking-page .ko-ranking-user-hero{
    grid-template-columns:minmax(0,1fr) 82px;
    gap:16px;
    align-items:start;
    margin-bottom:14px;
}

.ko-ranking-page .ko-ranking-user-copy{
    min-width:0;
    padding-top:1px;
}

.ko-ranking-page .ko-ranking-user-copy span{
    margin-bottom:10px;
    color:#203a54;
    font-size:14px;
    line-height:1.25;
    font-weight:900;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.ko-ranking-page .ko-ranking-user-copy em{
    display:block;
    margin-bottom:7px;
    color:#607789;
    font-size:12.5px;
    line-height:1.2;
    font-weight:850;
    letter-spacing:.02em;
}

.ko-ranking-page .ko-ranking-rank-line{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;
    margin:0 0 7px;
}

.ko-ranking-page .ko-ranking-rank-line strong,
.ko-ranking-page .ko-ranking-user-copy strong{
    display:block;
    color:#153451;
    font-size:31px;
    line-height:.95;
    letter-spacing:-.5px;
    font-weight:950;
}

.ko-ranking-page .ko-ranking-rank-line b{
    display:block;
    color:#153451;
    font-size:24px;
    line-height:1;
    letter-spacing:-.25px;
    font-weight:950;
}

.ko-ranking-page .ko-ranking-user-copy small{
    display:block;
    margin-top:8px;
    color:#456176;
    font-size:12.5px;
    line-height:1.35;
    font-weight:850;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:82px;
    height:82px;
    padding:0;
    overflow:hidden;
    border-radius:50%;
    background:#ffffff;
    border:4px solid #e5f2f6;
    box-shadow:0 12px 24px rgba(31,48,68,.14);
}

.ko-ranking-page .ko-ranking-user-icon > *,
.ko-ranking-page .ko-ranking-user-icon a,
.ko-ranking-page .ko-ranking-user-icon div,
.ko-ranking-page .ko-ranking-user-icon span{
    width:100%;
    height:100%;
    display:block;
    border-radius:50%;
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon [class*="border-radius"]{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
    display:block;
    box-shadow:none;
}

.ko-ranking-page .ko-ranking-user-icon i{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2b899a;
    background:#eef8fb;
    border-radius:50%;
    font-size:38px;
}

.ko-ranking-page .ko-ranking-user-stats{
    margin-top:2px;
}

.ko-ranking-page .ko-ranking-user-tip{
    margin-top:12px;
    background:linear-gradient(135deg,#f7fbfd 0%,#fffdfa 100%);
}

@media (max-width: 1500px){
    .ko-ranking-page .ko-ranking-user-hero{
        grid-template-columns:minmax(0,1fr) 78px;
        gap:14px;
    }
    .ko-ranking-page .ko-ranking-user-icon{
        width:78px;
        height:78px;
    }
    .ko-ranking-page .ko-ranking-rank-line strong,
    .ko-ranking-page .ko-ranking-user-copy strong{
        font-size:28px;
    }
    .ko-ranking-page .ko-ranking-rank-line b{
        font-size:22px;
    }
}

@media (max-width: 767px){
    .ko-ranking-page .ko-ranking-user-icon{
        width:82px;
        height:82px;
    }
}


/* Sıralamalar - sağ panel son ferahlık düzeni */
.ko-ranking-page .ko-ranking-user-hero{
    grid-template-columns:minmax(0,1fr) 96px;
    gap:14px;
    align-items:flex-start;
    margin-bottom:16px;
}

.ko-ranking-page .ko-ranking-user-copy span{
    margin-bottom:12px;
}

.ko-ranking-page .ko-ranking-user-copy em{
    margin-bottom:11px;
}

.ko-ranking-page .ko-ranking-rank-line{
    gap:7px;
    margin-bottom:0;
}

.ko-ranking-page .ko-ranking-rank-line strong,
.ko-ranking-page .ko-ranking-user-copy strong{
    font-size:32px;
    line-height:.94;
}

.ko-ranking-page .ko-ranking-rank-line b{
    font-size:23px;
    line-height:1.05;
    letter-spacing:-.15px;
}

.ko-ranking-page .ko-ranking-user-copy small,
.ko-ranking-page #koMyRankDetail{
    display:none;
}

.ko-ranking-page .ko-ranking-user-icon{
    width:96px;
    height:96px;
    align-self:start;
    transform:translate(-6px, 6px);
    padding:0;
    background:#ffffff;
    border:3px solid #eaf4f8;
    box-shadow:0 14px 26px rgba(31,48,68,.13);
}

.ko-ranking-page .ko-ranking-user-icon img,
.ko-ranking-page .ko-ranking-user-icon .ko-current-avatar-img,
.ko-ranking-page .ko-ranking-user-icon .border-radius-100,
.ko-ranking-page .ko-ranking-user-icon [class*="border-radius"]{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
}

.ko-ranking-page .ko-ranking-user-stat{
    min-height:44px;
}

.ko-ranking-page .ko-ranking-user-tip{
    margin-top:14px;
}

@media (max-width:1500px){
    .ko-ranking-page .ko-ranking-user-hero{
        grid-template-columns:minmax(0,1fr) 88px;
        gap:12px;
    }
    .ko-ranking-page .ko-ranking-user-icon{
        width:88px;
        height:88px;
        transform:translate(-4px, 5px);
    }
    .ko-ranking-page .ko-ranking-rank-line strong,
    .ko-ranking-page .ko-ranking-user-copy strong{
        font-size:29px;
    }
    .ko-ranking-page .ko-ranking-rank-line b{
        font-size:22px;
    }
}

@media (max-width:767px){
    .ko-ranking-page .ko-ranking-user-hero{
        grid-template-columns:minmax(0,1fr) 88px;
    }
    .ko-ranking-page .ko-ranking-user-icon{
        width:88px;
        height:88px;
        transform:translate(-3px, 4px);
        order:0;
        margin-bottom:0;
    }
}

.sonuc-footer-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sonuc-footer-left,
.sonuc-footer-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.sonuc-footer-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.sonuc-footer-right {
    justify-content: flex-end;
}

#sonucItirazBtn {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .sonuc-footer-wrap {
        flex-direction: column;
        justify-content: center;
    }

    .sonuc-footer-left {
        display: none;
    }

    .sonuc-footer-center,
    .sonuc-footer-right {
        width: 100%;
        justify-content: center;
    }

    #sonucItirazBtn {
        width: 100%;
    }

    .sonuc-footer-center .btn {
        width: 100%;
    }
}
.ses-bildirim-btn {
    width: 34px;
    height: 34px;
    border: 0;
    outline: 0;
    border-radius: 50%;
    background: transparent;
    color: #28a745;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.ses-bildirim-btn i {
    font-size: 20px;
    line-height: 1;
}

.ses-bildirim-btn:hover {
    background: rgba(40, 167, 69, 0.12);
}

.ses-bildirim-btn.sessiz {
    color: #dc3545;
}

.ses-bildirim-btn.sessiz:hover {
    background: rgba(220, 53, 69, 0.12);
}

.ses-bildirim-btn.ses-acik {
    color: #28a745;
}
 /* =========================================================
       Katip Online Sosyal Panel - Premium Ön Yüz v6
       Not: Renkler değişkenlerle tanımlandı. Dark mode ile çakışmaz.
       ========================================================= */
    .right-sidebar{
        --sp-bg: #f6f9ff;
        --sp-card: rgba(255,255,255,.94);
        --sp-card-solid: #ffffff;
        --sp-soft: #edf4ff;
        --sp-text: #17213b;
        --sp-muted: #6b7280;
        --sp-border: rgba(23,33,59,.10);
        --sp-primary: #2556d9;
        --sp-primary-2: #123fb4;
        --sp-orange: #ff7a1a;
        --sp-green: #2fc28a;
        --sp-red: #e44762;
        --sp-shadow: 0 16px 45px rgba(37,86,217,.12);
        --sp-shadow-sm: 0 8px 22px rgba(37,86,217,.08);
        background:
            linear-gradient(180deg, #fbfdff 0%, #eef4ff 100%) !important;
        color: var(--sp-text);
    }

    body.dark .right-sidebar,
    .dark-mode .right-sidebar,
    [data-theme="dark"] .right-sidebar,
    html.dark .right-sidebar{
        --sp-bg: #101625;
        --sp-card: rgba(23,31,50,.88);
        --sp-card-solid: #171f32;
        --sp-soft: rgba(255,255,255,.06);
        --sp-text: #eef4ff;
        --sp-muted: #aab4c5;
        --sp-border: rgba(255,255,255,.10);
        --sp-primary: #5d8cff;
        --sp-primary-2: #2f63e6;
        --sp-orange: #ff8b38;
        --sp-green: #37d69c;
        --sp-red: #ff5b78;
        --sp-shadow: 0 18px 48px rgba(0,0,0,.32);
        --sp-shadow-sm: 0 8px 24px rgba(0,0,0,.24);
    }

    .right-sidebar .sidebar-title{
        padding: 18px 22px 14px;
        border-bottom: 0 !important;
        background: transparent !important;
    }

    .right-sidebar .sidebar-title h3{
        position: relative;
        padding-left: 48px;
        margin: 0;
        color: var(--sp-text) !important;
        font-size: 20px !important;
        line-height: 1.15;
        letter-spacing: -.3px;
    }

    .right-sidebar .sidebar-title h3:before{
        content: "";
        position: absolute;
        left: 0;
        top: -3px;
        width: 40px;
        height: 40px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background:
            radial-gradient(circle at 30% 24%, rgba(255,255,255,.42), transparent 25%),
            linear-gradient(135deg, #0f2f78 0%, #2556d9 54%, #26a6b8 100%);
        box-shadow:
            0 12px 26px rgba(37,86,217,.22),
            0 4px 12px rgba(38,166,184,.14),
            inset 0 0 0 1px rgba(255,255,255,.28);
    }

    .right-sidebar .sidebar-title h3:after{
        content: "";
        position: absolute;
        left: 0;
        top: -3px;
        width: 40px;
        height: 40px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 23px 23px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8.8 13.2c2.8 0 5-2 5-4.5s-2.2-4.5-5-4.5-5 2-5 4.5c0 1.1.4 2.1 1.2 2.9l-.8 2.4 2.7-1.2c.6.2 1.2.4 1.9.4Z' fill='white' fill-opacity='.95'/%3E%3Cpath d='M12.4 14.3c.8.4 1.8.6 2.8.6.6 0 1.2-.1 1.7-.3l2.5 1.1-.7-2.2c.7-.7 1.1-1.6 1.1-2.6 0-2.2-1.9-4-4.4-4-.4 0-.8 0-1.2.1.4.7.6 1.4.6 2.2 0 2.2-1.4 4.1-3.4 5.1Z' fill='white' fill-opacity='.72'/%3E%3Ccircle cx='8' cy='8.7' r='1' fill='%2326a6b8'/%3E%3Ccircle cx='11.2' cy='8.7' r='1' fill='%2326a6b8'/%3E%3C/svg%3E");
        filter: drop-shadow(0 2px 3px rgba(0,0,0,.16));
    }

    body.dark .right-sidebar .sidebar-title h3:before,
    .dark-mode .right-sidebar .sidebar-title h3:before,
    [data-theme="dark"] .right-sidebar .sidebar-title h3:before,
    html.dark .right-sidebar .sidebar-title h3:before{
        background:
            radial-gradient(circle at 30% 24%, rgba(255,255,255,.32), transparent 25%),
            linear-gradient(135deg, #1e3a8a 0%, #3b82f6 56%, #22c7b8 100%);
        box-shadow:
            0 12px 26px rgba(0,0,0,.28),
            0 0 18px rgba(34,199,184,.13),
            inset 0 0 0 1px rgba(255,255,255,.22);
    }

    .right-sidebar .sidebar-title h3 span{
        color: var(--sp-muted) !important;
        margin-top: 3px;
        font-size: 12px !important;
    }

    .right-sidebar .close-sidebar{
        width: 34px;
        height: 34px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        color: var(--sp-muted);
        box-shadow: var(--sp-shadow-sm);
    }

    .right-sidebar .social-mini-stats{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 0 14px 10px;
    }

    .right-sidebar .social-stat-chip{
        height: 34px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 11px;
        font-weight: 800;
        color: var(--sp-text);
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow-sm);
    }

    .right-sidebar .social-stat-chip:first-child strong{
        color: var(--sp-green);
    }

    .right-sidebar .social-stat-chip strong{
        color: var(--sp-primary);
    }

    .right-sidebar .right-sidebar-body{
        background: transparent !important;
    }

    .right-sidebar .tab{
        padding: 0 14px 14px;
    }

    .right-sidebar .nav-tabs{
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        padding: 10px;
        background: var(--sp-card);
        border: 1px solid var(--sp-border) !important;
        border-radius: 22px;
        box-shadow: var(--sp-shadow-sm);
    }

    .right-sidebar .nav-tabs .nav-item{
        margin: 0 !important;
        min-width: 0;
        white-space: nowrap;
    }

    .right-sidebar .nav-tabs .nav-item.d-none{
        display: none !important;
    }

    .right-sidebar .nav-tabs .nav-link{
        width: 100%;
        min-width: 0;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 0 !important;
        border-radius: 999px !important;
        padding: 0 9px !important;
        color: var(--sp-muted) !important;
        background: transparent !important;
        transition: .22s ease;
        font-size: 11px !important;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .right-sidebar .nav-tabs .nav-link:hover{
        color: var(--sp-text) !important;
        background: var(--sp-soft) !important;
    }

    .right-sidebar .nav-tabs .nav-link.active{
        color: #fff !important;
        background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)) !important;
        box-shadow: 0 10px 24px rgba(37,86,217,.30);
    }

    .right-sidebar .arkadaslarimokunmamislar,
    .right-sidebar .sosyal-mini-badge{
        display: inline-flex;
        min-width: 18px;
        height: 18px;
        padding: 0 6px;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 900;
        background: #fff3e8;
        color: #9a3d00;
        border: 1px solid rgba(255,122,26,.28);
        box-shadow: 0 4px 10px rgba(255,122,26,.10);
    }

    .right-sidebar .chat-search{
        position: relative;
        margin: 12px 0 12px !important;
        padding: 0;
    }

    .right-sidebar .chat-search span{
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--sp-muted);
        z-index: 2;
    }

    .right-sidebar .chat-search input{
        width: 100%;
        height: 44px;
        border: 1px solid var(--sp-border) !important;
        border-radius: 16px !important;
        padding: 0 14px 0 40px !important;
        outline: none !important;
        background: var(--sp-card) !important;
        color: var(--sp-text) !important;
        box-shadow: var(--sp-shadow-sm);
    }

    .right-sidebar .chat-search input::placeholder{
        color: var(--sp-muted);
    }

    .right-sidebar .tab-content{
        height: calc(100% - 156px);
    }

    .right-sidebar .tab-pane{
        height: 100%;
    }

    .right-sidebar .notification-listtum,
    .right-sidebar .notification-list1,
    .right-sidebar .friend-list{
        height: calc(100% - 60px) !important;
        overflow: auto;
        padding: 2px 2px 18px !important;
        margin: 0 !important;
        scrollbar-width: thin;
    }

    .right-sidebar ul{
        list-style: none;
        padding-left: 0;
    }

    .right-sidebar .friend,
    .right-sidebar .aktiftumuyelerlist > li,
    .right-sidebar .aktifuyelerlist > li{
        position: relative;
        margin: 0 0 10px !important;
        border-radius: 20px;
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow-sm);
        overflow: hidden;
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }

    .right-sidebar .friend:hover,
    .right-sidebar .aktiftumuyelerlist > li:hover,
    .right-sidebar .aktifuyelerlist > li:hover{
        transform: translateY(-2px);
        border-color: rgba(37,86,217,.34);
        box-shadow: var(--sp-shadow);
    }

    .right-sidebar .friend:before,
    .right-sidebar .aktiftumuyelerlist > li:before,
    .right-sidebar .aktifuyelerlist > li:before{
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 6px 6px 0;
        background: linear-gradient(180deg, var(--sp-primary), var(--sp-orange));
        opacity: 0;
        transition: .22s ease;
    }

    .right-sidebar .friend:hover:before,
    .right-sidebar .aktiftumuyelerlist > li:hover:before,
    .right-sidebar .aktifuyelerlist > li:hover:before{
        opacity: 1;
    }

    .right-sidebar .friend-row,
    .right-sidebar .aktiftumuyelerlist > li > a,
    .right-sidebar .aktifuyelerlist > li > a,
    .right-sidebar .aktiftumuyelerlist > li > div,
    .right-sidebar .aktifuyelerlist > li > div{
        min-height: 72px;
        padding: 12px 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px;
        color: var(--sp-text) !important;
        text-decoration: none !important;
    }

    .right-sidebar .profilfoto,
    .right-sidebar .friend-row img,
    .right-sidebar .aktiftumuyelerlist img,
    .right-sidebar .aktifuyelerlist img{
        width: 50px !important;
        height: 50px !important;
        object-fit: cover;
        border-radius: 50% !important;
        padding: 2px;
        background: var(--sp-card-solid);
        border: 1px solid var(--sp-border);
        box-shadow: 0 8px 18px rgba(31,86,217,.13);
        flex: 0 0 auto;
    }

    .right-sidebar .friend-info{
        flex: 1;
        min-width: 0;
        padding-left: 2px !important;
    }

    .right-sidebar .friend-name,
    .right-sidebar .aktiftumuyelerlist .friend-name,
    .right-sidebar .aktifuyelerlist .friend-name{
        color: var(--sp-text) !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        line-height: 1.15;
        letter-spacing: -.2px;
        overflow: visible;
        text-overflow: initial;
        white-space: nowrap;
        max-width: 150px;
    }

    .right-sidebar .friend-badges,
    .right-sidebar .small{
        color: var(--sp-muted) !important;
        font-size: 11px !important;
        line-height: 1.35;
        margin-top: 4px;
    }

    .right-sidebar .friend-badges:empty:after{
        content: "Katip Online";
        color: var(--sp-muted);
    }

    .right-sidebar .friend-badges span,
    .right-sidebar .friend-badges .badge{
        border-radius: 999px !important;
    }

    .right-sidebar .friend-actions{
        margin-left: auto;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        min-width: auto;
    }

    .right-sidebar .friend-actions .w-100{
        width: auto !important;
    }

    .right-sidebar .friend-actions .btn,
    .right-sidebar .friend-row > .btn,
    .right-sidebar .friend-row button{
        min-width: 34px;
        height: 34px;
        padding: 0 10px !important;
        border: 0 !important;
        border-radius: 999px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 11px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
        transition: .2s ease;
        white-space: nowrap;
    }

    .right-sidebar .friend-actions .btn:hover,
    .right-sidebar .friend-row button:hover{
        transform: translateY(-1px);
        filter: brightness(1.03);
    }

    .right-sidebar .btn-warning,
    .right-sidebar .btn-ozel-sohbet{
        background: linear-gradient(135deg, var(--sp-orange), #ff5f00) !important;
        color: #fff !important;
    }

    .right-sidebar .btn-danger{
        background: rgba(228,71,98,.12) !important;
        color: var(--sp-red) !important;
    }

    .right-sidebar .btn-success{
        background: linear-gradient(135deg, var(--sp-green), #219a72) !important;
        color: #fff !important;
    }

    .right-sidebar .btn-primary,
    .right-sidebar .btn-info{
        background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2)) !important;
        color: #fff !important;
    }

    .right-sidebar .section-title-social{
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 4px 9px;
        color: var(--sp-text);
        font-size: 13px;
        font-weight: 800;
    }

    .right-sidebar .section-title-social:before{
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--sp-green);
        box-shadow: 0 0 0 4px rgba(47,194,138,.13);
    }

    .right-sidebar .section-title-social.muted:before{
        background: #98a2b3;
        box-shadow: 0 0 0 4px rgba(152,162,179,.14);
    }

    .right-sidebar .request-wrap{
        padding: 2px 0 18px;
        height: calc(100% - 54px);
        overflow: auto;
    }

    .right-sidebar .request-wrap h6{
        color: var(--sp-text) !important;
        font-weight: 800;
        margin: 8px 0 8px;
    }

    .right-sidebar .empty-social-state,
    .right-sidebar .aktif-tumuyeler-empty,
    .right-sidebar .aktif-tumuyeler-loading{
        margin: 12px 0;
        padding: 18px 12px !important;
        border-radius: 18px;
        background: var(--sp-card);
        border: 1px dashed var(--sp-border);
        color: var(--sp-muted) !important;
    }

    #sohbet-plus{
        background: linear-gradient(135deg, var(--sp-primary), var(--sp-orange)) !important;
        box-shadow: 0 12px 28px rgba(31,86,217,.24) !important;
        border: 1px solid rgba(255,255,255,.25);
    }

    #ozel-sohbet-bar{
        background: transparent !important;
    }



    .right-sidebar .invite-section{
        margin-bottom: 12px;
        border-radius: 18px;
        background: var(--sp-card);
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow-sm);
        overflow: hidden;
    }

    .right-sidebar .invite-section-head{
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: linear-gradient(135deg, rgba(37,86,217,.08), rgba(255,122,26,.06));
        color: var(--sp-text);
        font-size: 13px;
        font-weight: 900;
        border-bottom: 1px solid var(--sp-border);
    }

    .right-sidebar .invite-section-head .count{
        margin-left: auto;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2));
        color: #fff;
        font-size: 11px;
        font-weight: 900;
    }

    .right-sidebar .invite-section .friend-list{
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
    }

    .right-sidebar .invite-section .friend{
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-bottom: 1px solid var(--sp-border) !important;
    }

    .right-sidebar .invite-section .friend:last-child{
        border-bottom: 0 !important;
    }

    .right-sidebar .invite-section .empty-social-state{
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }


    .right-sidebar .nav-tabs .nav-link .tab-ico{
        flex: 0 0 auto;
        font-size: 11px;
        line-height: 1;
    }

    .right-sidebar .nav-tabs .nav-link .tab-text{
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .right-sidebar .nav-tabs .nav-link .tab-count{
        display: inline-flex;
        min-width: 19px;
        height: 19px;
        padding: 0 6px;
        align-items: center;
        justify-content: center;
        margin-left: 4px;
        border-radius: 999px;
        background: #fff3e8;
        color: #8f3700;
        border: 1px solid rgba(255,122,26,.30);
        font-size: 11px;
        font-weight: 950;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(255,122,26,.10);
    }

    .right-sidebar .nav-tabs .nav-link.active .tab-count{
        background: #ffffff;
        color: var(--sp-primary-2);
        border-color: rgba(255,255,255,.55);
        box-shadow: 0 6px 14px rgba(0,0,0,.12);
    }

    body.dark .right-sidebar .nav-tabs .nav-link .tab-count,
    .dark-mode .right-sidebar .nav-tabs .nav-link .tab-count,
    [data-theme="dark"] .right-sidebar .nav-tabs .nav-link .tab-count,
    html.dark .right-sidebar .nav-tabs .nav-link .tab-count,
    body.dark .right-sidebar .arkadaslarimokunmamislar,
    .dark-mode .right-sidebar .arkadaslarimokunmamislar,
    [data-theme="dark"] .right-sidebar .arkadaslarimokunmamislar,
    html.dark .right-sidebar .arkadaslarimokunmamislar,
    body.dark .right-sidebar .sosyal-mini-badge,
    .dark-mode .right-sidebar .sosyal-mini-badge,
    [data-theme="dark"] .right-sidebar .sosyal-mini-badge,
    html.dark .right-sidebar .sosyal-mini-badge{
        background: rgba(255,139,56,.20);
        color: #ffd9bd;
        border-color: rgba(255,139,56,.35);
    }

    body.dark .right-sidebar .nav-tabs .nav-link.active .tab-count,
    .dark-mode .right-sidebar .nav-tabs .nav-link.active .tab-count,
    [data-theme="dark"] .right-sidebar .nav-tabs .nav-link.active .tab-count,
    html.dark .right-sidebar .nav-tabs .nav-link.active .tab-count{
        background: #ffffff;
        color: #123fb4;
        border-color: rgba(255,255,255,.70);
    }


    .right-sidebar .aktiftumuyelerlist > li:after,
    .right-sidebar .aktifuyelerlist > li:after{
        content: "";
        position: absolute;
        left: 55px;
        top: 50px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--sp-green);
        border: 2px solid var(--sp-card-solid);
        box-shadow: 0 0 0 4px rgba(47,194,138,.15);
        z-index: 3;
    }

    .right-sidebar .empty-social-state:before,
    .right-sidebar .aktif-tumuyeler-empty:before{
        content: "✨";
        display: block;
        margin-bottom: 6px;
        font-size: 20px;
    }

    .right-sidebar .empty-social-state strong,
    .right-sidebar .aktif-tumuyeler-empty strong{
        display: block;
        color: var(--sp-text);
        font-size: 13px;
        margin-bottom: 3px;
    }




    /* Klan sekmesi - üst bilgi kartı ve katkı sıralaması */
    .right-sidebar .clan-panel-scroll{
        height: calc(100% - 60px);
        overflow: auto;
        padding: 2px 2px 18px;
        scrollbar-width: thin;
    }

    .right-sidebar .clan-card-premium{
        position: relative;
        margin: 0 0 12px;
        padding: 14px;
        border-radius: 20px;
        background:
            linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.82));
        border: 1px solid var(--sp-border);
        box-shadow: var(--sp-shadow-sm);
        overflow: hidden;
    }

    body.dark .right-sidebar .clan-card-premium,
    .dark-mode .right-sidebar .clan-card-premium,
    [data-theme="dark"] .right-sidebar .clan-card-premium,
    html.dark .right-sidebar .clan-card-premium{
        background: linear-gradient(135deg, rgba(23,31,50,.96), rgba(23,31,50,.76));
    }

    .right-sidebar .clan-card-premium:before{
        content: "";
        position: absolute;
        inset: -80px -60px auto auto;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255,122,26,.18), transparent 65%);
        pointer-events: none;
    }

    .right-sidebar .clan-card-top{
        position: relative;
        display: flex;
        gap: 13px;
        align-items: center;
    }

    .right-sidebar .clan-emblem-wrap{
        width: 92px;
        height: 92px;
        flex: 0 0 92px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(37,86,217,.10), rgba(255,122,26,.10));
        border: 1px solid var(--sp-border);
        box-shadow: 0 10px 22px rgba(37,86,217,.11);
        overflow: hidden;
    }

    .right-sidebar .clan-emblem-wrap img{
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
    }

    .right-sidebar .clan-emblem-wrap.no-logo:before{
        content: "⚖️";
        font-size: 38px;
    }

    .right-sidebar .clan-meta{
        flex: 1;
        min-width: 0;
    }

    .right-sidebar .clan-name-row{
        display: flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    .right-sidebar .clan-name-row h4{
        margin: 0;
        color: var(--sp-text);
        font-size: 20px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -.35px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .right-sidebar .clan-rank-pill{
        flex: 0 0 auto;
        height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 11px;
        font-weight: 900;
        background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2));
        box-shadow: 0 8px 18px rgba(37,86,217,.18);
    }

    .right-sidebar .clan-leader-mini{
        margin-top: 6px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        max-width: 100%;
        color: var(--sp-text);
        font-size: 12px;
        font-weight: 800;
    }

    .right-sidebar .clan-leader-mini img{
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        object-fit: cover;
        border: 1px solid var(--sp-border);
    }

    .right-sidebar .clan-info-grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 9px;
    }

    .right-sidebar .clan-info-chip{
        min-height: 34px;
        border-radius: 14px;
        background: rgba(37,86,217,.06);
        border: 1px solid var(--sp-border);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5px 8px;
    }

    .right-sidebar .clan-info-chip small{
        color: var(--sp-muted) !important;
        font-size: 11px !important;
        line-height: 1;
        font-weight: 800;
    }

    .right-sidebar .clan-info-chip strong{
        color: var(--sp-text);
        margin-top: 3px;
        font-size: 12px;
        line-height: 1;
        font-weight: 900;
    }


    .right-sidebar .clan-stats-line{
        display: flex;
        align-items: center;
        gap: 16px;
        margin-top: 9px;
        color: var(--sp-muted);
        font-size: 12px;
        font-weight: 800;
        white-space: nowrap;
    }

    .right-sidebar .clan-stats-line span{
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .right-sidebar .clan-stats-line strong{
        color: var(--sp-text);
        font-weight: 900;
    }

    .right-sidebar .clan-desc{
        position: relative;
        margin: 12px 0 0;
        padding-top: 11px;
        border-top: 1px solid var(--sp-border);
        color: var(--sp-muted);
        font-size: 12px;
        line-height: 1.45;
        text-align: center;
    }

    .right-sidebar .clan-member-list{
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .right-sidebar .clan-member-list .friend{
        border-radius: 16px;
        margin-bottom: 8px !important;
    }

    .right-sidebar .clan-member-list .friend-row{
        min-height: 66px;
        padding: 9px 10px !important;
    }

    .right-sidebar .clan-member-score{
        margin-left: auto;
        min-width: 108px;
        text-align: right;
    }

    .right-sidebar .clan-score-label{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        color: var(--sp-muted);
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

    .right-sidebar .clan-score-label:after{
        content: "🏅";
        font-size: 12px;
    }

    .right-sidebar .clan-score-value{
        margin-top: 3px;
        color: var(--sp-text);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
    }

    .right-sidebar .clan-progress{
        margin-top: 6px;
        height: 7px;
        border-radius: 999px;
        overflow: hidden;
        background: rgba(255,122,26,.13);
    }

    .right-sidebar .clan-progress span{
        display: block;
        height: 100%;
        min-width: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #ffb21f, #ffd45a);
        box-shadow: 0 4px 12px rgba(255,178,31,.28);
    }

    .right-sidebar .clan-role-badge{
        display: inline-flex;
        align-items: center;
        gap: 3px;
        max-width: 100%;
        color: var(--sp-muted);
        font-size: 11px;
        font-weight: 700;
        line-height: 1.25;
    }

    .right-sidebar .clan-role-badge.leader{
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        border-radius: 999px;
        background: rgba(255,122,26,.15);
        color: var(--sp-orange);
        font-weight: 900;
    }


    /* Arkadaş listesi - çevrimiçi / çevrimdışı ayrımı */
    .right-sidebar .friend-section-title{
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 6px 8px;
        color: var(--sp-text);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: -.15px;
    }

    .right-sidebar .friend-section-title:before{
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--sp-green);
        box-shadow: 0 0 0 4px rgba(47,194,138,.14);
        flex: 0 0 auto;
    }

    .right-sidebar .friend-section-title.offline:before{
        background: #aab4c5;
        box-shadow: 0 0 0 4px rgba(170,180,197,.18);
    }

    .right-sidebar .friend.online{
        background: linear-gradient(135deg, rgba(47,194,138,.10), rgba(255,255,255,.96));
        border-color: rgba(47,194,138,.28);
    }

    body.dark .right-sidebar .friend.online,
    .dark-mode .right-sidebar .friend.online,
    [data-theme="dark"] .right-sidebar .friend.online,
    html.dark .right-sidebar .friend.online{
        background: linear-gradient(135deg, rgba(47,194,138,.13), rgba(23,31,50,.88));
        border-color: rgba(47,194,138,.34);
    }

    .right-sidebar .friend.offline{
        background: linear-gradient(135deg, rgba(228,71,98,.07), rgba(255,255,255,.96));
        border-color: rgba(228,71,98,.18);
    }

    body.dark .right-sidebar .friend.offline,
    .dark-mode .right-sidebar .friend.offline,
    [data-theme="dark"] .right-sidebar .friend.offline,
    html.dark .right-sidebar .friend.offline{
        background: linear-gradient(135deg, rgba(228,71,98,.10), rgba(23,31,50,.88));
        border-color: rgba(228,71,98,.24);
    }

    .right-sidebar .friend-avatar-wrap{
        position: relative;
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .right-sidebar .friend-avatar-wrap .profilfoto{
        width: 50px !important;
        height: 50px !important;
    }

    .right-sidebar .friend-status-dot{
        position: absolute;
        right: 1px;
        bottom: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--sp-green);
        border: 2px solid var(--sp-card-solid);
        box-shadow: 0 0 0 3px rgba(47,194,138,.16);
    }

    .right-sidebar .friend.offline .friend-status-dot{
        background: #aab4c5;
        box-shadow: 0 0 0 3px rgba(170,180,197,.14);
    }

    .right-sidebar .friend-state-text{
        display: inline-flex;
        align-items: center;
        gap: 5px;
        margin-top: 2px;
        color: var(--sp-muted);
        font-size: 11px;
        font-weight: 800;
        line-height: 1;
    }

    .right-sidebar .friend-state-text:before{
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sp-green);
        box-shadow: 0 0 0 3px rgba(47,194,138,.13);
    }

    .right-sidebar .friend.offline .friend-state-text:before{
        background: #aab4c5;
        box-shadow: 0 0 0 3px rgba(170,180,197,.13);
    }


    @media (max-width: 575px){
        .right-sidebar .nav-tabs{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 8px; }
        .right-sidebar .nav-tabs .nav-link{ height:36px; font-size: 11px !important; padding: 0 6px !important; gap: 4px; }
        .right-sidebar .nav-tabs .nav-link .tab-ico{ font-size: 11px; }
        .right-sidebar .nav-tabs .nav-link .tab-count{ min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; }
        .right-sidebar .tab{ padding: 0 10px 12px; }
        .right-sidebar .friend-row,
        .right-sidebar .aktiftumuyelerlist > li > a,
        .right-sidebar .aktifuyelerlist > li > a,
        .right-sidebar .aktiftumuyelerlist > li > div,
        .right-sidebar .aktifuyelerlist > li > div{
            min-height: 74px;
            padding: 10px !important;
        }
        .right-sidebar .clan-emblem-wrap{
            width: 86px;
            height: 86px;
            flex-basis: 86px;
        }
        .right-sidebar .profilfoto,
        .right-sidebar .friend-row img,
        .right-sidebar .aktiftumuyelerlist img,
        .right-sidebar .aktifuyelerlist img{
            width: 48px !important;
            height: 48px !important;
        }
        .right-sidebar .friend-name{ max-width: 122px; }
        .right-sidebar .friend-actions .btn span:not(.okunmamis-badge){ display:none; }
        .right-sidebar .friend-actions .btn{ padding: 0 9px !important; }
    }


    .right-sidebar .friend-name.js-profilecard{
        cursor: pointer;
        transition: color .2s ease, text-decoration-color .2s ease;
    }

    .right-sidebar .friend-name.js-profilecard:hover{
        color: var(--sp-primary) !important;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    /* =========================================================
       MOBİL DÜZENLEME - Sosyal Panel
       Amaç: Mobilde taşmayı azaltır, üst sekmeleri tek satır kaydırmalı yapar
       ve panel içi kaydırmayı düzgün çalıştırır.
       ========================================================= */
    @media (max-width: 575px){
        html body .right-sidebar{
            height: 100vh !important;
            height: 100dvh !important;
            max-height: 100vh !important;
            max-height: 100dvh !important;
            overflow: hidden !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .right-sidebar .sidebar-title{
            flex: 0 0 auto !important;
            padding: 14px 14px 10px !important;
            min-height: 74px !important;
        }

        .right-sidebar .sidebar-title h3{
            padding-left: 42px !important;
            font-size: 18px !important;
            line-height: 1.12 !important;
        }

        .right-sidebar .sidebar-title h3:before,
        .right-sidebar .sidebar-title h3:after{
            width: 34px !important;
            height: 34px !important;
            top: 0 !important;
            border-radius: 13px !important;
            background-size: 20px 20px !important;
        }

        .right-sidebar .sidebar-title h3 span{
            font-size: 11.5px !important;
            line-height: 1.25 !important;
            margin-top: 4px !important;
            white-space: normal !important;
        }

        .right-sidebar .close-sidebar{
            width: 32px !important;
            height: 32px !important;
            border-radius: 12px !important;
            flex: 0 0 32px !important;
        }

        .right-sidebar .right-sidebar-body{
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            overflow: hidden !important;
        }

        .right-sidebar .right-sidebar-body-content,
        .right-sidebar .tab{
            height: 100% !important;
            min-height: 0 !important;
            display: flex !important;
            flex-direction: column !important;
        }

        .right-sidebar .tab{
            padding: 0 10px 10px !important;
        }

        .right-sidebar .nav-tabs{
            flex: 0 0 auto !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            gap: 7px !important;
            padding: 8px !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            scrollbar-width: none !important;
            -webkit-overflow-scrolling: touch !important;
            border-radius: 20px !important;
            margin-bottom: 10px !important;
        }

        .right-sidebar .nav-tabs::-webkit-scrollbar{
            display: none !important;
        }

        .right-sidebar .nav-tabs .nav-item{
            flex: 0 0 auto !important;
            width: auto !important;
        }

        .right-sidebar .nav-tabs .nav-link{
            min-width: 112px !important;
            height: 34px !important;
            padding: 0 10px !important;
            font-size: 11px !important;
            gap: 4px !important;
        }

        .right-sidebar .nav-tabs .nav-link .tab-count{
            min-width: 18px !important;
            height: 18px !important;
            padding: 0 5px !important;
            margin-left: 3px !important;
            font-size: 11px !important;
        }

        .right-sidebar .tab-content{
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            overflow: hidden !important;
        }

        .right-sidebar .tab-pane{
            height: 100% !important;
            min-height: 0 !important;
            overflow: hidden !important;
        }

        .right-sidebar .tab-pane.active,
        .right-sidebar .tab-pane.show.active{
            display: flex !important;
            flex-direction: column !important;
        }

        .right-sidebar .chat-search{
            flex: 0 0 auto !important;
            margin: 8px 0 10px !important;
        }

        .right-sidebar .chat-search input{
            height: 40px !important;
            border-radius: 15px !important;
            font-size: 13px !important;
        }

        .right-sidebar .notification-listtum,
        .right-sidebar .notification-list1,
        .right-sidebar #friend-list,
        .right-sidebar .request-wrap,
        .right-sidebar .clan-panel-scroll{
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: none !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior: contain !important;
            padding: 2px 2px 18px !important;
            margin: 0 !important;
        }

        .right-sidebar .friend,
        .right-sidebar .aktiftumuyelerlist > li,
        .right-sidebar .aktifuyelerlist > li{
            margin-bottom: 9px !important;
            border-radius: 18px !important;
        }

        .right-sidebar .friend-row,
        .right-sidebar .aktiftumuyelerlist > li > a,
        .right-sidebar .aktifuyelerlist > li > a,
        .right-sidebar .aktiftumuyelerlist > li > div,
        .right-sidebar .aktifuyelerlist > li > div{
            min-height: 66px !important;
            padding: 9px 10px !important;
            gap: 8px !important;
        }

        .right-sidebar .profilfoto,
        .right-sidebar .friend-row img,
        .right-sidebar .aktiftumuyelerlist img,
        .right-sidebar .aktifuyelerlist img{
            width: 44px !important;
            height: 44px !important;
        }

        .right-sidebar .friend-avatar-wrap{
            width: 44px !important;
            height: 44px !important;
            flex: 0 0 44px !important;
        }

        .right-sidebar .friend-avatar-wrap .profilfoto{
            width: 44px !important;
            height: 44px !important;
        }

        .right-sidebar .friend-status-dot{
            right: 2px !important;
            bottom: 2px !important;
            width: 11px !important;
            height: 11px !important;
            border-width: 2px !important;
        }

        .right-sidebar .aktiftumuyelerlist > li:after,
        .right-sidebar .aktifuyelerlist > li:after{
            left: 44px !important;
            top: 44px !important;
            width: 11px !important;
            height: 11px !important;
            border-width: 2px !important;
            box-shadow: 0 0 0 3px rgba(47,194,138,.14) !important;
        }

        .right-sidebar .friend-info{
            flex: 1 1 auto !important;
            min-width: 0 !important;
            padding-left: 0 !important;
        }

        .right-sidebar .friend-name,
        .right-sidebar .aktiftumuyelerlist .friend-name,
        .right-sidebar .aktifuyelerlist .friend-name{
            max-width: 124px !important;
            font-size: 13.5px !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

        .right-sidebar .friend-badges,
        .right-sidebar .small{
            font-size: 11px !important;
            line-height: 1.25 !important;
            margin-top: 3px !important;
            max-width: 126px !important;
            overflow: hidden !important;
            white-space: nowrap !important;
            text-overflow: ellipsis !important;
        }

        .right-sidebar .friend-actions{
            flex: 0 0 auto !important;
            gap: 5px !important;
            margin-left: 4px !important;
        }

        .right-sidebar .friend-actions .btn,
        .right-sidebar .friend-row > .btn,
        .right-sidebar .friend-row button{
            min-width: 31px !important;
            height: 31px !important;
            padding: 0 9px !important;
            font-size: 11px !important;
            gap: 4px !important;
        }

        .right-sidebar .friend-actions .btn span:not(.okunmamis-badge){
            display: none !important;
        }

        .right-sidebar .friend-actions .btn-ozel-sohbet span:not(.okunmamis-badge){
            display: inline !important;
        }

        .right-sidebar .friend-actions .btn-ozel-sohbet{
            padding: 0 10px !important;
        }

        .right-sidebar .friend-section-title,
        .right-sidebar .section-title-social{
            padding: 7px 5px 7px !important;
            font-size: 11.5px !important;
        }

        .right-sidebar .invite-section{
            border-radius: 16px !important;
            margin-bottom: 10px !important;
        }

        .right-sidebar .invite-section-head{
            min-height: 38px !important;
            padding: 8px 10px !important;
            font-size: 12px !important;
        }

        .right-sidebar .clan-card-premium{
            border-radius: 18px !important;
            padding: 12px !important;
        }

        .right-sidebar .clan-emblem-wrap{
            width: 70px !important;
            height: 70px !important;
            flex-basis: 70px !important;
            border-radius: 16px !important;
        }

        .right-sidebar .clan-name-row h4{
            font-size: 16px !important;
        }

        .right-sidebar .clan-member-score{
            min-width: 82px !important;
        }

        .right-sidebar .clan-score-label{
            font-size: 11px !important;
        }

        .right-sidebar .clan-score-value{
            font-size: 11.5px !important;
        }

        .right-sidebar .friend-name.js-profilecard{
            cursor: pointer !important;
        }
    }

    @media (max-width: 380px){
        .right-sidebar .nav-tabs .nav-link{
            min-width: 102px !important;
        }

        .right-sidebar .friend-name,
        .right-sidebar .aktiftumuyelerlist .friend-name,
        .right-sidebar .aktifuyelerlist .friend-name{
            max-width: 106px !important;
        }

        .right-sidebar .friend-badges,
        .right-sidebar .small{
            max-width: 108px !important;
        }

        .right-sidebar .friend-actions .btn-ozel-sohbet span:not(.okunmamis-badge){
            display: none !important;
        }
    }


    /* =========================================================
       MOBİL GENİŞLİK DÜZELTME
       Amaç: Sağ panelin 400px gibi sabit genişlik nedeniyle mobilde soldan kırpılmasını engeller.
       ========================================================= */
    @media (max-width: 575px){
        html,
        body{
            overflow-x: hidden !important;
        }

        html body .right-sidebar{
            width: 100vw !important;
            max-width: 100vw !important;
            min-width: 0 !important;
            left: 0 !important;
            right: 0 !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            transform: none !important;
            box-sizing: border-box !important;
            border-radius: 0 !important;
        }

        .right-sidebar *,
        .right-sidebar *:before,
        .right-sidebar *:after{
            box-sizing: border-box !important;
        }

        .right-sidebar .sidebar-title,
        .right-sidebar .right-sidebar-body,
        .right-sidebar .right-sidebar-body-content,
        .right-sidebar .tab,
        .right-sidebar .tab-content,
        .right-sidebar .tab-pane{
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

        .right-sidebar .sidebar-title{
            padding-left: 14px !important;
            padding-right: 14px !important;
        }

        .right-sidebar .tab{
            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .right-sidebar .nav-tabs,
        .right-sidebar .chat-search,
        .right-sidebar .notification-listtum,
        .right-sidebar .notification-list1,
        .right-sidebar #friend-list,
        .right-sidebar .request-wrap,
        .right-sidebar .clan-panel-scroll{
            width: 100% !important;
            max-width: 100% !important;
        }

        .right-sidebar .friend,
        .right-sidebar .aktiftumuyelerlist > li,
        .right-sidebar .aktifuyelerlist > li{
            width: 100% !important;
            max-width: 100% !important;
        }
    }


    /* =========================================================
       MOBİL AÇ/KAPAT DÜZELTME
       Amaç: Mobilde sosyal panelin sayfa açılır açılmaz görünmesini engeller.
       Panel yalnızca mevcut sistem tarafından açık class'ı verildiğinde görünür.
       ========================================================= */
    @media (max-width: 575px){
        html body .right-sidebar{
            position: fixed !important;
            top: 0 !important;
            bottom: auto !important;
            left: auto !important;
            right: -105vw !important;
            width: 100vw !important;
            max-width: 100vw !important;
            min-width: 0 !important;
            height: 100vh !important;
            height: 100dvh !important;
            max-height: 100vh !important;
            max-height: 100dvh !important;
            margin: 0 !important;
            transform: none !important;
            z-index: 99999 !important;
            overflow: hidden !important;
            border-radius: 0 !important;
            display: flex !important;
            flex-direction: column !important;
            transition: right .28s ease !important;
            box-sizing: border-box !important;
        }

        body.right-sidebar-visible .right-sidebar,
        body.right-sidebar-open .right-sidebar,
        body.sidebar-open .right-sidebar,
        body.show-right-sidebar .right-sidebar,
        .right-sidebar.right-sidebar-visible,
        .right-sidebar.right-sidebar-open,
        .right-sidebar.sidebar-open,
        .right-sidebar.show-right-sidebar,
        .right-sidebar.show,
        .right-sidebar.open,
        .right-sidebar.active{
            right: 0 !important;
            left: auto !important;
            transform: none !important;
        }

        body:not(.right-sidebar-visible):not(.right-sidebar-open):not(.sidebar-open):not(.show-right-sidebar) .right-sidebar:not(.right-sidebar-visible):not(.right-sidebar-open):not(.sidebar-open):not(.show-right-sidebar):not(.show):not(.open):not(.active){
            right: -105vw !important;
            left: auto !important;
            transform: none !important;
        }

        body.social-panel-mobile-closed .right-sidebar{
            right: -105vw !important;
            left: auto !important;
            transform: none !important;
        }

        body.social-panel-mobile-open .right-sidebar{
            right: 0 !important;
            left: auto !important;
            transform: none !important;
        }
    }


    /* =========================================================
       SON DOKUNUŞLAR - Buton dengesi, aktif kullanıcı glow, isimden profil açma
       ========================================================= */

    /* Kullanıcı adı tıklanabilir görünüm */
    .right-sidebar .friend-name.js-profilecard,
    .right-sidebar .friend-name[data-user_id]{
        cursor: pointer !important;
        transition: color .18s ease, text-decoration-color .18s ease, opacity .18s ease !important;
    }

    .right-sidebar .friend-name.js-profilecard:hover,
    .right-sidebar .friend-name[data-user_id]:hover{
        color: var(--sp-primary) !important;
        text-decoration: underline !important;
        text-underline-offset: 3px !important;
    }

    /* Arkadaş ekle / mesaj / işlem butonlarını daha dengeli hale getirir */
    .right-sidebar .aktiftumuyelerlist .btn,
    .right-sidebar .aktifuyelerlist .btn,
    .right-sidebar .friend-actions .btn,
    .right-sidebar .friend-row > .btn,
    .right-sidebar .friend-row button{
        min-width: 31px !important;
        height: 31px !important;
        padding: 0 9px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .right-sidebar .aktiftumuyelerlist .btn i,
    .right-sidebar .aktifuyelerlist .btn i,
    .right-sidebar .friend-actions .btn i{
        font-size: 12px !important;
        line-height: 1 !important;
    }

    /* Aktif/çevrimiçi kartlara hafif premium glow */
    .right-sidebar .aktiftumuyelerlist > li,
    .right-sidebar .aktifuyelerlist > li,
    .right-sidebar .friend.online{
        border-color: rgba(47,194,138,.24) !important;
        box-shadow:
            0 8px 22px rgba(37,86,217,.07),
            0 0 0 1px rgba(47,194,138,.05),
            0 0 18px rgba(47,194,138,.08) !important;
    }

    .right-sidebar .aktiftumuyelerlist > li:hover,
    .right-sidebar .aktifuyelerlist > li:hover,
    .right-sidebar .friend.online:hover{
        border-color: rgba(47,194,138,.38) !important;
        box-shadow:
            0 14px 34px rgba(37,86,217,.12),
            0 0 0 1px rgba(47,194,138,.10),
            0 0 24px rgba(47,194,138,.16) !important;
    }

    /* Yeşil nokta daha canlı ama abartısız */
    .right-sidebar .friend-status-dot,
    .right-sidebar .aktiftumuyelerlist > li:after,
    .right-sidebar .aktifuyelerlist > li:after{
        box-shadow:
            0 0 0 3px rgba(47,194,138,.16),
            0 0 12px rgba(47,194,138,.32) !important;
    }

    body.dark .right-sidebar .aktiftumuyelerlist > li,
    .dark-mode .right-sidebar .aktiftumuyelerlist > li,
    [data-theme="dark"] .right-sidebar .aktiftumuyelerlist > li,
    html.dark .right-sidebar .aktiftumuyelerlist > li,
    body.dark .right-sidebar .aktifuyelerlist > li,
    .dark-mode .right-sidebar .aktifuyelerlist > li,
    [data-theme="dark"] .right-sidebar .aktifuyelerlist > li,
    html.dark .right-sidebar .aktifuyelerlist > li,
    body.dark .right-sidebar .friend.online,
    .dark-mode .right-sidebar .friend.online,
    [data-theme="dark"] .right-sidebar .friend.online,
    html.dark .right-sidebar .friend.online{
        box-shadow:
            0 8px 22px rgba(0,0,0,.22),
            0 0 0 1px rgba(47,194,138,.08),
            0 0 18px rgba(47,194,138,.10) !important;
    }

    @media (max-width:575px){
        .right-sidebar .aktiftumuyelerlist .btn,
        .right-sidebar .aktifuyelerlist .btn,
        .right-sidebar .friend-actions .btn,
        .right-sidebar .friend-row > .btn,
        .right-sidebar .friend-row button{
            min-width: 30px !important;
            height: 30px !important;
            padding: 0 8px !important;
            font-size: 11px !important;
        }

        .right-sidebar .friend-actions .btn-ozel-sohbet{
            padding: 0 9px !important;
        }
    }



    /* =========================================================
       UZUN İSİM / BUTON ÇAKIŞMASI DÜZELTME
       Amaç: Kullanıcı adı alanı butonların altına girmesin; uzun isimler
       kart içinde tek satırda üç nokta ile kısalsın.
       ========================================================= */
    .right-sidebar .friend-row,
    .right-sidebar .aktiftumuyelerlist > li > a,
    .right-sidebar .aktifuyelerlist > li > a,
    .right-sidebar .aktiftumuyelerlist > li > div,
    .right-sidebar .aktifuyelerlist > li > div{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .right-sidebar .friend-info,
    .right-sidebar .aktiftumuyelerlist .friend-info,
    .right-sidebar .aktifuyelerlist .friend-info{
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: hidden !important;
    }

    .right-sidebar .friend-name,
    .right-sidebar .aktiftumuyelerlist .friend-name,
    .right-sidebar .aktifuyelerlist .friend-name{
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .right-sidebar .friend-badges,
    .right-sidebar .small{
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .right-sidebar .friend-actions,
    .right-sidebar .aktiftumuyelerlist .friend-actions,
    .right-sidebar .aktifuyelerlist .friend-actions{
        flex: 0 0 auto !important;
        min-width: max-content !important;
        max-width: max-content !important;
        position: relative !important;
        z-index: 4 !important;
    }

    .right-sidebar .friend-row > .btn,
    .right-sidebar .friend-row > button,
    .right-sidebar .aktiftumuyelerlist > li > a > .btn,
    .right-sidebar .aktiftumuyelerlist > li > div > .btn,
    .right-sidebar .aktiftumuyelerlist > li > a > button,
    .right-sidebar .aktiftumuyelerlist > li > div > button,
    .right-sidebar .aktifuyelerlist > li > a > .btn,
    .right-sidebar .aktifuyelerlist > li > div > .btn,
    .right-sidebar .aktifuyelerlist > li > a > button,
    .right-sidebar .aktifuyelerlist > li > div > button{
        flex: 0 0 auto !important;
        position: relative !important;
        z-index: 4 !important;
        margin-left: 4px !important;
        white-space: nowrap !important;
    }

    @media (max-width: 575px){
        .right-sidebar .friend-info,
        .right-sidebar .aktiftumuyelerlist .friend-info,
        .right-sidebar .aktifuyelerlist .friend-info{
            flex: 1 1 0 !important;
            min-width: 0 !important;
            max-width: none !important;
        }

        .right-sidebar .friend-name,
        .right-sidebar .aktiftumuyelerlist .friend-name,
        .right-sidebar .aktifuyelerlist .friend-name{
            max-width: 100% !important;
            padding-right: 2px !important;
        }

        .right-sidebar .friend-badges,
        .right-sidebar .small{
            max-width: 100% !important;
        }

        .right-sidebar .friend-actions{
            gap: 5px !important;
            margin-left: 5px !important;
        }
    }
/* ── Kenar çubuğu açılır alt menüsü (2026-08-02) ─────────────────────────────
   /profilim'in beş sekmesi ayrı satırlar olarak 192px yer kaplayıp asıl işi
   (klavye çalışması) katlanma çizgisinin altına itiyordu. Kapalıyken tek satır. */
.ko-simple-sub-toggle { position: relative; }
.ko-simple-caret {
    margin-left: auto;
    font-size: 11px;
    opacity: .55;
    transition: transform .2s ease;
}
.ko-simple-sub-toggle[aria-expanded="true"] .ko-simple-caret { transform: rotate(180deg); opacity: .9; }
.ko-simple-submenu { list-style: none; margin: 2px 0 4px; padding: 0 0 0 14px; }
.ko-simple-submenu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
}
.ko-simple-submenu > li > a:hover,
.ko-simple-submenu > li > a:focus-visible { background: rgba(102,126,234,.10); text-decoration: none; }
.ko-simple-submenu .micon { font-size: 13px; opacity: .7; }
.ko-simple-submenu .ko-simple-badge { margin-left: auto; }
body.dark .ko-simple-submenu > li > a:hover,
body.dark .ko-simple-submenu > li > a:focus-visible { background: rgba(139,158,255,.14); }

/* ── VIP Çalışma Merkezi şeridi (2026-08-02) ─────────────────────────────────
   Eski tanıtım kartı (.vip-center-teaser) 193px yer kaplıyor, altındaki menüyü
   katlanma çizgisinin altına itiyordu. Aynı bağlantı, tek satır. */
.vip-center-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    background: linear-gradient(135deg, #12a3b4, #1f7fa8);
    color: #fff;
    box-shadow: 0 2px 8px rgba(18,163,180,.28);
    transition: .18s ease;
}
.vip-center-strip:hover,
.vip-center-strip:focus-visible { color: #fff; text-decoration: none; transform: translateY(-1px); }
.vip-center-strip-icon {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 7px;
    background: rgba(255,255,255,.20);
    font-size: 12px;
}
.vip-center-strip-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vip-center-strip-ok { flex: 0 0 auto; opacity: .8; font-size: 14px; }


/* Misafir başlığı: "Giriş Yap". dropdown-toggle sınıfı KULLANILMAZ — Bootstrap
   o sınıftaki tıklamayı yutup gezinmeyi engelliyordu (2026-08-02).

   ⚠️ 2026-08-02'de "görünüm giriş yapmış kullanıcının satırıyla aynı, ek renk/kutu
   YOK" kararı verilmişti. 2026-08-19'da DEĞİŞTİRİLDİ — o karar sahada başarısız oldu.
   Kullanıcı bildirdi: "sağ üstteki giriş yap butonu çok sönük".
   Ölçüm, sorunun KONTRAST OLMADIĞINI gösterdi: rgb(33,37,41) / beyaz = **15,43**
   (eşik 4,5). Kusur görsel AĞIRLIKTA: arka plan/çerçeve/dolgu yok, font-weight 400,
   yani sayfadaki TEK eylem çağrısı yanındaki PASİF ikonlarla (ses, zil, gece modu)
   birebir aynı ağırlıkta duruyordu ve sağındaki dolu mavi sohbet düğmesi onu
   bastırıyordu. "Aynı satır görünümü" tutarlılık sağlıyordu ama görevi anlatmıyordu.

   Kurallar YALNIZ `.ko-giris-link` öneki altında: `.user-name` / `.user-icon`
   tek başına hedeflenemez — giriş yapmış kullanıcı da o sınıfları kullanıyor
   (header.ejs:210-213) ve onun görünümü DEĞİŞMEMELİ.
   `color: inherit` KALDIRILDI: gece modunda miras rgb(200,211,220)'ye düşüyor ve
   indigo zeminde solardı; beyaz açıkça yazılıyor. */
.ko-giris-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 14px; border-radius: 999px;
    background: #4f5bef; color: #fff; font-weight: 600;
    text-decoration: none; line-height: 1.2;
    /* 375px'te dolgu eklenince "Giriş Yap" üç satıra kırılıp düğmeyi 46px
       yapıyordu (taşma yoktu ama dağınık duruyordu). Ölçtüm: nowrap ile
       genişlik 109px, sağ kenar 365 < 375 — 10px pay kalıyor, dolgu
       daraltmaya gerek yok. */
    white-space: nowrap;
    transition: background-color .15s ease, box-shadow .15s ease;
}
/* ⚠️ Zemin, sitenin `--bs-primary`i (#6571ff) DEĞİL — o renkte beyaz yazının
   kontrastı **3,92** çıkıyor, WCAG AA eşiği 4,5'in ALTINDA (14px/600 "büyük
   metin" sayılmaz, eşik gevşemez). Bir tık koyu #4f5bef ile **5,09**.
   Marka ailesinden çıkılmadı, yalnız koyulaştırıldı. */
.ko-giris-link:hover { background: #4049d6; color: #fff; text-decoration: none; }
.ko-giris-link:focus-visible {
    color: #fff; text-decoration: none;
    outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(101,113,255,.45);
}
.ko-giris-link .user-icon { display: inline-flex; align-items: center; justify-content: center; }
.ko-giris-link .user-name { color: inherit; }

/* GECE MODU — `!important` burada MECBURİ, tercih değil.
   Ölçüm (CDP `CSS.getMatchedStylesForNode`, gece modunda): kazanan kural
   `body.dark a { color: #c8d3dc !important; }`. Yani beyaz yazımı TÜM bağlantıları
   hedefleyen bir `!important` eziyordu ve düğme indigo zeminde açık gri yazıyla
   kalıyordu — ölçtüm, kontrast **3,39** (AA eşiği 4,5'in altında). `!important`
   olmadan seçici özgüllüğü ne olursa olsun kazanamaz.
   Not: `body.dark a` kuralı bu dosyada DÖRT kez kopyalanmış (140, 2209, 8774,
   10946) — mevcut kusur, bu işin kapsamı dışı, dokunulmadı. */
body.dark .ko-giris-link,
body.dark .ko-giris-link .user-name { color: #fff !important; }

/* ── Mobilde yalnız ikon (2026-08-23) ────────────────────────────────────────
   Kullanıcı: "mobilde giriş yap butonu büyük olduğu için soldaki sidebar
   ikonuna basamıyorum."

   ÖLÇÜLDÜ (puppeteer, misafir oturumu, elementFromPoint menü ikonu merkezinde):
     360px → "hata bildir" hapı yakalıyor   ✗
     375px → "hata bildir" ikonu yakalıyor  ✗
     390px → "gece modu" hapı yakalıyor     ✗
     414px+ → .menu-icon                     ✓
   Yani .menu-icon (0-47) ile .ko-giris-link (241-350) DOĞRUDAN örtüşmüyor;
   .header-right (flex-wrap:nowrap) dar ekranda SOLA taşıyor ve en soldaki
   öğe ikonun üstüne biniyor. Taşma ~67px, bu yazı ~69px — kaldırınca kapanıyor.

   Üye tarafında bu zaten çözülmüş: :4724 `.user-info-dropdown .dropdown-toggle
   .user-name{display:none}`. Misafir düğmesi BİLEREK `dropdown-toggle` sınıfını
   kullanmadığı için (header.ejs:206) o kural onu ıskalamıştı.

   display:none DEĞİL, sr-only: yazı ekran okuyucuda kalır, düğme adsız olmaz.
   Mutlak konumlu çocuk flex öğesi sayılmaz → .ko-giris-link'in gap:7px'i
   hayalet boşluk bırakmaz. Markup'a dokunulmadı (header.ejs 30 şablonda). */
@media (max-width: 767px) {
    .ko-giris-link .user-name {
        position: absolute; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
}

/* ── Yazdığın Metin görünümü (2026-08-03) ────────────────────────────────────
   Metin analizi artık orijinal metni değil kullanıcının YAZDIĞI metni gösteriyor
   (bkz. main.js buildVitrinYazilanText). Eski kutucuklu görünüm burada
   kullanılmıyor: 180 kelime = 180 ayrı kutu, hem çirkin hem okunmazdı.

   SEÇİCİ NEDEN ÇİFT SINIF: .vitrinBox koyu zemini duello_mesaj_mobil.css:7495'te
   de tanımlı ve o dosya style.css'ten SONRA yükleniyor. Tek sınıfla yazınca
   (.v-akan) yükleme sırası yüzünden eziliyordu; .vitrinBox.v-akan iki sınıf
   olduğu için sıradan bağımsız kazanır. */
.vitrinBox.v-akan { background:#fbfbf9; border:1px solid #e4e7ec; border-radius:10px;
                    padding:14px 18px 16px; max-height:none; overflow:visible;
                    box-shadow:none; }
.vitrinBox.v-akan .v-lejant { display:flex; gap:16px; flex-wrap:wrap; align-items:center;
            padding-bottom:10px; margin-bottom:12px; border-bottom:1px solid #eceff3;
            font-size:12.5px; color:#5b6577; }
.vitrinBox.v-akan .v-lejant span { display:inline-flex; align-items:center; gap:6px; }
.vitrinBox.v-akan .v-lejant i { width:16px; height:3px; border-radius:2px; display:inline-block; }
.vitrinBox.v-akan .v-lejant .lj-hata { background:#dc2626; }
.vitrinBox.v-akan .v-lejant .lj-fazla { background:#d97706; }
.vitrinBox.v-akan .v-lejant .lj-not { margin-left:auto; font-style:italic; opacity:.75; }
.vitrinBox.v-akan .vText.v-akan-metin { font-family:Georgia,"Times New Roman",serif;
            font-size:15.5px; line-height:2.05; color:#1e2530; }
.vitrinBox.v-akan .tok { display:inline; padding:0; margin:0; border:0; border-radius:0;
            background:none; color:inherit; transition:none; }
.vitrinBox.v-akan .tok:hover { transform:none; filter:none; }
.vitrinBox.v-akan .tok.tv-hata { color:#b91c1c; font-weight:600; background:rgba(220,38,38,.10);
            border-bottom:2px solid #dc2626; padding:0 2px; border-radius:2px; }
.vitrinBox.v-akan .tok.tv-fazla { color:#b45309; font-weight:600; background:rgba(217,119,6,.12);
            border-bottom:2px solid #d97706; padding:0 2px; border-radius:2px; }
.vitrinBox.v-akan .v-altnot { margin-top:14px; padding-top:12px; border-top:1px solid #eceff3;
            font-size:13px; color:#4a5462; display:flex; flex-direction:column; gap:5px; }
.vitrinBox.v-akan .v-altnot b { color:#8a5a12; }
body.dark .vitrinBox.v-akan { background:#141a22; border-color:#2a3340; }
body.dark .vitrinBox.v-akan .vText.v-akan-metin { color:#dbe4ee; }
body.dark .vitrinBox.v-akan .v-lejant { color:#93a2b4; border-bottom-color:#242d38; }
body.dark .vitrinBox.v-akan .tok.tv-hata { color:#fca5a5; background:rgba(220,38,38,.16); border-bottom-color:#ef4444; }
body.dark .vitrinBox.v-akan .tok.tv-fazla { color:#fcd34d; background:rgba(217,119,6,.18); border-bottom-color:#f59e0b; }
body.dark .vitrinBox.v-akan .v-altnot { color:#9fb0c2; border-top-color:#242d38; }
body.dark .vitrinBox.v-akan .v-altnot b { color:#e5b769; }

/* ── KPI nötr kutusu (2026-08-03) ────────────────────────────────────────────
   Renk = durum, kimlik değil. Bir metrik iyi/kötü söylemiyorsa (WPM, Yazılan
   Kelime, eşiğin altındaki hata oranı, normal ritim) renksiz kalır. Eskiden
   yedi kutunun her biri ayrı pastel zemindeydi ve renk hiçbir şey anlatmıyordu;
   gerçek uyarı olan kırmızı da bu gürültüde kayboluyordu. */
.kpiCard.kpi-notr { background: #ffffff; --accent: #dde3ea; }
.kpiCard.kpi-notr .v { color: #233042; }
.kpiCard.kpi-notr .kpiIcon { background: #f1f4f8; color: #93a3b5; box-shadow: none; }
.kpiCard.kpi-warn { background: #fff8e6; --accent: #d9840a; }
body.dark .kpiCard.kpi-notr { background: #171f29; --accent: #2b3644; }
body.dark .kpiCard.kpi-notr .v { color: #dbe4ee; }
body.dark .kpiCard.kpi-notr .kpiIcon { background: #202a36; color: #7f8fa2; }
body.dark .kpiCard.kpi-warn { background: #2a2313; --accent: #d9840a; }

/* ═══ Sonuç ekranı → "Sıradaki Metin" düğmesi (klavye çalışması, 2026-08-17) ═══
   DİKKAT: style.css:7075'teki `.pageButton a` kuralı bu alandaki HER bağlantıya
   sabit `background: rgb(201,60,60)` (kırmızı) ve `padding: 15px 60px` veriyor.
   Özgüllüğü (0,1,1) `.btn-success` gibi Bootstrap sınıflarından (0,1,0) yüksek,
   yani sınıf yazmak yetmiyor — renk ve ölçü burada id ile eziliyor.
   Kardeş "Anasayfaya Dön" düğmesi de aynı sebeple `btn-warning` olduğu hâlde
   kırmızı görünüyor; ona DOKUNULMADI. */
.pageButton.sonuc-footer-center {
    flex-wrap: wrap;
    gap: 10px;
}
.pageButton.sonuc-footer-center a#kcSonrakiMetinBtn {
    background: #28a745;
    padding: 15px 32px;
    /* Kardeş "Anasayfaya Dön" `rounded-pill` ile 800px; bu düğmede o sınıf yok
       ve `.pageButton a` (:7080) 5px dayatıyordu — iki düğme yan yana farklı
       yuvarlaklıkta duruyordu (ölçüldü: 800px vs 5px). `50rem` yazılıyor,
       `800px` değil: kök font değişse bile kardeşiyle eşit kalsın.
       `!important` gerekmiyor — id bloğu (1,2,1) `.pageButton a`yı (0,1,1) yener. */
    border-radius: 50rem;
}
.pageButton.sonuc-footer-center a#kcSonrakiMetinBtn:hover,
.pageButton.sonuc-footer-center a#kcSonrakiMetinBtn:focus {
    background: #1e7e34;
    color: #fff;
}
.pageButton.sonuc-footer-center a#kcSonrakiMetinBtn .badge {
    /* `badge-light` yeşil zeminde soluk kalıyordu (ekran görüntüsüyle ölçüldü). */
    background: #fff;
    color: #1e7e34;
    font-size: 85%;
    vertical-align: middle;
}
.pageButton.sonuc-footer-center a#kcSonrakiMetinBtn.disabled {
    background: #6c757d;
    opacity: .65;
    cursor: not-allowed;
}
/* Telefonda iki pill yan yana sığmıyor; alt alta ve tam genişlik. */
@media (max-width: 576px) {
    .pageButton.sonuc-footer-center a {
        width: 100%;
        margin-left: 0 !important;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ═══ SINAV SAYAÇLARI: SABİT GENİŞLİK (2026-08-17, talep #499) ═══
   Kullanıcı bildirimi (uid 65819, tablet + fiziksel klavye, viewport 1097x547):
   "metin yazarken ekran sağa sola kayıyor sabit durmuyor, bu yüzden rahat
   okuyup yazamıyorum."

   ÖLÇÜLDÜ (puppeteer, kullanıcının tam cihaz profili — 1097x547, piksel oranı
   1.75, dokunmatik): Gerçek Sınav modunda yazarken metin bloğunun sol kenarı
   206.7 → 202 → 208.5 → 209 arası oynuyor, yani ~7px sağa sola titriyor.
   Blok GENİŞLİĞİ sabit (790.8) ve sayfada yatay taşma YOK — yani kayan blok
   değil, blok yeniden ORTALANIYOR.

   KAYNAK: `.kalansaniye` ham saniyeyi yazıyor (180 → 99 → 9). Rakamlar
   orantılı genişlikte olduğu için sayaç her saniye 37 → 36.1 → 32.3 px arası
   değişiyor; bu `.badge` → `.kalansurebox` → `.d-flex` → Bootstrap `.col`
   zincirinden yayılıyor ve esnek komşu kolon (83.6 → 88.2) farkı yutarken
   ortadaki metin kayıyor.

   ÇÖZÜM: rakamları tablo genişliğine sabitle (tabular-nums) + hane sayısı
   düşünce daralmasın diye min-width. Yapıya DOKUNULMUYOR — `col` düzeni
   olduğu gibi kalıyor, yalnız sayacın genişliği donduruluyor.

   `.kalansaniye` ham saniye (en fazla 3 hane), `.kalansure` mm:ss biçimi. */
.kalansurebox,
.kalansure,
.kalansaniye {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
.kalansaniye {
    display: inline-block;
    min-width: 3ch;         /* "180" ile "9" aynı yeri kaplasın */
    text-align: center;
}
.kalansure {
    display: inline-block;
    min-width: 5ch;         /* "03:00" biçimi */
    text-align: center;
}

/* ═══ SINAV PANELİ: METİN GERÇEKTEN ORTADA (2026-08-17, talep #499 devamı) ═══
   Kullanıcı (Tuba555) ilk düzeltmeden sonra: "ekranın kayması durmuş ama metin
   tam ortada değil, bu kez sağ tarafta çoğunlukla."

   ÖLÇÜM (metin bloğunun sol/sağ boşluğu, sapma = sol − sağ):
       1920px:  sol 276 / sağ 236  → sapma  +40   (kolonlar 260 / 1440 / 220)
       1097px:  sol 215 / sağ  91  → sapma +124   (kolonlar 199 /  823 /  75)
   Yani metin HER genişlikte sağa kaçık, ekran daraldıkça beter oluyor.

   İKİ SEBEP:
     1. Sol kolonda `pr-5` (48px) var, sağ kolonda karşılığı YOK → asimetri.
     2. Yan kolonlar `.col` (eşit pay almalı) ama flex öğelerinin varsayılan
        `min-width:auto`u içeriğin kolonu payının ÜSTÜNE çıkarmasına izin
        veriyor; süre rozeti solu şişirince fark sağ kolondan çalınıyor.

   ÇÖZÜM: yan kolonların yatay dolgusunu eşitle + `min-width:0` ile ikisini de
   paylarına sabitle. Orta kolon (`col-12 col-md-9`) BARE `.col` sınıfı
   taşımadığı için bu kurallardan etkilenmiyor.
   Mobil sarma (<768px) düzeni AYRI kuralla ele alınıyor — hemen aşağıda. */
@media (min-width: 768px) {
    .sinav-arayuz-paneli > .row > .col {
        min-width: 0;
        padding-left: .5rem !important;   /* p-2 ile aynı, pr-5 asimetrisi biter */
        padding-right: .5rem !important;
    }
}

/* ═══ SINAV PANELİ: DAR EKRAN DÜZENİ (2026-10-24, talep #776/#798/#804/#807/#808) ═══
   KOZAN KLAVYE: "panelde benim attığım görevleri yazarken en üst satırda
   olmalarına rağmen ekran yukarı bir anda kayıyor ve yazacağı alan yukarı
   kaydığı için göremiyorlar ... ekranın yüzdesini küçülttüm, yazmaya bu
   şekilde devam etti."

   KÖK NEDEN: orta kolon `col-12 col-md-9` → <768px'te üç kolon ALT ALTA
   diziliyor; süre şeridi tepede ~78px yiyor ama orta kolon hâlâ `h-100`
   (= panelin tamamı) iddia ediyor. `h-s-80`/`h-s-20` sınıfları işaretlemede
   VARDI ama hiçbir CSS dosyasında kuralları YOKTU (ölü sınıf) — telafi
   yazılmak istenmiş, hiç yazılmamış. Sonuç: panel KAYDIRILABİLİR hâle geliyor.

   ÖLÇÜM — `panel.scrollHeight - panel.clientHeight` (kaydırılabilir faz):
       414x774: 836px · 390x844: 906 · 360x640: 702 · 320x568: 630
       768x1024 ve 1366x768: 0            ← geniş ekranda sorun hiç yok
   O faz kaydığı anda okuma alanının üstü −758px'e gidiyor ve panel
   `overflow:hidden` + sayfa `position:fixed` olduğu için GERİ GETİRİLEMİYOR.
   Zoom küçültmek CSS genişliğini 768'in üstüne çıkardığı için "düzeliyor".
   ⚠️ Tetikleyici (gerçek cihazda ekran klavyesi odağı) headless tarayıcıda
   TEKRARLANAMADI; bu yüzden ölçüt tetikleyici değil, FAZIN KENDİSİ: faz 0 ise
   semptom hangi tetikleyiciyle olursa olsun imkânsız.

   İKİNCİ KUSUR (aynı kök): × kapat düğmesi 414x774'te 844-892, yani tamamen
   dışarıda — `elementFromPoint` ile tıklanamaz. Mobilde ESC tuşu da olmadığı
   için panel hiç kapatılamıyordu. Kapat şeridi burada dikey akıştan çıkarılıp
   panelin SAĞ ÜSTÜNE alınıyor: geniş ekranda zaten bulunduğu köşe.

   `!important` ŞART: `core.css:8572 .h-100{height:100%!important}` ve
   `core.css:8458 .position-relative{position:relative!important}`.
   `position:absolute`i `!important`siz yazdığımda kural HİÇ devreye girmedi.

   ⚠️ Sınıf adı `h-s-80` ama değer %85: ad işaretlemeden geliyor (değiştirmek
   `sinavmodlari.ejs`'i de açmak olurdu), değer ÖLÇÜMDEN — %85'te okuma alanı
   301px kalıyor, %80'de 282. "80 yazıyor, 80 olmalı" diye düzeltme.
   Bu iki sınıf YALNIZ `gerceksinavmodu` panelinde geçiyor (sinavmodlari.ejs:30,:49);
   benzer isimli `.sinav-arayuz-paneli-fq` AYRI sınıftır, bu kural onu kapsamaz.

   Bekçi: `test/sinav-paneli-dar-ekran-duzeni.test.js` (ölçüt `clientHeight`). */
@media (max-width: 767.98px) {
    .sinav-arayuz-paneli .h-s-80 { height: 85% !important; }
    /* `top`/`right`: kutu `width:auto` ile 48px olduğu için `right:0` onu sağ
       kenara çiviliyor (366-414; statik konumu 0-48 olurdu). Mutasyonla sınandı. */
    .sinav-arayuz-paneli .h-s-20 {
        position: absolute !important;
        top: 0;
        right: 0;
        z-index: 5;
        height: auto !important;
        /* ⚠️ `width: auto` SİLİNEMEZ — bir kez silindi ve CANLIDA REGRESYON oldu.
           `core.css:622` `.col,.col-1,…{ width: 100% }` bu kolona da iniyor;
           mutlak konumlu kutu o genişlikle panelin TAMAMINI kaplıyor ve opak
           `bg-body` + `z-index:5` ile süre rozetini ÖRTÜYOR. Ölçüm (hit-test,
           414x774): width yokken kapat kolonu 0-414 ve rozetin merkezindeki en
           üst eleman kapat kolonu oluyor → sınav boyunca kalan süre GÖRÜNMÜYOR;
           `width:auto` ile kutu 366-414 (48px) ve rozet açıkta.
           `.kalansurebox > .badge` bu panelde TEK süre göstergesi. */
        width: auto !important;
    }
}

/* Yan kolonlar paylarına sabitlenince süre rozeti dar ekranda taşıyordu:
   1097px'te kolon 137px, rozet 143px → rozet dikey "OKUMA METNİ" şeridinin
   altında KIRPILIYOR, sayı görünmüyordu (ekran görüntüsüyle yakalandı).
   Rozeti kolona sığdırıyoruz; geniş ekranda (kolon 240px) dokunmuyoruz. */
@media (min-width: 768px) and (max-width: 1400px) {
    .sinav-arayuz-paneli .kalansurebox {
        font-size: 1.35rem;
    }
}
.sinav-arayuz-paneli .kalansurebox {
    min-width: 0;
}
.sinav-arayuz-paneli .kalansurebox .badge {
    max-width: 100%;
    white-space: nowrap;
}


/* ————————————————————————————————————————————————————————————————
   PASİF DÜĞME + SAĞ PANEL ARKADAŞ DÜĞMESİ (2026-08-20)

   BURADA (style.css), profil.css'te DEĞİL: sağ sosyal panel her sayfada var,
   profil.css ise yalnız profil sayfalarında yükleniyor. Kural orada kalırsa
   panelde stilsiz düğme çıkar.

   ⚠️ `disabled` özniteliği ve `pointer-events:none` KULLANILMIYOR: ikisi de
   hover olayını öldürür ve `title` tooltip'i hiç görünmez.

   ⚠️ SAYDAMLIK DEĞİL AÇIK PALET: ilk sürüm `opacity:.55` + `grayscale` idi ve
   renkli zemin üzerindeki BEYAZ metin okunmuyordu (ölçüm: 1,56–2,25:1).
   Şimdiki değerler iki temada da 4,5:1 üstünde (ölçüldü).
   ———————————————————————————————————————————————————————————————— */
.ko-btn-pasif{
    background-image:none !important;
    background:#eef1f3 !important;
    color:#4a5a65 !important;
    border:1px solid #d7dfe4 !important;
    opacity:1 !important;
    filter:none !important;
    cursor:not-allowed;
    box-shadow:none !important;
    user-select:none;
}
.ko-btn-pasif:hover{
    transform:none !important;
    text-decoration:none;
}
body.dark .ko-btn-pasif{
    background:#2b3540 !important;
    color:#c3ced6 !important;
    border-color:#3d4a57 !important;
}

/* Sağ paneldeki "Arkadaş Ekle" — kullanıcı: "aktif üyelerdeki arkadaşı ekle
   butonu güzel durmuyor aynı profil kartındaki gibi güzel yaparmısın".
   Kart düğmesinin (#profileCardModal .pc-social-btn.is-friend) rengi birebir
   alındı; GEOMETRİ alınmadı çünkü panel yoğun bir liste ve mevcut kurallar
   (.right-sidebar .friend-actions .btn) yüksekliği 34px hapa sabitliyor. */
.ko-panel-arkadas{
    /* ⚠️ TON KARTTAN BİRAZ KOYU — bilerek. Kartın kendi yeşilini (#4fc497)
       birebir kopyaladığımda ölçüm 2,17:1 çıktı: beyaz yazı o yeşilin üstünde
       okunmuyor. Eski mavi düğme 6,16:1'di, yani aynen kopyalamak GERİLEME
       olurdu. Aynı yeşil kimliği koruyup metni okunur kılan en açık ton
       seçildi; degradenin İKİ durağı da >= 4,5:1 (5,63 ve 4,89 — ölçüldü). */
    background:linear-gradient(135deg,#26745a,#2a7f5e) !important;
    color:#fff !important;
    border:0 !important;
    font-weight:700;
    box-shadow:0 6px 14px rgba(38,116,90,.28) !important;
}
.ko-panel-arkadas:hover,
.ko-panel-arkadas:focus{
    background:linear-gradient(135deg,#20654e,#246f53) !important;
    color:#fff !important;
}
/* REKLAM BİRİMİ DOLU KUTU (2026-09-17): blog/blogdetay/sıralamalar/F-Q dersleri placeholder'ları kesik çizgili
   boş kutuydu ve birim hiç eklenmemişti. Birim eklenen kutuda placeholder görünümü ve sabit yükseklik kalkar;
   `<ins>` kendi min-height'ıyla yer tutar. Bileşen sınıfları (.blog-ad, .fkl-ad-slot, .ko-ranking-ad-slot,
   .blog-detail-ad) özgüllük olarak eşit; bu blok dosyanın SONUNDA olduğu için kazanır. */
.ko-reklam-dolu{border:0 !important;background:transparent !important;box-shadow:none !important;height:auto !important;min-height:0 !important;display:block !important;padding:0 !important;}
.ko-reklam-dolu::after,.ko-reklam-dolu::before{content:none !important;}
.ko-reklam-dolu > ins.adsbygoogle{width:100% !important;}

/* ====================================================================== #872
   SONUÇ EKRANI — ortada sonuçlar, kenarlarda VIP panelleri.

   Üye @övgü (#872): *"ortada kare şeklinde olan sonuç ekranı daha güzeldi"*.
   Site sahibi (10.11.2026): standart üye C varyantı, VIP üye D varyantı
   (`public/assets/tasarim/sonuc-872.html`). Kontrol ajanı ONAY tur 2/5.

   ⚠️ BU BLOK YALNIZ EKLEMEDİR. Mevcut `.vip-blur` (:7612), `.vip-lock::after`
   (:7619) ve `.kpiGrid` (:7451) kuralları DEĞİŞTİRİLMEDİ, SİLİNMEDİ:
   `.vip-lock::after`'ın `duello.css`'te karşılığı YOK ve `duello-sonuc.js`
   6 yerde basıyor; `.kpiGrid repeat(7,1fr)` `sonuc-ekrani-vip.js`'in 7 kartlı
   düzenini taşıyor. Paylaşılan kurala dokunmak o iki ekranı bozar.

   ⚠️ Buğulandırma için `.so872-cam` KULLANILIYOR, `.vip-blur` DEĞİL — o sınıf
   düello ve VIP ekranında 23 yerde basılıyor ve `duello.css:16` onu düello
   sayfalarında `blur(5px)`'e eziyor. Paylaşmak, cam yoğunluğunu ayarlamak
   isteyeni düelloyu da değiştirmeye zorlardı.

   ⚠️ Silüetler CSS-only ve `aria-hidden`; SVG + `role="img"` KULLANILMAZ
   (kayıtlı tuzak: role=img çocukları yutar).
   ====================================================================== */

.so872-kabuk{max-width:1340px;margin:0 auto;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}

/* DOM sırası merkez → sol → sağ (mobilde üye kendi metnini ÖNCE görsün).
   Masaüstü sırası yalnız burada, `order` ile veriliyor. */
@media (min-width:992px){
  .so872-kabuk{grid-template-columns:268px minmax(0,1fr) 268px;align-items:start}
  .so872-merkez{order:2}
  .so872-kenar--sol{order:1}
  .so872-kenar--sag{order:3}
}

/* Üst kart — mockup D. `.skorTopbar` ortak olduğu için kullanılmadı.
   Site sahibi (11.11.2026): "çalışma tamamlandı kartını kaldırıp bu chartı mı
   koysak, yüksekliğini de azaltmak lazım". Kart artık BLOK: üst satırı künye +
   VIP rozeti, gövdesi gelişim grafiği. `.so872-ustTik` (✓ karesi) ve
   `.so872-ustYazi > b` ("Çalışma tamamlandı") kaldırıldı — markup'ta artık
   basılmıyorlar, yetim kural bırakmamak için kuralları da silindi. */
.so872-ust{max-width:1340px;margin:0 auto 16px;background:#fff;border-radius:14px;
  box-shadow:0 1px 3px rgba(16,34,54,.10);overflow:hidden}
/* `.so872-ustBas`, `.so872-ustSol` ve `.so872-ustYazi` KALDIRILDI: künye hero'ya
   taşındı (site sahibi, 11.11.2026), VIP rozeti grafiğin özet satırına geçti,
   geriye başlık satırı kalmadı. Kart artık yalnız gelişim grafiğini taşıyor.
   `.so872-ustRozet` DURUYOR — rozet özet satırında kullanılıyor. */
/* Üst bardaki rozet büyük harfe çevrilmez — panel rozetleri (`VIP`) kısa
   olduğu için uppercase iyi duruyor, burada "VIP üye" yazıyor. */
.so872-ustRozet{font-size:11.5px;padding:6px 12px;text-transform:none;letter-spacing:0}

/* "Program Durumu" şeridi — üst barla AYNI genişlik (1340px) ve yatay akış.
   VIP çalışma merkezinde üst barın hemen altına giriyor. */
.so872-program{max-width:1340px;margin:0 auto 16px;background:#fff;border:1px solid #e6ebf2;
  border-left:3px solid #0b6fd4;border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(16,34,54,.10)}
.so872-programBas{background:#f6f9fc;border-bottom:1px solid #e6ebf2;padding:8px 16px;
  font-size:11px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:#5b6472}
.so872-programIc{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px}
.so872-programDurum{flex:none;font-size:14px;font-weight:900;color:#1f2937}
.so872-programAciklama{flex:1 1 220px;min-width:0;font-size:13px;line-height:1.5;color:#4a5667}
.so872-programSayac{flex:none;font-size:12.5px;color:#5b6472;white-space:nowrap}
/* Düğmeler birbirine yapışıyordu (site sahibi, 10.11.2026). Aralık markup'a
   değil kaba veriliyor; `aksiyonHtml` dört ayrı dalda kuruluyor, tek yerden
   çözmek daha güvenli. */
.so872-programAksiyon{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.so872-programAksiyon .btn{margin:0}

/* ---------------------------------------------------------------- merkez */
.so872-merkez{background:#fff;border-radius:16px;padding:20px;box-shadow:0 6px 22px rgba(16,34,54,.12)}
.so872-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:center;padding-bottom:16px;border-bottom:1px solid #edf1f6}
@media (min-width:576px){.so872-hero{grid-template-columns:minmax(0,1fr) auto}}
.so872-heroEtiket{font-size:12px;font-weight:700;letter-spacing:.5px;color:#5b6472;text-transform:uppercase}
.so872-heroDeger{font-size:56px;font-weight:900;line-height:1;letter-spacing:-2px;color:#0b6fd4}
/* Künye — site sahibi isteğiyle üst karttan hero'ya, DBK değeriyle Doğru Oranı
   kutusunun ARASINA taşındı (11.11.2026). Tek satır, taşarsa üç nokta. */
.so872-heroKunye{margin-top:7px;min-width:0}
.so872-heroKunye > small{display:block;font-size:13px;color:#5b6472;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so872-oran{display:flex;align-items:center;gap:12px;background:#f6f9fc;border:1px solid #e6ebf2;border-radius:12px;padding:10px 14px}
/* Chart.js canvas'ı duyarlıdır ve kutuyu taşırıp yanındaki yazının üstüne
   biner (gerçek tarayıcıda görüldü, jsdom bunu göstermez). Kutu konumlandırılıp
   canvas mutlak sabitleniyor. */
.so872-oranGrafik{position:relative;width:96px;height:96px;flex:none}
.so872-oranGrafik > canvas{position:absolute;top:0;left:0;width:100% !important;height:100% !important}
/* Yüzde canvas'ın ÜSTÜNDE, gerçek DOM metni olarak (erişilebilirlik + Chart.js
   yüklenmezse sayının kaybolmaması). Halka yarım daire olduğu için metin
   ortanın biraz altına oturuyor. */
.so872-oranYuzde{position:absolute;left:0;right:0;top:56%;transform:translateY(-50%);
  text-align:center;font-size:19px;font-weight:900;color:#0f6b49;pointer-events:none}
.so872-oranYazi{font-size:12.5px;line-height:1.45;color:#4a5667}
.so872-oranYazi b{display:block;font-size:13.5px;color:#1f2937}
.so872-oranYazi span{display:block;font-size:20px;font-weight:900;color:#0f6b49}
.so872-oranYazi small{display:block;color:#5b6472}

.so872-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 0}
@media (min-width:768px){.so872-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}}
.so872-kart{background:#f6f9fc;border:1px solid #e6ebf2;border-radius:11px;padding:11px}
.so872-kart .t{font-size:12px;color:#5b6472;margin-bottom:3px}
.so872-kart .v{font-size:23px;font-weight:900;line-height:1.1}
.so872-kart .s{font-size:11.5px;color:#5b6472;margin-top:2px}
.so872-kart.so872-ok .v{color:#16694a}
.so872-kart.so872-bad{border-color:#f3c9c4;background:#fdf4f3}
.so872-kart.so872-bad .v{color:#a3261f}
.so872-kart.so872-warn{border-color:#f3dcae;background:#fffaf0}
.so872-kirmizi{color:#a3261f}
.so872-yesil{color:#16694a}

.so872-blok{border:1px solid #e6ebf2;border-radius:12px;overflow:hidden;margin-bottom:14px}
.so872-blok:last-child{margin-bottom:0}
.so872-blokBas{background:#f6f9fc;border-bottom:1px solid #e6ebf2;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.so872-blokBas h3{margin:0;font-size:13.5px;font-weight:700}
.so872-vitrin{padding:12px;font-size:14.5px;line-height:1.85}
.so872-yanlisTablo{max-height:240px;overflow:auto}

.so872-cipler{display:flex;flex-wrap:wrap;gap:6px;padding:12px;justify-content:center}
.so872-cip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;border-radius:999px;padding:5px 10px;border:1px solid transparent}
.so872-cip b{font-weight:700}
.so872-cipGri{color:#324155;background:#eef2f6;border-color:#dde4ed}
.so872-cipOk{color:#0f5c3f;background:#e7f6ef;border-color:#bfe6d4}
.so872-cipKotu{color:#8c1f19;background:#fdecea;border-color:#f5c6c2}
.so872-cipVip{color:#6b4a06;background:#fde9bf;border-color:#f3d9a4}
.so872-cipKilit{color:#6c7787;background:#f2f5f8;border-color:#e0e6ee}
.so872-cipMor{color:#5b2a6e;background:#f4e8f8;border-color:#e4cdec}

/* ------------------------------------------------------- VIP panelleri */
.so872-kenar{display:flex;flex-direction:column;gap:11px;min-width:0}
.so872-kenarBaslik{font-size:11px;font-weight:900;letter-spacing:.9px;color:#7b5205;text-transform:uppercase;padding-left:2px}
.so872-panel{background:#fff;border:1px solid #e6ebf2;border-left:3px solid #f59e0b;border-radius:12px;padding:12px;box-shadow:0 1px 3px rgba(16,34,54,.08)}
.so872-panelBas{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.so872-panelBas h3{margin:0;font-size:13.5px;font-weight:700}
.so872-panelIc{font-size:12.5px}
.so872-rozet{font-size:10px;font-weight:900;letter-spacing:.5px;color:#6b4a06;background:#fde9bf;border-radius:999px;padding:3px 8px;text-transform:uppercase;flex:none}
.so872-cumle{margin:0;font-size:12px;line-height:1.5;color:#5b6472}
.so872-grafik{min-height:120px}
.so872-satir{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;padding:4px 0;border-bottom:1px dashed #edf1f6}
.so872-satir:last-child{border-bottom:0}
/* Çubuk satırı — "Yanlış Tipleri" ve benzeri listeler (mockup D). */
.so872-cubukSatir{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.so872-cubukSatir:last-child{margin-bottom:0}
.so872-cubukAd{flex:none;width:88px;font-size:11px;color:#4a5667;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.so872-ray{flex:1;height:8px;background:#f0f3f7;border-radius:999px;overflow:hidden}
.so872-cubuk{display:block;height:100%;background:#f0a92a;border-radius:999px}
.so872-deger{flex:none;width:26px;text-align:right;font-size:11.5px;font-weight:700;color:#334155;font-variant-numeric:tabular-nums}
.so872-ms{flex:none;width:54px;text-align:right;font-size:11.5px;color:#4a5667;font-variant-numeric:tabular-nums}
/* Harf: sade metin. Yuvarlak zemin ve kutu kaldırıldı (site sahibi,
   10.11.2026: *"o harfleri de küçülürmüsün gereksiz büyük birde yuvarlak
   arka plan rengi var ona da gerek yok"*). */
.so872-tus{flex:none;width:14px;text-align:center;font-size:11px;font-weight:700;color:#334155}

/* El dengesi — tek parça bar, yüzdeler İÇİNDE. Eski sürüm `inline-block`
   çocuklara yükseklik vermediği için hiç çizilmiyordu. */
.so872-elDenge{display:flex;height:22px;border-radius:7px;overflow:hidden;
  font-size:10.5px;font-weight:700;color:#fff;margin:4px 0}
.so872-elDenge > span{display:flex;align-items:center;justify-content:center;min-width:0}
.so872-elSol{background:#0b6fd4}
.so872-elSag{background:#13a0a6}

/* Hız akışı sütunları — Chart.js yerine (mockup D). */
.so872-spark{display:flex;align-items:flex-end;gap:2px;height:60px}
.so872-spark > i{display:block;flex:1;min-width:2px;background:#f0a92a;border-radius:2px}

.so872-satir > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.so872-sure{flex:none;color:#4a5667;font-variant-numeric:tabular-nums}
.so872-mini{height:8px;background:#f0f3f7;border-radius:999px;overflow:hidden;margin:4px 0}
.so872-mini > span{display:block;height:100%;background:#f0a92a}

/* Buzlu cam + silüet: ŞEKİL var, VERİ yok. Sunucu bu alanları standart üyeye
   hiç göndermiyor (routes/api.js:4614 → generateBasicAnalysis), bu yüzden
   silüet sabittir ve hiçbir ölçümü temsil etmez. */
.so872-panel--kapali .so872-cumle{margin-bottom:9px}
.so872-cam{border-radius:8px;overflow:hidden;filter:blur(2px);opacity:.8;pointer-events:none;user-select:none}
.so872-siluet{display:flex;flex-direction:column;gap:5px}
.so872-siluet > div{height:9px;border-radius:999px;background:#c3ccd8}
.so872-siluet--klavye{height:54px;border-radius:6px;background-image:repeating-linear-gradient(90deg,#d2d9e2 0 14px,transparent 14px 18px);background-size:100% 14px;background-repeat:repeat-y;background-position:0 3px}
.so872-siluet--sutun{height:50px;background:repeating-linear-gradient(90deg,#c3ccd8 0 6px,transparent 6px 10px);clip-path:polygon(0 62%,6% 36%,12% 56%,18% 22%,24% 46%,30% 12%,36% 42%,42% 30%,48% 52%,54% 20%,60% 44%,66% 32%,72% 58%,78% 24%,84% 48%,90% 36%,96% 54%,100% 42%,100% 100%,0 100%)}

/* Isı haritası — AÇIK ızgara (mockup D). Eski `.kbdWrap` koyu kutusu ve
   `.kKey` açık yazısı KORUNUYOR: onları düello kendi çizicisiyle kullanıyor. */
.so872-klavye{display:flex;flex-direction:column;gap:4px;align-items:center}
.so872-klavyeSatir{display:flex;gap:4px;width:100%;justify-content:center}
/* Kompakt: 268 px'lik kenar sütununda 12 tuşluk satır sığsın (mockup D). */
.so872-tusKare{flex:1 1 0;min-width:0;height:19px;border-radius:4px;background:#f1f4f8;border:1px solid #e2e8f0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#334155}
.so872-tusKare--genis{flex:6 1 0}
.so872-s1{background:#fdf0d4;border-color:#f6e0ae}
.so872-s2{background:#fad79a;border-color:#efc76f}
.so872-s3{background:#f0a92a;border-color:#dd9512;color:#2a1c04}
.so872-s3 > i{color:#4a3206}

.so872-satis{background:#fffaf0;border:1px solid #f3d9a4;border-radius:12px;padding:12px}
.so872-satis p{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:#6b4a06}
.so872-satisDugme{display:block;text-align:center;font-size:13.5px;font-weight:700;color:#fff;background:#b45309;border-radius:9px;padding:11px 14px;min-height:44px;box-sizing:border-box;text-decoration:none}
.so872-satisDugme:hover,.so872-satisDugme:focus{color:#fff;background:#92400e;text-decoration:none}

/* ------------------------------------------------- #vip-gelisim: DBK eğrisi
   Son ≤40 sonucun gelişim grafiği — artık ÜST KARTIN GÖVDESİ
   (`.so872-ust` içinde), kabuğun ayrı satırı değil. Site sahibi kararı
   (11.11.2026): "en üstte program durumu onun altında bu chart".
   Bu yüzden kendi zemini/çerçevesi/gölgesi YOK — kabı zaten kart.
   Izgara kuralları (`grid-column`, `order`) da kalktı: artık grid çocuğu değil.
   Ayrı başlık satırı da yok ("Son N sonuç" özet satırına katlandı) — amaç
   yüksekliği düşürmekti: 361 px → ~190 px. */
.so872-gelisim{border-top:1px solid #edf1f6}
/* Yükseklik SABİT olmak zorunda: Chart.js `maintainAspectRatio:false` ile
   kabın yüksekliğini okuyor; kap otomatik yükseklikte kalırsa tuval her
   çizimde biraz daha büyüyüp sayfayı aşağı itiyor. */
/* Yükseklik site sahibi isteğiyle iki kez düşürüldü (11.11.2026):
   220 → 150 → 95 px (masaüstü), mobilde 80 px. 40 noktalık bir eğrinin işi
   yönü göstermek; sayılar alt özet satırında yazıyor, o yüzden alçak tuval
   bilgi kaybetmiyor. */
.so872-gelisimTuval{position:relative;height:80px;padding:6px 16px 0}
/* `inset` kısayolu KULLANILMIYOR: iOS Safari 14.5'ten eski sürümlerde yok ve
   orada canvas `top/left:auto` ile akıyor (kontrol ajanı bulgusu, tur 2). */
.so872-gelisimTuval canvas{position:absolute;top:6px;right:16px;bottom:0;left:16px}
/* Özet satırı: sayılar solda, VIP rozeti sağda. Rozet buraya alındı çünkü
   künye hero'ya taşınınca üst kartın başlık satırı boşaldı; ayrı bir satır
   tutmak kartı gereksiz yükseltirdi. */
.so872-gelisimOzet{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin:0;padding:2px 16px 9px;font-size:12px;color:#4a5667;min-width:0}
.so872-gelisimOzet > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:992px){
  .so872-gelisimTuval{height:95px}
}