/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 34px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.375rem;
}

/* ! For .layout-navbar-fixed added fix padding top to .layout-page */
/* Default navbar */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 72px !important;
}
/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 254px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}

/*
* Yatay menü: 9 üst düzey öğe uzun Türkçe etiketlerle taşıyordu,
* öğe aralıkları daraltılarak tek satıra sığdırıldı.
******************************************************************************/

@media (min-width: 1200px) {
  .menu-horizontal .menu-inner > .menu-item > .menu-link {
    padding-inline: 0.45rem;
    font-size: 0.9375rem;
  }
  .menu-horizontal .menu-inner > .menu-item > .menu-link > .menu-icon {
    margin-inline-end: 0.3rem;
    font-size: 1.2rem;
  }
  /* Açılır menü oku mutlak konumlu; etiketin üstüne binmemesi için yer bırakılır.
     Ok varsayılan 1.375rem genişlikte ve sağdan 0.8rem içeride durduğu için
     2.175rem'lik bir alan kaplıyordu; ok küçültülüp kenara yaklaştırıldı. */
  .menu-horizontal .menu-inner > .menu-item > .menu-link.menu-toggle {
    padding-inline-end: 1.4rem;
  }
  .menu-horizontal .menu-inner > .menu-item > .menu-toggle::after {
    inset-inline-end: 0.15rem;
    block-size: 1.05rem;
    inline-size: 1.05rem;
    font-size: 1.05rem;
  }
}

/*
* Modal / Offcanvas: proje genelinde ortak davranış
******************************************************************************/

/* Açılış/kapanış hızını artır */
.offcanvas {
  --bs-offcanvas-transition: transform 0.15s ease-in-out;
}
.modal.fade .modal-dialog {
  transition: transform 0.1s ease-out;
}

