/* ═══════════════════════════════════════════════════════════════════
   SUPERFLY — Design Token System
   Mockup'tan çıkartılmış CSS değişkenleri + açık/koyu tema desteği
   ═══════════════════════════════════════════════════════════════════ */

/* ── KOYU TEMA (varsayılan) ─────────────────────────────────────── */
:root,
[data-theme="dark"] {
    /* 27.09.2026 — Koyu tema login ekranının paletine çekildi.
       Eski değerler Tailwind "slate" ailesiydi (#0F172A / #1E293B / #2B3A52),
       ekran lacivert-mavi görünüyordu. Login ekranı nötr kömür/siyah
       (#0d0d0d zemin, #1a1a1a kart, beyaz %10 çizgi) — bütün koyu tema buna
       uyarlandı. Açık tema DEĞİŞMEDİ. */

    /* Zemin */
    --fly-bg:         #121212;
    --fly-bg-body:    #0d0d0d;
    --fly-panel:      #1a1a1a;
    --fly-panel2:     #151515;
    --fly-line:       #2e2e2e;

    /* Kenar çubuğu */
    --fly-sidebar-bg: linear-gradient(180deg, #161616, #0f0f0f);
    --fly-sidebar-border: #2a2a2a;
    --fly-sidebar-header-bg: #111111;
    --fly-sidebar-footer-bg: #111111;
    --fly-sidebar-hover: #222222;
    --fly-sidebar-active-bg: linear-gradient(90deg, rgba(165,26,23,.25), rgba(165,26,23,.06));
    /* Dropdown menü satırı hover'ı. Üst menü çubuğu her iki temada da koyu
       kalır ama AÇILIR PANEL açık temada beyazdır — bu yüzden panel içi hover
       ayrı değişkenle yönetilir, sidebar-hover ile aynı değildir. */
    --fly-nav-hover-bg:  #242424;
    --fly-nav-hover-txt: #EDEDED;
    --fly-sidebar-active-border: var(--fly-accent);

    /* Yazılar */
    --fly-txt:        #EDEDED;
    --fly-txt-dim:    #A6A6A6;
    /* Kontrast: #8A8A8A, --fly-bg (#121212) üzerinde ~5.5:1, --fly-panel
       (#1a1a1a) üzerinde ~5.1:1 — WCAG AA metin eşiği (4.5:1) üstünde. */
    --fly-txt-mute:   #8A8A8A;

    /* İçerik alanı */
    --fly-content-bg: #121212;

    /* Vurgu / Renk — SuperPos brand kırmızısı varsayılan */
    --fly-accent:     #A51A17;
    --fly-accent2:    #c42320;
    --fly-accent-dark:#7c1210;
    --fly-accent-rgb: 165,26,23;
    --fly-success:    #10B981;
    --fly-warn:       #F59E0B;
    /* A3 düzeltmesi: marka kırmızısı (--fly-accent, varsayılan #A51A17,
       "rose" preset'inde #E11D48) ile hata rengi aynı kırmızı aileydi.
       Vermillion tonuna kaydırıldı — "dur/hata" anlamı korunuyor ama marka
       vurgusuyla (ve rose/orange accent seçenekleriyle) karışmıyor. */
    --fly-error:      #F2542D;

    /* Gölge */
    --fly-shadow:     0 10px 30px rgba(0,0,0,.45);
    --fly-shadow-sm:  0 4px 14px rgba(0,0,0,.35);

    /* Şekil */
    --fly-radius:     14px;
    --fly-radius-sm:  10px;

    --fly-font-base: 15px;
    --fly-font-control: .95rem;
    --fly-font-control-sm: .9rem;
    --fly-font-table: .92rem;
    --fly-font-label: .78rem;

    /* Kart */
    --fly-card-bg:    #1a1a1a;
    --fly-card-border: #2e2e2e;

    /* Scrollbar */
    --fly-scroll-track: #0f0f0f;
    --fly-scroll-thumb: #3a3a3a;

    /* Toggle icon */
    --fly-theme-icon: "☀️";

    /* Bootstrap override */
    --bs-body-bg:              #121212;
    --bs-body-bg-rgb:          18,18,18;    /* toast/popover arka planı bunu kullanıyor */
    --bs-body-color:           #EDEDED;
    --bs-body-color-rgb:       237,237,237;  /* text-body için RGB gerekli */
    --bs-secondary-color-rgb:  166,166,166;  /* text-muted için RGB gerekli */
    --bs-tertiary-color-rgb:   138,138,138;
    --bs-light:                #1a1a1a;
    --bs-light-rgb:            26,26,26;
    /* Bootstrap 5.3 değişkenleri — fly sistemine bağla */
    --bs-heading-color:     var(--fly-txt);
    --bs-secondary-color:   var(--fly-txt-dim);
    --bs-tertiary-color:    var(--fly-txt-mute);
    --bs-border-color:      var(--fly-line);
    --bs-tertiary-bg:       var(--fly-panel2);
    --bs-secondary-bg:      var(--fly-panel);
    --bs-card-bg:           var(--fly-panel);
    --bs-card-border-color: var(--fly-line);
}

/* ── AÇIK TEMA ──────────────────────────────────────────────────── */
[data-theme="light"] {
    /* Zemin */
    --fly-bg:         #F1F5F9;
    --fly-bg-body:    #F8FAFC;
    --fly-panel:      #FFFFFF;
    --fly-panel2:     #F1F5F9;
    --fly-line:       #E2E8F0;

    /* Üst menü çubuğu — 27.09.2026: açık temada da AÇIK zemin.
       Önceden "karanlık kalır (POS standardı)" diye eski lacivert gradyanda
       (#1e293b → #0f172a) bırakılmıştı; koyu tema login paletine geçince
       açık temada menü hem koyu hem de eski renkte kalıyordu. Artık beyaz
       zemin + ince çizgi; yazı renkleri dosya sonundaki açık tema bloğunda. */
    --fly-sidebar-bg: #FFFFFF;
    --fly-sidebar-border: #E2E8F0;
    --fly-sidebar-header-bg: #FFFFFF;
    --fly-sidebar-footer-bg: #FFFFFF;
    --fly-sidebar-hover: #F1F5F9;
    --fly-sidebar-active-bg: linear-gradient(90deg, rgba(165,26,23,.25), rgba(165,26,23,.06));
    /* Açık temada açılır panel beyaz zeminlidir; hover koyu lacivert olursa
       yazı siyah kalıp okunmaz hale geliyordu. Açık tonlu hover + koyu yazı. */
    --fly-nav-hover-bg:  #E2E8F0;
    --fly-nav-hover-txt: #0F172A;
    --fly-sidebar-active-border: var(--fly-accent);

    /* Yazılar */
    --fly-txt:        #0F172A;
    --fly-txt-dim:    #334155;
    --fly-txt-mute:   #64748B;

    /* İçerik alanı */
    --fly-content-bg: #F1F5F9;

    /* Vurgu / Renk — SuperPos brand kırmızısı varsayılan */
    --fly-accent:     #A51A17;
    --fly-accent2:    #c42320;
    --fly-accent-dark:#7c1210;
    --fly-accent-rgb: 165,26,23;
    --fly-success:    #059669;
    --fly-warn:       #D97706;
    /* A3 düzeltmesi: bkz. koyu tema açıklaması — aynı vermillion ailesi. */
    --fly-error:      #D64526;

    /* Gölge */
    --fly-shadow:     0 4px 20px rgba(0,0,0,.10);
    --fly-shadow-sm:  0 2px 8px rgba(0,0,0,.08);

    /* Kart */
    --fly-card-bg:    #FFFFFF;
    --fly-card-border: #E2E8F0;

    /* Scrollbar */
    --fly-scroll-track: #E2E8F0;
    --fly-scroll-thumb: #94A3B8;

    /* Bootstrap override */
    --bs-body-bg:              #F1F5F9;
    --bs-body-bg-rgb:          241,245,249;  /* toast/popover arka planı bunu kullanıyor */
    --bs-body-color:           #0F172A;
    --bs-body-color-rgb:       15,23,42;    /* text-body için RGB gerekli */
    --bs-secondary-color-rgb:  51,65,85;    /* text-muted için RGB gerekli */
    --bs-tertiary-color-rgb:   100,116,139;
    /* 28.08.2026 — HATA DÜZELTMESİ: --bs-light / --bs-light-rgb yalnızca
       yukarıdaki KOYU blokta (#1E293B) tanımlıydı ve burada geri alınmıyordu.
       data-theme bir ATTRIBUTE olduğu için açık temada bu iki değişken koyu
       değerini miras alıyordu: bg-light kartlar açık temada koyu lacivert
       blok, border-light ise beyaz kart üzerinde koyu bir çizgi olarak
       çıkıyordu (koyu temada da panel rengiyle aynı olup kayboluyordu).
       Bootstrap varsayılanına döndürüldü. */
    --bs-light:                #F8F9FA;
    --bs-light-rgb:            248,249,250;
    /* Bootstrap 5.3 değişkenleri — fly sistemine bağla */
    --bs-heading-color:     var(--fly-txt);
    --bs-secondary-color:   var(--fly-txt-dim);
    --bs-tertiary-color:    var(--fly-txt-mute);
    --bs-border-color:      var(--fly-line);
    --bs-tertiary-bg:       var(--fly-panel2);
    --bs-secondary-bg:      var(--fly-panel);
    --bs-card-bg:           var(--fly-panel);
    --bs-card-border-color: var(--fly-line);
}

/* ═══════════════════════════════════════════════════════════════════
   BOOTSTRAP TEMA OVERRIDE
   bg-white, bg-light, table-light, text-dark gibi sabit renkli
   Bootstrap sınıflarını CSS değişkenleriyle ezer — dark/light tema
   geçişlerinde sayfa genelinde tutarlı renk garantisi sağlar.
   ═══════════════════════════════════════════════════════════════════ */

/* Panel arka planı (kart, header, footer, input-group) */
.bg-white,
.card-header.bg-white,
.card-footer.bg-white,
.input-group-text.bg-white,
.modal-content.bg-white {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}

/* card-header / card-footer genel renk — text-white sınıflıları atla */
.card-header:not([style*="color"]):not(.text-white),
.card-footer:not([style*="color"]):not(.text-white) {
    color: var(--fly-txt) !important;
}

/* Hafif arka plan (araç çubuğu, tablo başlığı, panel2 alanları) */
.bg-light,
.table-light,
thead.table-light,
thead.bg-light,
tfoot.bg-light,
.modal-footer.bg-light,
.modal-footer.bg-white,
th.bg-light,
td.bg-light,
tr.table-light > td,
tr.table-light > th {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Tam sayfa arka planı (container-fluid bg-light min-vh-100) */
.container-fluid.bg-light,
div.bg-light.min-vh-100 {
    background-color: var(--fly-bg) !important;
}

/* Metin rengi */
.text-dark {
    color: var(--fly-txt) !important;
}

/* Bootstrap border renkleri */
.border-bottom,
.border-top,
.border {
    border-color: var(--fly-line) !important;
}

/* Input-group-text genel */
.input-group-text {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
    border-color: var(--fly-line) !important;
}

/* Bootstrap tablo genel theming */
.table {
    --bs-table-bg: var(--fly-panel);
    --bs-table-color: var(--fly-txt);
    --bs-table-border-color: var(--fly-line);
    --bs-table-striped-bg: var(--fly-panel2);
    --bs-table-hover-bg: rgba(var(--fly-accent-rgb), .08);
    --bs-table-active-bg: var(--fly-panel2);
}

/* Form elemanları */
.form-control,
.form-select {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
    font-size: var(--fly-font-control);
}
.form-select option {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}
[data-theme="light"] .form-select option {
    background-color: #FFFFFF !important;
    color: #0F172A !important;
}
[data-theme="dark"] .form-select option {
    background-color: #1a1a1a !important;
    color: #EDEDED !important;
}
.form-control-sm,
.form-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .btn {
    font-size: var(--fly-font-control-sm);
}
.btn {
    font-size: var(--fly-font-control);
}
.table {
    font-size: var(--fly-font-table);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-accent) !important;
    box-shadow: 0 0 0 3px rgba(var(--fly-accent-rgb),.18) !important;
}
.form-control::placeholder { color: var(--fly-txt-mute) !important; }
/* 10.09.2026: Bootstrap .is-invalid kırmızı çerçevesi yukarıdaki !important border-color
   yüzünden hiç görünmüyordu (tema rengi kazanıyordu) — zorunlu alan uyarıları yalnız
   metin olarak kalıyordu. Burada aynı ağırlıkla geri alınır; odakta da kırmızı kalır. */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220,53,69,.18) !important;
}

