/**
 * BilgeERP – NiceAdmin üzerine eklenen stiller.
 * Şablonun CSS değişkenleri (--surface-color, --border-color, --accent-color…) kullanılır;
 * böylece açık/koyu tema üçüncü parti bileşenlerde de tutarlı kalır.
 */

/* ------------------------------------------------------------ genel */
.header-logo img { height: 34px; width: auto; }
.header-context-title { letter-spacing: -.01em; }
.header-context-title span { color: var(--accent-color); }
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border-color); }

.page-header { gap: .75rem; flex-wrap: wrap; }
.page-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.hotkey {
  display: inline-block; margin-left: .4rem; padding: 0 .3rem; border: 1px solid currentColor; border-radius: 3px;
  font: 600 .66rem/1.35 'JetBrains Mono', ui-monospace, monospace; opacity: .7; vertical-align: 1px;
}
@media (max-width: 991.98px) { .hotkey { display: none; } }

.text-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.form-label .required, label .required { color: var(--danger-color); margin-left: .15rem; }
.form-text { color: var(--muted-color); }

.bilge-toast { background: var(--surface-color); color: var(--default-color); box-shadow: 0 10px 30px -12px rgb(1 41 112 / .35); border: 1px solid var(--border-color) !important; min-width: 280px; }
.bilge-toast .btn-close { filter: none; }
[data-theme="dark"] .bilge-toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

.status-banner { border-radius: .25rem; padding: .65rem 1rem; margin-bottom: 1rem; font-size: .9rem; border: 1px solid transparent; }
.status-banner a { font-weight: 700; text-decoration: underline; color: inherit; }
.status-banner-info { background: var(--info-color-light); border-color: var(--info-color); color: var(--default-color); }
.status-banner-warning { background: var(--warning-color-light); border-color: var(--warning-color); color: var(--default-color); }
.status-banner-danger { background: var(--danger-color-light); border-color: var(--danger-color); color: var(--default-color); }

.tenant-switch { border-bottom: 1px solid var(--sidebar-border); padding: .25rem .75rem .75rem; margin-bottom: .5rem; }
.tenant-switch .dropdown-toggle {
  width: 100%; display: flex; align-items: center; gap: .6rem; background: transparent; border: 1px solid var(--sidebar-border);
  border-radius: .25rem; padding: .45rem .6rem; color: var(--sidebar-color); text-align: left;
}
.tenant-switch .dropdown-toggle::after { margin-left: auto; }
.tenant-switch-avatar { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.tenant-switch-name { font-weight: 700; font-size: .88rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-switch-plan { font-size: .72rem; color: var(--sidebar-muted-color); }

/* ------------------------------------------------------------ liste + alt panel (orgaMAX düzeni) */
.list-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.list-toolbar .btn-group > .btn { white-space: nowrap; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.filter-chips .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .78rem; }
.filter-chips .btn.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

.detail-panel { border-top: 3px solid var(--accent-color); min-height: 220px; transition: opacity .15s; }
.detail-panel.is-loading { opacity: .55; pointer-events: none; }
.detail-panel .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; border-bottom: 1px solid var(--border-color); }
.detail-panel .nav-tabs .nav-link { white-space: nowrap; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; padding: .6rem .85rem; color: var(--muted-color); }
.detail-panel .nav-tabs .nav-link.active { color: var(--accent-color); }
.detail-panel .tab-content { padding: 1rem; }
.detail-empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted-color); }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem 1.25rem; }
.info-item .info-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); font-weight: 700; }
.info-item .info-value { font-weight: 600; word-break: break-word; }

.timeline-compact { list-style: none; margin: 0; padding: 0; }
.timeline-compact li { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border-color-light); }
.timeline-compact li:last-child { border-bottom: 0; }
.timeline-compact .tl-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--info-color-light); color: var(--info-color); }
.timeline-compact .tl-meta { font-size: .76rem; color: var(--muted-color); }

/* ------------------------------------------------------------ belge (teklif/fatura) düzenleyici */
.doc-lines { width: 100%; border-collapse: separate; border-spacing: 0; }
.doc-lines thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-color); background: var(--table-header-bg); padding: .5rem .4rem; white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.doc-lines tbody td { padding: .3rem .25rem; vertical-align: top; border-bottom: 1px solid var(--border-color-light); }
.doc-lines .form-control, .doc-lines .form-select { padding: .3rem .45rem; font-size: .86rem; }
.doc-lines .line-handle { cursor: grab; color: var(--light-color); padding-top: .45rem; text-align: center; }
.doc-lines tr.line-heading td { background: var(--table-stripe-bg); }
.doc-lines tr.line-heading .line-desc { font-weight: 700; }
.doc-lines tr.line-optional { opacity: .75; }
.doc-lines .line-total { text-align: right; font-weight: 700; padding-top: .55rem; white-space: nowrap; }
.doc-lines tr.sortable-ghost { opacity: .35; }