/* Arka planı bulanıklaştır */
.modal-backdrop.show,
.offcanvas-backdrop.show {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/*
* Glassmorphism tema — yedi renk paleti
* ------------------------------------------------------------------
* Cam yüzey tekniği "ödeme sayfaları" temasından (ödeme sayfaları/css/odeme.css)
* devralınmıştır. Renk ailesi <html data-wp-tema="..."> ile değişir:
*   turuncu  — ödeme sayfalarıyla aynı turuncu/siyah palet
*   adacayi  — monokrom adaçayı yeşili paleti
*   lacivert — monokrom gece mavisi paleti
*   bordo    — bordo / kahve (Coffee) paleti
*   sakura   — pembe / sakura paleti
*   sahil    — gri mavi sahil paleti
*   mor      — mor / gece paleti
* Seçim assets/js/tema.js tarafından localStorage'dan okunur.
*
* Vuexy bileşenleri renklerini --bs-* değişkenlerinden aldığı için bu
* değişkenleri kök seviyede yeniden tanımlamak butonlar, rozetler, tablolar,
* modallar ve form alanları dâhil tüm alt bileşenleri otomatik dönüştürür.
******************************************************************************/

/* ---------- Palet 1: Turuncu / Siyah (ödeme sayfaları) ---------- */

html[data-wp-tema='turuncu'] {
  --wp-vurgu: #ff5522;
  --wp-vurgu-rgb: 255, 85, 34;
  --wp-vurgu-acik: #ff9a63;
  --wp-vurgu-yazi: #ffffff;
  --wp-vurgu-gradyan: linear-gradient(135deg, #ff4d1a 0%, #ff8a3d 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #ff5f30 0%, #ff9c55 100%);
  --wp-golge-rgb: 255, 85, 34;

  --wp-bag: #ff8a4d;
  --wp-bag-rgb: 255, 138, 77;
  --wp-bag-hover: #ffab7a;

  /* Cam yüzeylerin rengi (beyaz alfa) */
  --wp-cam-rgb: 255, 255, 255;

  --wp-zemin-ust: #1b1b1e;
  --wp-zemin-alt: #0b0b0d;
  --wp-isik-1: rgba(255, 85, 34, 0.5);
  --wp-isik-2: rgba(255, 140, 50, 0.4);

  --wp-govde-bg: #131316;
  --wp-govde-bg-rgb: 19, 19, 22;
  --wp-yazi: #c9c7cc;
  --wp-yazi-rgb: 201, 199, 204;
  --wp-baslik: #f6f5f7;
  --wp-baslik-rgb: 246, 245, 247;
  --wp-ikincil: #9d9ba3;
  --wp-ikincil-rgb: 157, 155, 163;
  --wp-taban: #f1eeec;

  /* Opak koyu paneller (modal, açılır liste, ipucu) */
  --wp-panel-koyu-1: 38, 38, 44;
  --wp-panel-koyu-2: 22, 22, 26;
  --wp-acilir-koyu: 24, 24, 28;
  --wp-ipucu-koyu: 28, 28, 33;
}

/* ---------- Palet 2: Monokrom Adaçayı Yeşili ---------- */
/* Sage Hint #BFCFBB · Mint #B0C6AC · Sage #8EA58C · Moss #738A6E · Evergreen #344C3D */

html[data-wp-tema='adacayi'] {
  --wp-vurgu: #8ea58c;
  --wp-vurgu-rgb: 142, 165, 140;
  --wp-vurgu-acik: #bfcfbb;
  /* Adaçayı açık bir ton; üzerine koyu yazı okunur (kontrast ~6.9:1) */
  --wp-vurgu-yazi: #16241b;
  --wp-vurgu-gradyan: linear-gradient(135deg, #738a6e 0%, #9db79a 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #82996f 0%, #adc5aa 100%);
  --wp-golge-rgb: 115, 138, 110;

  --wp-bag: #b0c6ac;
  --wp-bag-rgb: 176, 198, 172;
  --wp-bag-hover: #d3e0d0;

  --wp-cam-rgb: 191, 207, 187;

  --wp-zemin-ust: #202a22;
  --wp-zemin-alt: #0a0e0b;
  --wp-isik-1: rgba(157, 183, 154, 0.5);
  --wp-isik-2: rgba(115, 138, 110, 0.6);

  --wp-govde-bg: #131714;
  --wp-govde-bg-rgb: 19, 23, 20;
  --wp-yazi: #c4cdc2;
  --wp-yazi-rgb: 196, 205, 194;
  --wp-baslik: #f0f4ee;
  --wp-baslik-rgb: 240, 244, 238;
  --wp-ikincil: #98a596;
  --wp-ikincil-rgb: 152, 165, 150;
  --wp-taban: #eef3ec;

  --wp-panel-koyu-1: 32, 41, 34;
  --wp-panel-koyu-2: 17, 23, 19;
  --wp-acilir-koyu: 22, 29, 24;
  --wp-ipucu-koyu: 24, 32, 26;
}


/* ---------- Palet 3: Lacivert / Gece Mavisi ---------- */
/* Koyu lacivertten açık gri-maviye uzanan monokrom mavi şerit paleti */

html[data-wp-tema='lacivert'] {
  --wp-vurgu: #6b80a8;
  --wp-vurgu-rgb: 107, 128, 168;
  --wp-vurgu-acik: #a9b8d3;
  --wp-vurgu-yazi: #ffffff;
  --wp-vurgu-gradyan: linear-gradient(135deg, #35496e 0%, #6b80a8 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #3e5480 0%, #7a8fb6 100%);
  --wp-golge-rgb: 53, 73, 110;

  --wp-bag: #a9b8d3;
  --wp-bag-rgb: 169, 184, 211;
  --wp-bag-hover: #cdd7e8;

  --wp-cam-rgb: 200, 214, 235;

  --wp-zemin-ust: #172439;
  --wp-zemin-alt: #070c15;
  --wp-isik-1: rgba(107, 128, 168, 0.5);
  --wp-isik-2: rgba(53, 73, 110, 0.65);

  --wp-govde-bg: #0f1725;
  --wp-govde-bg-rgb: 15, 23, 37;
  --wp-yazi: #c3ccdb;
  --wp-yazi-rgb: 195, 204, 219;
  --wp-baslik: #edf1f7;
  --wp-baslik-rgb: 237, 241, 247;
  --wp-ikincil: #96a1b8;
  --wp-ikincil-rgb: 150, 161, 184;
  --wp-taban: #edf1f7;

  --wp-panel-koyu-1: 32, 44, 66;
  --wp-panel-koyu-2: 16, 23, 37;
  --wp-acilir-koyu: 20, 29, 46;
  --wp-ipucu-koyu: 24, 34, 53;
}

/* ---------- Palet 4: Bordo / Kahve ---------- */
/* Coffee paleti: #561C24 · #6D2932 · #C7B7A3 · #E8D8C4 */

html[data-wp-tema='bordo'] {
  --wp-vurgu: #c7b7a3;
  --wp-vurgu-rgb: 199, 183, 163;
  --wp-vurgu-acik: #e8d8c4;
  /* Taupe açık bir ton; üzerine koyu bordo yazı okunur */
  --wp-vurgu-yazi: #2e1116;
  --wp-vurgu-gradyan: linear-gradient(135deg, #b3a08a 0%, #e0cfb8 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #c0ad97 0%, #ecdcc7 100%);
  --wp-golge-rgb: 109, 41, 50;

  --wp-bag: #e8d8c4;
  --wp-bag-rgb: 232, 216, 196;
  --wp-bag-hover: #f6ece0;

  --wp-cam-rgb: 232, 216, 196;

  --wp-zemin-ust: #3a1219;
  --wp-zemin-alt: #17070a;
  --wp-isik-1: rgba(109, 41, 50, 0.8);
  --wp-isik-2: rgba(199, 183, 163, 0.3);

  --wp-govde-bg: #1c0b0f;
  --wp-govde-bg-rgb: 28, 11, 15;
  --wp-yazi: #d5c6b8;
  --wp-yazi-rgb: 213, 198, 184;
  --wp-baslik: #f4ece1;
  --wp-baslik-rgb: 244, 236, 225;
  --wp-ikincil: #ab9a8d;
  --wp-ikincil-rgb: 171, 154, 141;
  --wp-taban: #f4ece1;

  --wp-panel-koyu-1: 58, 26, 32;
  --wp-panel-koyu-2: 30, 12, 16;
  --wp-acilir-koyu: 40, 17, 22;
  --wp-ipucu-koyu: 46, 20, 26;
}


/* ---------- Palet 5: Sakura / Pembe ---------- */
/* #DDBBC5 · #D0A6B3 · #DF7C8C · #9D3C51 · #161722 */

html[data-wp-tema='sakura'] {
  --wp-vurgu: #df7c8c;
  --wp-vurgu-rgb: 223, 124, 140;
  --wp-vurgu-acik: #ddbbc5;
  --wp-vurgu-yazi: #ffffff;
  --wp-vurgu-gradyan: linear-gradient(135deg, #9d3c51 0%, #c96b7c 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #ad445b 0%, #d87a8b 100%);
  --wp-golge-rgb: 157, 60, 81;

  --wp-bag: #df7c8c;
  --wp-bag-rgb: 223, 124, 140;
  --wp-bag-hover: #ecaab5;

  --wp-cam-rgb: 221, 187, 197;

  --wp-zemin-ust: #241a22;
  --wp-zemin-alt: #0e0b11;
  --wp-isik-1: rgba(223, 124, 140, 0.45);
  --wp-isik-2: rgba(157, 60, 81, 0.6);

  --wp-govde-bg: #161722;
  --wp-govde-bg-rgb: 22, 23, 34;
  --wp-yazi: #cfc3c8;
  --wp-yazi-rgb: 207, 195, 200;
  --wp-baslik: #f3e9ec;
  --wp-baslik-rgb: 243, 233, 236;
  --wp-ikincil: #a4939a;
  --wp-ikincil-rgb: 164, 147, 154;
  --wp-taban: #f3e9ec;

  --wp-panel-koyu-1: 42, 32, 38;
  --wp-panel-koyu-2: 24, 20, 26;
  --wp-acilir-koyu: 28, 23, 30;
  --wp-ipucu-koyu: 32, 26, 34;
}

/* ---------- Palet 6: Sahil / Gri Mavi ---------- */
/* #162533 · #546079 · #7D97B6 · #E1E7F2 · #716C66 */

html[data-wp-tema='sahil'] {
  --wp-vurgu: #7d97b6;
  --wp-vurgu-rgb: 125, 151, 182;
  --wp-vurgu-acik: #e1e7f2;
  /* Açık gri-mavi zemin üzerinde koyu yazı okunur */
  --wp-vurgu-yazi: #16202e;
  --wp-vurgu-gradyan: linear-gradient(135deg, #7d97b6 0%, #a8bcd4 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #8ba4c1 0%, #b6c7dc 100%);
  --wp-golge-rgb: 84, 96, 121;

  --wp-bag: #a8bcd4;
  --wp-bag-rgb: 168, 188, 212;
  --wp-bag-hover: #d0dcea;

  --wp-cam-rgb: 225, 231, 242;

  --wp-zemin-ust: #1e2b3c;
  --wp-zemin-alt: #0b1119;
  --wp-isik-1: rgba(125, 151, 182, 0.45);
  --wp-isik-2: rgba(84, 96, 121, 0.65);

  --wp-govde-bg: #162533;
  --wp-govde-bg-rgb: 22, 37, 51;
  --wp-yazi: #c2cbd8;
  --wp-yazi-rgb: 194, 203, 216;
  --wp-baslik: #e1e7f2;
  --wp-baslik-rgb: 225, 231, 242;
  /* Paletin sıcak grisi ikincil yazıda kullanılır */
  --wp-ikincil: #9a948c;
  --wp-ikincil-rgb: 154, 148, 140;
  --wp-taban: #e1e7f2;

  --wp-panel-koyu-1: 32, 45, 61;
  --wp-panel-koyu-2: 17, 26, 36;
  --wp-acilir-koyu: 20, 31, 43;
  --wp-ipucu-koyu: 24, 36, 49;
}

/* ---------- Palet 7: Mor / Gece ---------- */
/* #1e202c · #60519b · #31323e · #bfc0d1 */

html[data-wp-tema='mor'] {
  --wp-vurgu: #8878cf;
  --wp-vurgu-rgb: 136, 120, 207;
  --wp-vurgu-acik: #bfc0d1;
  --wp-vurgu-yazi: #ffffff;
  --wp-vurgu-gradyan: linear-gradient(135deg, #4d3f85 0%, #60519b 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #5a4a96 0%, #6e5eaf 100%);
  --wp-golge-rgb: 96, 81, 155;

  --wp-bag: #a99cdf;
  --wp-bag-rgb: 169, 156, 223;
  --wp-bag-hover: #cbc3ee;

  --wp-cam-rgb: 191, 192, 209;

  --wp-zemin-ust: #262738;
  --wp-zemin-alt: #101119;
  --wp-isik-1: rgba(96, 81, 155, 0.55);
  --wp-isik-2: rgba(49, 50, 62, 0.75);

  --wp-govde-bg: #1e202c;
  --wp-govde-bg-rgb: 30, 32, 44;
  --wp-yazi: #c4c5d4;
  --wp-yazi-rgb: 196, 197, 212;
  --wp-baslik: #ecedf4;
  --wp-baslik-rgb: 236, 237, 244;
  --wp-ikincil: #8f90a3;
  --wp-ikincil-rgb: 143, 144, 163;
  --wp-taban: #ecedf4;

  --wp-panel-koyu-1: 49, 50, 62;
  --wp-panel-koyu-2: 24, 25, 34;
  --wp-acilir-koyu: 30, 32, 44;
  --wp-ipucu-koyu: 34, 36, 48;
}

/* ---------- Palet 8: Gümüş / Gri-Mavi ---------- */
/* Gri tekir kedi + mavi göz paleti: #9FC6CE · #5C8FA3 · #7C8477 · #262B2D · #E3E3E3 */

html[data-wp-tema='gumus'] {
  --wp-vurgu: #5c8fa3;
  --wp-vurgu-rgb: 92, 143, 163;
  --wp-vurgu-acik: #9fc6ce;
  --wp-vurgu-yazi: #ffffff;
  --wp-vurgu-gradyan: linear-gradient(135deg, #3d6d80 0%, #5c8fa3 100%);
  --wp-vurgu-gradyan-hover: linear-gradient(135deg, #47788c 0%, #6c9db0 100%);
  --wp-golge-rgb: 61, 109, 128;

  --wp-bag: #9fc6ce;
  --wp-bag-rgb: 159, 198, 206;
  --wp-bag-hover: #c3dde2;

  --wp-cam-rgb: 201, 210, 208;

  --wp-zemin-ust: #2a3033;
  --wp-zemin-alt: #14171a;
  --wp-isik-1: rgba(92, 143, 163, 0.45);
  --wp-isik-2: rgba(38, 43, 45, 0.65);

  --wp-govde-bg: #1c2022;
  --wp-govde-bg-rgb: 28, 32, 34;
  --wp-yazi: #c9d0d0;
  --wp-yazi-rgb: 201, 208, 208;
  --wp-baslik: #eef2f2;
  --wp-baslik-rgb: 238, 242, 242;
  /* Paletin gri-yeşil (sage) tonu ikincil yazıda kullanılır */
  --wp-ikincil: #98a196;
  --wp-ikincil-rgb: 152, 161, 150;
  --wp-taban: #eef2f2;

  --wp-panel-koyu-1: 42, 48, 51;
  --wp-panel-koyu-2: 20, 23, 26;
  --wp-acilir-koyu: 26, 30, 33;
  --wp-ipucu-koyu: 30, 35, 38;
}

/* ---------- Paletten bağımsız ortak tema ---------- */

html[data-bs-theme] {
  --bs-primary: var(--wp-vurgu);
  --bs-primary-rgb: var(--wp-vurgu-rgb);
  --bs-primary-contrast: var(--wp-vurgu-yazi);
  --bs-primary-text-emphasis: var(--wp-vurgu-acik);
  --bs-primary-bg-subtle: rgba(var(--wp-vurgu-rgb), 0.18);
  --bs-primary-border-subtle: rgba(var(--wp-vurgu-rgb), 0.38);
  --bs-link-color: var(--wp-bag);
  --bs-link-color-rgb: var(--wp-bag-rgb);
  --bs-link-hover-color: var(--wp-bag-hover);

  --bs-base-color: var(--wp-taban);
  --bs-paper-bg: rgba(var(--wp-cam-rgb), 0.06);
  --bs-bg-label-tint-amount: 82%;

  --bs-body-bg: var(--wp-govde-bg);
  --bs-body-bg-rgb: var(--wp-govde-bg-rgb);
  --bs-body-color: var(--wp-yazi);
  --bs-body-color-rgb: var(--wp-yazi-rgb);
  --bs-heading-color: var(--wp-baslik);
  --bs-emphasis-color: var(--wp-baslik);
  --bs-emphasis-color-rgb: var(--wp-baslik-rgb);

  --bs-secondary-color: var(--wp-ikincil);
  --bs-secondary-color-rgb: var(--wp-ikincil-rgb);
  --bs-secondary-bg: rgba(var(--wp-cam-rgb), 0.08);
  --bs-tertiary-bg: rgba(var(--wp-cam-rgb), 0.05);

  --bs-border-color: rgba(var(--wp-cam-rgb), 0.14);
  --bs-border-color-translucent: rgba(var(--wp-cam-rgb), 0.08);

  --bs-box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
  --bs-box-shadow-sm: 0 0.25rem 1rem rgba(0, 0, 0, 0.4);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.55);
  --bs-focus-ring-color: rgba(var(--wp-vurgu-rgb), 0.35);

  /* Menü: Vuexy'nin açık tema değerleri koyu zeminde okunmuyor */
  --bs-menu-bg: transparent;
  --bs-menu-color: var(--wp-yazi);
  --bs-menu-color-rgb: var(--wp-yazi-rgb);
  --bs-menu-hover-bg: rgba(var(--wp-cam-rgb), 0.1);
  --bs-menu-hover-color: var(--wp-baslik);
  --bs-menu-sub-active-bg: rgba(var(--wp-vurgu-rgb), 0.18);
  --bs-menu-sub-active-color: var(--wp-vurgu-acik);
  --bs-menu-active-color: var(--wp-vurgu-yazi);
  --bs-menu-active-bg: var(--bs-primary);
  --bs-menu-horizontal-active-bg: var(--bs-primary-bg-subtle);
  --bs-menu-header-color: var(--bs-secondary-color);
  --bs-menu-divider-color: rgba(var(--wp-cam-rgb), 0.14);
  --bs-menu-box-shadow: none;
  --bs-menu-horizontal-menu-box-shadow: none;
  --bs-menu-horizontal-menu-sub-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.55);

  /* Açılır menü: şablonun açık gri vurgusu koyu zeminde yazıyı görünmez kılıyor */
  --bs-dropdown-bg: rgba(var(--wp-acilir-koyu), 0.97);
  --bs-dropdown-color: var(--wp-yazi);
  --bs-dropdown-border-color: rgba(var(--wp-cam-rgb), 0.12);
  --bs-dropdown-link-color: var(--wp-baslik);
  --bs-dropdown-link-hover-color: var(--wp-baslik);
  --bs-dropdown-link-hover-bg: rgba(var(--wp-cam-rgb), 0.1);
  --bs-dropdown-link-active-color: var(--wp-vurgu-acik);
  --bs-dropdown-link-active-bg: rgba(var(--wp-vurgu-rgb), 0.18);
  --bs-dropdown-header-color: var(--wp-ikincil);
  --bs-dropdown-divider-bg: rgba(var(--wp-cam-rgb), 0.12);

  /* Cam panel yardımcı değişkenleri */
  --wp-panel-bg: rgba(var(--wp-cam-rgb), 0.05);
  --wp-panel-bg-hover: rgba(var(--wp-cam-rgb), 0.1);
  --wp-panel-border: rgba(var(--wp-cam-rgb), 0.14);

  color-scheme: dark;
}

/* ---------- Zemin ve hareketli ışıklar ---------- */

body {
  position: relative;
  background: linear-gradient(180deg, var(--wp-zemin-ust) 0%, var(--wp-zemin-alt) 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}

body::before {
  inline-size: 62vmax;
  block-size: 62vmax;
  inset-block-start: -22vmax;
  inset-inline-start: -20vmax;
  background: radial-gradient(circle, var(--wp-isik-1), transparent 70%);
  animation: winpayIsik1 3.2s ease-in-out infinite;
}

body::after {
  inline-size: 56vmax;
  block-size: 56vmax;
  inset-block-end: -20vmax;
  inset-inline-end: -18vmax;
  background: radial-gradient(circle, var(--wp-isik-2), transparent 70%);
  animation: winpayIsik2 4s ease-in-out infinite;
}

@keyframes winpayIsik1 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(7vw, 8vh) scale(1.18);
  }
}

@keyframes winpayIsik2 {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-7vw, -7vh) scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

.layout-wrapper {
  position: relative;
  z-index: 1;
}

/* ---------- Cam yüzeyler ---------- */

.card {
  --bs-card-bg: transparent;
  --bs-card-border-radius: 1.25rem;
  --bs-card-inner-border-radius: 1.25rem;
  --bs-card-border-width: 1px;
  --bs-card-border-color: rgba(var(--wp-cam-rgb), 0.12);
  --bs-card-color: var(--bs-body-color);
  --bs-card-cap-bg: transparent;
  background: linear-gradient(155deg, rgba(var(--wp-cam-rgb), 0.1), rgba(var(--wp-cam-rgb), 0.025));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(var(--wp-cam-rgb), 0.1);
}

.card:has(.card-datatable) {
  overflow: hidden;
}

/* Navbar ve yatay menü de cam yüzey olur */
.layout-navbar,
#layout-menu.menu-horizontal {
  background: rgba(var(--wp-cam-rgb), 0.04) !important;
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border-bottom: 1px solid rgba(var(--wp-cam-rgb), 0.08);
  box-shadow: none;
}

.menu-horizontal .menu-inner > .menu-item.active > .menu-link {
  background: var(--wp-vurgu-gradyan);
  color: var(--wp-vurgu-yazi);
  box-shadow: 0 8px 24px rgba(var(--wp-golge-rgb), 0.4);
}

/* Açılır alt menüler.
   Vuexy `.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub`
   seçicisiyle zemine --bs-menu-bg (bizde transparent) veriyor; o seçici daha
   baskın olduğu için panel saydam kalıp altındaki içerik okunuyordu. */
.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub,
.menu-horizontal .menu-sub,
.menu-horizontal .menu-sub .menu-sub,
.dropdown-menu {
  background: rgba(var(--wp-acilir-koyu), 0.97) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.6);
}

/* Açılır menü öğeleri: Vuexy bu değişkenleri .dropdown-menu üzerinde tanımladığı
   için kök seviyedeki tanım geçersiz kalıyor; açık gri vurgu zemini koyu temada
   yazıyı görünmez kılıyordu. */
.dropdown-menu {
  --bs-dropdown-color: var(--wp-yazi);
  --bs-dropdown-link-color: var(--wp-baslik);
  --bs-dropdown-link-hover-color: var(--wp-baslik);
  --bs-dropdown-link-hover-bg: rgba(var(--wp-cam-rgb), 0.12);
  --bs-dropdown-link-active-color: var(--wp-vurgu-acik);
  --bs-dropdown-link-active-bg: rgba(var(--wp-vurgu-rgb), 0.18);
  --bs-dropdown-header-color: var(--wp-ikincil);
  --bs-dropdown-divider-bg: rgba(var(--wp-cam-rgb), 0.12);
  --bs-dropdown-border-color: rgba(var(--wp-cam-rgb), 0.12);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--bs-dropdown-link-hover-bg);
  color: var(--bs-dropdown-link-hover-color);
}

/* Bildirim listesi öğeleri de aynı vurguyu kullanır */
.dropdown-notifications-list .list-group-item-action:hover,
.dropdown-notifications-list .list-group-item-action:focus {
  background-color: rgba(var(--wp-cam-rgb), 0.1);
  color: var(--wp-baslik);
}

/* Açık üst menü öğesi de saydam kalmasın */
.menu-horizontal .menu-inner .menu-item.open > .menu-toggle {
  background-color: rgba(var(--wp-cam-rgb), 0.1) !important;
}

/* ---------- Form alanları ---------- */

.form-control,
.form-select,
.input-group-text,
.select2-container--default .select2-selection,
.flatpickr-input {
  background-color: rgba(var(--wp-cam-rgb), 0.045);
  border-color: rgba(var(--wp-cam-rgb), 0.12);
  color: var(--bs-heading-color);
}

.form-control::placeholder {
  color: rgba(var(--wp-baslik-rgb), 0.38);
}

.form-control:focus,
.form-select:focus {
  background-color: rgba(var(--wp-cam-rgb), 0.065);
  color: var(--bs-heading-color);
}

/* ---------- Butonlar ---------- */

/* Vurgu zemini üzerindeki yazı rengi paletten gelir; adaçayı paletinde
   koyu, turuncu palette beyazdır. */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary:disabled {
  --bs-btn-color: var(--wp-vurgu-yazi);
  --bs-btn-hover-color: var(--wp-vurgu-yazi);
  --bs-btn-active-color: var(--wp-vurgu-yazi);
  --bs-btn-disabled-color: var(--wp-vurgu-yazi);
  color: var(--wp-vurgu-yazi);
}

.btn-primary {
  background: var(--wp-vurgu-gradyan);
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(var(--wp-golge-rgb), 0.4);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: var(--wp-vurgu-gradyan-hover);
  border-color: transparent;
}

/* Dolu vurgu zeminli diğer öğeler de aynı yazı rengini kullanır */
.bg-primary,
.badge.bg-primary,
.btn-group .btn-check:checked + .btn-primary {
  color: var(--wp-vurgu-yazi) !important;
}

/* ---------- Tablolar ---------- */

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--bs-body-color);
  --bs-table-border-color: rgba(var(--wp-cam-rgb), 0.08);
  --bs-table-striped-bg: rgba(var(--wp-cam-rgb), 0.03);
  --bs-table-hover-bg: rgba(var(--wp-cam-rgb), 0.06);
  --bs-table-hover-color: var(--bs-heading-color);
}

.table thead th {
  background: transparent;
  color: var(--bs-secondary-color);
}

/* ---------- Modal / offcanvas ---------- */

.modal-content,
.offcanvas {
  background: linear-gradient(155deg, rgba(var(--wp-panel-koyu-1), 0.96), rgba(var(--wp-panel-koyu-2), 0.96));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.modal-header,
.modal-footer,
.offcanvas-header {
  border-color: rgba(var(--wp-cam-rgb), 0.1);
}

/* ---------- Ara Kasa belgesi ---------- */

/* Şablonun açık gri başlık bloğu koyu zeminde okunmuyor.
   app-invoice.css bu dosyadan sonra yüklendiği için seçici bir kademe güçlendirildi. */
html .invoice-preview .invoice-preview-header {
  background-color: rgba(var(--wp-cam-rgb), 0.05);
  border-radius: 0.75rem;
}

/* ---------- Sayfa üstünde yüzen eklenti panelleri ---------- */

/* Takvim, select2 ve SweetAlert gövdenin doğrudan altına taşındığı için
   kartın cam yüzeyini miras almaz; kendi opak cam zeminleri verilir. */
.flatpickr-calendar,
.select2-container--default .select2-dropdown,
.swal2-popup,
.tox .tox-menu,
.ts-dropdown {
  background: linear-gradient(155deg, rgba(var(--wp-panel-koyu-1), 0.97), rgba(var(--wp-panel-koyu-2), 0.97)) !important;
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  color: var(--bs-body-color);
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none;
}

/* Cam kartlar backdrop-filter yüzünden kendi yığın bağlamını oluşturuyor;
   bu yüzden açılan takvim/seçim listesi sonraki kartların altında kalıyor. */
.card:has(.flatpickr-calendar.open),
.card:has(.select2-container--open),
.card:has(.show > .dropdown-menu) {
  position: relative;
  z-index: 5;
}

.flatpickr-month,
.flatpickr-weekdays,
.flatpickr-days,
.flatpickr-weekday,
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: var(--bs-heading-color);
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: rgb(var(--wp-panel-koyu-1));
  color: var(--bs-heading-color);
}

.flatpickr-prev-month,
.flatpickr-next-month {
  background: rgba(var(--wp-cam-rgb), 0.06) !important;
  fill: var(--bs-heading-color);
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
  background: rgba(var(--wp-cam-rgb), 0.12) !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  fill: var(--bs-heading-color);
}

.flatpickr-day {
  color: var(--bs-body-color);
}

.flatpickr-day:hover,
.flatpickr-day.inRange {
  background: rgba(var(--wp-cam-rgb), 0.1);
  border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--wp-vurgu-gradyan);
  border-color: transparent;
  color: var(--wp-vurgu-yazi);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: rgba(var(--wp-yazi-rgb), 0.35);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected='true'] {
  background: rgba(var(--wp-vurgu-rgb), 0.2);
  color: var(--bs-heading-color);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  background: rgba(var(--wp-cam-rgb), 0.05);
  border-color: rgba(var(--wp-cam-rgb), 0.12);
  color: var(--bs-heading-color);
}

.swal2-popup .swal2-title,
.swal2-popup .swal2-html-container {
  color: var(--bs-heading-color);
}

/* ---------- Sayfalama ---------- */

/* Şablonun açık gri sayfalama düğmeleri koyu zeminde parlıyor. */
.pagination .page-link,
.pagination .page-link.first,
.pagination .page-link.previous,
.pagination .page-link.next,
.pagination .page-link.last {
  background-color: rgba(var(--wp-cam-rgb), 0.06);
  border-color: transparent;
  color: var(--bs-body-color);
}

.pagination .page-link:hover {
  background-color: rgba(var(--wp-cam-rgb), 0.12);
  color: var(--bs-heading-color);
}

.pagination .page-item.active .page-link,
.pagination .page-link.active {
  background: var(--wp-vurgu-gradyan);
  border-color: transparent;
  color: var(--wp-vurgu-yazi);
  box-shadow: 0 6px 18px rgba(var(--wp-golge-rgb), 0.4);
}

.pagination .page-item.disabled .page-link {
  background-color: rgba(var(--wp-cam-rgb), 0.03);
  color: rgba(var(--wp-yazi-rgb), 0.4);
}

/* ---------- Uyarı kutuları ---------- */

/* Açık tema tonları koyu zeminde bloklar hâlinde parlıyor;
   saydam renk tonu + açık yazı ile cam yüzeye uyarlanır. */
.alert-primary {
  --bs-alert-bg: rgba(var(--wp-vurgu-rgb), 0.18);
  --bs-alert-color: var(--wp-vurgu-acik);
  --bs-alert-border-color: rgba(var(--wp-golge-rgb), 0.35);
}

.alert-secondary {
  --bs-alert-bg: rgba(var(--wp-cam-rgb), 0.08);
  --bs-alert-color: var(--bs-body-color);
  --bs-alert-border-color: rgba(var(--wp-cam-rgb), 0.16);
}

.alert-success {
  --bs-alert-bg: rgba(40, 199, 111, 0.16);
  --bs-alert-color: #5fd99a;
  --bs-alert-border-color: rgba(40, 199, 111, 0.3);
}

.alert-danger {
  --bs-alert-bg: rgba(255, 76, 81, 0.16);
  --bs-alert-color: #ff8085;
  --bs-alert-border-color: rgba(255, 76, 81, 0.3);
}

.alert-warning {
  --bs-alert-bg: rgba(255, 159, 67, 0.16);
  --bs-alert-color: #ffbe7d;
  --bs-alert-border-color: rgba(255, 159, 67, 0.3);
}

.alert-info {
  --bs-alert-bg: rgba(0, 207, 232, 0.16);
  --bs-alert-color: #4fdfef;
  --bs-alert-border-color: rgba(0, 207, 232, 0.3);
}

/* ---------- Firma mesajları ---------- */

.app-chat .app-chat-conversation,
.app-chat .app-chat-history,
.app-chat .chat-history-wrapper,
.app-chat .chat-history-body,
.app-chat .app-chat-contacts,
.app-chat .sidebar-body {
  background-color: transparent !important;
}

.app-chat .chat-history-header,
.app-chat .chat-history-footer {
  background-color: rgba(var(--wp-cam-rgb), 0.05) !important;
  border-color: rgba(var(--wp-cam-rgb), 0.08);
}

.app-chat .chat-contact-list-item a {
  color: var(--bs-body-color);
}

.app-chat .chat-contact-list-item .chat-contact-name {
  color: var(--bs-heading-color);
}

.app-chat .chat-contact-list-item .chat-contact-status,
.app-chat .chat-contact-list-item .chat-contact-list-item-time {
  color: var(--bs-secondary-color);
}

.app-chat .chat-contact-list-item:hover {
  background-color: rgba(var(--wp-cam-rgb), 0.06);
}

.app-chat .chat-contact-list-item.active {
  background: var(--wp-vurgu-gradyan);
  box-shadow: 0 8px 24px rgba(var(--wp-golge-rgb), 0.35);
}

.app-chat .chat-contact-list-item.active a,
.app-chat .chat-contact-list-item.active .chat-contact-name,
.app-chat .chat-contact-list-item.active .chat-contact-status,
.app-chat .chat-contact-list-item.active .chat-contact-list-item-time {
  color: var(--wp-vurgu-yazi);
}

.app-chat .chat-message .chat-message-text {
  background-color: rgba(var(--wp-cam-rgb), 0.07);
  color: var(--bs-heading-color);
}

.app-chat .chat-message-right .chat-message-text {
  background: var(--wp-vurgu-gradyan);
  color: var(--wp-vurgu-yazi);
}

/* ---------- Sistem Ayarları: renk paleti seçenekleri ---------- */

.tema-secenek {
  display: block;
  cursor: pointer;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.75rem;
  padding: 1rem;
  block-size: 100%;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.tema-secenek:hover {
  background-color: rgba(var(--wp-cam-rgb), 0.06);
}

.tema-secenek.aktif {
  border-color: rgba(var(--wp-vurgu-rgb), 0.65);
  background-color: rgba(var(--wp-vurgu-rgb), 0.1);
}

.tema-ornek {
  display: flex;
  overflow: hidden;
  border-radius: 0.5rem;
  block-size: 2.25rem;
}

.tema-ornek-renk {
  flex: 1 1 0;
}

/* Bildirim sesi seçenekleri */
.ses-olay-karti {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.75rem;
  padding: 1rem;
}

.ses-kapali .ses-olay-karti,
.ses-kapali .form-range {
  opacity: 0.55;
}

/* Tooltip / popover da koyu zemine uyarlanır */
.tooltip-inner {
  background: rgba(var(--wp-ipucu-koyu), 0.96);
  color: var(--bs-heading-color);
}

.popover {
  --bs-popover-bg: rgba(var(--wp-ipucu-koyu), 0.97);
  --bs-popover-border-color: rgba(var(--wp-cam-rgb), 0.12);
  --bs-popover-header-bg: rgba(var(--wp-cam-rgb), 0.05);
}

/* ---------- Müşteri risk analizi paneli ---------- */

.risk-kutu {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.75rem;
  padding: 1.15rem 1.25rem;
}

.risk-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.risk-gosterge {
  inline-size: 100%;
  max-inline-size: 15rem;
  block-size: auto;
}

.risk-gosterge-sayi {
  fill: var(--bs-heading-color);
  font-size: 2.4rem;
  font-weight: 700;
}

.risk-halka {
  inline-size: 8.75rem;
  block-size: 8.75rem;
  flex-shrink: 0;
}

.risk-halka-sayi {
  fill: var(--bs-heading-color);
  font-size: 1.5rem;
  font-weight: 700;
}

.risk-halka-etiket {
  fill: var(--bs-secondary-color);
  font-size: 0.7rem;
}

.risk-nokta {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.risk-cubuk {
  block-size: 0.35rem;
  border-radius: 999px;
  background: rgba(var(--wp-cam-rgb), 0.12);
  overflow: hidden;
}

.risk-cubuk > span {
  display: block;
  block-size: 100%;
  border-radius: 999px;
}

.risk-istatistik {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  block-size: 100%;
}

.risk-istatistik-deger {
  font-size: 1.05rem;
  line-height: 1.35;
}

.risk-olcu:last-child {
  border-bottom: 0 !important;
}

/* ---------- Firma mesajları: arama, ekler, sesli mesaj ---------- */

.chat-vurgu {
  background: rgba(var(--wp-vurgu-rgb), 0.35);
  color: inherit;
  padding: 0 0.1rem;
  border-radius: 0.2rem;
}

.chat-vurgu-aktif {
  background: var(--bs-warning);
  color: #1c1c22;
}

.chat-arama-cubugu {
  background: rgba(var(--wp-cam-rgb), 0.05);
}

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

.chat-ek {
  max-inline-size: 15rem;
  max-block-size: 11rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.chat-ses audio {
  block-size: 2rem;
  max-inline-size: 14rem;
}

.chat-ek-onizleme {
  inline-size: 4.5rem;
  block-size: 4.5rem;
  object-fit: cover;
  border-radius: 0.5rem;
}

.chat-ek-kart {
  position: relative;
  flex: 0 0 auto;
}

.chat-ek-sil {
  position: absolute;
  inset-block-start: -0.4rem;
  inset-inline-end: -0.4rem;
  padding: 0.1rem 0.25rem;
  line-height: 1;
}

/*
 * Şablonda sohbet gövdesinin yüksekliği sabit (100vh - 22rem) ve sarmalayıcı
 * blok akışında. Ek önizlemesi ya da sohbet içi arama çubuğu açılınca alt alan
 * büyüyüp kartın dışına taşıyor. Sarmalayıcıyı esnek kutuya çevirip gövdeyi
 * kalan alana yaydığımızda alt alan büyüdükçe gövde kısalıyor.
 * Seçiciler app-chat.css'ten sonra yüklendiği için body ile öne çekildi.
 */
body .app-chat .app-chat-history .chat-history-wrapper {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

body .app-chat .app-chat-history .chat-history-body {
  flex: 1 1 auto;
  min-block-size: 0;
  block-size: auto;
}

/* Gönderilmeyi bekleyen ekler; satıra sığmayınca alt satıra iner */
.chat-ek-onizleme-kap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-block-size: 12rem;
  overflow-y: auto;
}

.chat-ek-onizleme-kap.d-none {
  display: none !important;
}

/* Bekleyen sesli mesaj kartı */
.chat-ek-ses {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.16);
  border-radius: 0.5rem;
  background: rgba(var(--wp-cam-rgb), 0.05);
}

.chat-ek-ses audio {
  block-size: 2rem;
  inline-size: 12rem;
}

/* ---------------------------------------------- İşlem tabloları satır aralığı
 * Yatırım, çekim ve dekont listelerinde her hücre çok satırlı bilgi taşıyor;
 * işlemlerin birbirinden ayrışması için dikey boşluk artırıldı.
 */
.datatables-yatirim > tbody > tr > td,
.datatables-cekim > tbody > tr > td,
.datatables-dekont > tbody > tr > td {
  padding-block: 1.35rem;
}

/* -------------------------------------------------- Müşteri risk göstergesi */
.risk-bar-kap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-end: 0.25rem;
  min-block-size: 0.75rem;
}

.risk-bar {
  position: relative;
  inline-size: 5rem;
  block-size: 0.4rem;
  border-radius: 1rem;
  background: linear-gradient(
    90deg,
    var(--bs-danger) 0%,
    var(--bs-warning) 50%,
    var(--bs-success) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(var(--wp-cam-rgb), 0.18);
}

.risk-bar-isaret {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 0.2rem;
  block-size: 0.85rem;
  border-radius: 1rem;
  background: rgb(var(--wp-cam-rgb));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
}

.risk-bar-etiket {
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
}

/* ------------------------------- İşlem detay modalı (paylaşılan görünüm)
 * Bu stiller önce yatirim-islemleri.html ve cekim-islemleri.html içindeki
 * <style> bloklarındaydı; sohbetten açılan detay modalı da aynı görünümü
 * kullanabilsin diye ortak dosyaya alındı.
 */
.detay-panel {
  background: var(--bs-body-bg);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.detay-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.detay-satir:last-child {
  border-bottom: 0;
}
.detay-satir > span:first-child {
  white-space: nowrap;
  flex-shrink: 0;
}
.detay-satir > span:last-child,
.detay-satir > a:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.detay-modal .detay-hero {
  border-radius: 0.75rem;
  padding: 0.65rem 1rem;
  text-align: center;
}
.detay-modal .detay-hero-tutar {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
}
.detay-modal .detay-bolum-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bs-primary);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.detay-modal .detay-kutu {
  background: var(--bs-secondary-bg);
  border-radius: 0.75rem;
  padding: 0.1rem 1rem;
}
.detay-modal .detay-satir {
  padding-block: 0.28rem;
}
.detay-modal .detay-panel {
  padding: 0.9rem 1rem;
}
/* Hesap sahibi + hesap no şeridi: büyük punto */
.detay-modal .detay-alici {
  background: var(--bs-secondary-bg);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
.detay-modal .detay-alici-ad {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}
.detay-modal .detay-alici-hesap {
  font-family: var(--bs-font-monospace);
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.25;
  word-break: break-all;
}
/* Callback / Gateway log sekmeleri */
.log-kayit {
  background: var(--bs-secondary-bg);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}
.log-govde {
  background: rgba(var(--wp-cam-rgb), 0.06);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  max-block-size: 12rem;
  overflow: auto;
  color: var(--bs-body-color);
}
.log-konsol {
  background: var(--bs-secondary-bg);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-family: var(--bs-font-monospace);
  font-size: 0.75rem;
  line-height: 1.9;
  max-block-size: 22rem;
  overflow: auto;
}
.log-satir {
  display: grid;
  grid-template-columns: 12rem 4rem 12rem 1fr;
  gap: 0.75rem;
  white-space: nowrap;
}
.log-zaman {
  color: var(--bs-secondary-color);
}
.log-olay {
  color: var(--bs-primary);
}
.log-mesaj {
  color: var(--bs-heading-color);
  white-space: normal;
}
@media (max-width: 991.98px) {
  .log-satir {
    grid-template-columns: 1fr;
    gap: 0;
    margin-block-end: 0.5rem;
  }
}
.detay-modal .modal-footer {
  background: var(--bs-body-bg);
}


/* ------------------------------------------------------- Ödeme yöntemleri */
.oy-kart {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.7rem;
  padding: 0.9rem 1rem;
  block-size: 100%;
}

.oy-kart.pasif {
  opacity: 0.65;
  border-style: dashed;
}

.oy-kart-ust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.oy-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
  font-size: 1.05rem;
}

.oy-satir {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  padding-block: 0.25rem;
  border-block-start: 1px solid rgba(var(--wp-cam-rgb), 0.1);
}

.oy-satir > span:first-child {
  color: var(--bs-secondary-color);
}

.oy-satir > span:last-child {
  font-weight: 500;
  text-align: right;
}

/* ------------------------------------------------------- Banka talep formu */
.bt-talep {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-block-end: 0.75rem;
}

.bt-talep-ust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-block-end: 0.6rem;
}

.bt-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

/* Seçilen bankanın resmî form kartı */
.bt-form-kart {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.16);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  margin-block-end: 0.75rem;
}

.bt-form-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

.bt-form-bos {
  border: 1px dashed rgba(var(--wp-cam-rgb), 0.2);
  border-radius: 0.6rem;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
}

.bt-form-cerceve {
  inline-size: 100%;
  block-size: 70vh;
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
}

/* Açılır bölümler: döküman yükleme ve talep listeleri */
.bt-bolum {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  margin-block-start: 1rem;
  overflow: hidden;
}

.bt-bolum-baslik {
  display: flex;
  align-items: center;
  inline-size: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  background: rgba(var(--wp-cam-rgb), 0.05);
  color: var(--bs-heading-color);
  font-weight: 500;
}

.bt-bolum-baslik:hover {
  background: rgba(var(--wp-cam-rgb), 0.09);
}

.bt-bolum-baslik[aria-expanded='true'] .bt-ok {
  transform: rotate(180deg);
}

.bt-ok {
  transition: transform 0.2s ease;
}

.bt-bolum-govde {
  padding: 1rem;
  border-block-start: 1px solid rgba(var(--wp-cam-rgb), 0.12);
}

/* Talebe eklenen döküman bağlantısı */
.bt-dokuman {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  padding: 0.25rem 0.6rem;
  border-radius: 0.4rem;
  background: rgba(var(--wp-cam-rgb), 0.08);
  color: var(--bs-primary);
  word-break: break-all;
}

.bt-red {
  margin-block-start: 0.5rem;
}

/* -------------------------------------------------------- Müşteri notları */
.mn-yeni {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
}

.mn-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-block: 1.5rem 0.75rem;
}