/* Card genel
   color koyulmadı — accent renkli header'ların inline color:white'ı korunmalı.
   .card-header-custom (accent renkli özel başlıklar) background-color'dan da
   hariç tutulur — aksi halde bu !important kuralı arka planı var(--fly-panel2)'ye
   zorlar, üstündeki beyaz yazı açık temada okunmaz hale gelirdi. */
.card {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
.card-header:not(.card-header-custom),
.card-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Badge bg-light / text-bg-light
   29.09.2026: yalnız .bg-light için kural vardı. Bootstrap 5.3'ün .text-bg-light
   yardımcı sınıfı ise SABİT `color: #000 !important` ile geliyor — tema
   değişkenlerini hiç okumuyor. Koyu temada (Ambar Listesi başlığındaki kayıt
   sayısı gibi) zemin koyulaşıp yazı siyah kalıyor, rakam okunmuyordu.
   Aynı sınıf 6 sayfada kullanılıyor (Ambar, Fatura, Kanal, Kasa Raporları,
   Stoklar, Varyant); tek yerden düzeltmek hepsini kapsar. */
.badge.bg-light,
.badge.text-bg-light {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
}

/* Modal */
.modal-content {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
.modal-header,
.modal-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
}

/* Toast (kayıt/hata mesajları) — Bootstrap varsayılanı --bs-body-bg-rgb'e
   dayanıyor; bu değişken ezilmezse koyu temada beyaz zemin + beyaz yazı
   birleşip mesaj görünmez oluyordu. Zemin ve yazı burada garantiye alınır. */
.toast {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
    box-shadow: var(--fly-shadow) !important;
}
.toast-header {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt) !important;
    border-color: var(--fly-line) !important;
}
.toast-body {
    color: var(--fly-txt) !important;
}

/* Dropdown */
.dropdown-menu {
    background-color: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
.dropdown-item {
    color: var(--fly-txt) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fly-panel2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GENEL
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

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

html, body {
    height: 100%;
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-size: var(--fly-font-base);
    background: var(--fly-bg-body);
    color: var(--fly-txt);
    -webkit-font-smoothing: antialiased;
    transition: background 0.25s ease, color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   SHELL LAYOUT
   ═══════════════════════════════════════════════════════════════════ */

.fly-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ── ÜST MENÜ (pulldown) ──────────────────────────────────────────── */
.fly-topbar {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    height: 56px;
    padding: 0 14px;
    background: var(--fly-sidebar-bg);
    border-bottom: 1px solid var(--fly-sidebar-border);
    position: relative;
    z-index: 100;
}

/* 09.10.2026 (kullanıcı): bilgi ("?" / info) pencereleri üst menünün ALTINDA kalıyordu.
   .fly-content isolation:isolate olduğu için içindeki position:fixed pencereler menünün
   (z-index:100) altında çiziliyor; çözüm pencereyi menü bandının dışına itmek. Menü
   yüksekliği ekran boyuna göre değiştiği için (tek satır 56px, ≤1279.98px'te iki satır ≈
   104px — bkz. aşağıdaki topbar medya bloğu) sabit sayı yerine değişken: pencereler
   `calc(var(--fly-topbar-h) + 12px)` ile menüden 12px boşluk bırakıp başlar. */
:root { --fly-topbar-h: 56px; }
@media (max-width: 1279.98px) { :root { --fly-topbar-h: 104px; } }
.fly-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    padding-right: 14px;
    margin-right: 8px;
    border-right: 1px solid var(--fly-sidebar-border);
    flex-shrink: 0;
}

.fly-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}

.fly-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563EB, #10B981);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

/* 15.08.2026: Bu iki kural sadece ".fly-brand" altını hedefliyordu, ama
   markup'ta (MainLayout.razor) marka bloğunun class'ı "fly-topbar-brand";
   ".fly-brand" hiçbir yerde kullanılmıyor. Bu yüzden kurallar hiç uygulanmıyor,
   "SUPERFLY" ile "POS · YÖNETİM" satır atlamadan yan yana yapışık çıkıyordu.
   Selector'lere gerçek class eklendi (.fly-brand, ileride kullanılırsa diye kaldı). */
.fly-brand b,
.fly-topbar-brand b {
    font-size: 15px;
    letter-spacing: .5px;
    color: #fff;
}

.fly-brand small,
.fly-topbar-brand small {
    display: block;
    font-size: 9px;
    color: #64748B;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* ── ÜST MENÜ NAV / DROPDOWN ───────────────────────────────────────── */
.fly-topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow: visible;
}

.fly-topnav-item {
    position: relative;
    flex-shrink: 0;
}

.fly-topnav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--fly-radius-sm);
    color: #94A3B8;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
}

.fly-topnav-btn:hover {
    background: var(--fly-sidebar-hover);
    color: #fff;
}

.fly-topnav-btn.active {
    background: var(--fly-sidebar-active-bg);
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--fly-sidebar-active-border);
}

.fly-topnav-arrow {
    font-size: 10px;
    transition: transform .2s ease;
    color: #64748B;
}

.fly-topnav-arrow.open {
    transform: rotate(180deg);
}

.fly-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    background: var(--fly-card-bg);
    border: 1px solid var(--fly-card-border);
    border-radius: var(--fly-radius-sm);
    padding: 6px;
    box-shadow: var(--fly-shadow);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 110;
}

/* ── Dropdown bölüm başlığı ──────────────────────────────────────────
   Menü içinde "Günlük İşlemler / Kartlar / Raporlar" ayrımını verir.  */