.doc-totals { margin-left: auto; max-width: 360px; width: 100%; }
.doc-totals .row-total { display: flex; justify-content: space-between; padding: .3rem 0; border-bottom: 1px dashed var(--border-color); }
.doc-totals .row-total.grand { border-bottom: 0; border-top: 2px solid var(--heading-color); margin-top: .25rem; padding-top: .5rem; font-size: 1.15rem; font-weight: 800; color: var(--heading-color); }
.doc-totals .row-total.muted { color: var(--muted-color); font-size: .85rem; }

@media (max-width: 991.98px) {
  /* Telefon/tablet: her satır bir kart, alanlar iki sütunlu ızgara */
  .doc-lines thead { display: none; }
  .doc-lines, .doc-lines tbody { display: block; width: 100%; }
  .doc-lines tr.doc-line { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; border: 1px solid var(--border-color); border-radius: .25rem; margin-bottom: .75rem; padding: .6rem; background: var(--surface-color); }
  .doc-lines tbody td { display: block; border: 0; padding: 0; }
  .doc-lines td.line-handle { display: none; }
  .doc-lines td.line-main, .doc-lines td.line-wide { grid-column: 1 / -1; }
  .doc-lines td[data-label]::before { content: attr(data-label); display: block; font-size: .68rem; text-transform: uppercase; color: var(--muted-color); font-weight: 700; margin-bottom: .1rem; }
  .doc-lines td.line-total { text-align: left; padding-top: 0; font-size: 1rem; }
  .doc-lines td.line-actions { text-align: right; align-self: end; }
}

/* ------------------------------------------------------------ DataTables (Bootstrap 5 teması üzerine) */
div.dt-container { font-size: .9rem; }
div.dt-container .dt-search input { min-width: 220px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--default-color); border-radius: .25rem; padding: .4rem .7rem .4rem 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2398a2b3' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398l3.85 3.85a1 1 0 0 0 1.415-1.414zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .65rem center; }
div.dt-container .dt-search input:focus { border-color: var(--input-focus-border); box-shadow: 0 0 0 .2rem var(--input-focus-ring); outline: 0; }
div.dt-container .dt-length select { background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--default-color); border-radius: .25rem; }
div.dt-container .dt-info { color: var(--muted-color); font-size: .82rem; padding-top: .6rem; }
div.dt-container .dt-paging .pagination { margin: .4rem 0 0; }
div.dt-container .page-link { background: var(--surface-color); border-color: var(--border-color); color: var(--default-color); }
div.dt-container .page-item.active .page-link { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }
div.dt-container .page-item.disabled .page-link { background: var(--surface-color); color: var(--light-color); }
div.dt-container div.dt-processing { background: var(--surface-color); color: var(--default-color); border: 1px solid var(--border-color); box-shadow: 0 8px 24px -12px rgb(1 41 112 / .4); }
div.dt-container div.dt-processing > div:last-child > div { background: var(--accent-color); }