.mn-not {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  margin-block-end: 0.6rem;
}

.mn-not-ust {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-block-end: 0.3rem;
}

.mn-not-metin {
  white-space: pre-wrap;
  word-break: break-word;
}

/* İşlem detayı açılınca 5 saniye görünen son not baloncuğu */
.mn-baloncuk {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-end: 1.5rem;
  z-index: 1090;
  inline-size: min(22rem, calc(100vw - 3rem));
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.25);
  /* Tema yüzeyleri yarı saydam olduğu için baloncuk opak gövde zeminini
     kullanır; aksi hâlde arkasındaki tablo satırları not metnine karışıyordu. */
  background: var(--wp-govde-bg, #131316);
  backdrop-filter: blur(14px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mn-baloncuk.gorunur {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mn-baloncuk-ust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.5rem;
}

.mn-baloncuk-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
  background: rgba(var(--bs-primary-rgb), 0.14);
  color: var(--bs-primary);
}

.mn-baloncuk-metin {
  margin-block-end: 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------- Firma sayfasındaki çekim aç / kapat kutusu */
.ck-durum.kapali {
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-inline: -0.25rem;
  background: rgba(var(--bs-danger-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--bs-danger-rgb), 0.3);
}

/* Kapalı firma uyarısı (çekim detay modalı) */
.ck-uyari {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  background: rgba(var(--bs-danger-rgb), 0.12);
  color: var(--bs-danger);
}

/* ------------------------------- Callback Logları sekmesi (işlem detay modalı) */
.cb-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.6rem;
  background: rgba(var(--wp-cam-rgb), 0.05);
  margin-block-end: 0.5rem;
}

.cb-satir {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 0.6rem;
  border-block-end: 1px solid rgba(var(--wp-cam-rgb), 0.1);
}

.cb-etiket {
  flex: 0 0 11rem;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.cb-deger {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8125rem;
}

.cb-url {
  word-break: break-all;
  color: var(--bs-heading-color);
}

.cb-sayac {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgba(var(--wp-cam-rgb), 0.08);
  color: var(--bs-heading-color);
}

.cb-sayac.basarili {
  background: rgba(var(--bs-success-rgb), 0.14);
  color: var(--bs-success);
}

.cb-sayac.basarisiz {
  background: rgba(var(--bs-danger-rgb), 0.14);
  color: var(--bs-danger);
}

.cb-response {
  flex: 1 1 100%;
  background: rgba(var(--wp-cam-rgb), 0.06);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  color: var(--bs-body-color);
  white-space: pre-wrap;
  word-break: break-all;
}

.cb-alt-baslik,
.gw-alt-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-block: 1.5rem 0.75rem;
}

/* ------------------------------------ Gateway Log sekmesi (işlem detay modalı) */
.gw-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block-end: 0.6rem;
  margin-block-start: 1.5rem;
  border-block-end: 1px solid rgba(var(--wp-cam-rgb), 0.12);
}