.fly-nav-baslik {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--fly-txt-mute);
    padding: 9px 11px 4px;
    white-space: nowrap;
}

/* İlk başlık hariç hepsinin üstüne ince ayraç */
.fly-nav-baslik:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--fly-card-border);
    padding-top: 9px;
}

/* ── Katlanır alt menü ("Raporlar ▸") ─────────────────────────────── */
.fly-nav-alt {
    width: 100%;
    margin-top: 4px;
    border-top: 1px solid var(--fly-card-border);
    border-radius: 0 0 8px 8px;
    padding-top: 11px;
    font-weight: 700;
}

.fly-nav-alt-arrow {
    margin-left: auto;
    font-size: 10px;
    transition: transform .18s ease;
}

.fly-nav-alt-arrow.open { transform: rotate(180deg); }

.fly-nav-alt.open { color: var(--fly-txt); }

.fly-nav-alt-govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 11px;
    padding-left: 8px;
    border-left: 2px solid var(--fly-card-border);
}

.fly-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--fly-txt-dim);
    text-decoration: none;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: .15s;
    white-space: nowrap;
    border: none;
    background: transparent;
    width: 100%;
}

.fly-nav-link:hover {
    background: var(--fly-nav-hover-bg);
    color: var(--fly-nav-hover-txt);
}

.fly-nav-link:hover .fly-nav-icon {
    color: var(--fly-nav-hover-txt);
}

.fly-nav-link.active {
    background: var(--fly-sidebar-active-bg);
    color: var(--fly-txt);
    box-shadow: inset 3px 0 0 var(--fly-sidebar-active-border);
}

.fly-nav-link .fly-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 15px;
    display: grid;
    place-items: center;
}

/* ── ÜST MENÜ SAĞ AKSİYONLAR (tema / hesap) ───────────────────────── */
.fly-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.fly-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fly-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #10B981);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid var(--fly-success);
}

.fly-user-info { flex: 1; min-width: 0; }
.fly-user-info b { display: block; font-size: 12px; color: var(--fly-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fly-user-info small { font-size: 10px; color: var(--fly-txt-mute); }

.fly-footer-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fly-icon-btn {
    background: transparent;
    border: 1px solid var(--fly-sidebar-border);
    color: #94A3B8;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .15s;
    padding: 0;
    font-size: 13px;
}

.fly-icon-btn:hover { background: var(--fly-sidebar-hover); color: #fff; border-color: var(--fly-accent); }
.fly-icon-btn.danger:hover { background: rgba(239,68,68,.15); color: var(--fly-error); border-color: var(--fly-error); }

/* ── CONTENT AREA ───────────────────────────────────────────────── */
.fly-content {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    isolation: isolate;
    background: var(--fly-content-bg);
    padding: 20px;
    transition: background 0.25s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--fly-scroll-thumb) transparent;
}

/* ── POS TAM EKRAN MODU ──────────────────────────────────────────────
   MainLayout, POS rotalarında (.fly-app) üzerine "pos-tam" ekler:
   üst menü gizlenir, içerik boşluğu sıfırlanır ve sayfa tüm ekranı kaplar.
   Bildirim toast'ları layout'ta kaldığı için etkilenmez.               */
.fly-app.pos-tam .fly-topbar { display: none; }

.fly-app.pos-tam .fly-content {
    padding: 0;
    overflow: hidden;
}

.fly-content::-webkit-scrollbar { width: 4px; }
.fly-content::-webkit-scrollbar-track { background: transparent; }
.fly-content::-webkit-scrollbar-thumb { background: var(--fly-scroll-thumb); border-radius: 4px; }

/* ═══════════════════════════════════════════════════════════════════
   GENEL BİLEŞEN STİLLERİ
   ═══════════════════════════════════════════════════════════════════ */

/* Kart */
.fly-card {
    background: var(--fly-card-bg);
    border: 1px solid var(--fly-card-border);
    border-radius: var(--fly-radius);
    padding: 18px;
    box-shadow: var(--fly-shadow-sm);
}

/* Sayfa başlığı */
.fly-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--fly-txt);
    margin-bottom: 4px;
}

.fly-page-sub {
    font-size: 12px;
    color: var(--fly-txt-mute);
}

/* Pill badge */
.fly-pill {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--fly-accent2);
    background: rgba(37,99,235,.12);
    border: 1px solid rgba(37,99,235,.3);
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

/* Tablo satırı hover */
.fly-table-row {
    background: var(--fly-panel);
    border: 1px solid var(--fly-line);
    border-radius: 12px;
    padding: 10px 14px;
    transition: .12s;
}

.fly-table-row:hover {
    border-color: var(--fly-accent);
    background: rgba(37,99,235,.06);
}

/* Bootstrap override — tablo */
[data-theme="dark"] .table {
    --bs-table-bg: var(--fly-panel);
    --bs-table-color: var(--fly-txt);
    --bs-table-border-color: var(--fly-line);
    --bs-table-striped-color: var(--fly-txt);
    --bs-table-striped-bg: rgba(255,255,255,.04);
    --bs-table-hover-color: var(--fly-txt);
    --bs-table-hover-bg: rgba(var(--fly-accent-rgb),.08);
    --bs-table-active-color: var(--fly-txt);
    --bs-table-active-bg: rgba(255,255,255,.06);
}

[data-theme="dark"] .card {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .modal-content {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--fly-panel2);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--fly-panel2);
    border-color: var(--fly-accent);
    color: var(--fly-txt);
    box-shadow: 0 0 0 3px rgba(var(--fly-accent-rgb),.18);
}

[data-theme="dark"] .form-control::placeholder { color: var(--fly-txt-mute); }

/* 20.08.2026 kullanıcı isteği: koyu temada input[type=date]/[type=time] yanındaki
   takvim/saat ikonları tarayıcının siyah varsayılan ikonuyla geliyor, koyu zeminde
   görünmüyordu. Native ikon renksiz (siyah) SVG olduğundan invert ile açık renge
   çeviriyoruz. */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator:hover,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--fly-line);
}

/* Compact management screens */
.mgmt-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mgmt-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
    box-shadow: var(--fly-shadow-sm);
}

/* ── TANIMLAR EKRANLARI ORTAK BAŞLIK — 29.09.2026 ─────────────────────────
   Kullanıcı isteği: Tanımlar menüsündeki tüm ekranların başlığı Ayarlar >
   Personel Tanımları ile AYNI yazı boyunda ve AYNI kutu yüksekliğinde olsun.
   Referans: .mgmt-header içinde tek bir <h4 class="mb-0 fw-bold"> (ikon h4'ün
   İÇİNDE, fs-* yok). Kutu yüksekliği = h4 satırı (1.2 × h4 boyu) + 10px üst/alt
   dolgu + 1px çerçeve × 2. Sağında düğme olan ekranlarda (34px geri düğmesi,
   btn-sm, sayaç rozeti) dolgu + düğme bu değeri AŞIYORDU; bu yüzden dolgu
   sıfırlanıp aynı değer min-height olarak veriliyor ve içerik dikeyde ortalanıyor.
   min-height (height değil): dar ekranda düğmeler alt satıra sarılırsa kutu uzar,
   içerik kırpılmaz. h4 boyu Bootstrap'ın kendi değeri (≥1200px'te 1.5rem). */
.mgmt-header.tanim-baslik {
    --tanim-baslik-fs: calc(1.275rem + .3vw);
    min-height: calc(var(--tanim-baslik-fs) * 1.2 + 22px);
    padding-top: 0;
    padding-bottom: 0;
}
@media (min-width: 1200px) {
    .mgmt-header.tanim-baslik { --tanim-baslik-fs: 1.5rem; }
}
/* 08.10.2026 (kullanıcı): sayfa aşağı kayınca içerik yapışık başlığın alt kenarında
   "kesiliyormuş" gibi görünüyordu. Başlık zaten position:sticky (menünün hemen altında);
   eksik olan, başlıkla içerik arasındaki boşluktu. Başlığın hemen ALTINA sayfa zemin
   renginde (.fly-content) 12px'lik dolu bir şerit eklendi: kartlar başlığa değmeden o
   şeridin altında kaybolur ve ilk açılıştaki 12px boşluk kaydırırken de korunur.
   Gölge sıralaması: önce şerit (üstte çizilir), sonra standart gölge. */
.mgmt-header.tanim-baslik {
    box-shadow: 0 12px 0 0 var(--fly-content-bg), var(--fly-shadow-sm);
}
/* 22.10.2026 (kullanıcı): kaydırırken başlığın ÜSTÜNDE de içerik görünüyordu (Firma Bilgileri vb.).
   Sebep: kaydırma alanı .fly-content'in 20px iç boşluğu — yapışık başlık o boşluğun altında durur ve
   boşluk şeffaftır. Başlığın üstüne (yanlardaki 20px dahil) sayfa zemin renginde bir örtü şeridi:
   kayan kartlar başlığın üstünde değil, şeridin altında kaybolur. İlk açılışta şerit zaten aynı renkteki
   boşluğun üstünde durduğu için görünmez. */