table.dataTable { --dt-row-selected: 65, 84, 241; --dt-row-selected-text: 255, 255, 255; border-collapse: collapse !important; width: 100% !important; margin: .5rem 0 !important; }
table.dataTable thead th { background: var(--table-header-bg); color: var(--heading-color); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--border-color) !important; white-space: nowrap; }
table.dataTable tbody td { vertical-align: middle; border-color: var(--border-color-light); color: var(--default-color); background: transparent; }
table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px var(--table-hover-bg); }
table.dataTable > tbody > tr.selected > * { box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected)) !important; color: #fff !important; }
table.dataTable > tbody > tr.selected a, table.dataTable > tbody > tr.selected .text-muted, table.dataTable > tbody > tr.selected small { color: #fff !important; }
table.dataTable > tbody > tr.selected .badge { background: rgb(0 0 0 / .2) !important; color: #fff !important; border-color: transparent !important; }
table.dataTable tbody tr { cursor: default; }
table.dataTable[data-selectable] tbody tr { cursor: pointer; }
table.dataTable td.dt-actions { white-space: nowrap; text-align: right; width: 1%; }
table.dataTable td.dtr-control, table.dataTable th.dtr-control { width: 1%; }
table.dataTable.dtr-column > tbody > tr > td.dtr-control::before { border-left-color: var(--accent-color) !important; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--muted-color); font-size: .78rem; min-width: 110px; }

/* ------------------------------------------------------------ Select2 (bootstrap-5 teması) */
.select2-container--bootstrap-5 .select2-selection { background-color: var(--input-bg); border-color: var(--input-border); color: var(--default-color); border-radius: .25rem; min-height: calc(1.5em + .75rem + 2px); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: var(--default-color); }
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--light-color); }
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--input-focus-border); box-shadow: 0 0 0 .2rem var(--input-focus-ring); }
.select2-container--bootstrap-5 .select2-dropdown { background-color: var(--surface-color); border-color: var(--input-focus-border); color: var(--default-color); z-index: 2060; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background: var(--input-bg); border-color: var(--input-border); color: var(--default-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { color: var(--default-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted { background-color: var(--table-hover-bg); color: var(--heading-color); }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) { background-color: var(--accent-color); color: #fff; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { background: var(--table-header-bg); border-color: var(--border-color); color: var(--default-color); }
.is-invalid + .select2-container--bootstrap-5 .select2-selection { border-color: var(--danger-color); }
.select2-result-meta { font-size: .76rem; color: var(--muted-color); }
.select2-results__option--highlighted .select2-result-meta { color: inherit; }
.doc-lines .select2-container--bootstrap-5 .select2-selection { min-height: calc(1.5em + .6rem + 2px); font-size: .86rem; padding-top: .2rem; padding-bottom: .2rem; }

/* ------------------------------------------------------------ flatpickr */
.flatpickr-input[readonly], input.form-control[readonly].input { background-color: var(--input-bg); }
[data-theme="dark"] .flatpickr-calendar { background: var(--surface-color); box-shadow: 0 0 0 1px var(--border-color), 0 12px 28px -14px #000; }
[data-theme="dark"] .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--surface-color); }
[data-theme="dark"] .flatpickr-months .flatpickr-month, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, [data-theme="dark"] span.flatpickr-weekday, [data-theme="dark"] .flatpickr-current-month input.cur-year, [data-theme="dark"] .flatpickr-time input, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm { color: var(--default-color); fill: var(--default-color); background: transparent; }
[data-theme="dark"] .flatpickr-months .flatpickr-prev-month, [data-theme="dark"] .flatpickr-months .flatpickr-next-month { color: var(--default-color); fill: var(--default-color); }
[data-theme="dark"] .flatpickr-day { color: var(--default-color); }
[data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay, [data-theme="dark"] .flatpickr-day.flatpickr-disabled { color: var(--light-color); }
[data-theme="dark"] .flatpickr-day:hover { background: var(--table-hover-bg); border-color: var(--table-hover-bg); }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--accent-color); border-color: var(--accent-color); }
[data-theme="dark"] .flatpickr-monthDropdown-month { background: var(--surface-color); }

/* ------------------------------------------------------------ SweetAlert2 */
.bilge-swal.swal2-popup { background: var(--surface-color); color: var(--default-color); border: 1px solid var(--border-color); border-radius: .35rem; font-family: inherit; }
.bilge-swal .swal2-title { color: var(--heading-color); font-size: 1.2rem; }
.bilge-swal .swal2-html-container { font-size: .95rem; }
.bilge-swal .swal2-input { background: var(--input-bg); border-color: var(--input-border); color: var(--default-color); box-shadow: none; font-size: 1rem; }
.bilge-swal .swal2-input-label { color: var(--muted-color); font-size: .85rem; }

/* ------------------------------------------------------------ modallar */
.modal-content { background: var(--surface-color); color: var(--default-color); border-color: var(--border-color); }
.modal-header, .modal-footer { border-color: var(--border-color); }
.modal-title { color: var(--heading-color); font-weight: 700; font-size: 1.05rem; }
#appModal2 { z-index: 1065; }
#appModal2 + .modal-backdrop, .modal-backdrop + .modal-backdrop { z-index: 1060; }
.modal .nav-tabs .nav-link { font-weight: 700; font-size: .82rem; }

/* ------------------------------------------------------------ paket kartları */
.plan-card { height: 100%; display: flex; flex-direction: column; }
.plan-card.is-current { border-color: var(--success-color); box-shadow: 0 0 0 1px var(--success-color); }
.plan-price { font-size: 1.7rem; font-weight: 800; color: var(--heading-color); line-height: 1.1; }
.plan-price small { font-size: .85rem; font-weight: 500; color: var(--muted-color); }
.plan-features { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .88rem; }
.plan-features li { display: flex; gap: .4rem; padding: .15rem 0; }
.plan-features li i { color: var(--success-color); }

/* ------------------------------------------------------------ yazdırma */
@media print {
  .header, .sidebar, .footer, .page-header-actions, .back-to-top, .list-toolbar { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
}

/* ---- Takvim (FullCalendar 7) ---- */
#calendar { --fc-bilge-task: var(--accent-color); --fc-bilge-appointment: #6f42c1; --fc-bilge-order: #198754; --fc-bilge-quote: #fd7e14; --fc-bilge-invoice: #dc3545; --fc-bilge-leave: #0dcaf0; --fc-bilge-holiday: #6c757d; --fc-bilge-expense: #8b5e34; --fc-bilge-contract: #20c997; }
#calendar .fc-bilge-contract { --fc-event-bg-color: var(--fc-bilge-contract); --fc-event-border-color: var(--fc-bilge-contract); --fc-event-text-color: #063; }
#calendar .fc-bilge-expense { --fc-event-bg-color: var(--fc-bilge-expense); --fc-event-border-color: var(--fc-bilge-expense); }
#calendar .fc-bilge-leave { --fc-event-bg-color: var(--fc-bilge-leave); --fc-event-border-color: var(--fc-bilge-leave); --fc-event-text-color: #062c33; }
#calendar .fc-bilge-leave-pending { opacity: .7; border-style: dashed; }
#calendar .fc-bilge-holiday { --fc-event-bg-color: var(--fc-bilge-holiday); --fc-event-border-color: var(--fc-bilge-holiday); }
#calendar .fc-bilge-task { --fc-event-bg-color: var(--fc-bilge-task); --fc-event-border-color: var(--fc-bilge-task); }
#calendar .fc-bilge-appointment { --fc-event-bg-color: var(--fc-bilge-appointment); --fc-event-border-color: var(--fc-bilge-appointment); }
#calendar .fc-bilge-order { --fc-event-bg-color: var(--fc-bilge-order); --fc-event-border-color: var(--fc-bilge-order); }
#calendar .fc-bilge-quote { --fc-event-bg-color: var(--fc-bilge-quote); --fc-event-border-color: var(--fc-bilge-quote); }
#calendar .fc-bilge-invoice { --fc-event-bg-color: var(--fc-bilge-invoice); --fc-event-border-color: var(--fc-bilge-invoice); }
#calendar .fc-bilge-done { opacity: .55; text-decoration: line-through; }
#calendar .fc-bilge-overdue { --fc-event-border-color: #dc3545; box-shadow: inset 0 0 0 2px #dc3545; }
.status-dot.fc-legend-leave { background: #0dcaf0; } .status-dot.fc-legend-expense { background: #8b5e34; } .status-dot.fc-legend-contract { background: #20c997; } .status-dot.fc-legend-holiday { background: #6c757d; }
.status-dot.fc-legend-task { background: var(--accent-color); } .status-dot.fc-legend-order { background: #198754; } .status-dot.fc-legend-quote { background: #fd7e14; } .status-dot.fc-legend-invoice { background: #dc3545; }
.filter-chips .status-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; }
[data-theme="dark"] #calendar { color: var(--default-color); }
@media (max-width: 575px) { #calendar .fc-toolbar-title { font-size: 1rem; } }

/* ---- Tanıtım sayfası ---- */
body.landing { background: var(--background-color); }
.landing-nav { border-bottom: 1px solid var(--border-color); background: var(--surface-color); position: sticky; top: 0; z-index: 10; }
.landing-hero { background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--accent-color), transparent 90%), transparent 40%); }
/* Gösterge kartı değeri: uzun tutarlar (ör. 1.234.567,89 ₺) kartı taşırmasın.
   Önce yazı boyutu kart genişliğine göre küçülür; yine sığmazsa alt satıra sarar.
   .text-money'nin nowrap'i burada bilinçli olarak gevşetilir, yoksa metin kırpılıyordu. */
.widget-stat-value { font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.5rem); }
/* Tutar dar kartta alt satıra inebilir ama RAKAMIN ORTASINDAN bölünemez:
   "48.000,0 / 0 ₺" gibi bir kırılma okunamaz hâle getiriyordu. Yalnızca sayı ile para
   birimi arasındaki boşlukta kırılır; sığmazsa yukarıdaki clamp() yazıyı küçültür. */
.widget-stat-value.text-money { white-space: normal; overflow-wrap: normal; word-break: keep-all; }

.landing .plan-card .card-title { font-size: 1.25rem; }
.landing-trust { background: var(--surface-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.landing-footer { border-top: 1px solid var(--border-color); }

/* Özet ekranı: 5 gösterge (gider kartı açıkken) */
.dashboard-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1399.98px) { .dashboard-grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px) { .dashboard-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .dashboard-grid-5 { grid-template-columns: 1fr; } }

/* Telefon: süzgeç çipleri ve liste araç çubuğu daha sıkı */
@media (max-width: 575.98px) {
  .list-toolbar .btn-group .btn { padding-left: .5rem; padding-right: .5rem; }
  .list-toolbar .hotkey { display: none; }
}

/* Telefon: kart içi sekmeler yatay kaydırılır (ayarlar, formlar) */
@media (max-width: 767.98px) {
  .card .nav-tabs, .modal .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .card .nav-tabs .nav-link, .modal .nav-tabs .nav-link { white-space: nowrap; }
}

/* Baykuş logosu koyu temada da renkli kalır (şablonun beyazlatma filtresi kapatılır) */
[data-theme=dark] .header-logo img { filter: none; }

/* Çıkış düğmeleri <button> olduğu için tarayıcı varsayılanlarını burada sıfırlarız.
   Daha önce Bootstrap'in .bg-transparent/.border-0 yardımcıları kullanılıyordu; bunlar
   !important taşıdığı için hover'daki kırmızı zemini eziyor, beyaz yazı beyaz zeminde kayboluyordu. */
button.user-menu-logout,
button.mobile-menu-item,
button.sidebar-account-logout {
    appearance: none;
    font: inherit;
    cursor: pointer;
}
button.mobile-menu-item { border: 0; background: transparent; }
button.sidebar-account-logout { background: transparent; }

/* ------------------------------------------------------------ giriş ekranı (iki sütun)
   Giriş/kayıt ekranları her zaman açık temadadır (head'de theme.js yüklenmez).
   Geniş ekranda solda marka paneli, sağda form; 992 px altında yalnızca form kalır. */
.fauth-body { background: #f6f8fd; }
.fauth-split { display: block; padding: 0; background: #f6f8fd; }
.fauth-brand { display: none; }

.fauth-split .fauth-main {
  max-width: 460px;
  padding: clamp(18px, 4vw, 40px) clamp(16px, 4vw, 24px);
  margin-inline: auto;
}

@media (min-width: 992px) {
  .fauth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(430px, 38%);
    align-items: stretch;   /* .fauth'tan gelen center, paneli ortada bir şerit bırakıyordu */
    min-height: 100vh;
  }

  .fauth-brand {
    display: flex;
    align-items: center;
    padding: 48px clamp(32px, 5vw, 72px);
    color: #fff;
    background: linear-gradient(135deg, #16224a 0%, #1f3a8f 55%, #4f8efc 100%);
  }

  .fauth-brand-inner { max-width: 520px; }
  .fauth-brand-logo { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 36px; }
  .fauth-brand-logo img { width: 44px; height: 44px; }
  .fauth-brand-logo span span { color: #a9c4ff; }
  .fauth-brand-title { color: #fff; font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 800; line-height: 1.2; margin-bottom: 26px; }
  .fauth-brand-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
  .fauth-brand-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: #dbe6ff; }
  .fauth-brand-list i { margin-top: .15rem; color: #7ee2b8; flex: none; }
  .fauth-brand-foot { font-size: .88rem; color: #b9caf2; margin: 0; }

  .fauth-split .fauth-main { display: flex; align-items: center; margin-inline: 0; padding: 48px; max-width: none; }
  .fauth-split .fauth-main-inner { width: 100%; max-width: 420px; margin-inline: auto; }
  .fauth-split .fauth-logo-center { display: none; } /* marka panelinde zaten var */
}

/* Kart, açık temada net dursun */
.fauth-split .fauth-card { background: #fff; border-color: #e3e8f4; box-shadow: 0 18px 40px -24px rgb(22 34 74 / .45); }

/* Kenar çubuğu alt hesap kutusu: uzun e-postada taşmayı kes.
   .sidebar-account bir grid öğesi ve varsayılan min-width:auto yüzünden içerik genişliğine
   şişip çubuğu taşırıyordu (ölçüm: 291 px kutu, 280 px çubuk; çıkış düğmesi kırpılıyordu). */
.sidebar-footer { min-width: 0; }
.sidebar-account { min-width: 0; max-width: 100%; }
.sidebar-account-main { min-width: 0; }
.sidebar-account-meta { min-width: 0; }
.sidebar-account-name,
.sidebar-account-role { max-width: 100%; }

/* Giriş ekranı altbilgisi: dil sayısı artarsa taşmasın, alt satıra insin. */
.footer-centered .footer-links {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 0 4px;
}

/* ------------------------------------------------------------------ grafik ipuçları
   ApexCharts ipucuna oluşturulma anındaki temanın sınıfını (apexcharts-theme-dark/light)
   yazar. Tema sonradan değişirse o sınıf eskir ve beyaz zemine beyaz yazı çıkabilir.
   Metin ve zemin renkleri uygulamanın kendi değişkenlerinden geldiği için ipucu her iki
   temada da okunur kalır. */
.apexcharts-tooltip,
.apexcharts-tooltip-title,
.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-goals-label,
.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-marker + span,
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip,
.apexcharts-xaxistooltip-text,
.apexcharts-yaxistooltip-text {
    color: var(--default-color) !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
}

.apexcharts-xaxistooltip::after,
.apexcharts-yaxistooltip::after {
    border-top-color: var(--surface-color) !important;
    border-left-color: var(--surface-color) !important;
}

.apexcharts-xaxistooltip::before,
.apexcharts-yaxistooltip::before {
    border-top-color: var(--border-color) !important;
    border-left-color: var(--border-color) !important;
}

.apexcharts-legend-text {
    color: var(--default-color) !important;
}

/* ------------------------------------------------------------------ okunabilirlik
   Yumuşak rozetler (badge-soft-*) markanın tam doygun rengini kendi açık tonunun üstünde
   kullanıyordu; açık temada kontrast 2,0'a kadar düşüyordu. Metin rengi artık rozete özel
   tonlardan gelir, zemin ve gövde renkleri aynı kalır. Ölçülen kontrast: açık temada
   5,8–8,5; koyu temada 7,2–9,0 (WCAG AA eşiği 4,5). */
:root {
    --badge-soft-primary-text: #1e2fb8;
    --badge-soft-success-text: #0d6b45;
    --badge-soft-warning-text: #7a4f00;
    --badge-soft-danger-text: #a81832;
    --badge-soft-info-text: #144d99;
    --badge-soft-secondary-text: #3f4859;
}

:root[data-theme="dark"] {
    --badge-soft-primary-text: #b7d0ff;
    --badge-soft-success-text: #8bf0c6;
    --badge-soft-warning-text: #ffd78c;
    --badge-soft-danger-text: #ffb3c6;
    --badge-soft-info-text: #b3dcff;
    --badge-soft-secondary-text: #c3d4ea;
}

.badge-soft-primary { color: var(--badge-soft-primary-text); }
.badge-soft-success { color: var(--badge-soft-success-text); }
.badge-soft-warning { color: var(--badge-soft-warning-text); }
.badge-soft-danger { color: var(--badge-soft-danger-text); }
.badge-soft-info { color: var(--badge-soft-info-text); }
.badge-soft-secondary { color: var(--badge-soft-secondary-text); }

/* İkincil metin: açık temada açık zeminli başlık hücrelerinde 4,5 eşiğinin altında
   kalıyordu, bir ton koyulaştırıldı (beyazda 5,77). */
:root:not([data-theme="dark"]) {
    --muted-color: #5d6678;
}

/* Koyu temada birincil buton zemini parlak accent'ti; beyaz yazıyla kontrast 3,18'di.
   Buton zemini koyulaştırıldı (beyazla 5,29), bağlantı ve vurgu rengi parlak kaldı. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-outline-primary.active,
:root[data-theme="dark"] .btn-check:checked + .btn-outline-primary {
    background-color: #2a66d6;
    border-color: #2a66d6;
    color: #fff;
}

:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn-primary:focus {
    background-color: #2358bd;
    border-color: #2358bd;
}

/* Klavye kısayolu etiketi (F10, F11...) fazla soluktu. */
.hotkey { opacity: .88; }

/* Özet kartlarının alt rozetleri de aynı sorundaydı: doygun renk kendi açık tonunun üstünde. */
.widget-stat-change.positive { color: var(--badge-soft-success-text); }
.widget-stat-change.negative { color: var(--badge-soft-danger-text); }

/* Kısayol etiketi ana yazının rengiyle aynı kalsın; saydamlık okunabilirliği düşürüyordu. */
.hotkey { opacity: 1; }

/* Koyu temada seçili ikincil düğme: beyaz yazı için zemin koyulaştırıldı. */
:root[data-theme="dark"] .btn-outline-secondary.active,
:root[data-theme="dark"] .btn-check:checked + .btn-outline-secondary {
    background-color: #2c4468;
    border-color: #2c4468;
    color: #fff;
}

/* Uyarı/hata metni: markanın kırmızısı (#e74c63) beyaz üstünde 3,74 kontrast veriyordu.
   Zemin rengi olarak aynı kalır, yalnızca METİN için bir ton koyulaştırılır (beyazda 5,39).
   .hotkey rengini ebeveyninden aldığı için kısayol etiketleri de bununla düzelir. */
:root {
    --danger-text-color: #c92a42;
    --success-text-color: #0d6b45;
    --warning-text-color: #7a4f00;
}

:root[data-theme="dark"] {
    --danger-text-color: #ff9db6;
    --success-text-color: #8bf0c6;
    --warning-text-color: #ffd78c;
}

.text-danger { color: var(--danger-text-color) !important; }
.text-success { color: var(--success-text-color) !important; }
.text-warning { color: var(--warning-text-color) !important; }

/* Bootstrap'in bağlamsal tablo satırları (.table-active, .table-primary…) metin rengini
   temadan bağımsız siyaha sabitliyor; koyu temada satır okunmaz hâle geliyordu (1,36). */
:root[data-theme="dark"] .table > :not(caption) > tr.table-active > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-primary > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-secondary > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-success > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-warning > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-danger > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-info > *,
:root[data-theme="dark"] .table > :not(caption) > tr.table-light > * {
    --bs-table-color: var(--default-color);
    --bs-table-active-color: var(--default-color);
    --bs-table-striped-color: var(--default-color);
    --bs-table-hover-color: var(--default-color);
    color: var(--default-color);
}

/* Select2 yer tutucusu koyu temada fazla soluktu. */
:root[data-theme="dark"] .select2-selection__placeholder,
:root[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #9fb6d6;
}

/* Çerçeveli düğmeler yazı rengini doygun marka renginden alıyordu; "Sil" ve yanındaki kısayol
   etiketi açık temada 3,74 kontrasttaydı. Yazı rengi metin tonlarına bağlandı, dolgu ve
   kenarlık rengi aynı kaldı. */
.btn-outline-danger { --bs-btn-color: var(--danger-text-color); --bs-btn-border-color: var(--danger-color); color: var(--danger-text-color); }
.btn-outline-success { --bs-btn-color: var(--success-text-color); --bs-btn-border-color: var(--success-color); color: var(--success-text-color); }
.btn-outline-warning { --bs-btn-color: var(--warning-text-color); --bs-btn-border-color: var(--warning-color); color: var(--warning-text-color); }
.btn-outline-danger:hover, .btn-outline-success:hover, .btn-outline-warning:hover { color: var(--contrast-color); }

/* Seçili satırın zemini koyu mavi: içindeki renk yardımcıları (text-danger, text-muted…)
   kendi renklerini koruyunca okunmuyordu (ölçülen 1,03). Satır seçiliyken metin beyaza döner. */
table.dataTable > tbody > tr.selected .text-danger,
table.dataTable > tbody > tr.selected .text-success,
table.dataTable > tbody > tr.selected .text-warning,
table.dataTable > tbody > tr.selected .text-info,
table.dataTable > tbody > tr.selected .text-primary,
table.dataTable > tbody > tr.selected .text-secondary,
table.dataTable > tbody > tr.selected .text-muted,
table.dataTable > tbody > tr.selected a:not(.btn) {
    color: #fff !important;
}

/* Bootstrap'in "-subtle" zeminleri açık tema için tanımlı; koyu temada açık zeminin üstünde
   açık yazı kalıyordu (ölçülen 1,23). Bu rozetler uygulamanın kendi yumuşak rozet renklerine
   bağlandı, böylece iki temada da okunur. */
.badge.bg-primary-subtle { background-color: color-mix(in srgb, var(--accent-color), transparent 88%) !important; }
.badge.bg-success-subtle { background-color: var(--success-color-light) !important; }
.badge.bg-warning-subtle { background-color: var(--warning-color-light) !important; }
.badge.bg-danger-subtle { background-color: var(--danger-color-light) !important; }
.badge.bg-info-subtle { background-color: var(--info-color-light) !important; }
.badge.bg-secondary-subtle { background-color: var(--border-color-light) !important; }

.badge[class*="-subtle"].text-primary { color: var(--badge-soft-primary-text) !important; }
.badge[class*="-subtle"].text-success { color: var(--badge-soft-success-text) !important; }
.badge[class*="-subtle"].text-warning { color: var(--badge-soft-warning-text) !important; }
.badge[class*="-subtle"].text-danger { color: var(--badge-soft-danger-text) !important; }
.badge[class*="-subtle"].text-info { color: var(--badge-soft-info-text) !important; }
.badge[class*="-subtle"].text-secondary { color: var(--badge-soft-secondary-text) !important; }

/* Hata sayfalarındaki durum etiketi de aynı kalıptaydı (403'te ölçülen 2,0). */
.na-error-403 .na-error-status { color: var(--badge-soft-warning-text); }
.na-error-500 .na-error-status { color: var(--badge-soft-danger-text); }

/* ------------------------------------------------------------------ tanıtım sayfası
   Akış adımları ve kapanış çağrısı. Renkler tema değişkenlerinden gelir, iki temada da
   çalışır; bölümler arası boşluk bölümün kendi padding'inden gelir, üst üste binmez. */
.landing-steps { background: var(--surface-color); border-top: 1px solid var(--border-color); }

.step-card {
    position: relative;
    padding: 1.25rem 1rem 1rem 3.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, .5rem);
    background: var(--background-color);
    height: 100%;
}

.step-no {
    position: absolute;
    left: 1rem;
    top: 1.15rem;
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-full, 999px);
    background: color-mix(in srgb, var(--accent-color), transparent 88%);
    color: var(--badge-soft-primary-text);
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}

.landing-cta {
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

/* Sık sorulanlar: kart görünümü, iki temada da okunur */
#faq .accordion-item { background: var(--surface-color); border-color: var(--border-color); }
#faq .accordion-button { background: var(--surface-color); color: var(--default-color); font-weight: 600; }
#faq .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--accent-color), transparent 92%); color: var(--badge-soft-primary-text); box-shadow: none; }
#faq .accordion-button:focus { box-shadow: none; border-color: var(--accent-color); }
:root[data-theme="dark"] #faq .accordion-button::after { filter: invert(1) brightness(1.8); }

/* Akış şeması: sayfaya gömülü SVG, renkleri temadan alır */
.flow-diagram { width: 100%; height: auto; max-width: 880px; display: block; margin: 0 auto; }
.flow-box { fill: var(--surface-color); stroke: var(--border-color); stroke-width: 1.5; }
.flow-label { fill: var(--default-color); font: 600 15px inherit; }
.flow-sub { fill: var(--muted-color); font: 400 12.5px inherit; }
.flow-arrow { stroke: var(--accent-color); stroke-width: 2; fill: none; }
.flow-arrow-dashed { stroke-dasharray: 4 4; opacity: .65; }
.flow-dot { fill: var(--accent-color); }
.flow-badge { fill: color-mix(in srgb, var(--accent-color), transparent 88%); }
.flow-badge-text { fill: var(--badge-soft-primary-text); font: 700 12px inherit; }

/* Telefonda şema yatay kayar, küçülüp okunmaz hâle gelmez */
@media (max-width: 767.98px) {
    .flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .flow-scroll .flow-diagram { min-width: 640px; }
}

/* Beş göstergeli özet ekranında kartlar dar kalıyor: 1440 px'te kart 202 px, tutar alanı
   104 px iken "48.000,00" 110 px istiyordu ve 6 px taşıyordu. Yalnızca bu ızgarada yazı
   biraz daha küçülür; diğer ekranlarda gösterge değeri aynı boyutta kalır. */
.dashboard-grid-5 .widget-stat-value { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.4rem); }

/* Ürün ekran görüntüleri: çerçeveli, gölgeli, tam genişlikte ölçeklenir */
.screen-shots { max-width: 1040px; margin: 0 auto; }
.screen-shot {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, .5rem);
    box-shadow: 0 18px 48px -24px rgb(1 41 112 / .45);
    background: var(--surface-color);
}
:root[data-theme="dark"] .screen-shot { box-shadow: 0 18px 48px -24px rgb(0 0 0 / .7); }
#screens .nav-pills .nav-link { color: var(--muted-color); }
#screens .nav-pills .nav-link.active { background: var(--accent-color); color: #fff; }