.gw-baslik:first-child {
  margin-block-start: 0;
}

.gw-durum {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: 0.85rem 0.25rem;
  font-size: 1.05rem;
}

.gw-durum-ad {
  font-weight: 600;
}

.gw-nokta {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  flex: 0 0 auto;
}

.gw-ozet {
  padding-block-end: 0.85rem;
  border-block-end: 1px solid rgba(var(--wp-cam-rgb), 0.12);
}

.gw-kod {
  font-family: var(--bs-font-monospace);
}

.gw-istatistik-satir {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-block: 1rem 0.75rem;
}

.gw-istatistik {
  border-radius: 0.6rem;
  padding: 0.9rem 1rem;
  text-align: center;
  border: 1px solid transparent;
}

.gw-istatistik-deger {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.gw-istatistik-baslik {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
}

.gw-istatistik.toplam {
  background: rgba(var(--bs-primary-rgb), 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.25);
}

.gw-istatistik.toplam .gw-istatistik-deger {
  color: var(--bs-primary);
}

.gw-istatistik.onay {
  background: rgba(var(--bs-success-rgb), 0.1);
  border-color: rgba(var(--bs-success-rgb), 0.25);
}

.gw-istatistik.onay .gw-istatistik-deger {
  color: var(--bs-success);
}

.gw-istatistik.hata {
  background: rgba(var(--bs-danger-rgb), 0.1);
  border-color: rgba(var(--bs-danger-rgb), 0.25);
}

.gw-istatistik.hata .gw-istatistik-deger {
  color: var(--bs-danger);
}

.gw-yon-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.gw-yon {
  min-inline-size: 5.5rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  text-align: center;
}

.gw-yon-deger {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
}

.gw-yon-ad {
  font-size: 0.75rem;
  font-family: var(--bs-font-monospace);
  color: var(--bs-secondary-color);
}

.log-konsol .log-satir[data-gw-satir] {
  cursor: pointer;
  border-radius: 0.35rem;
  padding-inline: 0.35rem;
}

.log-konsol .log-satir[data-gw-satir]:hover {
  background: rgba(var(--wp-cam-rgb), 0.08);
}

/* --------------------------------------- İşlemi mesaj olarak paylaşma modalı */
.ip-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-block-end: 0.6rem;
}