.mgmt-header::before {
    content: "";
    position: absolute;
    left: -21px;
    right: -21px;
    bottom: 100%;
    height: 22px;
    background: var(--fly-content-bg);
    pointer-events: none;
}
.mgmt-header.tanim-baslik h4 {
    font-size: var(--tanim-baslik-fs);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
/* 23.10.2026 (kullanıcı): Tanımlar menüsü ekranlarında en üstteki ana başlık ve ikonu tema rengi değil, METİN rengi —
   açık temada siyah, koyu temada beyaz (--fly-txt). .tema-baslik / .ic-tema kurallarını özgüllükle geçer; başlık
   bandındaki düğme ikonlarına dokunmaz (yalnız h4 ve içindeki ikon). Sekmeli sayfaların (Tanımlamalar, Sistem
   Araçları) üst başlığı: .sekmeli-ust. Cari Kartları aynı bandı kullanıyor ama Tanımlar'da değil: .renkli-baslik. */
.mgmt-header.tanim-baslik:not(.renkli-baslik) h4,
.mgmt-header.tanim-baslik:not(.renkli-baslik) h4 .bi,
.sekmeli-ust > .bi,
.sekmeli-ust > h4 { color: var(--fly-txt) !important; }
/* 23.10.2026 (kullanıcı): Tanımlamalar / Sistem Araçları — üst bant yapışık değil (sekmedeki ekranın başlığı yapışık);
   sekmede açık olan ekranın başlığı (ör. Stok Grupları) TEMA rengi, üst ana başlık metin rengi. */
/* Ara başlık (sekmedeki ekranın başlığı): üst ana başlıktan ~1 punto küçük; renk metin renginin birkaç ton yumuşağı —
   açık temada koyu gri, koyu temada kırık beyaz (23.10.2026 kullanıcı: tema rengi değil). */
.sekmeli-icerik .mgmt-header.tanim-baslik:not(.renkli-baslik) h4,
.sekmeli-icerik .mgmt-header.tanim-baslik:not(.renkli-baslik) h4 .bi { color: color-mix(in srgb, var(--fly-txt) 75%, var(--fly-panel)) !important; }
.sekmeli-icerik .mgmt-header.tanim-baslik h4 { font-size: calc(var(--tanim-baslik-fs) - .125rem); }

.mgmt-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--fly-txt);
    font-size: 1rem;
    font-weight: 800;
}

.mgmt-title i {
    color: var(--fly-accent);
}

/* 14.10.2026 (kullanıcı): Tanımlar ekranlarında başlık, yanındaki ikon ve Kaydet düğmesi seçili TEMA renginde.
   Eskiden ikonlar `text-danger`, Kaydet `btn-danger` (Bootstrap kırmızısı) olduğu için tema mavi/yeşil vb. seçilince
   kırmızı kalıyordu. `.tema-baslik`: başlık bandı (.mgmt-header) üzerinde; `.ic-tema`: tek başına ikon; `.btn-tema`: Kaydet. */
.tema-baslik h4,
.tema-baslik h5,
.tema-baslik .mgmt-title { color: var(--fly-accent) !important; }
.tema-baslik .bi.text-danger,
.tema-baslik .bi.ic-tema,
.ic-tema,
.mgmt-card-header .bi.text-danger { color: var(--fly-accent) !important; }

/* 14.10.2026 (kullanıcı): Tanımlar başlık bandındaki ekran rehberi düğmesi küçültüldü (varsayılan 44×44 dokunmatik
   hedef bu bantta büyük duruyordu): 32×32, KanalBilgileri / Opsiyonlar ile aynı ölçü. Seçiciler `span.rh-yer` /
   `button.rh-btn`: bileşenin scoped kurallarını özgüllükle geçer; sayfa içi daha özgül kurallar (FirmaBilgileri) önceliklidir. */
/* 15.10.2026 (kullanıcı): `.rh-kucuk` — aynı küçük rehber düğmesi, başlık renklerine dokunmadan (Kasa / Cari Hareketleri,
   Döviz Kurları başlık bandı). */
.tema-baslik span.rh-yer, .rh-kucuk span.rh-yer { width: 32px; height: 32px; }
.tema-baslik button.rh-btn, .rh-kucuk button.rh-btn { height: 32px; min-width: 32px; padding: 0 6px; border-radius: 8px; }
.tema-baslik button.rh-btn .rh-ikon, .rh-kucuk button.rh-btn .rh-ikon { font-size: 1rem; }
/* 14.10.2026 (kullanıcı): Tanımlar ekranlarında kutu başlığının zemini, QR Menü Teması gibi KUTUNUN zemini (--fly-panel);
   eskiden başlık --fly-panel2 idi ve giriş kutularıyla aynı renkte kalıyordu. Ayrım için başlığın alt çizgisi duruyor.
   Yalnız `.tema-baslik` başlık bandı olan (Tanımlar) sayfalarda: kapsam :has() ile sayfa kökünden belirlenir.
   `.card-header:not(.card-header-custom)` kuralı !important olduğu için burada da !important gerekiyor. */
.fly-content:has(.tema-baslik) .card-header:not(.card-header-custom),
.fly-content:has(.tema-baslik) .mgmt-card-header { background-color: var(--fly-panel) !important; }
.btn-tema {
    background-color: var(--fly-accent);
    border-color: var(--fly-accent);
    color: #fff;
}
.btn-tema:hover,
.btn-tema:focus-visible {
    background-color: var(--fly-accent2);
    border-color: var(--fly-accent2);
    color: #fff;
}
.btn-tema:active { background-color: var(--fly-accent-dark) !important; border-color: var(--fly-accent-dark) !important; color: #fff !important; }
.btn-tema:disabled,
.btn-tema.disabled { background-color: var(--fly-accent); border-color: var(--fly-accent); color: #fff; opacity: .6; }
.mgmt-subtitle {
    margin-top: 2px;
    color: var(--fly-txt-mute);
    font-size: .72rem;
}

.mgmt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.mgmt-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
}

.mgmt-card {
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
    box-shadow: var(--fly-shadow-sm);
    overflow: hidden;
}

.mgmt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel2);
    color: var(--fly-txt);
    font-size: .84rem;
    font-weight: 800;
}

/* 09.10.2026 (kullanıcı): Tanımlar ekranlarında formun en üstündeki başlık ("Yeni Kasa Ekle /
   Kasa Düzenle" vb.) seçili tema rengi. Yalnız FORM kartının başlığı (.mgmt-form-card);
   liste kartlarının başlığı (.mgmt-card-header tek başına) yazı renginde kalır. İkon da
   başlığın içinde olduğundan (span > i) aynı renge geçer. */
.mgmt-form-card .mgmt-card-header { color: var(--fly-accent); }

.mgmt-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel);
}

.mgmt-search {
    max-width: 360px;
}

.mgmt-table-wrap {
    overflow: auto;
    max-height: 64vh;
}

.mgmt-table {
    margin-bottom: 0;
    font-size: .84rem;
}

.mgmt-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--fly-line);
    background: var(--fly-panel2);
    color: var(--fly-txt-dim);
    font-size: .68rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.mgmt-table tbody tr {
    cursor: pointer;
}

.mgmt-table tbody tr.table-active {
    box-shadow: inset 3px 0 0 var(--fly-accent);
}

.mgmt-form-card {
    position: sticky;
    top: 68px;
}

.mgmt-form-body {
    padding: 10px;
}

.mgmt-form-body label,
.mgmt-field-label {
    margin-bottom: 2px;
    color: var(--fly-txt-dim);
    font-size: .72rem;
    font-weight: 800;
}

.mgmt-form-body .form-control,
.mgmt-form-body .form-select,
.mgmt-form-body .input-group-text {
    min-height: 30px;
    font-size: .84rem;
}

.mgmt-form-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--fly-line);
}

.mgmt-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mgmt-summary-item {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--fly-line);
    border-radius: 8px;
    background: var(--fly-panel);
}

.mgmt-summary-label {
    display: block;
    color: var(--fly-txt-mute);
    font-size: .67rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mgmt-summary-value {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--fly-txt);
    font-size: .95rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mgmt-lines-scroll {
    overflow: auto;
    max-height: calc(100vh - 360px);
    min-height: 220px;
}

.mgmt-empty {
    padding: 28px 12px;
    color: var(--fly-txt-mute);
    text-align: center;
}

@media (max-width: 991.98px) {
    .mgmt-header,
    .mgmt-form-card {
        position: static;
    }

    .mgmt-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-theme="dark"] .dropdown-menu {
    background: var(--fly-panel);
    border-color: var(--fly-line);
}

[data-theme="dark"] .dropdown-item {
    color: var(--fly-txt);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--fly-sidebar-hover);
    color: #fff;
}

[data-theme="dark"] .table-bordered td,
[data-theme="dark"] .table-bordered th {
    border-color: var(--fly-line);
}

[data-theme="dark"] .list-group-item {
    background: var(--fly-panel);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

[data-theme="dark"] .breadcrumb-item,
[data-theme="dark"] .breadcrumb-item a { color: var(--fly-txt-dim); }
[data-theme="dark"] .breadcrumb-item.active { color: var(--fly-txt-mute); }

[data-theme="dark"] .btn-outline-secondary {
    color: var(--fly-txt-dim);
    border-color: var(--fly-line);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: var(--fly-panel2);
    color: var(--fly-txt);
}

[data-theme="dark"] .nav-tabs .nav-link { color: var(--fly-txt-dim); border-color: var(--fly-line); }
[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--fly-panel); border-bottom-color: var(--fly-panel); color: var(--fly-txt); }
[data-theme="dark"] .nav-tabs { border-bottom-color: var(--fly-line); }

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — BOOTSTRAP COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* bg-light / bg-white → panel rengi */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}

/* card-header / card-footer beyaz arka planları
   11.08.2026: ":not(.card-header-custom)" eklendi — bu istisna satır ~292'deki genel
   (tema-bağımsız) kuralda vardı ama buradaki karanlık-tema kuralında hiç yoktu; bu yüzden
   accent renkli özel başlıklar (card-header-custom, ör. FaturaDetay "Yeni Fatura" ve
   DovizKurlari "Döviz Kur Girişi") karanlık temada da panel griye zorlanıyordu — sadece
   açık temada değil, aynı hatanın karanlık temadaki eşleniği. */
[data-theme="dark"] .card-header:not(.card-header-custom),
[data-theme="dark"] .card-footer {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}

/* thead / table-light satır başlıkları */
[data-theme="dark"] .table-light,
[data-theme="dark"] thead.table-light,
[data-theme="dark"] .table-light > th,
[data-theme="dark"] thead th,
[data-theme="dark"] .table thead th {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
    border-color: var(--fly-line) !important;
}

/* input-group-text */
[data-theme="dark"] .input-group-text {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt-dim) !important;
}

/* Alert */
[data-theme="dark"] .alert-info {
    background-color: rgba(37,99,235,.15) !important;
    border-color: rgba(37,99,235,.3) !important;
    color: #93c5fd !important;
}

/* Badge bg-light / text-bg-light (bkz. yukarıdaki açıklama) */
[data-theme="dark"] .badge.bg-light,
[data-theme="dark"] .badge.text-bg-light {
    background-color: var(--fly-panel2) !important;
    color: var(--fly-txt-dim) !important;
}

/* Modal body / content */
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-content {
    background-color: var(--fly-panel) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .modal-header {
    border-color: var(--fly-line) !important;
}

/* Tab content içi */
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tab-content.bg-light {
    background-color: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}

/* Dashboard kartları */
[data-theme="dark"] .dash-card {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .dash-card-header {
    background: var(--fly-panel2) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt-dim) !important;
}
[data-theme="dark"] .hizli-bar-btn {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    color: var(--fly-txt) !important;
}
[data-theme="dark"] .hizli-bar-btn:hover {
    background: var(--fly-panel2) !important;
}
[data-theme="dark"] .hbb-lbl { color: var(--fly-txt-dim) !important; }
/* 27.08.2026: kritik stok satırları dolu kırmızı zeminden nötr yüzeye alındı
   (bkz. Anasayfa.razor.css/.kritik-item — kart zaten kırmızı rozetle
   çerçeveli, her satırın ayrıca kırmızı olması uyarıyı zayıflatıyordu).
   Koyu tema da aynı davranışa çekildi. */
[data-theme="dark"] .kritik-item {
    background: transparent !important;
    border-color: var(--fly-line) !important;
}
[data-theme="dark"] .kritik-item:hover {
    background: rgba(239,68,68,.12) !important;
    border-color: rgba(239,68,68,.40) !important;
}
[data-theme="dark"] .kritik-ad { color: var(--fly-txt) !important; }
[data-theme="dark"] .cari-row:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .akt-ci:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .akt-ci-cari { color: var(--fly-txt) !important; }
[data-theme="dark"] .sistem-kart {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
}
[data-theme="dark"] .sistem-deger { color: var(--fly-txt) !important; }
[data-theme="dark"] .uyari-satir.uyari-aktif:hover { background: var(--fly-panel2) !important; }
[data-theme="dark"] .uyari-mesaj { color: var(--fly-txt) !important; }

/* ─── HIZLI ERIŞIM MODÜL KARTLARI (Anasayfa) ─ 26.08.2026 ──────────────
   Anasayfa.razor.css'te .modul-kart zemini sabit `white`, bağlantı yazısı sabit
   #334155 ve hover'ı `color-mix(..., white)`. Bu üçü de tema değişkeni kullanmıyor,
   bu yüzden koyu temada "Hızlı Erişim" bölümü bembeyaz bloklar halinde kalıyordu.
   Scoped CSS (SuperFly.Shared.styles.css) app.css'ten SONRA yüklendiği ve
   özgüllükler eşit olduğu için !important şart — .dash-card / .hizli-bar-btn
   için yukarıda kullanılan desenin aynısı. */
/* 27.08.2026: gölgeler kaldırıldı — açık temada da kaldırıldı, iki temanın
   kart dili ayrışmasın (bkz. Anasayfa.razor.css/.modul-kart). Hover geri
   bildirimi artık kenarlık renginde. */
[data-theme="dark"] .modul-kart {
    background: var(--fly-panel) !important;
    border-color: var(--fly-line) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .modul-kart:hover {
    border-color: color-mix(in srgb, var(--mk, var(--fly-accent)) 55%, var(--fly-line)) !important;
}
[data-theme="dark"] .modul-links a {
    color: var(--fly-txt-dim) !important;
}
[data-theme="dark"] .modul-links a:hover {
    background: color-mix(in srgb, var(--mk, var(--fly-accent)) 22%, var(--fly-panel2)) !important;
    color: var(--fly-txt) !important;
}

/* Hızlı aksiyon barı ikon kutusu — color-mix(..., white) koyu temada beyazlıyordu */
[data-theme="dark"] .hbb-icon {
    background: color-mix(in srgb, var(--btn-color, var(--fly-accent)) 26%, var(--fly-panel2)) !important;
}

/* Anasayfa'da sabit #64748B kalmış sönük etiketler — koyu zeminde ~3.7:1 kontrast,
   WCAG AA (4.5:1) altı. --fly-txt-mute koyu temada #8A8A8A (~5.5:1). */
[data-theme="dark"] .section-label,
[data-theme="dark"] .kritik-kodu,
[data-theme="dark"] .kritik-min,
[data-theme="dark"] .akt-ci-zaman,
[data-theme="dark"] .akt-ci-aciklama,
[data-theme="dark"] .uyari-vade-baslik,
[data-theme="dark"] .sistem-lbl {
    color: var(--fly-txt-mute) !important;
}

/* Accent buton — btn-sm ile styled butonlar */
[data-theme="dark"] .btn-outline-secondary {
    color: var(--fly-txt-dim);
    border-color: var(--fly-line);
}

/* skeleton dark */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--fly-panel) 25%, var(--fly-panel2) 50%, var(--fly-panel) 75%) !important;
    background-size: 200% 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR (global)
   ═══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fly-scroll-thumb); border-radius: 4px; }
* { scrollbar-width: thin; scrollbar-color: var(--fly-scroll-thumb) transparent; }

/* ═══════════════════════════════════════════════════════════════════
   BLAZOR HATA / DOĞRULAMA
   ═══════════════════════════════════════════════════════════════════ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--fly-success); }
.invalid { outline: 1px solid var(--fly-error); }
.validation-message { color: var(--fly-error); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "Bir hata oluştu."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder { color: var(--fly-txt-mute); text-align: end; }

.form-floating>.form-control-plaintext:focus::placeholder,
.form-floating>.form-control:focus::placeholder { text-align: start; }

/* ═══════════════════════════════════════════════════════════════════
   RENK SEÇICI (tema seçim paneli)
   ═══════════════════════════════════════════════════════════════════ */
.fly-theme-picker {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
}

.fly-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: .15s;
}