.ip-sohbet-listesi {
  max-block-size: 20rem;
  overflow-y: auto;
}

.ip-sohbet {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ip-sohbet:hover {
  background: rgba(var(--wp-cam-rgb), 0.06);
}

.ip-sohbet.aktif {
  background: rgba(var(--wp-cam-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--wp-cam-rgb), 0.2);
}

.ip-onizleme {
  max-block-size: 9rem;
  overflow-y: auto;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  padding: 0.6rem;
}

.ip-onizleme-satir {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding-block: 0.25rem;
}

.ip-onizleme-satir.giden {
  justify-content: flex-end;
  text-align: right;
}

.ip-onizleme-islem {
  font-weight: 500;
  color: var(--bs-primary);
}

/* İşlem kartı: modalda ve sohbet balonunda aynı görünür */
.ip-kart {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.16);
  border-radius: 0.7rem;
  padding: 0.8rem 0.9rem;
  background: rgba(var(--wp-cam-rgb), 0.05);
  min-inline-size: 15rem;
}

.ip-kart-ust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.5rem;
}

.ip-kart-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

.ip-kart-tutar {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  margin-block-end: 0.4rem;
}

.ip-kart-satir {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  padding-block: 0.2rem;
  border-block-start: 1px solid rgba(var(--wp-cam-rgb), 0.1);
}

.ip-kart-satir > span:first-child {
  color: var(--bs-secondary-color);
  white-space: nowrap;
}

.ip-kart-satir > span:last-child {
  text-align: right;
  font-weight: 500;
}

/*
 * Sohbet balonundaki işlem kartı.
 * Giden balonun zemini vurgu rengi ve yazısı beyaz olduğu için kart kendi
 * yüzeyini ve renklerini kullanır; aksi hâlde kart içeriği okunmuyordu.
 */
.chat-islem-karti .ip-kart {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: rgba(var(--wp-cam-rgb), 0.2);
  margin-block-start: 0.35rem;
  /* Kart balonun içinde daralıp okunmaz hâle geliyordu; sohbet genişliğinin
     büyük kısmını kullanacak şekilde genişletildi. */
  min-inline-size: min(30rem, 60vw);
}

.chat-islem-karti .ip-kart-satir {
  font-size: 0.875rem;
  padding-block: 0.3rem;
}

@media (max-width: 767.98px) {
  .chat-islem-karti .ip-kart {
    min-inline-size: 0;
    inline-size: 100%;
  }
}

.chat-islem-karti .ip-kart-satir > span:first-child {
  color: var(--bs-secondary-color);
}

.chat-islem-karti .ip-kart code {
  color: var(--bs-primary);
}