.fly-color-swatch.active,
.fly-color-swatch:hover {
    border-color: #fff;
    transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════════
   ANİMASYONLAR
   ═══════════════════════════════════════════════════════════════════ */
/* 09.08.2026: "transform" içeren bir keyframe, .fly-content'i (position:fixed
   torunları için) yeni bir containing block'a çeviriyordu. Etkisi: Bootstrap
   modal'ları (position:fixed) artık viewport'a değil .fly-content'e göre
   konumlanıyor VE .fly-content'in kendi z-index'i (auto) .fly-topbar'ın
   z-index:100'ünün altında kaldığı için modal başlığı üst menünün ARKASINDA
   render ediliyordu (Opsiyon Ekle modalı raporu). transform kaldırıldı,
   sadece opacity animasyonu kaldı — modal'lar artık viewport'a göre doğru
   konumlanıyor. Bu TÜM modallar için geçerli bir düzeltmeydi, tek sayfaya
   özel değil. */
@keyframes fly-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.fly-fade { animation: fly-fade-in 0.25s ease; }

/* Menü ok geçişi */
.menu-arrow { transition: transform 0.25s ease; }
.menu-arrow.rotated { transform: rotate(180deg); }

/* Nav link geçiş */
.nav-link { transition: all 0.15s ease; }

/* ═══════════════════════════════════════════════════════════════════
   BİLDİRİM (TOAST) DURUM RENKLERİ                        06.08.2026
   ───────────────────────────────────────────────────────────────────
   Doğrulama uyarıları (ör. "Ünvan zorunludur", "Stok adı boş
   bırakılamaz") bootstrap'ın varsayılan beyaz toast'ıyla çıkıyordu ve
   kasa ekranında fark edilmiyordu. Hata bildirimleri artık koyu
   kırmızı zemin + beyaz yazı ve kısa bir sarsıntı ile gösteriliyor.
   Sınıflar ToastShow(...) içinden eklenip kaldırılır; toast markup'ı
   sayfalarda olduğu gibi kalır.
   ═══════════════════════════════════════════════════════════════════ */
.toast.fly-toast-hata {
    background: #b91c1c !important;
    color: #fff !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 0 10px 30px rgba(185, 28, 28, .45);
    animation: fly-toast-sars .35s ease;
}

.toast.fly-toast-hata .toast-body { color: #fff !important; font-weight: 600; }

.toast.fly-toast-ok {
    background: #15803d !important;
    color: #fff !important;
    border: 1px solid #14532d !important;
}

.toast.fly-toast-ok .toast-body { color: #fff !important; }

/* Koyu zeminde varsayılan (siyah) kapatma çarpısı görünmüyor */
.toast.fly-toast-hata .btn-close,
.toast.fly-toast-ok .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

@keyframes fly-toast-sars {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-7px); }
    40%      { transform: translateX(6px); }
    60%      { transform: translateX(-4px); }
    80%      { transform: translateX(3px); }
}

/* ═══════════════════════════════════════════════════════════════════
   POS "CHROME" RENKLERİ                                   06.08.2026
   ───────────────────────────────────────────────────────────────────
   Satış ekranlarındaki grup sütunu, fiş başlığı ve modal başlığı gibi
   koyu panellerin zemini --fly-panel2 idi. --fly-panel2 açık temada
   #F1F5F9'a (neredeyse beyaz) dönüyor, ama bu panellerin YAZI rengi
   koda color:#fff olarak sabitlenmişti → açık temada beyaz zeminde
   beyaz yazı, yani görünmez başlıklar.
   Bu paneller her iki temada koyu kalır; yazı sabit açık tonlardadır.
   27.09.2026: eski lacivert (#172033 / #111a2e) login paletinin nötr
   kömür tonlarına çekildi — iki temada da aynı.
   ═══════════════════════════════════════════════════════════════════ */
:root,
[data-theme="dark"],
[data-theme="light"] {
    --fly-pos-chrome:      #1a1a1a;
    --fly-pos-chrome-2:    #141414;
    --fly-pos-chrome-txt:  #FFFFFF;
    --fly-pos-chrome-dim:  #C8C8C8;
    --fly-pos-chrome-mute: #9E9E9E;
    --fly-pos-chrome-line: rgba(255,255,255,.12);
}

/* ═══════════════════════════════════════════════════════════════════
   ÜST MENÜ DROPDOWN — TAŞMA / KAYDIRMA                    15.08.2026
   ───────────────────────────────────────────────────────────────────
   .fly-app "height:100vh; overflow:hidden" olduğu için SAYFA hiç
   kaydırılamıyor. .fly-dropdown'ın da yükseklik sınırı yoktu; uzun
   menüler (ör. Raporlar açıkken) küçük ekranlarda ekranın altından
   taşıyor ve taşan kısma hiçbir şekilde ulaşılamıyordu.
   Çözüm: panelin KENDİSİ kaydırılabilir olsun ve viewport'u aşmasın.
   100dvh, mobil tarayıcılarda adres çubuğu gizlenip açılırken 100vh'nin
   yanlış (fazla) ölçmesini engeller; desteklemeyen tarayıcı ilk satırdaki
   100vh değerinde kalır.
   ═══════════════════════════════════════════════════════════════════ */
.fly-dropdown {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Dar ekran: panel butona göre değil, EKRANA göre konumlanır; böylece
   sağdaki menü grupları sağa, alttakiler aşağı taşıp kırpılmaz.
   "!important" gerekli: hesap menüsü panelinde inline style ile
   "right:0; left:auto; min-width:230px" veriliyor (MainLayout.razor). */
/* 09.10.2026 (kullanıcı bildirimi): tablet boyutunda üst menüdeki "Tanımlar" sağdaki
   "Yardım" düğmesinin üstüne biniyordu. Sebep: .fly-topnav-item'lar flex-shrink:0 ve
   .fly-topnav overflow:visible — menü sığmayınca daralmıyor, sağa TAŞIYOR ve aksiyon
   bloğunun (Yardım / tema / avatar) üstüne biniyordu. Altı grubun toplamı ≈ 800px;
   logo + menü + aksiyonlar ≈ 1250px istiyor. Menünün KENDİ SATIRINA inip yatay
   kaydırılması (ve açılır menülerin position:fixed olması) eskiden yalnız ≤991px'te
   devredeydi; eşik 1279.98px'e çıkarıldı. Tüm bu blok tek bir bütün: şerit sarma, menü
   satırı ve sabit açılır menü birlikte değişir. */
@media (max-width: 1279.98px) {
    .fly-topbar {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        align-content: flex-start;
        row-gap: 4px;
        padding: 6px 8px;
        overflow: visible;
    }

    .fly-topbar-brand {
        margin-right: 0;
        padding-right: 8px;
    }

    .fly-topbar-brand small {
        display: none;
    }

    .fly-topbar-actions {
        margin-left: auto;
    }

    .fly-topnav {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        height: 42px;
        overflow-x: auto;
        overflow-y: visible;
        scrollbar-width: thin;
        scrollbar-color: var(--fly-sidebar-active-border) transparent;
        -webkit-overflow-scrolling: touch;
    }

    .fly-topnav::-webkit-scrollbar {
        height: 6px;
    }

    .fly-topnav::-webkit-scrollbar-track {
        background: transparent;
    }

    .fly-topnav::-webkit-scrollbar-thumb {
        background: var(--fly-sidebar-active-border);
        border-radius: 999px;
    }

    .fly-topnav-btn {
        padding: 8px 10px;
    }

    .fly-dropdown {
        position: fixed;
        top: 104px;
        left: 8px !important;
        right: 8px !important;
        width: auto;
        min-width: 0 !important;
        max-height: calc(100vh - 112px);
        max-height: calc(100dvh - 112px);
    }

    .fly-nav-link,
    .fly-nav-baslik {
        white-space: normal;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   EKSİK BOOTSTRAP UTILITY'Sİ                              28.08.2026
   ───────────────────────────────────────────────────────────────────
   Projede 5 sayfada `badge bg-success bg-opacity-15 text-success`
   kalıbı kullanılıyor. Bootstrap 5.3 bg-opacity ölçeği yalnızca
   10/25/50/75/100 üretir — `bg-opacity-15` DİYE BİR SINIF YOK.
   Tanımsız sınıf sessizce yok sayıldığı için --bs-bg-opacity 1'de
   kalıyor ve rozet DOLU yeşil/kırmızı zemin + aynı renk yazıyla,
   yani okunamaz halde çıkıyordu (her iki temada da).
   Bootstrap'ın kendi utility'leri gibi !important ile tanımlandı.
   ═══════════════════════════════════════════════════════════════════ */
.bg-opacity-15 { --bs-bg-opacity: .15 !important; }

/* ═══════════════════════════════════════════════════════════════════
   KART YARDIM TABLOSU MODALLARI                           23.09.2026
   ───────────────────────────────────────────────────────────────────
   Kullanıcı bildirimi: "Yeni Fatura / Yeni İrsaliye'deki Cari Kart ve
   Stok Kart yardım tablolarında başlık üst menünün altında kalıyor."
   Kasa Hareketleri'ndeki "? / Nedir" popup'ında (bkz. KasaHareketler
   .razor.css → .ks-info-katman) düzeltilen sorunun aynısı:

   Modal position:fixed ve Bootstrap z-index'i 1055 olmasına rağmen ÜST
   MENÜNÜN ALTINDA çiziliyor. Sebep .fly-content'teki isolation:isolate —
   orası yeni bir YIĞIN BAĞLAMI, yani 1055 yalnız o bağlamın içinde
   geçerli. .fly-topbar (56px, z-index:100) .fly-content'in KARDEŞİ ve
   onun üstünde boyanıyor. Dolayısıyla z-index'i büyütmek çözmez;
   modalı o 56px'lik banttan ÇIKARMAK gerekir.

   Üst dolgu 68px = 56 menü + 12 nefes payı. modal-dialog-centered
   kalan alana göre ortaladığı için pencere yüksekliğine uyum sürüyor.

   Sınıf ortak: aynı popup CariHareketDetay, CariHareketler ve
   StokDetay'da da var; oraya da eklenmesi yeterli.
   ═══════════════════════════════════════════════════════════════════ */
.fly-yardim-modal { padding-top: calc(var(--fly-topbar-h) + 12px); }

/* Sol sütundaki sonuç listesi — kod/ad satırı ile alt bilgi satırı.
   23.09.2026 (kullanıcı isteği): bir tık küçüldü; aynı yükseklikte daha
   çok kayıt görünüyor ve iki satır arasındaki fark korunuyor. */
.fly-yardim-modal .list-group-item .fw-bold { font-size: .87rem; }
.fly-yardim-modal .list-group-item small    { font-size: .76rem; }

/* 23.09.2026 (kullanıcı: "popup üstte kurtuldu ama altta ekranın dışına taşıyor") —
   YÜKSEKLİK EKRANA UYSUN.
   Modal gövdesi içerik kadar uzuyordu: sol sütundaki liste SABİT max-height:450px
   taşıyor, sağ sütundaki detay/yeni-kart formu ondan da uzun olabiliyor. Toplam,
   68px üst dolgudan sonra kalan yüksekliği aşınca alt ucu ekranın dışında kalıyordu.
   Çözüm: diyalog kalan alanı AŞMASIN, gövde de o alana otursun; taşan kısım artık
   sayfanın değil, ilgili sütunun kendi içinde kayıyor (Kasa/Cari Hareketleri
   kartlarındaki desenin aynısı). vh cinsinden sabit sayı YOK: 68px üst dolgu +
   16px alt nefes payı düşülüyor, yani pencere ne olursa olsun tam oturuyor. */
.fly-yardim-modal .modal-dialog {
    /* Kapsayıcı (.modal) zaten 68px üst dolguya sahip; buradaki %100 ONUN kalan
       yüksekliği. Bootstrap'ın kendi diyalog kenar boşluğu (--bs-modal-margin,
       ≥576px'te 1.75rem) iki kez düşülüyor — vh ile elle hesap yapmaya gerek yok,
       pencere boyu ne olursa olsun tam oturur. */
    max-height: calc(100% - var(--bs-modal-margin, 1.75rem) * 2);
    display: flex;
    align-items: stretch;
}
.fly-yardim-modal .modal-content {
    max-height: 100%;
    width: 100%;
    overflow: hidden;   /* köşe yuvarlaklığı korunsun, taşan iç sütunlarda kalsın */
}
.fly-yardim-modal .modal-header { flex: 0 0 auto; }
.fly-yardim-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;   /* kaydırma iç sütunlarda */
}
/* Gövdedeki iki sütunlu ızgara ve sütunların kendisi de esnek olmalı ki
   içlerindeki liste/form kalan yüksekliğe otursun. */
.fly-yardim-modal .modal-body > .row {
    height: 100%;
    min-height: 0;
    flex-wrap: nowrap;   /* sarmalı satırda çapraz boyut içerikten hesaplanır (bkz.
                            Kasa Hareketleri düzeltmesi) — kolonlar taşardı. */
}
.fly-yardim-modal .modal-body > .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;    /* sağ sütun (detay / yeni kart formu) kendi içinde kayar */
}
/* Sol sütun: arama şeridi sabit, liste kalan alanı doldurur ve kendi içinde kayar.
   Eski satır içi "max-height:450px" bu sınıfla değiştirildi (bkz. markup). */
.fly-yardim-modal .col-md-5 { overflow: hidden; }
.fly-yardim-modal .fly-yardim-liste {
    flex: 1 1 0;
    min-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Yardım tablosu BAŞLIK ŞERİDİ — 23.09.2026 (kullanıcı: "Fatura'daki başlık
   İrsaliye'deki gibi olsun").
   ÖNCE iki sayfa ayrışmıştı: Fatura'da satır içi `background-color:
   var(--fly-accent) !important` ile DOLU KIRMIZI, İrsaliye'de ise !important
   olmadığı için global kural (.modal-header{background:var(--fly-panel2)
   !important}) kazanıyor ve NÖTR şerit çıkıyordu.
   Artık ikisi de nötr: zemin global kuraldan (panel2) geliyor, satır içi
   renk verilmiyor. Yazı SABİT BEYAZ DEĞİL tema metin rengi — beyaz yazı
   açık temada panel2'nin üstünde görünmez oluyordu (19.09.2026'da Fatura
   için "kapat düğmesi yok" diye bildirilen sorunun kaynağı buydu).
   Kapatma çarpısı da aynı sebeple temaya bağlandı. */
.fly-yardim-modal .modal-header { color: var(--fly-txt) !important; }
.fly-yardim-modal .modal-header .modal-title i { color: var(--fly-accent); }
/* Koyu tema VARSAYILAN (:root) ve MainLayout data-theme'i sonradan yazıyor —
   bu yüzden kural [data-theme="dark"] ile DEĞİL, tersinden kuruluyor:
   varsayılan invert, açık temada iptal. Aksi hâlde öznitelik yazılmadan önceki
   ilk render'da çarpı koyu zeminde koyu kalıyordu. */
.fly-yardim-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="light"] .fly-yardim-modal .modal-header .btn-close { filter: none; }

/* 09.10.2026 (kullanıcı: "Abonelik & Satın Alma'da Satın Al modalının üstündeki X koyu temada
   siyah, görünmüyor"): yukarıdaki düzeltme yalnız .fly-yardim-modal içindi. Bootstrap'in
   .btn-close'u koyu bir SVG; koyu temada modal zemini koyu olduğundan kayboluyor. Aynı
   çözüm tüm modal başlıklarına genelleştirildi (koyu = varsayılan, açık temada iptal —
   gerekçe için yukarıdaki nota bakın). .btn-close-white hariç: o sınıf zaten beyaz çarpı
   isteyen renkli (aksan zeminli) başlıklarda bilerek kullanılıyor, iki temada da beyaz
   kalmalı; filtresine dokunulmaz. */
.modal-header .btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
}
[data-theme="light"] .modal-header .btn-close:not(.btn-close-white) { filter: none; }

/* ═══════════════════════════════════════════════════════════════════
   KOYU TEMA — LOGIN PALETİ UYUMU                           27.09.2026
   ───────────────────────────────────────────────────────────────────
   Yukarıdaki :root/[data-theme="dark"] token'ları nötr kömür tonlara
   çekildi. Aşağıdakiler token kullanmayan, sabit mavi/slate renkli
   kalmış öğeler: üst menü yazıları (#94A3B8/#64748B), logo ve avatar
   (mavi→yeşil gradyan) ve mavi hover/pill zeminleri. Bu kurallar
   paylaşılan (her iki temada geçerli) olduğu için doğrudan değil,
   yalnızca koyu tema için ezilir — açık tema hiç etkilenmez.
   .alert-info bilinçli olarak mavi bırakıldı (anlamsal "bilgi" rengi).
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .fly-topnav-btn,
[data-theme="dark"] .fly-icon-btn {
    color: #A6A6A6;
}
[data-theme="dark"] .fly-topnav-btn:hover,
[data-theme="dark"] .fly-topnav-btn.active,
[data-theme="dark"] .fly-icon-btn:hover {
    color: #FFFFFF;
}
[data-theme="dark"] .fly-topnav-arrow,
[data-theme="dark"] .fly-topbar-brand small,
[data-theme="dark"] .fly-brand small {
    color: #8A8A8A;
}
/* Login'deki kırmızı buton/rozet ile aynı aile — seçili vurgu rengini izler */
[data-theme="dark"] .fly-brand-logo,
[data-theme="dark"] .fly-avatar {
    background: linear-gradient(135deg, var(--fly-accent2), var(--fly-accent-dark));
}
[data-theme="dark"] .fly-pill {
    background: rgba(var(--fly-accent-rgb), .12);
    border-color: rgba(var(--fly-accent-rgb), .3);
}
[data-theme="dark"] .fly-table-row:hover {
    background: rgba(var(--fly-accent-rgb), .06);
}

/* ═══════════════════════════════════════════════════════════════════
   AÇIK TEMA — ÜST MENÜ YAZI RENKLERİ                       27.09.2026
   ───────────────────────────────────────────────────────────────────
   Üst menü açık temada artık beyaz zeminli (bkz. --fly-sidebar-bg).
   .fly-topnav-btn, marka yazısı ve ikon düğmeleri koyu zemine göre
   sabit beyaz / açık gri yazılmıştı; beyaz zeminde görünmez olurlardı.
   Burada koyu metin tonlarına çekilir. Aktif menü alt çizgisi ve
   seçili vurgu (kırmızı) aynen kalır.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .fly-topbar {
    box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
[data-theme="light"] .fly-topbar-brand,
[data-theme="light"] .fly-topbar-brand b,
[data-theme="light"] .fly-brand b {
    color: #0F172A;
}
[data-theme="light"] .fly-topbar-brand small,
[data-theme="light"] .fly-brand small,
[data-theme="light"] .fly-topnav-arrow {
    color: #64748B;
}
[data-theme="light"] .fly-topnav-btn,
[data-theme="light"] .fly-icon-btn {
    color: #334155;
}
[data-theme="light"] .fly-topnav-btn:hover,
[data-theme="light"] .fly-topnav-btn.active,
[data-theme="light"] .fly-icon-btn:hover {
    color: #0F172A;
}
[data-theme="light"] .fly-topnav-btn.active .fly-topnav-arrow {
    color: var(--fly-accent);
}
/* Logo ve avatar iki temada aynı kırmızı aile (koyu tema bloğuyla eş) */
[data-theme="light"] .fly-brand-logo,
[data-theme="light"] .fly-avatar {
    background: linear-gradient(135deg, var(--fly-accent2), var(--fly-accent-dark));
}

/* ── Arama kutusu temizleme düğmesi (×) — 29.09.2026 ───────────────────────
   Ambar Yönetimi ve Personel Tanımları'nda kullanılıyor; sayfaya özel CSS'ten
   buraya alındı ki iki ekran (ve sonraki) aynı görünsün.

   Kutu doluyken input-group'un sağ ucunda çıkar. Nötr kenarlık: kırmızı ya da
   vurgulu bir düğme "sil" izlenimi verip kayıt silineceği korkusu yaratıyordu —
   yaptığı iş yalnızca filtreyi kaldırmak.

   Renkler Bootstrap'in --bs-* değişkenleri yerine uygulamanın kendi --fly-*
   tema değişkenlerinden: --bs-* koyu temayı her zaman izlemiyor (aynı sebeple
   rozetlerde okunmayan yazı oluşmuştu). Yazı/zemin kontrastı iki temada da
   7:1'in üstünde (koyu 7.50, açık 9.45). */
.input-group .arama-temizle {
    display: flex;
    align-items: center;
    padding-inline: .55rem;
    background-color: var(--fly-panel2);
    border-color: var(--fly-line);
    color: var(--fly-txt-dim);
}

.input-group .arama-temizle:hover,
.input-group .arama-temizle:focus-visible {
    background-color: var(--fly-line);
    border-color: var(--fly-line);
    color: var(--fly-txt);
}

/* 23.10.2026 (kullanıcı): Tanımlamalar / Sistem Araçları sekmeleri — AÇIK sekmenin yazısı ve ikonu tema rengi;
   diğerleri açık temada metin rengi (Bootstrap mavisi yerine), koyu temada mevcut soluk renk ([data-theme="dark"] kuralı). */
.sekmeli-sekmeler .nav-link { color: var(--fly-txt); }
[data-theme="dark"] .sekmeli-sekmeler .nav-link { color: var(--fly-txt-dim); }
.sekmeli-sekmeler .nav-link.active,
[data-theme="dark"] .sekmeli-sekmeler .nav-link.active { color: var(--fly-accent); }

/* 23.10.2026 (kullanıcı): Tanımlar menüsündeki tüm ekranlarda giriş kutularının zemini şeffaf (çerçeve / odak rengi aynı).
   Kapsam: Tanımlar başlık bandı (.mgmt-header.tanim-baslik) olan sayfalar — Cari Kartları (.renkli-baslik) hariç — ve
   Restoran Profili (.rp-page). Salt okunur kutular gri kalır (düzenlenemediği belli olsun). */
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .form-control:not([readonly]),
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .form-control:not([readonly]):focus,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .form-select,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .form-select:focus,
.rp-page .form-control:not([readonly]),
.rp-page .form-select { background-color: transparent !important; }

/* 23.10.2026 (kullanıcı): tema renkli çerçeve düğmeleri (Super5 SettingsAccentOutlineButton / SettingsAccentBorderButton karşılığı).
   .btn-cizgi-tema: çerçeve + yazı tema rengi, zemin şeffaf (Sırayı Kaydet). .btn-cerceve-tema: yalnız çerçeve tema rengi (Satır Ekle). */
.btn.btn-cizgi-tema,
.btn.btn-cerceve-tema { background: transparent; border: 1px solid var(--fly-accent); }
.btn.btn-cizgi-tema { color: var(--fly-accent); }
.btn.btn-cerceve-tema { color: var(--fly-txt); }
.btn.btn-cizgi-tema:hover:not(:disabled),
.btn.btn-cerceve-tema:hover:not(:disabled) { background: color-mix(in srgb, var(--fly-accent) 10%, transparent); border-color: var(--fly-accent); }
.btn.btn-cizgi-tema:disabled,
.btn.btn-cerceve-tema:disabled { opacity: .5; border-color: var(--fly-accent); color: var(--fly-accent); }
.btn.btn-cerceve-tema:disabled { color: var(--fly-txt); }

/* 23.10.2026 (kullanıcı): Tanımlar ekranlarında onay kutusu / anahtar yanındaki etiketler kalın değil
   (genel .mgmt-form-body label kuralı alan başlıkları içindir). */
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .form-check-label { font-weight: 400 !important; }

/* 23.10.2026 (kullanıcı): Tanımlamalar / Sistem Araçları — sekmedeki ekranın başlık satırı (Controls/TanimBaslik) üstteki
   ana başlık bandına "›" ardından taşınır; ekranın kendi bandı çizilmez (alttaki ekrana daha çok yer). Ara başlık ana
   başlıktan ~1 punto küçük ve metin renginin birkaç ton yumuşağı; düğmeler / rehber satırın sonunda. */
.sekmeli-alt-baslik {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    flex: 1 1 auto;
    min-width: 0;
}
.sekmeli-alt-baslik:not(:empty)::before {
    content: "›";
    font-size: 1.5rem;
    line-height: 1;
    color: var(--fly-txt-dim);
    margin: 0 0 2px 2px;
}
.sekmeli-alt-baslik > :not(:first-child):last-child,
.sekmeli-alt-baslik > .mt-stats { margin-left: auto; }
.sekmeli-alt-baslik .mt-title .alt { display: none; }
.mgmt-header.tanim-baslik.sekmeli-ust .sekmeli-alt-baslik h4,
.mgmt-header.tanim-baslik.sekmeli-ust .sekmeli-alt-baslik .mgmt-title {
    font-size: calc(var(--tanim-baslik-fs) - .125rem);
    font-weight: 700;
    margin: 0;
    color: color-mix(in srgb, var(--fly-txt) 75%, var(--fly-panel)) !important;
}
.mgmt-header.tanim-baslik.sekmeli-ust .sekmeli-alt-baslik h4 .bi,
.mgmt-header.tanim-baslik.sekmeli-ust .sekmeli-alt-baslik .mgmt-title .bi {
    color: color-mix(in srgb, var(--fly-txt) 75%, var(--fly-panel)) !important;
}
/* 23.10.2026 (kullanıcı): Masa Tanımları — sayaç kutuları ekran rehberine yakın, aralarında biraz daha geniş boşluk. */
.sekmeli-alt-baslik > .mt-stats ~ :last-child { margin-left: 10px; }

/* 23.10.2026 (kullanıcı): Personel / Ambar ekranları kendi sayfalarında ekran yüksekliğine oturan (height:100%) bir
   iskelet kullanıyor. Tanımlamalar sekmesinin içinde bu yükseklik çok kısa kalıyor, sağdaki form iç kaydırmayla
   okunuyordu. Sekmede: sayfa içeriği kadar uzar, form kırpılmaz; liste en çok ekranın %60'ı kadar, kendi içinde kayar. */
.sekmeli-icerik .personel-sayfa,
.sekmeli-icerik .ambar-sayfa { height: auto !important; overflow: visible !important; }
.sekmeli-icerik .personel-sayfa .mgmt-card,
.sekmeli-icerik .ambar-sayfa .mgmt-card { overflow: visible !important; }
.sekmeli-icerik .personel-sayfa .mgmt-form-body,
.sekmeli-icerik .ambar-sayfa .mgmt-form-body { flex: 0 0 auto !important; overflow: visible !important; }
.sekmeli-icerik .personel-sayfa .mgmt-table-wrap,
.sekmeli-icerik .ambar-sayfa .mgmt-table-wrap { flex: 0 1 auto !important; max-height: 60vh !important; }

/* 23.10.2026 (kullanıcı): Tanımlar ekranlarındaki form başlıkları ("Yeni Masa", "Yeni Tip", "Düzenle: …") kalın kalır ama
   tema rengi değil — metin rengi (açık temada siyah, koyu temada beyaz). Diğer menülerin form kartları değişmez. */
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mgmt-form-card .mgmt-card-header,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mgmt-form-card .mgmt-card-header .bi,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mt-kart-baslik,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mt-kart-baslik > span .bi { color: var(--fly-txt) !important; }
/* 23.10.2026 (kullanıcı): Tanımlar ekranlarında kart başlıklarındaki ikonlar ("Grup Listesi", "Yeni Grup" …) da metin renginde
   (yalnız başlık ikonu — .ic-tema / .text-danger; başlıktaki düğmelerin ikonları değişmez). */
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mgmt-card-header .bi.ic-tema,
.fly-content:has(.mgmt-header.tanim-baslik:not(.renkli-baslik)) .mgmt-card-header .bi.text-danger { color: var(--fly-txt) !important; }

/* 23.10.2026 (kullanıcı): Kampanya Detay — giriş kutularının zemini şeffaf (Tanımlar ekranlarıyla aynı; salt okunur gri kalır). */
.ks-sayfa .form-control:not([readonly]),
.ks-sayfa .form-control:not([readonly]):focus,
.ks-sayfa .form-select,
.ks-sayfa .form-select:focus { background-color: transparent !important; }