/*
 * "İşlemi aç" ipucu giden balonun zemininde okunmuyordu (yazı rengi balonla
 * neredeyse aynıydı); kart yüzeyini kullanan kendi rozetine alındı.
 */
.chat-islem-ac {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-block-start: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--bs-body-bg);
  color: var(--bs-primary);
  text-decoration: none;
}

.chat-islem-ac:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.chat-islem-karti {
  cursor: pointer;
}

/* ----------------------------------------------------------- Mesaj grupları */
.grup-baslik {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--bs-secondary-color);
  padding-inline: 1.5rem;
  margin-block: 0.75rem 0.35rem;
}

.grup-onizleme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 0.75rem;
  flex: 0 0 auto;
  font-size: 1.35rem;
}

.grup-simge-listesi,
.grup-renk-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grup-simge {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.16);
  background: rgba(var(--wp-cam-rgb), 0.05);
  color: var(--bs-heading-color);
}

.grup-simge:hover {
  background: rgba(var(--wp-cam-rgb), 0.12);
}

.grup-simge.aktif {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 1px var(--bs-primary) inset;
  color: var(--bs-primary);
}

.grup-renk {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  border: 2px solid transparent;
}

.grup-renk.aktif {
  border-color: var(--bs-heading-color);
}

.grup-uye-listesi {
  max-block-size: 18rem;
  overflow-y: auto;
}

.grup-uye {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  border-radius: 0.6rem;
  margin-block-end: 0.5rem;
}

.grup-uye .form-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-inline-start: 2.5rem;
  flex: 0 0 auto;
}

@media (max-width: 575.98px) {
  .grup-uye {
    flex-wrap: wrap;
  }
}

/* ------------------------------------------ Mesaj düzenleme / silme durumu */

/*
 * Menü balonun içinde değil, solunda durur. Balonun içindeyken metnin son
 * kelimesinin üstüne biniyordu (şablonun balon dolgusu daha güçlü bir
 * seçiciden geliyor) ve açılan liste satırın taşma sınırında kesiliyordu.
 */
.chat-mesaj-satir {
  align-items: flex-start;
  gap: 0.35rem;
  overflow: visible;
}

.chat-mesaj-menu {
  flex: 0 0 auto;
  align-self: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chat-message:hover .chat-mesaj-menu,
.chat-mesaj-menu.show,
.chat-mesaj-menu:focus-within {
  opacity: 1;
}

.chat-mesaj-menu-btn {
  background: rgba(var(--wp-cam-rgb), 0.14);
  color: var(--bs-heading-color);
  border: 0;
  border-radius: 0.35rem;
  padding: 0.15rem 0.25rem;
  line-height: 1;
}

.chat-mesaj-menu-btn:hover {
  background: rgba(var(--wp-cam-rgb), 0.24);
}

/* Sohbet gövdesi kırpmasın; menü balonun dışına taşabilmeli */
body .app-chat .app-chat-history .chat-history-body .chat-history .chat-message {
  overflow: visible;
}

.chat-mesaj-silindi {
  font-style: italic;
  opacity: 0.85;
}

.chat-silme-kapsam {
  display: block;
  font-size: 0.7rem;
  font-style: normal;
  opacity: 0.75;
}

.chat-duzenlendi {
  margin-block-start: 0.2rem;
  font-size: 0.7rem;
}

.chat-message-right .chat-duzenlendi {
  text-align: right;
}

/* Yazma alanında gönderilmeyi bekleyen işlem kartı */
.chat-ek-islem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  max-inline-size: 15rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.16);
  border-radius: 0.5rem;
  background: rgba(var(--wp-cam-rgb), 0.05);
}

/* ------------------------------------------------------------ Aramalar sayfası */
.ar-kullanici-listesi {
  max-block-size: 28rem;
  overflow-y: auto;
}

.ar-kullanici,
.ar-kayit {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  border-radius: 0.6rem;
  margin-block-end: 0.6rem;
}

.ar-kullanici.kapali {
  opacity: 0.7;
  border-style: dashed;
}

.ar-ikon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

.ar-sayac {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bs-primary);
}

@media (max-width: 575.98px) {
  .ar-kayit {
    flex-wrap: wrap;
  }
}

/* Firma profilindeki kullanıcı yetki satırı */
.fp-kullanici {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(var(--wp-cam-rgb), 0.12);
  border-radius: 0.6rem;
  margin-block-end: 0.5rem;
}

.fp-yetki {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
}

.fp-yetki .form-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-inline-start: 2.5rem;
}

@media (max-width: 575.98px) {
  .fp-kullanici {
    flex-wrap: wrap;
  }
}

/* Firma profili modalı */
.fp-kart {
  border: 1px solid rgba(var(--wp-cam-rgb), 0.14);
  border-radius: 0.6rem;
  padding: 0.7rem 0.8rem;
  block-size: 100%;
}

.fp-baslik {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: var(--bs-primary);
  margin-bottom: 0.6rem;
}