/* B2B Blazor - Ana CSS */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

:root {
    --sidebar-bg: #202020;
    --sidebar-text: #ccc;
    --sidebar-hover: #C90000;
    --accent: #C90000;
    --page-bg: #f3f3f3;
    --card-bg: #fff;
    --vardar-blue: #337ab7;
    --vardar-blue-dark: #286090;
    --vardar-green: #5cb85c;
    --vardar-red: #d9534f;
    --vardar-yellow: #ffff00;
    --vardar-header-bg: #f8f9fa;
    --vardar-border: #ddd;
}

/* ── Modern Grid Styles (Radzen DataGrid) ──────── */
.legacy-grid {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    border: 1px solid #e1e5ea;
    background: #fff;
}

.legacy-grid .rz-grid-table,
.legacy-grid .rz-data-grid-data {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Header: degrade + mavi alt çizgi + küçük caps */
.legacy-grid .rz-grid-table thead th,
.legacy-grid .rz-datatable-thead th {
    background: linear-gradient(180deg, #fbfcfd 0%, #eaeef3 100%) !important;
    color: #2c3e50 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--vardar-blue) !important;
    padding: 11px 8px !important;
    font-size: 11.5px !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Hücre: rahat padding, yumuşak alt çizgi, geçiş efekti */
.legacy-grid .rz-grid-table td,
.legacy-grid .rz-datatable-tbody td {
    padding: 9px 8px !important;
    border-bottom: 1px solid #f1f3f5 !important;
    font-size: 12.5px !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Satır imleci → tıklanabilir (el işareti) */
.legacy-grid .rz-data-row,
.legacy-grid .rz-datatable-tbody tr {
    cursor: pointer;
}

/* Hover: yumuşak mavi tint + sol kenarda küçük ipucu */
.legacy-grid .rz-data-row:hover > td {
    background-color: #eaf3fb !important;
}
.legacy-grid .rz-data-row:hover > td:first-child {
    box-shadow: inset 3px 0 0 var(--vardar-blue);
}

/* Seçili satır: güçlü mavi degrade + sol kenar 4px aksan */
.legacy-grid .grid-row-selected > td,
.legacy-grid tr.grid-row-selected > td {
    background: linear-gradient(90deg, #bad7ed 0%, #d2e4f4 25%, #e6f1fa 100%) !important;
    color: var(--vardar-blue-dark) !important;
    font-weight: 600 !important;
}
.legacy-grid .grid-row-selected > td:first-child,
.legacy-grid tr.grid-row-selected > td:first-child {
    box-shadow: inset 4px 0 0 var(--vardar-blue) !important;
}

/* Kampanya/fırsat ürünü sarı highlight */
.legacy-grid .grid-row-campaign > td,
.legacy-grid tr.grid-row-campaign > td {
    background-color: #fff6c8 !important;
}
.legacy-grid .grid-row-campaign:hover > td {
    background-color: #fff0a5 !important;
}

/* Seçili + kampanya → seçili daima üste */
.legacy-grid .grid-row-selected.grid-row-campaign > td {
    background: linear-gradient(90deg, #bad7ed 0%, #d2e4f4 25%, #e6f1fa 100%) !important;
}

/* Eski yellow class uyumu */
.legacy-grid .row-highlight-yellow td {
    background-color: var(--vardar-yellow) !important;
}

/* Sayfalama barı — küçük polish */
.legacy-grid .rz-pager {
    background: #fafbfc !important;
    border-top: 1px solid #eef1f4 !important;
    padding: 6px 8px !important;
}

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

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background: var(--page-bg);
    color: #333;
}

/* ── Sidebar Layout ─────────────────────────────── */
.b2b-layout {
    display: flex;
    min-height: 100vh;
}

.b2b-sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
    transition: width 0.2s;
}

.b2b-sidebar .sidebar-brand {
    padding: 14px 12px 14px;
    border-bottom: 1px solid #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1d1d1d 100%);
}

.b2b-sidebar .brand-logo-card {
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.b2b-sidebar .sidebar-brand img {
    max-height: 46px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
/* Geniş sidebar — tam logo göster, kısa logo gizli.
   NOT: ".sidebar-brand img { display:block }" (0,2,1) bu kuralı (0,2,0) ezdiği için
   img.brand-logo-mini ile spesifisiteyi yükselt — yoksa geniş modda iki logo da görünür. */
.b2b-sidebar .sidebar-brand img.brand-logo-mini { display: none; }

.b2b-sidebar .brand-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.b2b-nav {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    flex: 1;
    overflow-y: auto;
}

.b2b-nav li a, .b2b-nav li button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px 11px 17px;
    color: #e8eaed;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}

.b2b-nav li a:hover, .b2b-nav li button:hover,
.b2b-nav li a.active, .b2b-nav li button.active {
    background: rgba(201, 0, 0, 0.22);
    color: #fff;
    border-left-color: var(--accent);
    font-weight: 600;
}

.b2b-nav .badge-count {
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    margin-left: auto;
}

.sidebar-user {
    padding: 12px 16px;
    border-top: 1px solid #333;
    font-size: 12px;
    color: #aaa;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}
.sidebar-user-info .b2b-nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;              /* SAF beyaz — tema override'ları ! ile zorlanır */
    text-decoration: none;
    font-size: 12px;
    padding: 4px 0;
    transition: color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
    opacity: 0.95;
}
.sidebar-logout:hover { color: #fff; opacity: 1; transform: translateX(2px); }

/* Logout için kırmızımsı bubble — net farklılık, "tehlike/aksiyon" sezgisi */
.sidebar-logout .logout-icon-bubble {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.45);
    flex-shrink: 0;
}
.sidebar-logout:hover .logout-icon-bubble {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.65);
}
.sidebar-logout svg { display: block; }

/* Tüm tema override'larını gez ve logout'u beyaz tut — light/sand temalarda gri kalmasın */
.b2b-layout .sidebar-logout,
.b2b-layout.theme-light .sidebar-logout,
.b2b-layout.theme-sand .sidebar-logout { color: #ffffff !important; }
.b2b-layout.theme-light .sidebar-logout .b2b-nav-text,
.b2b-layout.theme-sand .sidebar-logout .b2b-nav-text { color: #1f2937; } /* açık zeminde yazı koyu, ikon kırmızı bubble içinde beyaz */

/* Admin paneline gitme butonu — collapsed'da yalnız ikon */
.sidebar-admin-link {
    padding: 8px 12px;
}
.sidebar-admin-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #C90000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
}

/* Daralt/genişlet butonu — sidebar sağ kenarından yarı dışarı taşan yuvarlak buton.
   "B2B PORTAL" yazısı hizasında — ne logo'nun üstünde ne navmenü öğelerinin arasında. */
.sidebar-collapse-btn {
    position: absolute;
    top: 88px;
    right: -14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d1d5db;
    color: #1f5ac4;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    z-index: 110;
    padding: 0;
}

/* Daraltılmış modda brand kısalır → buton da yukarı kayar (logonun yanında) */
.b2b-layout.sidebar-collapsed .sidebar-collapse-btn {
    top: 36px;
}

.sidebar-collapse-btn:hover {
    background: #1f5ac4;
    color: #fff;
    transform: scale(1.10);
    box-shadow: 0 4px 14px rgba(31, 90, 196, 0.45);
}

.sidebar-collapse-btn:active {
    transform: scale(0.96);
}

/* Mobilde gizle — hamburger zaten var */
@media (max-width: 768px) {
    .sidebar-collapse-btn {
        display: none;
    }
}

/* ── Main Content ────────────────────────────────── */
.b2b-main {
    margin-left: 220px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════════
   COLLAPSED SIDEBAR — büyük ikon-only mod (masaüstü)
   ════════════════════════════════════════════════════════════════════ */
.b2b-layout.sidebar-collapsed .b2b-sidebar {
    width: 68px;
    min-width: 68px;
}

.b2b-layout.sidebar-collapsed .b2b-main {
    margin-left: 68px;
}

/* Brand: logo kalır, başlık metni gizlenir */
.b2b-layout.sidebar-collapsed .sidebar-brand {
    padding: 10px 6px;
}
.b2b-layout.sidebar-collapsed .brand-logo-card {
    padding: 4px;
}
.b2b-layout.sidebar-collapsed .sidebar-brand img {
    max-height: 38px;
}
/* Daraltılmış sidebar — tam logo gizli, kısa logo göster (yoksa favicon'a düşer).
   Spesifisite: geniş moddaki gizleme kuralı (img.brand-logo-mini = 0,3,1) bunu ezmesin diye
   buraya da ".sidebar-brand img" ekleyip 0,4,1 yapıyoruz. */
.b2b-layout.sidebar-collapsed .brand-logo-full { display: none; }
.b2b-layout.sidebar-collapsed .sidebar-brand img.brand-logo-mini {
    display: block;
    max-height: 36px;
    max-width: 36px;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.b2b-layout.sidebar-collapsed .brand-title {
    display: none;
}

/* Nav: metin gizli, ikon büyür ve ortalanır */
.b2b-layout.sidebar-collapsed .b2b-nav li a,
.b2b-layout.sidebar-collapsed .b2b-nav li button,
.b2b-layout.sidebar-collapsed .sidebar-admin-link a,
.b2b-layout.sidebar-collapsed .sidebar-user-info,
.b2b-layout.sidebar-collapsed .sidebar-logout {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

.b2b-layout.sidebar-collapsed .b2b-nav-text {
    display: none;
}

.b2b-layout.sidebar-collapsed .b2b-nav-icon {
    font-size: 22px;
    line-height: 1;
}

/* Nav'da seçili öğenin sol kenar şeridi daralt'ta görünmesin (içerik ortalandı) */
.b2b-layout.sidebar-collapsed .b2b-nav li a {
    border-left-width: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}
.b2b-layout.sidebar-collapsed .b2b-nav li a.active,
.b2b-layout.sidebar-collapsed .b2b-nav li a:hover {
    border-left-width: 0;
    background: rgba(201, 0, 0, 0.30);
}

/* Sepet sayacı — collapsed'da küçük yuvarlak rozet */
.b2b-layout.sidebar-collapsed .b2b-nav .badge-count {
    position: absolute;
    top: 8px;
    right: 12px;
    margin-left: 0;
    font-size: 10px;
    padding: 1px 5px;
    min-width: 16px;
    line-height: 1.4;
}
.b2b-layout.sidebar-collapsed .b2b-nav li a {
    position: relative;
}

/* Admin paneli linki — collapsed'da sadece ⚙️ ikonu, mini kırmızı kutu */
.b2b-layout.sidebar-collapsed .sidebar-admin-link {
    padding: 6px 8px;
}
.b2b-layout.sidebar-collapsed .sidebar-admin-link a {
    padding: 8px 0;
    font-size: 18px;
}

/* User bölümü — sadece avatar ikonu + çıkış ikonu */
.b2b-layout.sidebar-collapsed .sidebar-user {
    align-items: center;
    padding: 10px 6px;
}
.b2b-layout.sidebar-collapsed .sidebar-user-info,
.b2b-layout.sidebar-collapsed .sidebar-logout {
    width: 100%;
    justify-content: center;
}

/* Toggle buton iki state arası animasyon */
.b2b-layout.sidebar-collapsed .sidebar-collapse-btn {
    /* Genişlet: sağ ok */
}

.b2b-topbar {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-wrap: wrap;
}

.b2b-content {
    padding: 20px;
    flex: 1;
}

/* Ürün Ara — alt-ortada yüzen hızlı arama çubuğu (kaydırınca hep görünür, yukarı çıkmadan ara) */
.arama-sticky-ara {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(620px, 94vw);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 30px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 6px 8px 6px 16px;
}
.arama-sticky-icon { color: #2f6fb5; display: flex; align-items: center; }
.arama-sticky-input {
    flex: 1; border: none; outline: none; background: transparent;
    height: 38px; font-size: 14px; color: #1f2937; min-width: 0;
}
.arama-sticky-temizle {
    background: #eef2f7; color: #64748b; border: none; border-radius: 50%;
    width: 28px; height: 28px; font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.arama-sticky-temizle:hover { background: #e2e8f0; color: #334155; }
.arama-sticky-btn {
    background: linear-gradient(135deg, #4a9be6, #1f5fa8); color: #fff; border: none;
    border-radius: 24px; height: 40px; padding: 0 20px; font-size: 14px; font-weight: 700;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.arama-sticky-btn:hover { filter: brightness(1.06); }
.arama-sticky-ai {
    background: linear-gradient(135deg, #8e2de2, #4a00e0); color: #fff; border: none;
    border-radius: 24px; height: 40px; padding: 0 16px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
}
.arama-sticky-ai:hover { filter: brightness(1.08); }
.arama-sticky-ai:disabled, .arama-sticky-btn:disabled { opacity: .6; cursor: default; }
/* Son grid satırları çubuğun altında kalmasın */
.b2b-content .arama-sticky-ara ~ * { } /* no-op anchor */

/* ── Dashboard Cards ─────────────────────────────── */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    border-left: 4px solid #ccc;
}

.stat-card.green { border-left-color: #00CE6F; }
.stat-card.blue  { border-left-color: #2196F3; }
.stat-card.red   { border-left-color: #DB0630; }
.stat-card.orange { border-left-color: #FF9800; }

.stat-card .stat-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card.green .stat-icon { background: rgba(0,206,111,0.15); color: #00CE6F; }
.stat-card.blue .stat-icon  { background: rgba(33,150,243,0.15); color: #2196F3; }
.stat-card.red .stat-icon   { background: rgba(219,6,48,0.15);   color: #DB0630; }
.stat-card.orange .stat-icon { background: rgba(255,152,0,0.15); color: #FF9800; }

.stat-card .stat-value { font-size: 22px; font-weight: 700; color: #222; }
.stat-card .stat-label { font-size: 12px; color: #888; }

/* ── Chart Cards ─────────────────────────────────── */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.chart-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    min-width: 0;
}

.chart-card h3 {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 8px;
}

/* ── Page Headers ─────────────────────────────────── */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}

.page-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

/* ── Data Tables ─────────────────────────────────── */
.data-table-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* ── Admin Panel ─────────────────────────────────── */
.admin-layout {
    display: flex;
    min-height: 100vh;
    /* Admin paneli teması — varsayılan Indigo. .admin-tema-* sınıfları ezer. */
    --admin-sidebar-bg: #283593;
    --admin-brand-bg:   #1c2570;
    --admin-topbar-bg:  #1a237e;
    --admin-accent:     #5c6bc0;
}
/* 6 admin teması — Tema Yönetimi'nden seçilir (yonetim.b2b.AdminTema) */
.admin-layout.admin-tema-karbon  { --admin-sidebar-bg:#27272a; --admin-brand-bg:#18181b; --admin-topbar-bg:#09090b; --admin-accent:#38bdf8; }
.admin-layout.admin-tema-okyanus { --admin-sidebar-bg:#0c4a6e; --admin-brand-bg:#082f49; --admin-topbar-bg:#07344f; --admin-accent:#22d3ee; }
.admin-layout.admin-tema-orman   { --admin-sidebar-bg:#14532d; --admin-brand-bg:#052e16; --admin-topbar-bg:#0a3a1e; --admin-accent:#22c55e; }
.admin-layout.admin-tema-bordo   { --admin-sidebar-bg:#7f1d1d; --admin-brand-bg:#450a0a; --admin-topbar-bg:#5c1414; --admin-accent:#f59e0b; }
.admin-layout.admin-tema-mor     { --admin-sidebar-bg:#4c1d95; --admin-brand-bg:#2e1065; --admin-topbar-bg:#3b1675; --admin-accent:#d946ef; }

.admin-sidebar {
    width: 220px;
    background: var(--admin-sidebar-bg);
    color: #e8eaf6;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
}

.admin-sidebar .sidebar-brand {
    padding: 14px 12px;
    background: var(--admin-brand-bg);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.admin-sidebar .brand-logo-card {
    background: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    width: 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.admin-sidebar .sidebar-brand img {
    max-height: 42px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.admin-sidebar .sidebar-brand img.brand-logo-mini { display: none; }
.admin-sidebar .brand-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Nav konteyneri — gruplar + scroll */
.admin-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.admin-nav-group-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.admin-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    color: #dfe3f7;
    text-decoration: none;
    font-size: 13px;
    width: 100%;
    transition: background 0.15s;
    border-left: 3px solid transparent;
}

.admin-nav li a:hover, .admin-nav li a.active {
    background: rgba(255,255,255,0.14);
    color: #fff;
    border-left-color: var(--admin-accent);
}

/* Grup başlığı */
.admin-nav-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 20px 5px;
    margin: 0;
    background: none;
    border: none;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #9fa8da;
    cursor: default;
}
.admin-nav.akordion-mode .admin-nav-group-header,
.admin-nav.tree-mode .admin-nav-group-header { cursor: pointer; }
.admin-nav.akordion-mode .admin-nav-group-header:hover,
.admin-nav.tree-mode .admin-nav-group-header:hover { color: #fff; }
.admin-nav-group-emoji { font-size: 12px; }
.admin-nav-chevron {
    margin-left: auto;
    font-size: 13px;
    font-weight: 800;
    transition: transform 0.15s ease;
}
.admin-nav-group.acik .admin-nav-chevron { transform: rotate(90deg); }

/* Tree modu — girinti + bağlayıcı çizgi */
.admin-nav.tree-mode .admin-nav-group-items {
    margin-left: 24px;
    border-left: 1px solid rgba(255,255,255,0.13);
}
.admin-nav.tree-mode .admin-nav-group-items li a { padding-left: 22px; }

/* Sidebar alt — portale dön / çıkış */
.sidebar-user {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 8px 0;
    margin-top: auto;
}
.sidebar-user a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: #aab2e0;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s;
}
.sidebar-user a:hover { background: rgba(255,255,255,0.10); color: #fff; }

.admin-main { margin-left: 220px; flex: 1; transition: margin-left 0.2s ease; }

.admin-topbar {
    background: var(--admin-topbar-bg);
    color: #fff;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
}

/* ── Admin sidebar daralt/genişlet (ikon-rail) ── */
.admin-sidebar .sidebar-collapse-btn { top: 16px; }
.admin-layout.sidebar-collapsed .admin-sidebar { width: 68px; }
.admin-layout.sidebar-collapsed .admin-main { margin-left: 68px; }
.admin-layout.sidebar-collapsed .admin-nav-group-header { display: none; }
.admin-layout.sidebar-collapsed .b2b-nav-text { display: none; }
.admin-layout.sidebar-collapsed .admin-nav li a,
.admin-layout.sidebar-collapsed .sidebar-user a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
    border-left-width: 0;
}
.admin-layout.sidebar-collapsed .b2b-nav-icon { font-size: 20px; line-height: 1; }
.admin-layout.sidebar-collapsed .admin-nav.tree-mode .admin-nav-group-items {
    margin-left: 0;
    border-left: 0;
}
.admin-layout.sidebar-collapsed .sidebar-brand { padding: 12px 6px; }
.admin-layout.sidebar-collapsed .brand-logo-card { padding: 4px; }
.admin-layout.sidebar-collapsed .brand-logo-full { display: none; }
.admin-layout.sidebar-collapsed .sidebar-brand img.brand-logo-mini {
    display: block;
    max-height: 34px;
    max-width: 34px;
    margin: 0 auto;
}
.admin-layout.sidebar-collapsed .brand-title { display: none; }

/* Daraltılmış admin menüde ikon tooltip'i — sağda koyu balon (yalnız rail modunda).
   overflow:visible → balon sidebar dışına taşabilsin (overflow:auto balonu kırpardı). */
.admin-layout.sidebar-collapsed .admin-nav { overflow: visible; }
.admin-layout.sidebar-collapsed .admin-nav li a,
.admin-layout.sidebar-collapsed .sidebar-user a { position: relative; }

.admin-layout.sidebar-collapsed .admin-nav li a[data-tip]::after,
.admin-layout.sidebar-collapsed .sidebar-user a[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 11px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 7px 11px;
    border-radius: 7px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.38);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 250;
}
.admin-layout.sidebar-collapsed .admin-nav li a[data-tip]::before,
.admin-layout.sidebar-collapsed .sidebar-user a[data-tip]::before {
    content: "";
    position: absolute;
    left: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    border: 6px solid transparent;
    border-right-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 250;
}
.admin-layout.sidebar-collapsed .admin-nav li a[data-tip]:hover::after,
.admin-layout.sidebar-collapsed .sidebar-user a[data-tip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
.admin-layout.sidebar-collapsed .admin-nav li a[data-tip]:hover::before,
.admin-layout.sidebar-collapsed .sidebar-user a[data-tip]:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ── Login Page ──────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #202020 0%, #3a3a3a 100%);
    position: relative;
    overflow: hidden;
}

/* ── Login butonları — temaya göre renk alır (CSS değişkeniyle) ─────────── */
.login-box .login-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--login-primary, #C90000) 0%, var(--login-primary-2, #C90000) 100%);
    color: #fff; border: none; border-radius: 6px; padding: 12px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: filter 0.15s, transform 0.05s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.login-box .login-submit-btn:hover { filter: brightness(1.08); }
.login-box .login-submit-btn:active { transform: translateY(1px); }

.login-box .login-pwa-btn {
    display: none; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--login-accent, #2193b0) 0%, var(--login-accent-2, #6dd5ed) 100%);
    color: #fff; border: none; border-radius: 6px;
    padding: 7px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}
.login-box .login-pwa-btn:hover { filter: brightness(1.08); }

/* ── Login Temaları (admin Tema Yönetimi → Login Teması) ───────────────── */
/* Her tema arka planı + buton/aksan renklerini set eder; .login-box beyaz/şeffaf overlay'iyle okunur kalır */

/* 1. Vardar (varsayılan koyu gri) */
.login-wrapper.login-tema-vardar { background: linear-gradient(135deg, #202020 0%, #3a3a3a 100%); }

/* 2. Aurora — mor / pembe / cyan polar ışık */
.login-wrapper.login-tema-aurora {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 35%, #f093fb 70%, #4facfe 100%);
}

/* 3. Sunset — turuncu / pembe / mor günbatımı */
.login-wrapper.login-tema-sunset {
    background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 50%, #6a3093 100%);
}

/* 4. Ocean — derin mavi okyanus */
.login-wrapper.login-tema-ocean {
    background: linear-gradient(135deg, #2193b0 0%, #1e5184 50%, #0a1f44 100%);
}

/* 5. Bitkisel Ürünler — doğa yeşil sektörü */
.login-wrapper.login-tema-bitkisel {
    background: linear-gradient(135deg, #d1fae5 0%, #34d399 45%, #047857 100%);
}
.login-wrapper.login-tema-bitkisel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
    background-image:
        radial-gradient(ellipse at 15% 20%, rgba(255,255,255,0.4), transparent 35%),
        radial-gradient(ellipse at 85% 75%, rgba(6,95,70,0.25), transparent 40%);
}

/* 6. Royal — mor / altın asilzade */
.login-wrapper.login-tema-royal {
    background: linear-gradient(135deg, #5b247a 0%, #1bcedf 100%);
    background: radial-gradient(ellipse at 25% 20%, #f0a35e 0%, transparent 45%),
                linear-gradient(135deg, #4a148c 0%, #311b92 100%);
}

/* 7. Sakura — kiraz çiçeği pembe-krem */
.login-wrapper.login-tema-sakura {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffb6c1 40%, #ff8fa3 100%);
}

/* 8. Elektronik — neon mavi/mor devre kartı sektörü */
.login-wrapper.login-tema-elektronik {
    background: linear-gradient(135deg, #0c1929 0%, #1e3a8a 60%, #312e81 100%);
}
.login-wrapper.login-tema-elektronik::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 22% 28%, rgba(59,130,246,0.40), transparent 40%),
        radial-gradient(circle at 78% 72%, rgba(167,139,250,0.35), transparent 40%),
        repeating-linear-gradient(0deg, transparent 0, transparent 38px, rgba(99,102,241,0.06) 38px, rgba(99,102,241,0.06) 39px),
        repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(99,102,241,0.06) 38px, rgba(99,102,241,0.06) 39px);
}

/* 9. Beyaz Eşya — temiz mavi-beyaz buzdolabı sektörü */
.login-wrapper.login-tema-beyaz-esya {
    background: linear-gradient(180deg, #f0f9ff 0%, #bae6fd 50%, #7dd3fc 100%);
}

/* 10. Gıda — sıcak sarı-turuncu yemek/restoran */
.login-wrapper.login-tema-gida {
    background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #f59e0b 100%);
}

/* 11. Midnight — derin lacivert + yıldızlı */
.login-wrapper.login-tema-midnight {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}
.login-wrapper.login-tema-midnight::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 28% 62%, #fff, transparent),
        radial-gradient(1px 1px at 47% 35%, #fff, transparent),
        radial-gradient(2px 2px at 65% 80%, #fff, transparent),
        radial-gradient(1px 1px at 78% 22%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 88% 55%, #fff, transparent),
        radial-gradient(1px 1px at 35% 85%, #fff, transparent),
        radial-gradient(1px 1px at 92% 12%, #fff, transparent);
}

/* 12. Honey — sıcak bal sarısı */
.login-wrapper.login-tema-honey {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

/* 13. Coral — mercan turuncu / pembe tropik */
.login-wrapper.login-tema-coral {
    background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);
}

/* 14. Otomotiv — kırmızı/siyah racing carbon fiber */
.login-wrapper.login-tema-otomotiv {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d0000 50%, #7f1d1d 100%);
}
.login-wrapper.login-tema-otomotiv::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 25% 30%, rgba(220,38,38,0.30), transparent 45%),
        radial-gradient(circle at 75% 75%, rgba(239,68,68,0.18), transparent 40%),
        repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(255,255,255,0.025) 4px, rgba(255,255,255,0.025) 5px);
}

/* 15. Tropical — turkuaz / lime tropikal */
.login-wrapper.login-tema-tropical {
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 50%, #56ab2f 100%);
}

/* 16. Plasma — çok renkli mesh */
.login-wrapper.login-tema-plasma {
    background: #1a1a2e;
    background-image:
        radial-gradient(at 20% 20%, hsla(280, 100%, 60%, 0.55) 0px, transparent 50%),
        radial-gradient(at 80% 30%, hsla(195, 100%, 55%, 0.55) 0px, transparent 50%),
        radial-gradient(at 70% 80%, hsla(340, 100%, 60%, 0.55) 0px, transparent 50%),
        radial-gradient(at 25% 75%, hsla(60, 100%, 60%, 0.45) 0px, transparent 50%);
}

/* 17. Gold — siyah / altın lüks */
.login-wrapper.login-tema-gold {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
}
.login-wrapper.login-tema-gold::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 18% 30%, rgba(255,215,0,0.18), transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(212,175,55,0.16), transparent 45%);
}

/* 18. Hırdavat — çelik gri / turuncu endüstriyel */
.login-wrapper.login-tema-hirdavat {
    background: linear-gradient(135deg, #1f2937 0%, #4b5563 50%, #ea580c 100%);
}
.login-wrapper.login-tema-hirdavat::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 80% 70%, rgba(251,146,60,0.25), transparent 45%),
        repeating-linear-gradient(90deg, transparent 0, transparent 32px, rgba(255,255,255,0.04) 32px, rgba(255,255,255,0.04) 33px),
        repeating-linear-gradient(0deg, transparent 0, transparent 32px, rgba(0,0,0,0.10) 32px, rgba(0,0,0,0.10) 33px);
}

/* 19. Rosegold — gül altın zarif */
.login-wrapper.login-tema-rosegold {
    background: linear-gradient(135deg, #f8b195 0%, #f67280 50%, #c06c84 100%);
}

/* 20. Galaxy — derin uzay mor + nebula */
.login-wrapper.login-tema-galaxy {
    background: linear-gradient(135deg, #200122 0%, #6f0000 100%);
}
.login-wrapper.login-tema-galaxy::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 30% 40%, rgba(186,85,211,0.45), transparent 40%),
        radial-gradient(circle at 75% 65%, rgba(0,191,255,0.30), transparent 45%),
        radial-gradient(2px 2px at 12% 18%, #fff, transparent),
        radial-gradient(1px 1px at 28% 72%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 65% 35%, #fff, transparent),
        radial-gradient(1px 1px at 88% 88%, #fff, transparent),
        radial-gradient(1px 1px at 92% 22%, #fff, transparent);
}

/* 21. Tekstil — kumaş örgü dokulu krem-bordo sektörü */
.login-wrapper.login-tema-tekstil {
    background: linear-gradient(135deg, #fef3e2 0%, #d4a574 50%, #6b3410 100%);
}
.login-wrapper.login-tema-tekstil::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
    background-image:
        repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(107,52,16,0.10) 3px, rgba(107,52,16,0.10) 4px),
        repeating-linear-gradient(-45deg, transparent 0, transparent 3px, rgba(255,255,255,0.08) 3px, rgba(255,255,255,0.08) 4px);
}

/* 24. Kırtasiye & Kitap — kâğıt kreminden cilt mürekkep mavisine, çizgili defter dokulu */
.login-wrapper.login-tema-kirtasiye-kitap {
    background: linear-gradient(135deg, #fdf6e3 0%, #e8d8b0 30%, #2d6a8a 70%, #134e4a 100%);
}
.login-wrapper.login-tema-kirtasiye-kitap::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.40;
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 28px, rgba(45,106,138,0.14) 28px, rgba(45,106,138,0.14) 29px),
        radial-gradient(ellipse at 22% 28%, rgba(255,240,200,0.30), transparent 45%);
}

/* 23. Mobilya — sıcak ahşap walnut/oak dokulu sektör */
.login-wrapper.login-tema-mobilya {
    background: linear-gradient(135deg, #f5e6d3 0%, #c89b6b 40%, #6b4226 80%, #3e2418 100%);
}
.login-wrapper.login-tema-mobilya::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.40;
    background:
        repeating-linear-gradient(90deg, transparent 0, transparent 24px, rgba(62,36,24,0.10) 24px, rgba(62,36,24,0.10) 26px),
        radial-gradient(ellipse at 30% 35%, rgba(255,235,200,0.32), transparent 45%);
}

/* 22. Cam & Seramik — üstte buzlu cam, altta terra-cotta porselen birleşik sektör */
.login-wrapper.login-tema-cam-seramik {
    background: linear-gradient(160deg, #a8edea 0%, #b8e6f0 30%, #faf5ef 60%, #e8b58a 90%, #a0522d 100%);
}
.login-wrapper.login-tema-cam-seramik::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.55), transparent 35%),
        radial-gradient(circle at 78% 78%, rgba(160,82,45,0.22), transparent 45%),
        radial-gradient(circle at 55% 50%, rgba(255,255,255,0.18), transparent 50%);
}

/* ── Tema başına buton/aksan/glow renkleri ───────────────────────────────── */
.login-wrapper.login-tema-vardar     { --login-primary:#C90000; --login-primary-2:#ff5b5b; --login-accent:#2193b0; --login-accent-2:#6dd5ed; --login-glow:rgba(201,0,0,0.30); }
.login-wrapper.login-tema-aurora     { --login-primary:#764ba2; --login-primary-2:#f093fb; --login-accent:#4facfe; --login-accent-2:#667eea; --login-glow:rgba(240,147,251,0.45); }
.login-wrapper.login-tema-sunset     { --login-primary:#ff6a88; --login-primary-2:#ff9a56; --login-accent:#6a3093; --login-accent-2:#a4508b; --login-glow:rgba(255,106,136,0.45); }
.login-wrapper.login-tema-ocean      { --login-primary:#2193b0; --login-primary-2:#1e5184; --login-accent:#6dd5ed; --login-accent-2:#0a1f44; --login-glow:rgba(33,147,176,0.45); }
.login-wrapper.login-tema-royal      { --login-primary:#f0a35e; --login-primary-2:#e8c468; --login-accent:#4a148c; --login-accent-2:#9333ea; --login-glow:rgba(240,163,94,0.45); }
.login-wrapper.login-tema-sakura     { --login-primary:#ff8fa3; --login-primary-2:#ffb6c1; --login-accent:#c2185b; --login-accent-2:#f48fb1; --login-glow:rgba(255,143,163,0.45); }
.login-wrapper.login-tema-midnight   { --login-primary:#00d2ff; --login-primary-2:#3a7bd5; --login-accent:#2c5364; --login-accent-2:#0f2027; --login-glow:rgba(0,210,255,0.45); }
.login-wrapper.login-tema-honey      { --login-primary:#f59e0b; --login-primary-2:#fda085; --login-accent:#b45309; --login-accent-2:#fcd34d; --login-glow:rgba(245,158,11,0.45); }
.login-wrapper.login-tema-coral      { --login-primary:#ff5e62; --login-primary-2:#ff9966; --login-accent:#c0392b; --login-accent-2:#ff7e5f; --login-glow:rgba(255,94,98,0.45); }
.login-wrapper.login-tema-tropical   { --login-primary:#00d2ff; --login-primary-2:#56ab2f; --login-accent:#3a7bd5; --login-accent-2:#26a69a; --login-glow:rgba(0,210,255,0.45); }
.login-wrapper.login-tema-plasma     { --login-primary:#a855f7; --login-primary-2:#06b6d4; --login-accent:#ec4899; --login-accent-2:#facc15; --login-glow:rgba(168,85,247,0.55); }
.login-wrapper.login-tema-gold       { --login-primary:#d4af37; --login-primary-2:#ffd700; --login-accent:#8b6914; --login-accent-2:#5a4a1f; --login-glow:rgba(212,175,55,0.45); }
.login-wrapper.login-tema-rosegold   { --login-primary:#c06c84; --login-primary-2:#f67280; --login-accent:#f8b195; --login-accent-2:#a64b6e; --login-glow:rgba(192,108,132,0.45); }
.login-wrapper.login-tema-galaxy     { --login-primary:#ba55d3; --login-primary-2:#9333ea; --login-accent:#00bfff; --login-accent-2:#6f0000; --login-glow:rgba(186,85,211,0.55); }
.login-wrapper.login-tema-otomotiv   { --login-primary:#dc2626; --login-primary-2:#7f1d1d; --login-accent:#ef4444; --login-accent-2:#1a1a1a; --login-glow:rgba(220,38,38,0.50); }
.login-wrapper.login-tema-hirdavat   { --login-primary:#ea580c; --login-primary-2:#fb923c; --login-accent:#1f2937; --login-accent-2:#4b5563; --login-glow:rgba(234,88,12,0.45); }
.login-wrapper.login-tema-beyaz-esya { --login-primary:#0284c7; --login-primary-2:#7dd3fc; --login-accent:#0369a1; --login-accent-2:#bae6fd; --login-glow:rgba(2,132,199,0.40); }
.login-wrapper.login-tema-gida       { --login-primary:#f59e0b; --login-primary-2:#fcd34d; --login-accent:#b45309; --login-accent-2:#fbbf24; --login-glow:rgba(245,158,11,0.40); }
.login-wrapper.login-tema-bitkisel   { --login-primary:#047857; --login-primary-2:#34d399; --login-accent:#065f46; --login-accent-2:#6ee7b7; --login-glow:rgba(4,120,87,0.40); }
.login-wrapper.login-tema-elektronik { --login-primary:#3b82f6; --login-primary-2:#a78bfa; --login-accent:#1e3a8a; --login-accent-2:#312e81; --login-glow:rgba(59,130,246,0.50); }
.login-wrapper.login-tema-tekstil    { --login-primary:#6b3410; --login-primary-2:#d4a574; --login-accent:#a0522d; --login-accent-2:#fef3e2; --login-glow:rgba(107,52,16,0.40); }
.login-wrapper.login-tema-cam-seramik{ --login-primary:#a0522d; --login-primary-2:#2193b0; --login-accent:#e8b58a; --login-accent-2:#a8edea; --login-glow:rgba(160,82,45,0.40); }
.login-wrapper.login-tema-mobilya    { --login-primary:#6b4226; --login-primary-2:#c89b6b; --login-accent:#3e2418; --login-accent-2:#f5e6d3; --login-glow:rgba(107,66,38,0.40); }
.login-wrapper.login-tema-kirtasiye-kitap { --login-primary:#134e4a; --login-primary-2:#2d6a8a; --login-accent:#0f766e; --login-accent-2:#fdf6e3; --login-glow:rgba(19,78,74,0.40); }

/* Açık temalarda login-box'a hafif glassmorphism */
.login-wrapper.login-tema-sakura .login-box,
.login-wrapper.login-tema-honey .login-box,
.login-wrapper.login-tema-bitkisel .login-box,
.login-wrapper.login-tema-beyaz-esya .login-box,
.login-wrapper.login-tema-gida .login-box,
.login-wrapper.login-tema-cam-seramik .login-box {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.6);
}

/* Karanlık temalarda hafif glow */
.login-wrapper.login-tema-elektronik .login-box,
.login-wrapper.login-tema-midnight .login-box,
.login-wrapper.login-tema-galaxy .login-box,
.login-wrapper.login-tema-otomotiv .login-box,
.login-wrapper.login-tema-hirdavat .login-box {
    box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
}

/* Gold temada login-box altın-aksanlı kenar */
.login-wrapper.login-tema-gold .login-box {
    background: #1f1f1f;
    color: #f5e6c8;
    border: 1px solid #d4af37;
    box-shadow: 0 8px 40px rgba(212,175,55,0.30);
}
.login-wrapper.login-tema-gold .login-box .login-title { color: #f5d57a; }
.login-wrapper.login-tema-gold .login-box label { color: #cbb37a !important; }
.login-wrapper.login-tema-gold .login-box input.rz-textbox {
    background: #2a2a2a !important; color: #f5e6c8 !important;
    border-color: #5a4a1f !important;
}

/* login-box z-index — pseudo overlay'lerin üstünde kalsın */
.login-wrapper .login-box { position: relative; z-index: 2; }

.login-box {
    background: #fff;
    border-radius: 18px;
    padding: 36px 32px 30px;
    width: 100%;
    max-width: 360px;
    /* Çift katmanlı gölge — derin siyah temel + temaya göre renkli ambient */
    box-shadow:
        0 14px 38px rgba(0,0,0,0.28),
        0 0 0 1px rgba(0,0,0,0.04),
        0 0 50px -12px var(--login-glow, rgba(0,0,0,0.15));
    position: relative;
    overflow: hidden;
}
/* Üst aksan şeridi — temaya göre primary gradient */
.login-box::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--login-primary, #C90000) 0%, var(--login-primary-2, #ff6a88) 100%);
    z-index: 1;
}
/* Sağ-alt köşede dekoratif renk lekesi (subtle) */
.login-box::after {
    content: ""; position: absolute;
    bottom: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, var(--login-primary, #C90000) 0%, transparent 70%);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}
/* Login form içeriği accent şeridin üstünde kalsın */
.login-box > * { position: relative; z-index: 2; }

.login-box .login-logo {
    text-align: center;
    margin-bottom: 22px;
}

.login-box .login-logo img {
    max-height: 130px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 480px) {
    .login-box {
        padding: 26px 22px 22px;
        max-width: 320px;
    }
    .login-box .login-logo img {
        max-height: 110px;
        max-width: 92%;
    }
}

.login-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 24px;
}

/* ── Hamburger butonu (sadece mobilde görünür) ──── */
.b2b-hamburger {
    display: none;
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 6px;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0;
    margin-right: 8px;
}
.b2b-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #333;
    border-radius: 2px;
    transition: all 0.2s;
}

/* Sidebar overlay — mobil drawer açıkken arka karartma */
.b2b-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .b2b-hamburger { display: flex; }

    /* Mobilde collapse butonu görünmesin — hamburger zaten var */
    .sidebar-collapse-btn { display: none !important; }

    /* Sidebar default kapalı — sadece sidebar-open class'ında açılır */
    .b2b-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 240px;
        min-width: 240px;
    }

    .b2b-layout.sidebar-open .b2b-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.30);
    }

    .b2b-layout.sidebar-open .b2b-sidebar-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .b2b-main { margin-left: 0; width: 100%; }
    .b2b-content { padding: 12px; }
    .stat-cards { grid-template-columns: 1fr 1fr; }
    .chart-grid { grid-template-columns: 1fr; }

    /* Mobilde collapsed class etkisini iptal et — sidebar her zaman tam genişlik */
    .b2b-layout.sidebar-collapsed .b2b-sidebar {
        width: 240px;
        min-width: 240px;
    }
    .b2b-layout.sidebar-collapsed .b2b-main {
        margin-left: 0;
    }
    .b2b-layout.sidebar-collapsed .b2b-nav-text,
    .b2b-layout.sidebar-collapsed .brand-title {
        display: inline;
    }
    .b2b-layout.sidebar-collapsed .b2b-nav li a {
        justify-content: flex-start;
        padding: 11px 18px 11px 17px;
        gap: 10px;
        border-left-width: 3px;
    }

    /* Topbar mobilde dikey istif olabilir, taşan widget'lar wrap edebilir */
    .b2b-topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }

    /* ─── Admin Layout Mobil ─── */
    .admin-hamburger { display: flex; }

    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 240px;
        min-width: 240px;
    }

    .admin-layout.sidebar-open .admin-sidebar {
        transform: translateX(0);
        box-shadow: 4px 0 18px rgba(0, 0, 0, 0.30);
    }

    /* Mobilde daralt/genişlet devre dışı — hamburger drawer kullanılır */
    .admin-layout.sidebar-collapsed .admin-sidebar { width: 240px; }
    .admin-layout.sidebar-collapsed .admin-main { margin-left: 0; }
    .admin-layout.sidebar-collapsed .b2b-nav-text { display: inline; }
    .admin-layout.sidebar-collapsed .admin-nav-group-header { display: flex; }
    .admin-layout.sidebar-collapsed .admin-nav li a {
        justify-content: flex-start;
        padding-left: 20px;
        gap: 10px;
    }
    .admin-layout.sidebar-collapsed .brand-logo-full { display: block; }
    .admin-layout.sidebar-collapsed .sidebar-brand img.brand-logo-mini { display: none; }
    .admin-layout.sidebar-collapsed .brand-title { display: block; }

    .admin-sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        transition: opacity 0.25s;
        pointer-events: none;
    }

    .admin-layout.sidebar-open .admin-sidebar-overlay {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    .admin-main { margin-left: 0; width: 100%; }
    .admin-topbar { padding: 8px 12px; }
}

/* Admin hamburger — lacivert topbar üzerinde beyaz çizgili görünür.
   NOT: `display:none` koymuyoruz — mobil media query (yukarıda) `display:flex` veriyor.
   Buradan sonra başka bir display:none gelirse media query ezilir. */
.admin-hamburger { border-color: rgba(255,255,255,0.4); }
.admin-hamburger span { background: #fff !important; }
.admin-hamburger:hover { background: rgba(255,255,255,0.15) !important; border-color: #fff; }

/* Daha küçük (telefonda) */
@media (max-width: 480px) {
    .stat-cards { grid-template-columns: 1fr; }
    .b2b-topbar > * { font-size: 12px; }
}

/* ── Radzen Overrides ────────────────────────────── */
.rz-grid-table { font-size: 12px; }
.rz-grid-table th { background: #202020 !important; color: #fff !important; }
.rz-data-grid .rz-row:hover { background: rgba(201,0,0,0.05) !important; }

/* Loading overlay */
.loading-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}

/* Money format */
.money { text-align: right; font-family: monospace; }

/* ── Modern CSS Tooltip (data-tooltip="..." kullanımı) ────────────
   <button data-tooltip="Bağlantıyı test et">…</button>
   Hover edildiğinde üstte koyu animasyonlu balon çıkar.
*/
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 9999;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    transform: translate(-50%, -2px);
    background: rgba(15, 23, 42, 0.96);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;        /* satır kırılımına izin ver */
    width: max-content;          /* metin kısa ise daralsın */
    max-width: 200px;            /* uzun metin 2-3 satıra sarılsın */
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

[data-tooltip]::after {
    content: '';
    transform: translate(-50%, -2px);
    border: 5px solid transparent;
    border-top-color: rgba(15, 23, 42, 0.96);
    margin-bottom: -6px;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, -6px);
}

/* Aşağı yönlü tooltip — bottom kenardakiler için */
[data-tooltip-pos="bottom"]::before,
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
}
[data-tooltip-pos="bottom"]::before {
    margin-top: 4px;
}
[data-tooltip-pos="bottom"]::after {
    border-top-color: transparent;
    border-bottom-color: rgba(15, 23, 42, 0.96);
    margin-top: -6px;
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
    transform: translate(-50%, 6px);
}

/* Sol kenara yakın elemanlar için: balon elemanın SOL kenarından başlayıp sağa+aşağı açılır (başı kırpılmasın) */
[data-tooltip-pos="bottom-right"]::before,
[data-tooltip-pos="bottom-right"]::after {
    bottom: auto;
    top: 100%;
    left: 0;
    margin-bottom: 0;
}
[data-tooltip-pos="bottom-right"]::before {
    transform: translate(0, -2px);
    margin-top: 4px;
}
[data-tooltip-pos="bottom-right"]::after {
    border-top-color: transparent;
    border-bottom-color: rgba(15, 23, 42, 0.96);
    margin-top: -6px;
    transform: translate(10px, -2px);
}
[data-tooltip-pos="bottom-right"]:hover::before { transform: translate(0, 6px); }
[data-tooltip-pos="bottom-right"]:hover::after  { transform: translate(10px, 6px); }

/* ── Müşteri Selector (Topbar + Modal) ────────── */

/* Topbar kartı */
.musteri-topbar-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 14px;
    background: linear-gradient(135deg, #fff 0%, #f6f8fb 100%);
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    user-select: none;
    /* Sol kenara aksan şeridi — admin/plasiyer + müşteri kartlarında ortak */
    box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 4px 0 0 var(--vardar-blue, #1a2848);
}
.musteri-topbar-card:hover {
    border-color: var(--vardar-blue);
    box-shadow: 0 3px 12px rgba(51, 122, 183, 0.18), inset 4px 0 0 var(--vardar-blue, #1a2848);
}
.musteri-topbar-card:active { transform: translateY(1px); }

.musteri-topbar-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--vardar-blue) 0%, var(--vardar-blue-dark) 100%);
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
}

.musteri-topbar-info { line-height: 1.2; }
.musteri-topbar-label {
    font-size: 10.5px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.musteri-topbar-name {
    font-size: 13px;
    font-weight: 700;
    color: #202020;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1300px) {
    .musteri-topbar-name { max-width: 140px; }
    .musteri-topbar-label { font-size: 9.5px; }
    .musteri-topbar-card { padding: 4px 10px 4px 6px; gap: 6px; }
    .musteri-topbar-icon { width: 28px; height: 28px; font-size: 14px; }
    .musteri-topbar-change { font-size: 11px; }
}
.musteri-topbar-change {
    margin-left: 4px;
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

/* Müşteri kullanıcı için statik ad kartı — tıklanabilir değil, sol şerit base'den miras.
   Aktif Müşteri Seç açılmaz; sadece "Hoş Geldiniz" + müşteri adını gösterir.
   Yeşil aksan ile admin'in mavi kartından görsel olarak ayrılır. */
.musteri-topbar-card-static {
    cursor: default;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06), inset 4px 0 0 #16a34a;
}
.musteri-topbar-card-static:hover {
    transform: none;
    border-color: #cfd6df;
    box-shadow: 0 3px 12px rgba(22,163,74,0.18), inset 4px 0 0 #16a34a;
}
.musteri-topbar-card-static:active { transform: none; }
.musteri-topbar-card-static .musteri-topbar-icon {
    background: linear-gradient(135deg, #16a34a 0%, #047857 100%);
}
.musteri-topbar-card-static .musteri-topbar-label {
    color: #16a34a;
}

/* Modal overlay + container */
.musteri-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 25, 35, 0.55);
    z-index: 9998;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 72px 16px 16px;
    animation: musteriOverlayIn 0.15s ease;
}
@keyframes musteriOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.musteri-modal {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 860px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: musteriModalIn 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes musteriModalIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.musteri-modal-header {
    padding: 16px 22px;
    background: linear-gradient(135deg, var(--vardar-blue) 0%, var(--vardar-blue-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.musteri-modal-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 17px; font-weight: 700;
    letter-spacing: 0.3px;
}
.musteri-modal-title-icon { font-size: 20px; }
.musteri-modal-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    width: 32px; height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.musteri-modal-close:hover { background: rgba(255, 255, 255, 0.3); }

/* Search + butonlar */
.musteri-modal-search {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #edf0f3;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.musteri-search-row { display: flex; gap: 8px; margin-bottom: 10px; }

.musteri-search-input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid #d7dbe0;
    border-radius: 8px;
    font-size: 13.5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.musteri-search-input:focus {
    border-color: var(--vardar-blue);
    box-shadow: 0 0 0 3px rgba(51, 122, 183, 0.15);
}

.musteri-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.musteri-btn {
    flex: 1;
    min-width: 140px;
    padding: 9px 14px;
    border: none;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    letter-spacing: 0.2px;
}
.musteri-btn:hover { filter: brightness(1.08); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15); }
.musteri-btn:active { transform: translateY(1px); }

.musteri-btn-green  { background: linear-gradient(135deg, #5cb85c 0%, #4cae4c 100%); }
.musteri-btn-red    { background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%); }
.musteri-btn-orange { background: linear-gradient(135deg, #f0ad4e 0%, #ec971f 100%); color: #3a2d10; }

.musteri-hint { font-size: 12px; color: #888; padding-top: 4px; }
.musteri-hint-loading { color: var(--vardar-blue); font-weight: 600; }
.musteri-hint-empty   { color: #a9534f; }
.musteri-hint-help    { color: #888; }
.musteri-hint strong  { color: #333; }

.musteri-filter-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fff2cd;
    color: #8a6d1a;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid #f0d88f;
    letter-spacing: 0.3px;
}

/* Sonuç tablosu */
.musteri-results { flex: 1; overflow-y: auto; padding: 0; background: #fff; }

.musteri-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12.5px;
}

.musteri-table thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(180deg, #fbfcfd 0%, #eef1f4 100%);
    color: #2c3e50;
    font-weight: 700;
    border-bottom: 2px solid var(--vardar-blue);
    padding: 10px 12px;
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    z-index: 1;
}

.musteri-table tbody tr {
    cursor: pointer;
    transition: background 0.12s ease;
}
.musteri-table tbody tr:nth-child(even) td { background: #fafbfc; }
.musteri-table tbody tr:hover td {
    background: #eaf3fb !important;
    box-shadow: inset 3px 0 0 var(--vardar-blue);
}

.musteri-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}

.musteri-kod { font-weight: 700; color: var(--vardar-blue); font-family: 'Consolas', monospace; }
.musteri-ad  { color: #202020; font-weight: 500; }
.musteri-il, .musteri-ilce { color: #666; font-size: 12px; }

.musteri-sec-cell { text-align: center; }
.musteri-sec-btn {
    background: linear-gradient(135deg, var(--accent) 0%, #a00000 100%);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: transform 0.1s ease, filter 0.15s ease;
}
.musteri-sec-btn:hover { filter: brightness(1.1); }
.musteri-sec-btn:active { transform: translateY(1px); }

@media (max-width: 640px) {
    .musteri-topbar-name { max-width: 140px; }
    .musteri-action-buttons .musteri-btn { min-width: 0; }
    .musteri-table .musteri-il, .musteri-table .musteri-ilce { display: none; }
}

/* ── Fiyat Hover Popup (Arama) ──────────────────── */
/* Sabit konumlandırılmış, grid overflow'una takılmaz */
@keyframes fiyatPopupIn {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fiyat-popup {
    position: fixed;
    min-width: 280px;
    background: linear-gradient(160deg, #1e2a3a 0%, #0f1822 100%);
    color: #fff;
    border: 1px solid rgba(51, 122, 183, 0.4);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.03);
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
    font-family: "Open Sans", -apple-system, "Segoe UI", sans-serif;
    animation: fiyatPopupIn 0.12s ease-out;
}

/* Header */
.fiyat-popup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #337ab7 0%, #286090 100%);
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
.fiyat-popup-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}
.fiyat-popup-stok {
    font-size: 10px;
    color: rgba(255,255,255,0.75);
    font-family: "Consolas", "Courier New", monospace;
    padding: 2px 6px;
    background: rgba(0,0,0,0.18);
    border-radius: 3px;
}
.fiyat-popup-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 10px;
    background: #ffdd57;
    color: #202020;
    text-shadow: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Table */
.fiyat-popup-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: 12px;
}
.fiyat-popup-table thead th {
    padding: 8px 14px 6px 14px;
    text-align: right;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    border-bottom: 1px dashed rgba(255,255,255,0.12);
}
.fiyat-popup-table thead th:first-child { text-align: left; }

.fiyat-popup-table tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fiyat-popup-table tbody tr:last-child td { border-bottom: 0; }

.fiyat-popup-label {
    font-size: 12px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.fiyat-popup-val {
    text-align: right;
    font-family: "Consolas", "Courier New", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.fiyat-popup-val-dim {
    color: rgba(255,255,255,0.45);
    text-decoration: line-through;
    text-decoration-color: rgba(217, 83, 79, 0.6);
}
.fiyat-popup-val-main {
    color: #ffffff;
    font-size: 13px;
}
.fiyat-popup-val-accent {
    color: #5cb85c;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(92, 184, 92, 0.25);
}

.fiyat-popup-row-highlight {
    background: rgba(51, 122, 183, 0.08);
}
.fiyat-popup-row-highlight .fiyat-popup-label {
    color: #fff;
    font-weight: 700;
}

/* ── Kampanya satırı (Net Fiyat'ın altında 1-3 ek satır) ──
   Net Fiyat ile aynı tablo ritminde kalır, ama altın-amber tonuyla farkındalık yaratır. */
.fiyat-popup-row-kampanya {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.03) 100%);
}
.fiyat-popup-label-kampanya {
    color: rgba(253, 224, 71, 0.95) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fiyat-popup-kampanya-icon {
    font-size: 13px;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6));
}
.fiyat-popup-val-kampanya {
    color: rgba(253, 224, 71, 0.85);
    font-size: 12.5px;
}
.fiyat-popup-val-kampanya-accent {
    color: #fbbf24;
    font-size: 13px;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.40);
    font-weight: 700;
}

/* Footer */
.fiyat-popup-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 10px;
    color: rgba(255,255,255,0.5);
}
.fiyat-popup-para {
    padding: 1px 6px;
    background: rgba(92, 184, 92, 0.15);
    border: 1px solid rgba(92, 184, 92, 0.35);
    color: #5cb85c;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.fiyat-popup-kdv {
    margin-left: auto;
    padding: 1px 6px;
    background: rgba(255,221,87,0.12);
    border: 1px solid rgba(255,221,87,0.35);
    color: #ffdd57;
    border-radius: 3px;
    font-weight: 600;
}

/* ========================================================================== */
/* Radzen Dialog polish — modern rounded style (Sepete Ekle, Resim, vb.)      */
/* ========================================================================== */
.rz-dialog {
    border-radius: 14px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.10) !important;
    overflow: hidden !important;
    border: none !important;
}

.rz-dialog .rz-dialog-titlebar,
.rz-dialog-titlebar {
    background: linear-gradient(135deg, var(--vardar-blue) 0%, var(--vardar-blue-dark) 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 13px 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
}

.rz-dialog-titlebar .rz-dialog-title,
.rz-dialog-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.rz-dialog-titlebar .rz-dialog-titlebar-icon {
    color: rgba(255,255,255,0.92) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s, color 0.15s;
}
.rz-dialog-titlebar .rz-dialog-titlebar-icon:hover {
    background: rgba(255,255,255,0.22) !important;
    color: #fff !important;
}

.rz-dialog-content {
    padding: 20px !important;
    background: #fff !important;
}

.rz-dialog-mask {
    background: rgba(18,22,30,0.55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Resim modal wrapper (ShowImage) */
.resim-modal-wrapper {
    text-align: center;
    padding: 12px;
    background: linear-gradient(135deg, #fafbfc 0%, #eef2f7 100%);
    border-radius: 10px;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resim-modal-wrapper img {
    max-width: 100%;
    max-height: 520px;
    border-radius: 10px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.14);
    background: #fff;
    padding: 10px;
    transition: transform 0.2s ease;
}
.resim-modal-wrapper img:hover {
    transform: scale(1.01);
}

/* ========================================================================== */
/* Sepete Ekle Dialog — two-column layout with image corner card              */
/* ========================================================================== */
.sepet-dialog {
    display: flex;
    gap: 20px;
    padding: 4px;
    min-height: 320px;
}

.sepet-dialog-left {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Mobil: resim üstte, form altta — yan yana sığmıyor */
@media (max-width: 640px) {
    .sepet-dialog { flex-direction: column; gap: 12px; min-height: 0; }
    .sepet-dialog-left { flex: 0 0 auto; width: 100%; }
    .sepet-image-card { width: 160px; height: 160px; }
}

.sepet-image-card {
    width: 200px;
    height: 200px;
    background: #f7f9fc;
    border: 1px solid #dce3eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.18s;
    position: relative;
}
.sepet-image-card:hover {
    border-color: var(--vardar-blue);
    box-shadow: 0 4px 14px rgba(51,122,183,0.18);
    transform: translateY(-1px);
}
.sepet-image-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
}
.sepet-image-card img.no-image { opacity: 0.4; }

.sepet-image-placeholder {
    color: #aaa;
    text-align: center;
    font-size: 12px;
}
.sepet-image-placeholder span {
    font-size: 40px;
    display: block;
    margin-bottom: 6px;
    opacity: 0.5;
}

.sepet-image-hint {
    font-size: 11px;
    color: #888;
    padding: 2px 8px;
    background: #f0f3f7;
    border-radius: 4px;
}

.sepet-dialog-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sepet-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #7a8898;
    margin-bottom: 3px;
}

.sepet-field .sepet-value {
    background: #f7f9fc;
    border: 1px solid #e1e6ec;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    color: #2c3e50;
    min-height: 34px;
    display: flex;
    align-items: center;
}

.sepet-value-bold {
    font-weight: 700 !important;
    color: var(--vardar-blue) !important;
    background: #eaf3fb !important;
    border-color: #c9dff0 !important;
}

.sepet-price-highlight {
    font-weight: 700 !important;
    color: var(--vardar-blue-dark) !important;
    font-size: 14px !important;
}

.sepet-field-row {
    display: flex;
    gap: 12px;
}

.sepet-total {
    background: linear-gradient(90deg, #eaf3fb 0%, #d7e8f7 100%);
    border: 1px solid var(--vardar-blue);
    border-radius: 6px;
    padding: 7px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--vardar-blue-dark);
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Kampanya kutusu */
.sepet-kampanya-box {
    background: linear-gradient(180deg, #fff9d9 0%, #fff2a8 100%);
    border: 1px solid #e5cd3b;
    border-left: 4px solid #f0ad4e;
    border-radius: 6px;
    padding: 10px 12px;
}
.sepet-kampanya-title {
    font-size: 12px;
    font-weight: 700;
    color: #8a6d00;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.sepet-kampanya-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #5c4a00;
    padding: 3px 0;
    border-top: 1px dashed rgba(138, 109, 0, 0.2);
}
.sepet-kampanya-line:first-of-type { border-top: none; }
.sepet-kampanya-text { font-weight: 500; }
.sepet-kampanya-fiyat {
    font-weight: 700;
    color: #3d3000;
    background: rgba(255,255,255,0.5);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Aksiyon butonları */
.sepet-action-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #eaeef3;
    justify-content: flex-end;
}

.sepet-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}
.sepet-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.sepet-btn:active { transform: translateY(0); }

.sepet-btn-wa {
    background: #25D366;
    color: #fff;
    text-decoration: none;
}
.sepet-btn-wa:hover { background: #1ebe57; color: #fff; }

.sepet-btn-history {
    background: #f0ad4e;
    color: #fff;
    margin-right: auto;
}
.sepet-btn-history:hover { background: #ec971f; }

.sepet-btn-cancel {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
.sepet-btn-cancel:hover { background: #e8e8e8; }

/* "Sepete Ekle" butonu — arama grid'indeki sepet ikonu butonuyla aynı lacivert (#1a2848) */
.sepet-btn-add {
    background: #1a2848;
    color: #fff;
}
.sepet-btn-add:hover {
    background: #243561;
}

.sepet-btn-back {
    background: var(--vardar-blue);
    color: #fff;
    margin-bottom: 12px;
}
.sepet-btn-back:hover { background: var(--vardar-blue-dark); }

/* Resim sayfası */
.sepet-page-resim {
    min-height: 400px;
    padding: 4px;
}
.sepet-resim-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f9fc;
    border: 1px solid #dce3eb;
    border-radius: 10px;
    padding: 20px;
    min-height: 380px;
}
.sepet-resim-wrapper img {
    max-width: 100%;
    max-height: 500px;
    object-fit: contain;
}

/* Geçmiş alımlar sayfası */
.sepet-page-history {
    min-height: 300px;
    padding: 4px;
}
.sepet-history-empty {
    text-align: center;
    color: #888;
    padding: 60px 20px;
    background: #f7f9fc;
    border: 1px dashed #dce3eb;
    border-radius: 8px;
    font-size: 14px;
}
.sepet-history-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 8px;
    overflow: hidden;
}
.sepet-history-table thead th {
    background: linear-gradient(180deg, #fbfcfd 0%, #eaeef3 100%);
    border-bottom: 2px solid var(--vardar-blue);
    color: var(--vardar-blue-dark);
    font-size: 12px;
    font-weight: 700;
    padding: 10px 12px;
    text-align: left;
}
.sepet-history-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #eef1f5;
    font-size: 13px;
    color: #333;
}
.sepet-history-table tbody tr:nth-child(even) td { background: #fafbfc; }
.sepet-history-table tbody tr:hover td { background: #eaf3fb; }

/* ─── Stok arama grid'i: satır-içi resim thumbnail ──────────────────────
   Kullanım: <img class="stok-thumb" src="..." onerror="stokImgFallback(this)"/>
   stokImgFallback (wwwroot/js/stok-img.js) primary → cdn → no.png fallback
   zincirini uygular. Thumbnail'a tıklanınca tam boyut modal açılır.  */
.stok-thumb {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    padding: 2px;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    vertical-align: middle;
}
.stok-thumb:hover {
    transform: scale(1.12);
    border-color: var(--vardar-blue);
    box-shadow: 0 2px 8px rgba(51,122,183,0.25);
    z-index: 2;
    position: relative;
}
/* Resim bulunamadığında: "Hazırlanıyor" yer tutucu görseli (/images/urun-hazirlaniyor.svg) — kırmızı çarpı yok */
.stok-thumb.stok-thumb-missing {
    cursor: default;
    padding: 0;
    background: #eef0f2;
    border-color: #e3e6ea;
    box-shadow: none;
    pointer-events: none;
}
.stok-thumb.stok-thumb-missing:hover {
    transform: none;
    border-color: #e3e6ea;
    box-shadow: none;
    z-index: auto;
}

/* ── Sepetim Toplam Kartı ───────────────────────────── */
.sepet-totals {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e1e5ea;
    font-size: 13px;
}
.sepet-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dashed #eee;
}
.sepet-totals-row:last-child {
    border-bottom: none;
}
.sepet-totals-label {
    color: #555;
    font-weight: 500;
}
.sepet-totals-value {
    color: #222;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.sepet-totals-minus {
    color: #d9534f;
}
.sepet-totals-grand {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid var(--vardar-blue);
    font-size: 15px;
}
.sepet-totals-grand .sepet-totals-label {
    color: var(--vardar-blue);
    font-weight: 700;
}
.sepet-totals-grand .sepet-totals-value {
    color: #C90000;
    font-size: 16px;
}

/* Puan ile ödeme kutusu (Sepetim toplamlar) */
.sepet-puan-box {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
}
.sepet-puan-max {
    background: #d97706; color: #fff; border: none; border-radius: 6px;
    padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sepet-puan-max:hover { filter: brightness(1.08); }

/* Ödeme şekli seçimi (Cari Hesaba Yaz / Kredi Kartı ile Öde) */
.sepet-odeme-box { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sepet-odeme-baslik { font-size: 12px; font-weight: 700; color: #334155; }
.sepet-odeme-sec {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border: 1.5px solid #e2e8f0; border-radius: 8px;
    cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.sepet-odeme-sec:hover { border-color: #94a3b8; }
.sepet-odeme-sec.secili { border-color: #2e6da4; background: #eef5fc; }
.sepet-odeme-sec.sepet-odeme-kk.secili { border-color: #d97706; background: #fffbeb; }
.sepet-odeme-ad { font-size: 13px; font-weight: 600; color: #1f2937; }
.sepet-odeme-tutar { margin-left: auto; font-size: 13px; font-weight: 700; color: #14365c; white-space: nowrap; }
.sepet-odeme-havale.secili { border-color: #16a34a; background: #ecfdf5; }

/* Havale bildirim dialog */
.havale-dialog { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.havale-dialog label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 4px; }
.havale-input { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; background: #fff; }
.havale-input:focus { outline: none; border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,0.15); }
.havale-readonly { background: #f1f5f9; font-weight: 700; color: #14365c; }
.havale-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.havale-hint { font-size: 11px; color: #64748b; margin-top: 3px; }
.havale-file { font-size: 12.5px; }
.havale-dosya-wrap { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.havale-dosya-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: linear-gradient(135deg, #2e6da4, #1f4e79); color: #fff;
    border-radius: 7px; padding: 9px 16px; font-size: 13px; font-weight: 700; margin: 0;
}
.havale-dosya-btn:hover { filter: brightness(1.07); }
.havale-dosya-btn input[type=file] { display: none; }
.havale-dosya-gor {
    background: #fff; color: #16a34a; border: 1.5px solid #16a34a; border-radius: 7px;
    padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.havale-dosya-gor:hover { background: #ecfdf5; }
.havale-dosya-secili { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.havale-dekont-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #cbd5e1; cursor: pointer; }
.havale-dekont-pdf { font-size: 34px; }
.havale-dosya-ad { font-size: 12.5px; color: #065f46; font-weight: 600; word-break: break-all; }
.havale-dosya-ad small { color: #64748b; font-weight: 400; }

/* Dekont önizleme popup */
.dekont-onizle { display: flex; flex-direction: column; height: 100%; gap: 10px; }
.dekont-onizle-img { max-width: 100%; max-height: 78vh; object-fit: contain; align-self: center; border-radius: 8px; border: 1px solid #e2e8f0; }
.dekont-onizle-frame { width: 100%; height: 78vh; border: 1px solid #e2e8f0; border-radius: 8px; }
.dekont-onizle-foot { display: flex; align-items: center; gap: 12px; }
.dekont-onizle-ad { font-size: 12.5px; color: #475569; margin-right: auto; word-break: break-all; }
.dekont-onizle-indir { font-size: 13px; font-weight: 700; color: #2e6da4; text-decoration: none; }
.dekont-onizle-indir:hover { text-decoration: underline; }
.dekont-onizle-kapat { background: #e2e8f0; color: #334155; border: none; border-radius: 6px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* Ödeme → Havale Bildirimleri sekmesi (kart) */
.odeme-hv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 6px 2px; }
.odeme-hv-card { background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #16a34a; border-radius: 10px; padding: 13px 15px; box-shadow: 0 1px 5px rgba(0,0,0,0.06); }
.odeme-hv-bekliyor { border-left-color: #f59e0b; }
.odeme-hv-reddedildi { border-left-color: #dc2626; opacity: .88; }
.odeme-hv-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.odeme-hv-logo { width: 38px; height: 38px; object-fit: contain; border-radius: 7px; background: #f8fafc; border: 1px solid #eef2f7; padding: 2px; }
.odeme-hv-logo-ph { font-size: 28px; }
.odeme-hv-banka { font-size: 13.5px; font-weight: 700; color: #1f2937; }
.odeme-hv-durum { margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.odeme-hv-d-bekliyor { background: #fef3c7; color: #92400e; }
.odeme-hv-d-onaylandı { background: #dcfce7; color: #166534; }
.odeme-hv-d-reddedildi { background: #fee2e2; color: #991b1b; }
.odeme-hv-tutar { font-size: 19px; font-weight: 800; color: #16a34a; margin: 4px 0 10px; }
.odeme-hv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; padding: 2px 0; border-bottom: 1px dashed #eef2f7; }
.odeme-hv-row span { color: #64748b; }
.odeme-hv-row b { color: #1f2937; text-align: right; word-break: break-word; }
.odeme-hv-gor { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #2e6da4; text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; }
.odeme-hv-gor:hover { text-decoration: underline; }
.havale-hata { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 6px; padding: 8px 12px; font-size: 12.5px; }
.havale-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; }
.havale-btn-iptal { background: #e2e8f0; color: #334155; border: none; border-radius: 6px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.havale-btn-onay { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; border-radius: 6px; padding: 9px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }
.havale-btn-onay:disabled, .havale-btn-iptal:disabled { opacity: .6; cursor: default; }
@media (max-width: 600px) { .havale-row-2 { grid-template-columns: 1fr; } }

/* Siparişlerim — Sepete Geri Al butonu (Beklemede sekmesi) */
.siparis-geri-al-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.siparis-geri-al-btn:hover { filter: brightness(1.06); }

/* Seçili satır vurgu (Arama grid'indeki stille uyumlu) */
.legacy-grid tr.grid-row-selected > td {
    background: rgba(51, 122, 183, 0.10) !important;
}

/* ── Sepet Silme Dialog (şık onay popup'ı) ───────────── */
.sepet-sil-modal .rz-dialog-titlebar {
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%) !important;
    color: #fff !important;
}
.sepet-sil-modal .rz-dialog-content {
    padding: 0 !important;
}

.sepet-sil-dialog {
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

/* Üst banner — turuncu/kırmızı gradient uyarı alanı */
.sepet-sil-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0e0 100%);
    border-bottom: 1px solid #f5d0ce;
}
.sepet-sil-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(217, 83, 79, 0.35);
    animation: sepet-sil-pulse 2s ease-in-out infinite;
}
@keyframes sepet-sil-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(217, 83, 79, 0.35); }
    50%      { transform: scale(1.04); box-shadow: 0 6px 18px rgba(217, 83, 79, 0.50); }
}
.sepet-sil-banner-text {
    flex: 1;
}
.sepet-sil-title {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
    line-height: 1.3;
}
.sepet-sil-subtitle {
    font-size: 13px;
    color: #8a5a5a;
    line-height: 1.4;
}

/* Tek ürün kartı */
.sepet-sil-card {
    display: flex;
    gap: 16px;
    padding: 20px 22px;
    background: #fafbfc;
}
.sepet-sil-img {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.sepet-sil-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.sepet-sil-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 3px 0;
    border-bottom: 1px dashed #eaeaea;
}
.sepet-sil-row:last-child {
    border-bottom: none;
}
.sepet-sil-lbl {
    color: #888;
    font-weight: 500;
    flex: 0 0 auto;
}
.sepet-sil-val {
    color: #333;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    padding-left: 10px;
}
.sepet-sil-val-kod {
    color: var(--vardar-blue);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 0.3px;
}
.sepet-sil-val-miktar {
    color: #5cb85c;
    font-size: 14px;
}
.sepet-sil-row-total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 2px solid #d9534f;
    border-bottom: none !important;
}
.sepet-sil-val-tutar {
    color: #d9534f;
    font-size: 17px;
    font-weight: 700;
}

/* Toplu sil: istatistik kartları */
.sepet-sil-toplu {
    display: flex;
    gap: 10px;
    padding: 18px 22px 14px 22px;
    background: #fafbfc;
}
.sepet-sil-toplu-stat {
    flex: 1;
    text-align: center;
    padding: 14px 10px;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.sepet-sil-toplu-stat-total {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%);
    border-color: #f5c6cb;
}
.sepet-sil-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--vardar-blue);
    line-height: 1.2;
}
.sepet-sil-toplu-stat-total .sepet-sil-stat-num {
    color: #d9534f;
    font-size: 18px;
}
.sepet-sil-stat-lbl {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Toplu sil: önizleme listesi */
.sepet-sil-preview {
    padding: 0 22px 16px 22px;
    background: #fafbfc;
}
.sepet-sil-preview-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e1e5ea;
}
.sepet-sil-preview-row {
    display: grid;
    grid-template-columns: 32px 90px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
    border-bottom: 1px dashed #eee;
}
.sepet-sil-preview-row:last-child {
    border-bottom: none;
}
.sepet-sil-preview-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 5px;
    padding: 2px;
}
.sepet-sil-preview-kod {
    font-weight: 700;
    color: var(--vardar-blue);
    font-family: 'Courier New', monospace;
}
.sepet-sil-preview-ad {
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sepet-sil-preview-miktar {
    color: #5cb85c;
    font-weight: 600;
    white-space: nowrap;
}
.sepet-sil-preview-more {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 12px;
    color: #999;
    text-align: center;
    font-style: italic;
    border-top: 1px dashed #e1e5ea;
}

/* Butonlar */
.sepet-sil-actions {
    display: flex;
    gap: 10px;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e1e5ea;
    justify-content: flex-end;
}
.sepet-sil-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sepet-sil-btn-cancel {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
.sepet-sil-btn-cancel:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}
.sepet-sil-btn-delete {
    background: linear-gradient(135deg, #d9534f 0%, #c9302c 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217, 83, 79, 0.3);
}
.sepet-sil-btn-delete:hover {
    background: linear-gradient(135deg, #c9302c 0%, #ac2925 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217, 83, 79, 0.45);
}
.sepet-sil-btn-delete:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(217, 83, 79, 0.3);
}

/* ════════════════════════════════════════════════════════════════════
   SİPARİŞ DETAY DİALOG
   Sipariş başlığı + kalem tablosu (modal dialog içinde).
   ════════════════════════════════════════════════════════════════════ */

/* Modal wrapper — Radzen dialog başlığını koyu yap */
.siparis-detay-modal .rz-dialog-titlebar {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid #C90000 !important;
}
.siparis-detay-modal .rz-dialog-titlebar .rz-dialog-title { color: #fff !important; font-weight: 700 !important; }
.siparis-detay-modal .rz-dialog-titlebar-close { color: #fff !important; }
.siparis-detay-modal .rz-dialog-content { padding: 0 !important; }

.siparis-detay-dialog {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #333;
}

/* Header — Evrak/Belge/Tarih */
.siparis-detay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f4 100%);
    border-bottom: 1px solid #e0e3e7;
}
.siparis-detay-header-left {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.siparis-detay-evrak-wrap,
.siparis-detay-belge-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.siparis-detay-evrak-lbl,
.siparis-detay-belge-lbl {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.siparis-detay-evrak-val {
    font-size: 15px;
    font-weight: 700;
    color: #C90000;
    font-family: "Consolas", monospace;
}
.siparis-detay-belge-val {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    font-family: "Consolas", monospace;
}
.siparis-detay-header-right {
    display: flex;
    align-items: center;
}
.siparis-detay-tarih {
    background: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e3e7;
}

/* Müşteri şeridi */
.siparis-detay-musteri {
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.siparis-detay-musteri-kod {
    font-weight: 700;
    color: #333;
    font-family: "Consolas", monospace;
}
.siparis-detay-musteri-sep {
    color: #bbb;
    margin: 0 6px;
}
.siparis-detay-musteri-ad {
    color: #555;
}

/* Body */
.siparis-detay-body {
    background: #fff;
    max-height: 60vh;
    overflow: auto;
}
.siparis-detay-loading,
.siparis-detay-empty {
    padding: 60px 20px;
    text-align: center;
    color: #aaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

@keyframes siparis-spin {
    from { transform: rotate(0); }
    to { transform: rotate(360deg); }
}

/* Kalem tablosu */
.siparis-detay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.siparis-detay-table thead th {
    background: #202020;
    color: #fff;
    padding: 10px 8px;
    font-weight: 600;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.siparis-detay-table thead th.right { text-align: right; }
.siparis-detay-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.siparis-detay-table tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
.siparis-detay-table tbody tr:hover td { background: #fafafa; }

.siparis-detay-sira {
    text-align: center;
    color: #aaa;
    width: 40px;
    font-weight: 600;
}
.siparis-detay-kod {
    font-weight: 600;
    color: #333;
    font-family: "Consolas", monospace;
    white-space: nowrap;
}
.siparis-detay-ad {
    color: #444;
}
.siparis-detay-isk {
    color: #f0ad4e;
    font-weight: 600;
}
.siparis-detay-net {
    font-weight: 700;
    color: #337ab7;
}
.siparis-detay-birim {
    color: #888;
    font-size: 11px;
    margin-left: 2px;
}
.siparis-detay-kalan {
    color: #d9534f;
    font-weight: 600;
}
.siparis-detay-tutar {
    font-weight: 700;
    color: #5cb85c;
}

.siparis-detay-table tfoot td {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%);
    color: #fff;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    border: none;
}
.siparis-detay-tfoot-lbl {
    text-align: right;
    letter-spacing: 0.5px;
}
.siparis-detay-tfoot-val {
    text-align: right;
    color: #fff;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* Footer / aksiyon */
.siparis-detay-actions {
    padding: 14px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e3e7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.siparis-detay-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
}
.siparis-detay-btn-close {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
.siparis-detay-btn-close:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   EKSTRE — Özet Kartları + Gün Rozetleri + Satır Aksiyon Butonları
   ════════════════════════════════════════════════════════════════════ */

.ekstre-ozet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
.ekstre-ozet-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef0f3;
    border-left: 4px solid #ccc;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ekstre-ozet-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ekstre-ozet-card-info { border-left-color: #337ab7; }
.ekstre-ozet-card-danger { border-left-color: #C90000; }
.ekstre-ozet-card-success { border-left-color: #5cb85c; }
.ekstre-ozet-card-dark { border-left-color: #202020; background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%); color: #fff; }
.ekstre-ozet-card-dark .ekstre-ozet-lbl { color: #d0d0d0; }

.ekstre-ozet-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ekstre-ozet-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ekstre-ozet-val {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ekstre-ozet-lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
    font-weight: 600;
}

/* Gün rozetleri */
.ekstre-gun-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: center;
}
.ekstre-gun-danger { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.ekstre-gun-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.ekstre-gun-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.ekstre-gun-none { background: #f1f3f5; color: #6c757d; border: 1px solid #e9ecef; }

/* Satır içi aksiyon butonları (Detay / Yazdır) */
.ekstre-act-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
}
.ekstre-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ekstre-act-btn-detay {
    background: #eef4fc;
    color: #205a93;
    border: 1px solid #d4e3f5;
}
.ekstre-act-btn-detay:hover { background: #dbe9f8; transform: translateY(-1px); }
.ekstre-act-btn-print {
    background: #fdecec;
    color: #a71313;
    border: 1px solid #f6c9c9;
}
.ekstre-act-btn-print:hover { background: #f8d7d7; transform: translateY(-1px); }

/* ════════════════════════════════════════════════════════════════════
   ÖZEL TOOLTIP (data-tip="..." ile)
   Native title='...' yerine koyu pill tarzı ipucu.
   ════════════════════════════════════════════════════════════════════ */
/* CSS pseudo-element tooltip kapalı — JS-based floating tooltip kullanılıyor
   (ekstre-tooltip.js body'ye ekler, grid overflow:hidden'dan etkilenmez) */
.ekstre-tip { position: relative; }
.ekstre-tip::before,
.ekstre-tip::after { content: none !important; display: none !important; }

/* Floating tooltip — body'ye eklenen, position:fixed sayesinde grid clipping yok */
.ekstre-tooltip-floating {
    display: none;
    position: fixed;
    z-index: 99999;
    background: #202020;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.2px;
    line-height: 1.3;
}

/* Resim önizleme tooltip'i (stok thumbnail hover) — büyük ürün resmi */
.ekstre-tooltip-floating.ekstre-tooltip-img {
    padding: 4px;
    background: #fff;
    border: 1px solid #d8dce5;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    white-space: normal;
}
.ekstre-tooltip-floating.ekstre-tooltip-img img {
    display: block;
    max-width: 260px;
    max-height: 260px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════════
   EKSTRE — Toplam Şeridi (grid altında, mod'a göre değişen toplam)
   ════════════════════════════════════════════════════════════════════ */
.ekstre-toplam-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e4e7ea;
    background: #fff;
}

.ekstre-toplam-item {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 20px;
    border-right: 1px solid #eef0f3;
    min-width: 180px;
    background: #fafbfc;
    transition: background 0.15s;
}
.ekstre-toplam-item:last-child { border-right: none; }
.ekstre-toplam-item:hover { background: #f3f5f7; }

.ekstre-toplam-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
    margin-bottom: 4px;
}

.ekstre-toplam-val {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #202020;
}
.ekstre-toplam-val-danger { color: #C90000; }
.ekstre-toplam-val-success { color: #1e7e34; }

/* Main (vurgulu) toplam hücresi — koyu arka plan + büyük rakam */
.ekstre-toplam-item-main {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%);
    color: #fff;
    flex: 1.3 1 220px;
    padding: 14px 22px;
}
.ekstre-toplam-item-main:hover { background: linear-gradient(135deg, #1a1a1a 0%, #242424 100%); }
.ekstre-toplam-item-main .ekstre-toplam-label { color: #d0d0d0; }
.ekstre-toplam-item-main .ekstre-toplam-val-main {
    font-size: 22px;
    color: #fff;
}

/* Vadesi Geçmiş / Kapanmamış modda kırmızı aksan */
.ekstre-toplam-bar-danger .ekstre-toplam-item-main {
    background: linear-gradient(135deg, #a00000 0%, #C90000 100%);
}
.ekstre-toplam-bar-danger .ekstre-toplam-item-main:hover {
    background: linear-gradient(135deg, #8b0000 0%, #b30000 100%);
}


/* ════════════════════════════════════════════════════════════════════
   EKSTRE DETAY DIALOG
   Fatura kalem tablosu / Çek detay tablosu (modal dialog içinde).
   ════════════════════════════════════════════════════════════════════ */

.ekstre-detay-modal .rz-dialog-titlebar {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid #C90000 !important;
}
.ekstre-detay-modal .rz-dialog-titlebar .rz-dialog-title { color: #fff !important; font-weight: 700 !important; }
.ekstre-detay-modal .rz-dialog-titlebar-close { color: #fff !important; }
.ekstre-detay-modal .rz-dialog-content { padding: 0 !important; }

.ekstre-detay-dialog {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #333;
}

.ekstre-detay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f4 100%);
    border-bottom: 1px solid #e0e3e7;
}
.ekstre-detay-header-left {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.ekstre-detay-evrak-wrap,
.ekstre-detay-belge-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ekstre-detay-evrak-lbl,
.ekstre-detay-belge-lbl {
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.ekstre-detay-evrak-val {
    font-size: 15px;
    font-weight: 700;
    color: #C90000;
    font-family: "Consolas", monospace;
}
.ekstre-detay-belge-val {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    font-family: "Consolas", monospace;
}
.ekstre-detay-header-right {
    display: flex;
    align-items: center;
}
.ekstre-detay-tarih {
    background: #fff;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e3e7;
}

.ekstre-detay-musteri {
    padding: 10px 20px;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ekstre-detay-musteri-kod {
    font-weight: 700;
    color: #333;
    font-family: "Consolas", monospace;
}
.ekstre-detay-musteri-sep {
    color: #bbb;
    margin: 0 6px;
}
.ekstre-detay-musteri-ad {
    color: #555;
}

.ekstre-detay-body {
    background: #fff;
    max-height: 62vh;
    overflow: auto;
}
.ekstre-detay-loading,
.ekstre-detay-empty {
    padding: 60px 20px;
    text-align: center;
    color: #aaa;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.ekstre-detay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.ekstre-detay-table thead th {
    background: #202020;
    color: #fff;
    padding: 10px 8px;
    font-weight: 600;
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: sticky;
    top: 0;
    z-index: 2;
}
.ekstre-detay-table thead th.right { text-align: right; }
.ekstre-detay-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}
.ekstre-detay-table tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
.ekstre-detay-table tbody tr:hover td { background: #fafafa; }

.ekstre-detay-sira {
    text-align: center;
    color: #aaa;
    width: 40px;
    font-weight: 600;
}
.ekstre-detay-kod {
    font-weight: 600;
    color: #333;
    font-family: "Consolas", monospace;
    white-space: nowrap;
}
.ekstre-detay-ad {
    color: #444;
}
.ekstre-detay-isk {
    color: #f0ad4e;
    font-weight: 600;
}
.ekstre-detay-net {
    font-weight: 700;
    color: #337ab7;
}
.ekstre-detay-tutar {
    font-weight: 700;
    color: #5cb85c;
}

.ekstre-detay-table tfoot td {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%);
    color: #fff;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    border: none;
}
.ekstre-detay-tfoot-lbl {
    text-align: right;
    letter-spacing: 0.5px;
}
.ekstre-detay-tfoot-val {
    text-align: right;
    color: #fff;
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

.ekstre-detay-actions {
    padding: 14px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e0e3e7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.ekstre-detay-btn {
    padding: 10px 22px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s;
}
.ekstre-detay-btn-close {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
.ekstre-detay-btn-close:hover {
    background: #e8e8e8;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   TAHSİLAT DETAY KARTI (Mail Order / KKT)
   MOR ve KKT evrakları için Detay dialogunda kullanılan kart layout'u.
   ════════════════════════════════════════════════════════════════════ */

.tahsilat-detay-card {
    padding: 16px 20px;
    background: #fff;
}

.tahsilat-detay-baslik {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    color: #202020;
    padding: 8px 12px;
    background: linear-gradient(135deg, #fff5f5 0%, #fde9e9 100%);
    border-left: 3px solid #C90000;
    border-radius: 4px;
    margin-bottom: 14px;
}

.tahsilat-detay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid #e0e3e7;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.tahsilat-detay-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    border-bottom: 1px solid #eef1f4;
    border-right: 1px solid #eef1f4;
    min-height: 42px;
    align-items: center;
}

.tahsilat-detay-row:nth-child(2n) {
    border-right: none;
}

.tahsilat-detay-row:nth-last-child(-n+2) {
    /* son satırların alt çizgisi olmasın (tek sayıysa yalnızca son satırınki) */
}

.tahsilat-detay-row-wide {
    grid-column: 1 / -1;
    grid-template-columns: 150px 1fr;
    border-right: none;
}

.tahsilat-detay-lbl {
    padding: 10px 12px;
    background: #f8f9fa;
    border-right: 1px solid #eef1f4;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.tahsilat-detay-val {
    padding: 10px 14px;
    font-size: 14px;
    color: #202020;
    font-weight: 500;
}

.tahsilat-detay-kartno {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #202020;
}

.tahsilat-detay-tutar-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%);
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.tahsilat-detay-tutar-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tahsilat-detay-tutar-val {
    font-size: 22px;
    font-weight: 700;
    color: #ff5555;
    letter-spacing: 0.5px;
}

@media (max-width: 720px) {
    .tahsilat-detay-grid {
        grid-template-columns: 1fr;
    }
    .tahsilat-detay-row {
        border-right: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   FATURA PDF DIALOG
   PDF önizleme popup'ı (base64 <object> + İndir butonu).
   ════════════════════════════════════════════════════════════════════ */

.fatura-pdf-modal .rz-dialog-titlebar {
    background: linear-gradient(135deg, #202020 0%, #2a2a2a 100%) !important;
    color: #fff !important;
    border-bottom: 2px solid #C90000 !important;
}
.fatura-pdf-modal .rz-dialog-titlebar .rz-dialog-title { color: #fff !important; font-weight: 700 !important; }
.fatura-pdf-modal .rz-dialog-titlebar-close { color: #fff !important; }
.fatura-pdf-modal .rz-dialog-content { padding: 0 !important; height: calc(100% - 50px); }

.fatura-pdf-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fatura-pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f4 100%);
    border-bottom: 1px solid #e0e3e7;
    flex-shrink: 0;
}
.fatura-pdf-toolbar-info {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.fatura-pdf-toolbar-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
}
.fatura-pdf-toolbar-evrak {
    font-size: 13px;
    font-weight: 700;
    color: #C90000;
    font-family: "Consolas", monospace;
    margin-left: 8px;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #f5c2c7;
    border-radius: 12px;
}
.fatura-pdf-toolbar-belge {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    font-family: "Consolas", monospace;
    margin-left: 6px;
    padding: 2px 10px;
    background: #fff;
    border: 1px solid #e0e3e7;
    border-radius: 12px;
}
.fatura-pdf-toolbar-actions {
    display: flex;
    gap: 8px;
}

.fatura-pdf-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
    text-decoration: none;
}
.fatura-pdf-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.fatura-pdf-btn-download {
    background: #C90000;
    color: #fff;
}
.fatura-pdf-btn-download:hover:not(:disabled) {
    background: #a00000;
    color: #fff;
    transform: translateY(-1px);
}
.fatura-pdf-btn-close {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}
.fatura-pdf-btn-close:hover { background: #e8e8e8; }

.fatura-pdf-viewer {
    flex: 1;
    background: #525659;
    overflow: auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 400px;
}
.fatura-pdf-object {
    width: 100%;
    height: 100%;
    min-height: 700px;
    border: none;
    background: #fff;
}
.fatura-pdf-loading,
.fatura-pdf-error {
    color: #fff;
    text-align: center;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 14px;
    width: 100%;
}
.fatura-pdf-error { color: #ffd0d0; }
.fatura-pdf-fallback {
    background: #fff;
    padding: 40px 20px;
    text-align: center;
    color: #444;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* ════════════════════════════════════════════════════════════════════
   /odeme — Sanal POS & Nakit Tahsilat
   ════════════════════════════════════════════════════════════════════ */

/* Özet kartlar (4 kart grid) */
.odeme-ozet-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 12px 0 18px;
}
.odeme-ozet-card {
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    border-left: 4px solid #ccc;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.odeme-ozet-card-pos { border-left-color: #4CAF50; }
.odeme-ozet-card-nakit { border-left-color: #2196F3; }
.odeme-ozet-card-count { border-left-color: #FF9800; }
.odeme-ozet-card-total { border-left-color: #C90000; }

.odeme-ozet-card-lbl {
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.odeme-ozet-card-val {
    font-size: 18px;
    font-weight: 700;
    color: #202020;
    font-variant-numeric: tabular-nums;
}
.odeme-ozet-card-sub {
    font-size: 11px;
    color: #666;
}

@media (max-width: 900px) {
    .odeme-ozet-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .odeme-ozet-cards { grid-template-columns: 1fr; }
}

/* Filtre barı */
.odeme-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    margin-bottom: 12px;
}
.odeme-filter-bar label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.odeme-filter-spacer { flex: 1 1 auto; }

/* Durum badge */
.odeme-kart-durum-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Arama: Filtre + Reklam yan yana grid ──────────── */
.arama-filter-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.4fr);
    gap: 14px;
    margin-bottom: 12px;
}
.arama-filter-card { display: flex; flex-direction: column; }
@media (max-width: 1024px) {
    .arama-filter-grid { grid-template-columns: 1fr; }
}

/* Filtre kartı içindeki 2-sütun düzen: sol input + sağ checkbox grid */
.arama-filter-rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    column-gap: 12px;
    row-gap: 8px;
    align-items: center;
}
.arama-chk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 4px 6px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    min-height: 36px;
}
.arama-chk-grid-single { grid-template-columns: 1fr; }
.arama-chk-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    user-select: none;
    padding: 2px 0;
}
.arama-chk-cell span { line-height: 1; }
@media (max-width: 720px) {
    .arama-filter-rows { grid-template-columns: 1fr; }
}

/* ── Kompakt Arama Modu (admin Tema Yönetimi → Kompakt Arama Kartı) ────── */
/* Daha az dikey alan kaplar — sayfa altındaki sonuç tablosu daha çok görünsün */
.arama-filter-grid.arama-kompakt { margin-bottom: 8px; gap: 10px; }
.arama-filter-grid.arama-kompakt .arama-filter-card { padding: 8px 10px !important; }
.arama-filter-grid.arama-kompakt .arama-filter-rows { row-gap: 4px; column-gap: 8px; }
/* Dropdown / textbox — yükseklik 36 → 32. İç label/inputtext'in
   kendi padding+positioning'ine dokunma (eski override Grup Kodu/Marka
   yazısını yarıya kesiyordu). */
.arama-filter-grid.arama-kompakt .rz-dropdown,
.arama-filter-grid.arama-kompakt .rz-textbox {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 12.5px !important;
}
.arama-filter-grid.arama-kompakt .rz-dropdown .rz-dropdown-label,
.arama-filter-grid.arama-kompakt .rz-textbox .rz-inputtext {
    font-size: 12.5px !important;
}
/* Checkbox grid — daha sıkı padding, daha küçük başlık */
.arama-filter-grid.arama-kompakt .arama-chk-grid {
    min-height: 30px;
    padding: 2px 6px;
    gap: 2px 10px;
}
.arama-filter-grid.arama-kompakt .arama-chk-cell { font-size: 12px; padding: 1px 0; }
/* Ara / Temizle butonları daha kısa */
.arama-filter-grid.arama-kompakt .btn-ara,
.arama-filter-grid.arama-kompakt .btn-temizle {
    height: 32px !important;
    font-size: 12.5px !important;
}
/* Carousel boyu da kart boyuyla orantılı azalsın */
.arama-filter-grid.arama-kompakt .reklam-carousel { min-height: 150px; }

/* ── Reklam Carousel ────────────────────────────────── */
.reklam-carousel {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.reklam-carousel-empty {
    background: #f5f5f5;
    color: #999;
    display: flex; align-items: center; justify-content: center;
}
.reklam-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.reklam-slide.aktif {
    opacity: 1;
    pointer-events: auto;
}
.reklam-slide img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.reklam-placeholder {
    color: #fff;
    text-align: center;
    width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.reklam-dots {
    position: absolute;
    bottom: 10px; left: 0; right: 0;
    display: flex; gap: 6px;
    justify-content: center;
    z-index: 2;
}
.reklam-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255,255,255,0.45);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    border: 1px solid rgba(0,0,0,0.2);
}
.reklam-dot:hover { background: rgba(255,255,255,0.75); transform: scale(1.15); }
.reklam-dot.aktif { background: #C90000; border-color: rgba(255,255,255,0.7); }

/* Carousel ileri / geri okları — hover'da görünür */
.reklam-arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
    backdrop-filter: blur(2px);
    user-select: none;
    padding: 0;
}
.reklam-arrow span {
    display: block;
    margin-top: -3px;          /* ‹ / › glyph optik merkezleme */
    font-weight: 600;
}
.reklam-arrow-prev { left: 12px; }
.reklam-arrow-next { right: 12px; }

/* Carousel'in üzerine gelince oklar görünür */
.reklam-carousel:hover .reklam-arrow {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
.reklam-arrow:hover {
    background: rgba(201, 0, 0, 0.85);   /* marka kırmızısı */
    transform: translateY(-50%) scale(1.08);
}
.reklam-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

/* Dokunmatik cihazlar — hover yok, oklar her zaman yarı şeffaf görünsün */
@media (hover: none) {
    .reklam-arrow {
        opacity: 0.85;
        transform: translateY(-50%) scale(1);
    }
}

/* ── Müşteri Detay Paneli (topbar) ──────────────────── */
.musteri-detay-panel {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}
.m-detay-card {
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 220px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.m-detay-card-info { border-left: 3px solid #1976d2; }
.m-detay-card-odeme { border-left: 3px solid #C90000; }
.m-detay-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    line-height: 1.3;
    color: #444;
}
.m-detay-row-strong { font-weight: 700; color: #1a237e; font-size: 12px; }
.m-detay-icon { width: 16px; text-align: center; font-size: 12px; opacity: 0.85; }
.m-detay-lbl {
    color: #888;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-width: 78px;
}
.m-detay-row-strong .m-detay-lbl { color: #1976d2; }
.m-detay-card-odeme .m-detay-row-strong .m-detay-lbl { color: #C90000; }
.m-detay-val {
    font-weight: 600;
    color: #222;
    margin-left: auto;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}
.m-detay-bakiye { font-weight: 800; font-family: 'Consolas', monospace; }
.m-detay-bakiye.negatif { color: #C90000; }
.m-detay-bakiye.pozitif { color: #2e7d32; }
/* Temsilci e-posta satırı — üzerine gelince renk değişir, tıklayınca panoya kopyalanır */
.m-detay-copy-able { cursor: pointer; transition: color .12s ease; }
.m-detay-copy-able:hover { color: #1565c0; text-decoration: underline; }
.m-detay-copy-able.kopyalandi { color: #2e7d32; text-decoration: none; }
/* Temsilci GSM satırı — WhatsApp linki; üzerine gelince WhatsApp yeşili */
.m-detay-wa-able { color: inherit; text-decoration: none; cursor: pointer; transition: color .12s ease; }
.m-detay-wa-able:hover { color: #128C7E; text-decoration: underline; }

/* /iletisim — tıklayınca panoya kopyalanan alanlar (Firma Adı, Adres, Telefon, E-posta, IBAN, Hesap No).
   Buton/ikon yok — topbar E-Posta gibi: üzerine gelince renk değişir + tooltip, tıkla → "✓ Kopyalandı".
   Mobilde havale/EFT için pratik. */
.iletisim-kopya { cursor: pointer; transition: color .12s ease; -webkit-tap-highlight-color: rgba(21,101,192,0.12); }
.iletisim-kopya:hover { color: #1565c0; text-decoration: underline; }
.iletisim-kopya.kopyalandi { color: #2e7d32; text-decoration: none; }

@media (max-width: 1100px) {
    .musteri-detay-panel { display: none; }
}

/* ── Grid başlıkları kırpılmasın, 2 satır olsun ─────── */
.legacy-grid thead th,
.legacy-grid thead th *,
.legacy-grid .rz-column-title,
.legacy-grid .rz-column-title-content,
.legacy-grid .rz-grid-table thead .rz-cell-data,
.legacy-grid .rz-text-truncate,
.legacy-grid thead .rz-text-truncate {
    white-space: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
    line-height: 1.2 !important;
    word-wrap: break-word;
    word-break: break-word;
}
.legacy-grid thead th { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.legacy-grid thead .rz-column-title { display: block; }

/* ── Sütun başlığı: letter-stacking (dikey yığılma) önle ────────────────
   "Stok Açıklaması" gibi başlıklar dar ekranda harf-harf bölünmemesi için
   kısa kelime sınırında bölünsün, harf düzeyinde değil. */
.legacy-grid thead .col-stok-aciklamasi .rz-column-title-content,
.legacy-grid thead .col-stok-aciklamasi .rz-cell-data {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}
/* Stok Açıklaması sütunu çok dar olmasın → minimum genişlik */
.legacy-grid thead th.col-stok-aciklamasi,
.legacy-grid tbody td.col-stok-aciklamasi {
    min-width: 180px;
}

/* ── Kısaltılmış sütun başlıkları (Birim→Br, Koli→Kl, Bakiye→Bk) ────────
   Geniş ekranda tam isim, dar ekranda kısa form. Aynı zamanda kısa kalsın. */
.legacy-grid thead th.col-abbr .rz-column-title-content,
.legacy-grid thead th.col-abbr .rz-cell-data {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
}

/* Koli sütunu küçük, sadece 3-4 basamak değer alır → tabular-nums ile hizalı */
.legacy-grid td .rz-cell-data {
    font-variant-numeric: tabular-nums;
}

/* ── Sola hizalı sütun başlığı (Radzen TextAlign sadece hücreye uygulanıyor,
       header için ayrıca zorlamak gerekiyor) ─── */
.legacy-grid thead th.col-left,
.legacy-grid thead th.col-left .rz-column-title,
.legacy-grid thead th.col-left .rz-column-title-content,
.legacy-grid thead th.col-left .rz-cell-data {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Tooltip — native tarayıcı tooltip'i kullanılıyor (title attribute).
   Modern özel tooltip pozisyon sorunları yüzünden geri alındı. */

/* Tablet ve daha küçük ekranlarda kısaltmaları göster */
@media (max-width: 1100px) {
    .legacy-grid thead th.col-birim .rz-column-title-content,
    .legacy-grid thead th.col-koli .rz-column-title-content,
    .legacy-grid thead th.col-bakiye .rz-column-title-content {
        font-size: 0;
    }
    .legacy-grid thead th.col-birim .rz-column-title-content::before {
        content: 'Br';
        font-size: 11.5px;
        letter-spacing: 0.4px;
    }
    .legacy-grid thead th.col-koli .rz-column-title-content::before {
        content: 'Kl';
        font-size: 11.5px;
        letter-spacing: 0.4px;
    }
    .legacy-grid thead th.col-bakiye .rz-column-title-content::before {
        content: 'Bk';
        font-size: 11.5px;
        letter-spacing: 0.4px;
    }
}

/* ── DP (Depo) yuvarlak dolgun durum rozeti ─────────── */
.dp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.25);
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    user-select: none;
    cursor: help;
    transition: transform 0.15s ease;
    line-height: 1;
}
.dp-badge:hover { transform: scale(1.12); }
.dp-badge-on    { background: linear-gradient(135deg, #66bb6a 0%, #2e7d32 100%); }
.dp-badge-off   { background: linear-gradient(135deg, #ef5350 0%, #c62828 100%); }
.dp-badge-low   { background: linear-gradient(135deg, #ab47bc 0%, #6a1b9a 100%); }

/* Grid action buttons — Radzen seçili satırda ikon rengini ezerse beyaz kalsın */
.rz-data-grid .b2b-grid-btn,
.rz-data-grid .b2b-grid-btn *,
.rz-data-row .b2b-grid-btn,
.rz-data-row .b2b-grid-btn *,
.rz-data-row.rz-state-selected .b2b-grid-btn,
.rz-data-row.rz-state-selected .b2b-grid-btn *,
.rz-data-row.rz-state-highlight .b2b-grid-btn,
.rz-data-row.rz-state-highlight .b2b-grid-btn *,
.rz-data-row:hover .b2b-grid-btn,
.rz-data-row:hover .b2b-grid-btn *,
.rz-data-row.rz-state-focused .b2b-grid-btn,
.rz-data-row.rz-state-focused .b2b-grid-btn *,
button.b2b-grid-btn,
button.b2b-grid-btn * { color: #fff !important; }

/* Failsafe — bg-color attribute'una göre target (class application'a bağımsız) */
button[style*="background-color:#1a2848"],
button[style*="background-color:#1a2848"] *,
button[style*="background-color: #1a2848"],
button[style*="background-color: #1a2848"] *,
button[style*="background-color:#d9534f"],
button[style*="background-color:#d9534f"] *,
button[style*="background-color: #d9534f"],
button[style*="background-color: #d9534f"] * { color: #fff !important; }
.rz-state-selected button[style*="background-color:#1a2848"],
.rz-state-selected button[style*="background-color:#1a2848"] *,
.rz-state-selected button[style*="background-color:#d9534f"],
.rz-state-selected button[style*="background-color:#d9534f"] * { color: #fff !important; }

/* Tıklanan (selected) satırda lacivert grid butonları açık maviye dönsün.
   Radzen DataGrid selected row class adı versiyona göre değişir — wildcard ile yakala. */
tr[class*="state-selected"] button[style*="background-color:#1a2848"],
tr[class*="state-highlight"] button[style*="background-color:#1a2848"],
tr[class*="state-active"] button[style*="background-color:#1a2848"],
tr[class*="row-selected"] button[style*="background-color:#1a2848"],
tr[aria-selected="true"] button[style*="background-color:#1a2848"],
tr.rz-selected button[style*="background-color:#1a2848"],
.rz-selected button[style*="background-color:#1a2848"] {
    background-color: #4a90e2 !important;
    border-color: #4a90e2 !important;
}
.dp-badge-yolda {
    background: linear-gradient(135deg, #ffb74d 0%, #ef6c00 100%);
    font-size: 13px;
    /* emoji içerirken text-shadow kapansın daha temiz görünür */
    text-shadow: none;
}

/* ── Alternatif Stok rozeti ─────────────────────────── */
.alt-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
    font-weight: 800;
    font-size: 11px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(245,124,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.2);
    letter-spacing: 0;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    cursor: help;
    user-select: none;
    transition: transform 0.15s ease;
}
.alt-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 3px 8px rgba(245,124,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.3);
}

/* ── Sanal POS canlı kart önizlemesi ─────────────────── */
.kart-preview-wrap {
    perspective: 1200px;
    margin: 8px auto 18px;
    width: 320px;
    max-width: 100%;
}
.kart-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1.6 / 1;
    transition: transform 0.65s cubic-bezier(.4,.2,.2,1);
    transform-style: preserve-3d;
}
.kart-preview.flipped { transform: rotateY(180deg); }
.kart-face {
    position: absolute; inset: 0;
    border-radius: 14px;
    color: #fff;
    padding: 18px 22px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(135deg, #2845e0 0%, #1a237e 100%);
    box-shadow: 0 10px 28px rgba(26,35,126,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.kart-face::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
    pointer-events: none;
}
.kart-face-back { transform: rotateY(180deg); }
.kart-face-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase;
}
.kart-brand {
    font-size: 18px; font-weight: 900; font-style: italic;
    text-transform: uppercase; letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.kart-chip {
    width: 38px; height: 28px;
    background: linear-gradient(135deg, #d4af37 0%, #f4d979 50%, #b8860b 100%);
    border-radius: 5px;
    margin: 14px 0 10px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    position: relative;
}
.kart-chip::after {
    content: ''; position: absolute; inset: 4px;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.18) 3px 4px);
    border-radius: 2px;
}
.kart-no {
    font-family: 'Courier New', 'Consolas', monospace;
    font-size: 19px;
    letter-spacing: 2px;
    margin: 6px 0 16px;
    display: flex; gap: 14px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.kart-no span { min-width: 56px; }
.kart-no span.dim { opacity: 0.55; }
.kart-bottom {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: auto; gap: 16px;
}
.kart-bottom .lbl {
    font-size: 8.5px; opacity: 0.7; letter-spacing: 1.2px;
    text-transform: uppercase; margin-bottom: 3px; display: block;
}
.kart-bottom .val {
    font-size: 12.5px; font-weight: 600; letter-spacing: 0.5px;
    font-family: 'Courier New', 'Consolas', monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.kart-magstripe {
    width: calc(100% + 44px); height: 42px;
    background: #111; margin: 18px -22px 14px;
}
.kart-cvv-row { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.kart-cvv-lbl { font-size: 10px; letter-spacing: 1px; opacity: 0.85; }
.kart-cvv-box {
    background: #fff; color: #333;
    padding: 8px 12px; border-radius: 4px;
    font-family: 'Courier New', monospace; letter-spacing: 4px;
    margin-left: auto; min-width: 70px; text-align: center;
    font-size: 14px; font-weight: 700;
}
.odeme-kart-durum-basarili { background: #e8f5e9; color: #2e7d32; }
.odeme-kart-durum-hata { background: #ffebee; color: #c62828; }
.odeme-kart-durum-bekliyor { background: #fff3e0; color: #ef6c00; }

/* ──── Sanal POS Dialog ──── */
.odeme-kart-dialog {
    width: 100%;
    max-width: 540px;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Radzen dialog content wrapper da yatay taşmayı engellesin */
.odeme-kart-modal .rz-dialog-content,
.odeme-kart-modal .ui-dialog-content {
    overflow-x: hidden;
}

.odeme-kart-header,
.odeme-nakit-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef1f4 100%);
    border-radius: 8px;
    margin-bottom: 14px;
}
.odeme-kart-title,
.odeme-nakit-title {
    font-size: 16px;
    font-weight: 700;
    color: #202020;
}
.odeme-kart-sub,
.odeme-nakit-sub {
    font-size: 12px;
    color: #666;
}

.odeme-kart-body,
.odeme-nakit-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.odeme-kart-row,
.odeme-nakit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.odeme-kart-row > label,
.odeme-nakit-row > label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.odeme-kart-row-3,
.odeme-nakit-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.odeme-kart-row-3 > div > label,
.odeme-nakit-row-3 > div > label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}

/* Büyük tutar alanı */
.odeme-kart-tutar input {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #202020 !important;
}

/* 4 segment kart no */
.odeme-kart-input-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
.odeme-kart-input-group input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    font-family: "Consolas", "Courier New", monospace;
    font-size: 16px;
    text-align: center;
    letter-spacing: 1px;
    padding: 10px 4px;
    border: 1px solid #ccc;
    border-radius: 6px;
    outline: none;
    background: #fff;
    color: #202020;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.odeme-kart-input-group input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
}

.odeme-kart-banka {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 600;
    margin-top: 2px;
}

.odeme-kart-cvv {
    width: 100%;
    font-family: "Consolas", monospace;
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.odeme-kart-error,
.odeme-nakit-error {
    background: #ffebee;
    color: #c62828;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    border-left: 3px solid #c62828;
}

.odeme-kart-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 13px;
    color: #1565c0;
}

.odeme-kart-actions,
.odeme-nakit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

/* Masked kart no grid'te monospace */
.odeme-kart-no-cell {
    font-family: "Consolas", "Courier New", monospace;
    letter-spacing: 1px;
    font-size: 13px;
}

/* ── Admin Dashboard: Top 10 Müşteri responsive bar list ───────────── */
.top-musteri-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.top-musteri-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1.6fr) minmax(0, 2fr);
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    border-radius: 6px;
    transition: background 0.15s;
}

.top-musteri-row:hover {
    background: #f8fafc;
}

.top-musteri-rank {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.top-musteri-row:nth-child(1) .top-musteri-rank { color: #d97706; font-size: 13px; }
.top-musteri-row:nth-child(2) .top-musteri-rank { color: #94a3b8; font-size: 12px; }
.top-musteri-row:nth-child(3) .top-musteri-rank { color: #b45309; font-size: 12px; }

.top-musteri-name {
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

.top-musteri-bar-wrap {
    position: relative;
    height: 22px;
    background: #f1f5f9;
    border-radius: 11px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.top-musteri-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%);
    border-radius: 11px;
    transition: width 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.top-musteri-row:nth-child(1) .top-musteri-bar {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
.top-musteri-row:nth-child(2) .top-musteri-bar {
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
}
.top-musteri-row:nth-child(3) .top-musteri-bar {
    background: linear-gradient(90deg, #b45309 0%, #d97706 100%);
}

.top-musteri-val {
    position: relative;
    z-index: 1;
    font-size: 11.5px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    line-height: 1;
}

/* Çok dar (≤480px): sıra numarası gizle, isim daha dar */
@media (max-width: 480px) {
    .top-musteri-row {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
    }
    .top-musteri-rank { display: none; }
}

/* ── B2B durumu — checkbox stilinde mavi göstergesi ────────────────── */
.b2b-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    background: #fff;
    transition: all 0.15s ease;
}

.b2b-check.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #1e40af;
    box-shadow:
        0 2px 6px rgba(37, 99, 235, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.b2b-check.passive {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.b2b-check-mark {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* ── Dar grid başlıklarında satır kırılmasını engelle (B2B, Gün, Arama vb.) ── */
.legacy-grid thead th.col-nowrap .rz-column-title-content,
.legacy-grid thead th.col-nowrap .rz-column-title,
.legacy-grid thead th.col-nowrap .rz-cell-data {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    text-overflow: clip !important;
    overflow: visible !important;
}

/* ── Satış Fiyatı rozeti — döviz koduna göre renk (TL/USD/EURO) ─── */
.fiyat-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.fiyat-badge .fiyat-badge-simge {
    font-size: 11px;
    font-weight: 800;
    opacity: 0.85;
    margin-left: 2px;
}

/* TL → açık güzel yeşil */
.fiyat-badge.tl {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    border: 1px solid #6ee7b7;
}

/* USD → mavi (klasik dolar) */
.fiyat-badge.usd {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* EURO → altın-amber (Avrupa) */
.fiyat-badge.eur {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
}

/* ── Gün rozeti — kritiklik seviyesine göre renkli (Hareketsiz Stok) ── */
.gun-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0.2px;
}

/* < 45 gün → normal (yeşil) — yeni hareketsizlik, dikkat gerekmez */
.gun-badge.normal {
    background: #d1fae5;
    color: #065f46;
}

/* 45-60 gün → notice (sarı-açık) — izle */
.gun-badge.notice {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #854d0e;
    border: 1px solid #fcd34d;
}

/* 60-90 gün → warning (turuncu) — eylem zamanı yaklaşıyor */
.gun-badge.warning {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%);
    color: #7c2d12;
    border: 1px solid #fb923c;
    box-shadow: 0 1px 4px rgba(251, 146, 60, 0.25);
}

/* 90-120 gün → danger (kırmızı-turuncu) — kampanya gerekli */
.gun-badge.danger {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    color: #7f1d1d;
    border: 1px solid #f87171;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30);
}

/* ≥120 gün → critical (canlı kırmızı) — acil! */
.gun-badge.critical {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    color: #fff;
    border: 1px solid #b91c1c;
    box-shadow:
        0 2px 8px rgba(239, 68, 68, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: gun-pulse 2s ease-in-out infinite;
}

/* Hiç satış yok / null → gri */
.gun-badge.none {
    background: #f1f5f9;
    color: #94a3b8;
    font-weight: 700;
    border: 1px solid #e2e8f0;
}

@keyframes gun-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.50), inset 0 1px 0 rgba(255, 255, 255, 0.15); }
    50% { box-shadow: 0 2px 14px rgba(239, 68, 68, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.20); }
}

/* ── Sepetim grid'inde tarih hücresi: gün üstte, saat altında ─────────── */
.tarih-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.tarih-gun {
    font-size: 12px;
    color: #334155;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}

.tarih-saat {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}

/* ── Sepetim grid'inde miktar rozeti (salt-okunur, mavi gradient) ─────── */
.miktar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    padding: 0 12px;
    background: linear-gradient(135deg, #1f5ac4 0%, #2980d9 50%, #4ba0e8 100%);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.4px;
    border-radius: 8px;
    box-shadow:
        0 2px 6px rgba(31, 90, 196, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════════
   STOK ARAMA / SEPETİM — DAR VIEWPORT KART GÖRÜNÜMÜ
   Geniş ekran: tablo görünür, kartlar gizli
   ≤1200px:     tablo gövdesi gizli (pager kalır), kartlar görünür
   ════════════════════════════════════════════════════════════════════════ */
.stok-cards-view {
    display: none;
}

@media (max-width: 1200px) {
    /* Sadece "mobil karta çevir" işaretli gridlerin tablo gövdesini gizle.
       Pager (sayfalama) ve diğer gridler (OEM, Araç, Rakip) etkilenmesin. */
    .legacy-grid-mobil-karta-cevir .rz-grid-table,
    .legacy-grid-mobil-karta-cevir .rz-datatable {
        display: none !important;
    }
    /* Boş durumdaki "Aramak için..." mesajı tablosuz gösterilirken kontainer'ı küçült */
    .legacy-grid-mobil-karta-cevir .rz-data-grid-data {
        min-height: 0;
    }
    /* Kartlar görünür */
    .stok-cards-view {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px 4px 14px;
    }
}

.stok-cards-loading,
.stok-cards-empty {
    text-align: center;
    color: #888;
    padding: 40px 16px;
    font-size: 14px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

/* ── Kart kabuğu ───────────────────────────────────────────────────── */
.stok-mobil-kart {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef2f7;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
    align-items: stretch;
    position: relative;
}
.stok-mobil-kart .kart-bilgi { min-width: 0; }

.stok-mobil-kart:active {
    transform: scale(0.99);
}

.stok-mobil-kart.selected {
    border-color: var(--vardar-blue);
    box-shadow: 0 0 0 2px rgba(31, 90, 196, 0.15), 0 4px 14px rgba(0, 0, 0, 0.08);
}

.stok-mobil-kart.kampanyali {
    background: linear-gradient(135deg, #fffbe6 0%, #fff 60%);
    border-color: #ffd970;
}

/* ── Resim ─────────────────────────────────────────────────────────── */
.kart-resim {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
    border: 1px solid #e2e8f0;
}

.kart-resim img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.kart-kmp-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45);
}

/* ── Bilgi (orta) ──────────────────────────────────────────────────── */
.kart-bilgi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}

.kart-kod-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kart-kod {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kart-alt-badge {
    background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}

.kart-aciklama {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.kart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.kart-marka {
    font-size: 11px;
    color: #2193b0;
    font-weight: 700;
    background: #e0f2fe;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.kart-chip {
    font-size: 10.5px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* ── Aksiyon (sağ) ─────────────────────────────────────────────────── */
.kart-aksiyon {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px;
    min-width: 88px;
    max-width: 130px;
}
/* Sepete butonu kompakt — text küçük, daha az padding ile ürün adına alan */
.kart-sepet-btn { padding: 5px 9px !important; font-size: 11px !important; }
.kart-sepet-text { letter-spacing: 0; }

.kart-stok-durum {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kart-bakiye {
    font-size: 11px;
    font-weight: 700;
}

.kart-bakiye.var { color: #059669; }
.kart-bakiye.yok { color: #dc2626; }

.kart-fiyatlar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    cursor: help;
}

.kart-fiyat-liste {
    font-size: 10.5px;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: rgba(217, 83, 79, 0.5);
    font-variant-numeric: tabular-nums;
}

.kart-fiyat-net {
    font-size: 14px;
    font-weight: 800;
    color: var(--vardar-blue);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
}

.kart-sepet-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1a2848;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(26, 40, 72, 0.30);
    transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
    letter-spacing: 0.2px;
}
.kart-sepet-btn .material-icons,
.kart-sepet-btn .material-icons-outlined { color: #fff; font-size: 18px; }

.kart-sepet-btn:hover { background: #2a3a5e; }

.kart-sepet-btn:active {
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(26, 40, 72, 0.30);
}

/* Çok dar (≤380px): "Sepete" yazısını gizle, sadece ikon */
@media (max-width: 380px) {
    .stok-mobil-kart {
        grid-template-columns: 72px 1fr auto;
        padding: 8px;
    }
    .kart-resim {
        width: 72px;
        height: 72px;
    }
    .kart-aksiyon { min-width: 78px; }
    .kart-sepet-text { display: none; }
    .kart-sepet-btn { padding: 6px 8px; }
    .kart-fiyat-net { font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════
   SEPETIM — MOBİL KART
   ════════════════════════════════════════════════════════════════════════ */
.sepet-mobil-kart {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #eef2f7;
    gap: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sepet-mobil-kart.secili {
    border-color: var(--vardar-blue);
    background: linear-gradient(135deg, #f0f7ff 0%, #fff 60%);
    box-shadow: 0 0 0 2px rgba(31, 90, 196, 0.12), 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Üst: resim + bilgi */
.sepet-mobil-kart .kart-top {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
    align-items: flex-start;
}

.sepet-mobil-kart .kart-resim {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: pointer;
}

.sepet-mobil-kart .kart-resim img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

.sepet-mobil-kart .kart-bilgi {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sepet-mobil-kart .kart-kod-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sepet-mobil-kart .kart-kod {
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sepet-mobil-kart .kart-durum {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.sepet-mobil-kart .durum-var { background: #d1fae5; color: #059669; }
.sepet-mobil-kart .durum-az { background: #fef3c7; color: #d97706; }
.sepet-mobil-kart .durum-yok { background: #fee2e2; color: #dc2626; }

.sepet-mobil-kart .kart-aciklama {
    font-size: 12.5px;
    color: #334155;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.sepet-mobil-kart .kart-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.sepet-mobil-kart .kart-marka {
    font-size: 11px;
    color: #2193b0;
    font-weight: 700;
    background: #e0f2fe;
    padding: 2px 7px;
    border-radius: 4px;
}

.sepet-mobil-kart .kart-chip {
    font-size: 10.5px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

/* Orta: Miktar + Fiyatlar */
.sepet-mobil-kart .kart-orta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px dashed #e2e8f0;
    border-bottom: 1px dashed #e2e8f0;
}

.sepet-mobil-kart .kart-miktar-grup {
    display: inline-flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

.sepet-mobil-kart .kart-miktar-btn {
    width: 32px;
    height: 36px;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    color: #475569;
    transition: background 0.15s;
}

.sepet-mobil-kart .kart-miktar-btn:hover:not(:disabled) {
    background: #e2e8f0;
}

.sepet-mobil-kart .kart-miktar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.sepet-mobil-kart .kart-miktar-input {
    width: 50px;
    height: 36px;
    border: none;
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #fff;
    -moz-appearance: textfield;
}
.sepet-mobil-kart .kart-miktar-input::-webkit-outer-spin-button,
.sepet-mobil-kart .kart-miktar-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.sepet-mobil-kart .kart-fiyatlar {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    cursor: help;
}

.sepet-mobil-kart .kart-fiyat-liste {
    font-size: 10.5px;
    color: #94a3b8;
    text-decoration: line-through;
    text-decoration-color: rgba(217, 83, 79, 0.5);
    font-variant-numeric: tabular-nums;
}

.sepet-mobil-kart .kart-fiyat-net {
    font-size: 13px;
    font-weight: 700;
    color: var(--vardar-blue);
    font-variant-numeric: tabular-nums;
}

.sepet-mobil-kart .kart-fiyat-toplam {
    font-size: 11.5px;
    color: #475569;
    margin-top: 2px;
}

.sepet-mobil-kart .kart-fiyat-toplam b {
    color: #059669;
    font-size: 13px;
    font-weight: 800;
}

/* Alt: Aksiyonlar */
.sepet-mobil-kart .kart-alt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.sepet-mobil-kart .kart-secim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.sepet-mobil-kart .kart-secim input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--vardar-blue);
    cursor: pointer;
}

.sepet-mobil-kart .kart-secim span {
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}

.sepet-mobil-kart .kart-aksiyon-btns {
    display: flex;
    gap: 6px;
}

.sepet-mobil-kart .kart-aksiyon-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    height: 32px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}

.sepet-mobil-kart .kart-aksiyon-btn.duzelt {
    background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(33, 147, 176, 0.30);
}

.sepet-mobil-kart .kart-aksiyon-btn.sil {
    background: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(238, 9, 121, 0.30);
    padding: 6px 10px;
}

.sepet-mobil-kart .kart-aksiyon-btn:hover {
    filter: brightness(1.05);
}

.sepet-mobil-kart .kart-aksiyon-btn:active {
    transform: scale(0.96);
}

.sepet-mobil-kart .kart-tarih {
    font-size: 10.5px;
    color: #94a3b8;
    text-align: right;
    padding-top: 2px;
    border-top: 1px solid #f5f5f5;
    margin-top: -4px;
}

/* ════════════════════════════════════════════════════════════════════
   NAVMENU TEMALARI — admin tarafından SirketAyarlari'ndan seçilir
   Her tema sidebar'ın arka plan, metin, hover, accent renklerini değiştirir.
   ════════════════════════════════════════════════════════════════════ */

/* dark = varsayılan (zaten :root'ta tanımlı) — class belirtilmesi gerekirse override yok */

.b2b-layout.theme-blue .b2b-sidebar {
    background: linear-gradient(180deg, #1e3c72 0%, #0f2042 100%);
    color: #e8eef9;
}
.b2b-layout.theme-blue .b2b-nav li a:hover,
.b2b-layout.theme-blue .b2b-nav li a.active {
    background: rgba(59, 130, 246, 0.30);
    border-left-color: #3b82f6;
}
.b2b-layout.theme-blue .sidebar-collapse-btn {
    color: #1e3c72; border-color: #c7d2fe;
}
.b2b-layout.theme-blue .sidebar-collapse-btn:hover {
    background: #1e3c72; color: #fff;
}
.b2b-layout.theme-blue .b2b-nav .badge-count { background: #3b82f6; }
.b2b-layout.theme-blue .sidebar-admin-link a { background: #3b82f6; }

.b2b-layout.theme-midnight .b2b-sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
}
.b2b-layout.theme-midnight .b2b-nav li a:hover,
.b2b-layout.theme-midnight .b2b-nav li a.active {
    background: rgba(6, 182, 212, 0.25);
    border-left-color: #06b6d4;
}
.b2b-layout.theme-midnight .sidebar-collapse-btn {
    color: #0f172a; border-color: #cbd5e1;
}
.b2b-layout.theme-midnight .sidebar-collapse-btn:hover {
    background: #06b6d4; color: #fff;
}
.b2b-layout.theme-midnight .b2b-nav .badge-count { background: #06b6d4; }
.b2b-layout.theme-midnight .sidebar-admin-link a { background: #06b6d4; }

.b2b-layout.theme-forest .b2b-sidebar {
    background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
    color: #d1fae5;
}
.b2b-layout.theme-forest .b2b-nav li a:hover,
.b2b-layout.theme-forest .b2b-nav li a.active {
    background: rgba(34, 197, 94, 0.25);
    border-left-color: #22c55e;
}
.b2b-layout.theme-forest .sidebar-collapse-btn {
    color: #14532d; border-color: #bbf7d0;
}
.b2b-layout.theme-forest .sidebar-collapse-btn:hover {
    background: #22c55e; color: #fff;
}
.b2b-layout.theme-forest .b2b-nav .badge-count { background: #22c55e; }
.b2b-layout.theme-forest .sidebar-admin-link a { background: #22c55e; }

.b2b-layout.theme-plum .b2b-sidebar {
    background: linear-gradient(180deg, #4c1d95 0%, #2e1065 100%);
    color: #f3e8ff;
}
.b2b-layout.theme-plum .b2b-nav li a:hover,
.b2b-layout.theme-plum .b2b-nav li a.active {
    background: rgba(217, 70, 239, 0.30);
    border-left-color: #d946ef;
}
.b2b-layout.theme-plum .sidebar-collapse-btn {
    color: #4c1d95; border-color: #e9d5ff;
}
.b2b-layout.theme-plum .sidebar-collapse-btn:hover {
    background: #d946ef; color: #fff;
}
.b2b-layout.theme-plum .b2b-nav .badge-count { background: #d946ef; }
.b2b-layout.theme-plum .sidebar-admin-link a { background: #d946ef; }

.b2b-layout.theme-sunset .b2b-sidebar {
    background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
    color: #fee2e2;
}
.b2b-layout.theme-sunset .b2b-nav li a:hover,
.b2b-layout.theme-sunset .b2b-nav li a.active {
    background: rgba(245, 158, 11, 0.30);
    border-left-color: #f59e0b;
}
.b2b-layout.theme-sunset .sidebar-collapse-btn {
    color: #7f1d1d; border-color: #fecaca;
}
.b2b-layout.theme-sunset .sidebar-collapse-btn:hover {
    background: #f59e0b; color: #fff;
}
.b2b-layout.theme-sunset .b2b-nav .badge-count { background: #f59e0b; }
.b2b-layout.theme-sunset .sidebar-admin-link a { background: #f59e0b; }

.b2b-layout.theme-light .b2b-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #334155;
    border-right: 1px solid #e2e8f0;
}
.b2b-layout.theme-light .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.b2b-layout.theme-light .brand-title { color: #1f5ac4; text-shadow: none; }
.b2b-layout.theme-light .b2b-nav li a {
    color: #334155;
}
.b2b-layout.theme-light .b2b-nav li a:hover,
.b2b-layout.theme-light .b2b-nav li a.active {
    background: rgba(31, 90, 196, 0.10);
    border-left-color: #1f5ac4;
    color: #1f5ac4;
}
.b2b-layout.theme-light .sidebar-collapse-btn {
    color: #1f5ac4; border-color: #cbd5e1;
}
.b2b-layout.theme-light .sidebar-collapse-btn:hover {
    background: #1f5ac4; color: #fff;
}
.b2b-layout.theme-light .b2b-nav .badge-count { background: #1f5ac4; }
.b2b-layout.theme-light .sidebar-user { color: #64748b; border-top-color: #e2e8f0; }
.b2b-layout.theme-light .sidebar-logout { color: #64748b; }
.b2b-layout.theme-light .sidebar-logout:hover { color: #1f5ac4; }
.b2b-layout.theme-light .sidebar-admin-link a { background: #1f5ac4; }

.b2b-layout.theme-sand .b2b-sidebar {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    color: #3f2e0c;
    border-right: 1px solid #d4b675;
}
.b2b-layout.theme-sand .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-bottom: 1px solid #d4b675;
}
.b2b-layout.theme-sand .brand-title { color: #b45309; text-shadow: none; }
.b2b-layout.theme-sand .b2b-nav li a {
    color: #3f2e0c;
}
.b2b-layout.theme-sand .b2b-nav li a:hover,
.b2b-layout.theme-sand .b2b-nav li a.active {
    background: rgba(180, 83, 9, 0.18);
    border-left-color: #b45309;
    color: #92400e;
}
.b2b-layout.theme-sand .sidebar-collapse-btn {
    color: #b45309; border-color: #d4b675;
}
.b2b-layout.theme-sand .sidebar-collapse-btn:hover {
    background: #b45309; color: #fff;
}
.b2b-layout.theme-sand .b2b-nav .badge-count { background: #b45309; }
.b2b-layout.theme-sand .sidebar-user { color: #6b5621; border-top-color: #d4b675; }
.b2b-layout.theme-sand .sidebar-logout { color: #6b5621; }
.b2b-layout.theme-sand .sidebar-admin-link a { background: #b45309; }

/* ── Okyanus: derin deniz turkuaz + cyan accent ───────────────────── */
.b2b-layout.theme-ocean .b2b-sidebar {
    background: linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
    color: #cffafe;
}
.b2b-layout.theme-ocean .b2b-nav li a:hover,
.b2b-layout.theme-ocean .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.05) 100%);
    border-left-color: #22d3ee;
    color: #fff;
    box-shadow: inset 0 0 18px rgba(34, 211, 238, 0.15);
}
.b2b-layout.theme-ocean .sidebar-collapse-btn {
    color: #0c4a6e; border-color: #a5f3fc;
}
.b2b-layout.theme-ocean .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #fff;
}
.b2b-layout.theme-ocean .b2b-nav .badge-count {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.40);
}
.b2b-layout.theme-ocean .sidebar-admin-link a {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
}
.b2b-layout.theme-ocean .brand-title { color: #cffafe; }

/* ── Aurora: kuzey ışıkları (pembe → mor → mavi) gradient ──────────── */
.b2b-layout.theme-aurora .b2b-sidebar {
    background: linear-gradient(180deg, #5b21b6 0%, #be185d 50%, #1d4ed8 100%);
    color: #fce7f3;
    position: relative;
}
.b2b-layout.theme-aurora .b2b-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top right, rgba(244, 114, 182, 0.30) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.b2b-layout.theme-aurora .b2b-sidebar > * { position: relative; z-index: 1; }
.b2b-layout.theme-aurora .b2b-nav li a:hover,
.b2b-layout.theme-aurora .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(244, 114, 182, 0.30) 0%, rgba(99, 102, 241, 0.20) 100%);
    border-left-color: #f472b6;
    color: #fff;
    backdrop-filter: blur(4px);
}
.b2b-layout.theme-aurora .sidebar-collapse-btn {
    color: #be185d; border-color: #fbcfe8;
}
.b2b-layout.theme-aurora .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #f472b6 0%, #a855f7 100%); color: #fff;
}
.b2b-layout.theme-aurora .b2b-nav .badge-count {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
    box-shadow: 0 0 12px rgba(244, 114, 182, 0.50);
}
.b2b-layout.theme-aurora .sidebar-admin-link a {
    background: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.40);
}
.b2b-layout.theme-aurora .brand-title { color: #fce7f3; text-shadow: 0 0 8px rgba(244, 114, 182, 0.50); }

/* ── Carbon: sleek koyu gri + elektrik mavi (gaming hissi) ─────────── */
.b2b-layout.theme-carbon .b2b-sidebar {
    background: linear-gradient(180deg, #27272a 0%, #09090b 100%);
    color: #e4e4e7;
    border-right: 1px solid #18181b;
}
.b2b-layout.theme-carbon .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #1f1f23 0%, #0a0a0c 100%);
    border-bottom: 1px solid #27272a;
}
.b2b-layout.theme-carbon .b2b-nav li a:hover,
.b2b-layout.theme-carbon .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.18) 0%, transparent 100%);
    border-left-color: #38bdf8;
    color: #e0f2fe;
    box-shadow: inset 2px 0 0 #38bdf8, 0 0 24px rgba(56, 189, 248, 0.15) inset;
}
.b2b-layout.theme-carbon .sidebar-collapse-btn {
    background: #18181b; color: #38bdf8; border-color: #27272a;
}
.b2b-layout.theme-carbon .sidebar-collapse-btn:hover {
    background: #38bdf8; color: #09090b;
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.55);
}
.b2b-layout.theme-carbon .b2b-nav .badge-count {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
}
.b2b-layout.theme-carbon .sidebar-admin-link a {
    background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.40);
}
.b2b-layout.theme-carbon .brand-title { color: #e4e4e7; letter-spacing: 2px; }

/* ── Gül: asil bordo-gül + altın aksan ────────────────────────────── */
.b2b-layout.theme-rose .b2b-sidebar {
    background: linear-gradient(180deg, #9f1239 0%, #500724 100%);
    color: #fce7f3;
}
.b2b-layout.theme-rose .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #881337 0%, #6b0e2e 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
}
.b2b-layout.theme-rose .b2b-nav li a:hover,
.b2b-layout.theme-rose .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0.05) 100%);
    border-left-color: #fbbf24;
    color: #fff;
}
.b2b-layout.theme-rose .sidebar-collapse-btn {
    color: #9f1239; border-color: #fed7e2;
    background: #fff8f1;
}
.b2b-layout.theme-rose .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #500724;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.45);
}
.b2b-layout.theme-rose .b2b-nav .badge-count {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #500724;
    font-weight: 800;
}
.b2b-layout.theme-rose .sidebar-admin-link a {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #500724;
    font-weight: 700;
}
.b2b-layout.theme-rose .brand-title { color: #fbbf24; letter-spacing: 1.8px; }

/* ── Royal: kraliyet lacivert + altın aksanlar ─────────────────────── */
.b2b-layout.theme-royal .b2b-sidebar {
    background: linear-gradient(180deg, #1e1b4b 0%, #0f0c29 100%);
    color: #e0e7ff;
}
.b2b-layout.theme-royal .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #1e1b4b 0%, #312e81 100%);
    border-bottom: 1px solid rgba(251, 191, 36, 0.25);
}
.b2b-layout.theme-royal .b2b-nav li a:hover,
.b2b-layout.theme-royal .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.20) 0%, rgba(251, 191, 36, 0.04) 100%);
    border-left-color: #fbbf24;
    color: #fef3c7;
}
.b2b-layout.theme-royal .sidebar-collapse-btn {
    color: #1e1b4b; border-color: #fde68a; background: #fffbeb;
}
.b2b-layout.theme-royal .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); color: #1e1b4b;
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.50);
}
.b2b-layout.theme-royal .b2b-nav .badge-count {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #1e1b4b; font-weight: 800;
}
.b2b-layout.theme-royal .sidebar-admin-link a {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    color: #1e1b4b;
}
.b2b-layout.theme-royal .brand-title { color: #fbbf24; letter-spacing: 2.2px; text-shadow: 0 0 6px rgba(251, 191, 36, 0.40); }

/* ── Mint: taze nane yeşili + krem ─────────────────────────────────── */
.b2b-layout.theme-mint .b2b-sidebar {
    background: linear-gradient(180deg, #064e3b 0%, #022c22 100%);
    color: #d1fae5;
}
.b2b-layout.theme-mint .b2b-nav li a:hover,
.b2b-layout.theme-mint .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.25) 0%, rgba(52, 211, 153, 0.04) 100%);
    border-left-color: #34d399;
    color: #ecfdf5;
}
.b2b-layout.theme-mint .sidebar-collapse-btn {
    color: #064e3b; border-color: #a7f3d0;
}
.b2b-layout.theme-mint .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%); color: #022c22;
}
.b2b-layout.theme-mint .b2b-nav .badge-count {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.45);
}
.b2b-layout.theme-mint .sidebar-admin-link a {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}
.b2b-layout.theme-mint .brand-title { color: #d1fae5; }

/* ── Coral: mercan + krem ton ──────────────────────────────────────── */
.b2b-layout.theme-coral .b2b-sidebar {
    background: linear-gradient(180deg, #9a3412 0%, #431407 100%);
    color: #ffedd5;
}
.b2b-layout.theme-coral .b2b-nav li a:hover,
.b2b-layout.theme-coral .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.30) 0%, rgba(251, 146, 60, 0.05) 100%);
    border-left-color: #fb923c;
    color: #fff;
}
.b2b-layout.theme-coral .sidebar-collapse-btn {
    color: #9a3412; border-color: #fed7aa;
}
.b2b-layout.theme-coral .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); color: #fff;
}
.b2b-layout.theme-coral .b2b-nav .badge-count {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}
.b2b-layout.theme-coral .sidebar-admin-link a {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
}
.b2b-layout.theme-coral .brand-title { color: #ffedd5; }

/* ── Jade: derin yeşim + altın ─────────────────────────────────────── */
.b2b-layout.theme-jade .b2b-sidebar {
    background: linear-gradient(180deg, #134e4a 0%, #042f2e 100%);
    color: #ccfbf1;
}
.b2b-layout.theme-jade .b2b-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(251, 191, 36, 0.20);
}
.b2b-layout.theme-jade .b2b-nav li a:hover,
.b2b-layout.theme-jade .b2b-nav li a.active {
    background: linear-gradient(90deg, rgba(20, 184, 166, 0.22) 0%, rgba(251, 191, 36, 0.08) 100%);
    border-left-color: #fbbf24;
    color: #f0fdfa;
}
.b2b-layout.theme-jade .sidebar-collapse-btn {
    color: #134e4a; border-color: #99f6e4;
}
.b2b-layout.theme-jade .sidebar-collapse-btn:hover {
    background: linear-gradient(135deg, #14b8a6 0%, #fbbf24 100%); color: #042f2e;
}
.b2b-layout.theme-jade .b2b-nav .badge-count {
    background: linear-gradient(135deg, #fbbf24 0%, #14b8a6 100%);
    color: #042f2e; font-weight: 800;
}
.b2b-layout.theme-jade .sidebar-admin-link a {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}
.b2b-layout.theme-jade .brand-title { color: #fbbf24; letter-spacing: 1.8px; }

/* ════════════════════════════════════════════════════════════════════
   YATAY MENÜ YÜKSELİKLİĞİ — sadece layout-topbar için anlamlı
   3 seçenek: Normal (52px), Orta (68px), Yüksek (88px)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /* Normal — varsayılan, layout-topbar'da zaten 52px */

    .b2b-layout.layout-topbar.height-orta .b2b-sidebar {
        height: 68px !important;
        min-height: 68px !important;
    }
    .b2b-layout.layout-topbar.height-orta .b2b-nav li a {
        height: 68px;
        font-size: 14px;
        padding: 0 18px;
        gap: 10px;
    }
    .b2b-layout.layout-topbar.height-orta .b2b-nav-icon {
        font-size: 19px;
    }
    .b2b-layout.layout-topbar.height-orta .sidebar-admin-link a {
        height: 44px;
        margin: 12px 0;
        padding: 0 18px;
        font-size: 13px;
    }
    .b2b-layout.layout-topbar.height-orta .b2b-nav li a.active,
    .b2b-layout.layout-topbar.height-orta .b2b-nav li a:hover {
        border-bottom-width: 4px;
    }

    .b2b-layout.layout-topbar.height-yuksek .b2b-sidebar {
        height: 88px !important;
        min-height: 88px !important;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav li a {
        height: 88px;
        font-size: 14.5px;
        padding: 0 22px;
        gap: 12px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav-icon {
        font-size: 24px;
        line-height: 1;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav-text {
        font-size: 11.5px;
        letter-spacing: 0.4px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .b2b-layout.layout-topbar.height-yuksek .sidebar-admin-link a {
        height: 56px;
        margin: 16px 0;
        padding: 0 20px;
        font-size: 13px;
        flex-direction: column;
        gap: 4px;
        justify-content: center;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav .badge-count {
        position: absolute;
        top: 12px;
        right: 8px;
        margin-left: 0;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav li a {
        position: relative;
    }
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav li a.active,
    .b2b-layout.layout-topbar.height-yuksek .b2b-nav li a:hover {
        border-bottom-width: 4px;
    }
    .b2b-layout.layout-topbar.height-yuksek .sidebar-user {
        font-size: 12px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   LAYOUT: TOPBAR — yatay menü çubuğu (üstte tam genişlik)
   Stratejisi: flex-direction:column + display:contents ile DOM'u
   yeniden sıralayıp doğal akışta üstten alta dizeriz:
       1. b2b-topbar (müşteri info / döviz / widget) ← order:1
       2. b2b-sidebar (yatay nav menü)              ← order:2
       3. b2b-content (sayfa içeriği)               ← order:3
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    .b2b-layout.layout-topbar {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    /* b2b-main'i flex container'dan çıkar; çocukları doğrudan layout'a aksın */
    .b2b-layout.layout-topbar .b2b-main {
        display: contents;
        margin-left: 0;
    }

    /* Topbar üstte, full genişlikte */
    .b2b-layout.layout-topbar .b2b-topbar {
        order: 1 !important;
        position: relative !important;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        z-index: 51;
    }

    /* Sidebar → yatay menü çubuğu (topbar altında) */
    .b2b-layout.layout-topbar .b2b-sidebar {
        order: 2 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        flex-direction: row !important;
        z-index: 49;
        overflow: visible;
        transform: none !important;
    }

    /* Content en altta, kalan alanı kaplar */
    .b2b-layout.layout-topbar .b2b-content {
        order: 3 !important;
        flex: 1;
        padding: 20px;
    }

    .b2b-layout.layout-topbar .b2b-sidebar .sidebar-brand {
        display: none;
    }
    .b2b-layout.layout-topbar .sidebar-collapse-btn {
        display: none;
    }

    .b2b-layout.layout-topbar .b2b-nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex: 1;
        padding: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }
    .b2b-layout.layout-topbar .b2b-nav::-webkit-scrollbar { height: 4px; }
    .b2b-layout.layout-topbar .b2b-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.20); border-radius: 2px; }

    .b2b-layout.layout-topbar .b2b-nav li { flex-shrink: 0; }
    .b2b-layout.layout-topbar .b2b-nav li a {
        padding: 0 16px;
        height: 52px;
        flex-direction: row;
        gap: 8px;
        font-size: 13px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .b2b-layout.layout-topbar .b2b-nav li a:hover,
    .b2b-layout.layout-topbar .b2b-nav li a.active {
        border-left: none;
        border-bottom-color: var(--accent);
    }
    .b2b-layout.layout-topbar .b2b-nav-icon { font-size: 16px; }
    .b2b-layout.layout-topbar .b2b-nav .badge-count { margin-left: 4px; }

    /* Admin link + user — yatay menünün sağ tarafına */
    .b2b-layout.layout-topbar .sidebar-admin-link {
        padding: 0;
        display: flex;
        align-items: center;
        margin-right: 8px;
    }
    .b2b-layout.layout-topbar .sidebar-admin-link a {
        height: 36px;
        padding: 0 14px;
        margin: 8px 0;
    }
    .b2b-layout.layout-topbar .sidebar-user {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 0 14px;
        border-top: none;
        border-left: 1px solid rgba(255,255,255,0.15);
        font-size: 11px;
    }
    .b2b-layout.layout-topbar .sidebar-user-info { max-width: 180px; }
    .b2b-layout.layout-topbar .sidebar-logout { padding: 4px 8px; }

    /* Light/Sand temaları — kenar çizgisi alta */
    .b2b-layout.layout-topbar.theme-light .b2b-sidebar,
    .b2b-layout.layout-topbar.theme-sand .b2b-sidebar {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* ════════════════════════════════════════════════════════════════════
   GRID + TAB TEMASI (bağımsız axis — sadece müşteri sayfalarındaki
   .legacy-grid ve .rz-tabview'i etkiler; sidebar/buton dokunulmaz)
   ════════════════════════════════════════════════════════════════════ */

.b2b-layout.grid-tema-varsayilan {
    --grid-accent: #337ab7;
    --grid-header-bg: linear-gradient(180deg, #fbfcfd 0%, #eaeef3 100%);
    --grid-header-color: #2c3e50;
    --grid-hover-tint: #eaf3fb;
    --grid-row-selected: linear-gradient(90deg, #bad7ed 0%, #d2e4f4 50%, #e6f1fa 100%);
    --grid-row-selected-color: #1a365d;
    --tab-active-color: #337ab7;
    --tab-hover-bg: #f8fafc;
}

.b2b-layout.grid-tema-koyu {
    --grid-accent: #ef4444;
    --grid-header-bg: linear-gradient(180deg, #1d1d1d 0%, #0a0a0a 100%);
    --grid-header-color: #f5f5f5;
    --grid-hover-tint: #2d2d2d;
    --grid-hover-color: #ffffff;
    --grid-row-selected: linear-gradient(90deg, #991b1b 0%, #7f1d1d 50%, #450a0a 100%);
    --grid-row-selected-color: #ffffff;
    --tab-active-color: #ef4444;
    --tab-hover-bg: #1d1d1d;
}

.b2b-layout.grid-tema-forest {
    --grid-accent: #22c55e;
    --grid-header-bg: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    --grid-header-color: #14532d;
    --grid-hover-tint: #dcfce7;
    --grid-row-selected: linear-gradient(90deg, #bbf7d0 0%, #d1fae5 50%, #ecfdf5 100%);
    --grid-row-selected-color: #14532d;
    --tab-active-color: #16a34a;
    --tab-hover-bg: #f0fdf4;
}

.b2b-layout.grid-tema-rose {
    --grid-accent: #fbbf24;
    --grid-header-bg: linear-gradient(180deg, #fff7ed 0%, #ffe4e6 100%);
    --grid-header-color: #9f1239;
    --grid-hover-tint: #fce7f3;
    --grid-row-selected: linear-gradient(90deg, #fbcfe8 0%, #fde68a 50%, #fef3c7 100%);
    --grid-row-selected-color: #831843;
    --tab-active-color: #be185d;
    --tab-hover-bg: #fff7ed;
}

.b2b-layout.grid-tema-mor {
    --grid-accent: #a855f7;
    --grid-header-bg: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%);
    --grid-header-color: #4c1d95;
    --grid-hover-tint: #ede9fe;
    --grid-row-selected: linear-gradient(90deg, #ddd6fe 0%, #e9d5ff 50%, #f5f3ff 100%);
    --grid-row-selected-color: #4c1d95;
    --tab-active-color: #9333ea;
    --tab-hover-bg: #faf5ff;
}

.b2b-layout.grid-tema-okyanus {
    --grid-accent: #22d3ee;
    --grid-header-bg: linear-gradient(180deg, #ecfeff 0%, #cffafe 100%);
    --grid-header-color: #0c4a6e;
    --grid-hover-tint: #cffafe;
    --grid-row-selected: linear-gradient(90deg, #a5f3fc 0%, #cffafe 50%, #ecfeff 100%);
    --grid-row-selected-color: #0c4a6e;
    --tab-active-color: #0891b2;
    --tab-hover-bg: #ecfeff;
}

.b2b-layout.grid-tema-bordo {
    --grid-accent: #f59e0b;
    --grid-header-bg: linear-gradient(180deg, #fff7ed 0%, #fed7aa 100%);
    --grid-header-color: #7f1d1d;
    --grid-hover-tint: #ffedd5;
    --grid-row-selected: linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef3c7 100%);
    --grid-row-selected-color: #7f1d1d;
    --tab-active-color: #b45309;
    --tab-hover-bg: #fff7ed;
}

.b2b-layout.grid-tema-aurora {
    --grid-accent: #f472b6;
    --grid-header-bg: linear-gradient(180deg, #fdf4ff 0%, #fce7f3 100%);
    --grid-header-color: #5b21b6;
    --grid-hover-tint: #fae8ff;
    --grid-row-selected: linear-gradient(90deg, #fbcfe8 0%, #e9d5ff 50%, #dbeafe 100%);
    --grid-row-selected-color: #5b21b6;
    --tab-active-color: #be185d;
    --tab-hover-bg: #fdf4ff;
}

.b2b-layout.grid-tema-karbon {
    --grid-accent: #38bdf8;
    --grid-header-bg: linear-gradient(180deg, #27272a 0%, #18181b 100%);
    --grid-header-color: #f4f4f5;
    --grid-hover-tint: #3f3f46;
    --grid-hover-color: #ffffff;
    --grid-row-selected: linear-gradient(90deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
    --grid-row-selected-color: #ffffff;
    --tab-active-color: #38bdf8;
    --tab-hover-bg: #27272a;
}

.b2b-layout.grid-tema-gumus {
    --grid-accent: #475569;
    --grid-header-bg: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
    --grid-header-color: #0f172a;
    --grid-hover-tint: #e2e8f0;
    --grid-row-selected: linear-gradient(90deg, #cbd5e1 0%, #e2e8f0 50%, #f1f5f9 100%);
    --grid-row-selected-color: #0f172a;
    --tab-active-color: #475569;
    --tab-hover-bg: #f1f5f9;
}

.b2b-layout.grid-tema-mint {
    --grid-accent: #34d399;
    --grid-header-bg: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    --grid-header-color: #064e3b;
    --grid-hover-tint: #d1fae5;
    --grid-row-selected: linear-gradient(90deg, #a7f3d0 0%, #6ee7b7 50%, #d1fae5 100%);
    --grid-row-selected-color: #064e3b;
    --tab-active-color: #059669;
    --tab-hover-bg: #ecfdf5;
}

.b2b-layout.grid-tema-kum {
    --grid-accent: #b45309;
    --grid-header-bg: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    --grid-header-color: #3f2e0c;
    --grid-hover-tint: #fef3c7;
    --grid-row-selected: linear-gradient(90deg, #fde68a 0%, #fcd34d 50%, #fef3c7 100%);
    --grid-row-selected-color: #3f2e0c;
    --tab-active-color: #b45309;
    --tab-hover-bg: #fef9c3;
}

/* Radzen kendi --rz-grid-hover-* değişkenlerini grid temasıyla bağla — böylece
   Radzen'in `:not(.rz-state-highlight)` ile sınırlı kuralı da doğru rengi alır. */
.b2b-layout .legacy-grid {
    --rz-grid-hover-background-color: var(--grid-hover-tint, #eaf3fb);
    --rz-grid-hover-color: var(--grid-hover-color, inherit);
}

/* Tek kural seti — token'ları okur. Mevcut .legacy-grid kurallarını
   (satır 21-108) override eder; aynı specificity, en sondaki kazanır. */
.b2b-layout .legacy-grid .rz-grid-table thead th {
    background: var(--grid-header-bg, linear-gradient(180deg,#fbfcfd,#eaeef3)) !important;
    color: var(--grid-header-color, #2c3e50) !important;
    border-bottom: 2px solid var(--grid-accent, #337ab7) !important;
}
/* Header descendant text — link/span içeriklerinin kendi rengini override et (koyu temalarda kritik) */
.b2b-layout .legacy-grid .rz-grid-table thead th,
.b2b-layout .legacy-grid .rz-grid-table thead th *:not(svg):not(path):not(i),
.b2b-layout .legacy-grid .rz-grid-table thead th .rz-column-title,
.b2b-layout .legacy-grid .rz-grid-table thead th .rz-column-title-content {
    color: var(--grid-header-color, #2c3e50) !important;
}

/* Hover — `:not(.rz-state-highlight)` istisnasını ATLA: tüm hover satırlara uygula.
   Radzen'in kendi kuralı highlight'lı satırı dışlıyor; biz içeriyoruz. */
.b2b-layout .legacy-grid .rz-data-row:hover > td,
.b2b-layout .legacy-grid tbody > tr:hover > td {
    background-color: var(--grid-hover-tint, #eaf3fb) !important;
    color: var(--grid-hover-color, inherit) !important;
    box-shadow: inset 3px 0 0 var(--grid-accent, #337ab7) !important;
}
.b2b-layout .legacy-grid .rz-data-row:hover .rz-cell-data,
.b2b-layout .legacy-grid tbody > tr:hover .rz-cell-data {
    color: var(--grid-hover-color, inherit) !important;
}
/* Hover satırdaki TÜM içerikler (link, span, badge vs.) — koyu temalarda beyaz zorla.
   Kampanya satırı hariç (kendi kontrast rengini korur). */
.b2b-layout.grid-tema-koyu .legacy-grid .rz-data-row:not(.grid-row-campaign):hover > td,
.b2b-layout.grid-tema-koyu .legacy-grid .rz-data-row:not(.grid-row-campaign):hover > td *:not(svg):not(path),
.b2b-layout.grid-tema-karbon .legacy-grid .rz-data-row:not(.grid-row-campaign):hover > td,
.b2b-layout.grid-tema-karbon .legacy-grid .rz-data-row:not(.grid-row-campaign):hover > td *:not(svg):not(path) {
    color: #ffffff !important;
}

/* Kampanya satırı hover'da kendi --kampanya-color'unu kullansın (genel hover rengini override etme) */
.b2b-layout .legacy-grid .grid-row-campaign:hover > td,
.b2b-layout .legacy-grid .rz-data-row.grid-row-campaign:hover > td {
    color: var(--kampanya-color, inherit) !important;
}

.b2b-layout .legacy-grid .grid-row-selected > td,
.b2b-layout .legacy-grid .rz-data-row.grid-row-selected > td {
    background: var(--grid-row-selected, linear-gradient(90deg,#bad7ed,#d2e4f4,#e6f1fa)) !important;
    color: var(--grid-row-selected-color, inherit) !important;
    box-shadow: inset 4px 0 0 var(--grid-accent, #337ab7) !important;
}
/* Seçili satırdaki link/badge/span text içerikleri — koyu temalarda kontrastı koru */
.b2b-layout .legacy-grid .grid-row-selected > td a,
.b2b-layout .legacy-grid .rz-data-row.grid-row-selected > td a,
.b2b-layout .legacy-grid .grid-row-selected > td span,
.b2b-layout .legacy-grid .rz-data-row.grid-row-selected > td span {
    color: var(--grid-row-selected-color, inherit) !important;
}

/* Tab kontrolleri — Radzen TabView. Aktif tab Listele butonu temasıyla
   uyumlu (button-like): koyu zemin + beyaz text/ikon (aşağıda override). */
.b2b-layout .rz-tabview .rz-tabview-nav li:hover:not(.rz-tabview-selected):not(.rz-state-active) {
    background: var(--tab-hover-bg, #f8fafc) !important;
}

/* İçerik kutusunun üst sınırı (tab altındaki ince çizgi) — kaldır, küçük bir nefes payı bırak */
.b2b-layout .rz-tabview.rz-tabview-top > .rz-tabview-panels,
.b2b-layout .rz-tabview > .rz-tabview-panels {
    border-top: none !important;
    padding-top: 8px !important;
}

/* Tablar button-like — desktop + mobile, GioNextCRM tarzı (icon + text) */
.b2b-layout .rz-tabview .rz-tabview-nav,
.b2b-layout .rz-tabview.rz-tabview-top > .rz-tabview-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 8px 4px !important;
    border-bottom: none !important;
}

/* Ürün Ara grid footer — arama süresi + mod (Hızlı/Standart kıyaslama) */
.arama-perf-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    margin-top: 4px;
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    width: fit-content;
}
.arama-perf-modu {
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}
.arama-perf-modu.perf-hizli {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}
.arama-perf-modu.perf-standart {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.arama-perf-ms {
    font-family: 'SF Mono', Menlo, monospace;
    font-weight: 600;
    color: #0f172a;
}
.arama-perf-hint {
    color: #94a3b8;
    font-size: 11px;
}

/* ── Şema scraping log paneli — terminal görünümü ── */
.sema-log-panel {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    margin-bottom: 16px;
    max-width: 920px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}
.sema-log-header {
    background: #1e293b;
    color: #e2e8f0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #334155;
}
.sema-log-body {
    max-height: 320px;
    overflow-y: auto;
    padding: 8px 12px;
    font-family: 'SF Mono', Menlo, Monaco, 'Courier New', monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: #cbd5e1;
}
.sema-log-line {
    white-space: pre-wrap;
    word-break: break-word;
    border-left: 2px solid transparent;
    padding-left: 4px;
}
.sema-log-line:hover { background: rgba(255, 255, 255, 0.04); border-left-color: #38bdf8; }

/* ── Talep modülü ── */
.talep-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid transparent;
}
.talep-badge-bekleme { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.talep-badge-bolum   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.talep-badge-son     { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.talep-badge-red     { background: #fee2e2; color: #991b1b; border-color: #fecaca; }

/* Talep mobile kart görünümü — siparis-mobil-kart benzeri */
.talep-list-desktop { display: block; }
.talep-list-mobile  { display: none; }

@media (max-width: 1199px) {
    .talep-list-desktop { display: none; }
    .talep-list-mobile  { display: block; }
}

.talep-mobil-kart {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.talep-mobil-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.talep-mobil-evrak {
    font-weight: 700;
    color: #1a237e;
    font-family: 'SF Mono', Menlo, monospace;
}
.talep-mobil-line {
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
    line-height: 1.4;
}
.talep-mobil-line.talep-mobil-aciklama {
    color: #94a3b8;
    font-size: 12px;
}
.talep-mobil-line strong { color: #0f172a; font-weight: 600; }

/* Sektör Otomotiv değilse Ürün Ara'da tek sekme (Stok) kalır → tab başlığını gizle */
.b2b-layout .rz-tabview.single-tab > .rz-tabview-nav,
.b2b-layout .rz-tabview.single-tab .rz-tabview-nav {
    display: none !important;
}
.b2b-layout .rz-tabview.single-tab > .rz-tabview-panels,
.b2b-layout .rz-tabview.single-tab .rz-tabview-panels {
    padding-top: 0 !important;
}
.b2b-layout .rz-tabview .rz-tabview-nav li {
    flex: 0 0 auto !important;
    margin: 0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    transition: all 150ms ease !important;
}
.b2b-layout .rz-tabview .rz-tabview-nav li:hover:not(.rz-state-active):not(.rz-tabview-selected) {
    background: #eef2f7 !important;
    border-color: #94a3b8 !important;
    transform: translateY(-1px);
}
.b2b-layout .rz-tabview .rz-tabview-nav li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
}
.b2b-layout .rz-tabview .rz-tabview-nav li a .rzi,
.b2b-layout .rz-tabview .rz-tabview-nav li a .material-icons,
.b2b-layout .rz-tabview .rz-tabview-nav li a i {
    font-size: 16px !important;
    color: inherit !important;
}
.b2b-layout .rz-tabview .rz-tabview-nav li.rz-state-active,
.b2b-layout .rz-tabview .rz-tabview-nav li.rz-tabview-selected {
    background: var(--btn-listele-bg, #1a2848) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px var(--btn-listele-shadow, rgba(26, 40, 72, 0.25)) !important;
}
html body .b2b-layout .rz-tabview .rz-tabview-nav li.rz-state-active,
html body .b2b-layout .rz-tabview .rz-tabview-nav li.rz-state-active *,
html body .b2b-layout .rz-tabview .rz-tabview-nav li.rz-tabview-selected,
html body .b2b-layout .rz-tabview .rz-tabview-nav li.rz-tabview-selected * {
    color: #fff !important;
}

/* Mobilde daha kompakt — gerekirse text gizle, sadece icon */
@media (max-width: 480px) {
    .b2b-layout .rz-tabview .rz-tabview-nav li a {
        padding: 7px 10px !important;
        font-size: 11px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   SİPARİŞLERİM — Mobil/Dar viewport kart görünümü (grid yerine)
   ════════════════════════════════════════════════════════════════════ */
.siparis-list-mobile { display: none; }
@media (max-width: 1200px) {
    .siparis-list-desktop { display: none; }
    .siparis-list-mobile {
        display: flex; flex-direction: column; gap: 10px;
        padding: 8px 0;
    }
}
.siparis-cards-empty {
    text-align: center; color: #94a3b8; padding: 30px 12px; font-size: 14px;
}
.siparis-mobil-kart {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eef2f7;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.siparis-mobil-kart:active { transform: scale(0.99); }
.siparis-kart-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.siparis-kart-evrak {
    font-family: 'SF Mono', Menlo, monospace; font-weight: 700;
    color: #1a2848; font-size: 13px;
}
.siparis-kart-tarih { color: #64748b; font-size: 11px; }
.siparis-kart-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.siparis-kart-row {
    display: flex; gap: 8px; font-size: 12px; line-height: 1.35;
}
.siparis-kart-label {
    color: #94a3b8; min-width: 60px; font-size: 10.5px;
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    padding-top: 2px;
}
.siparis-kart-value { color: #1f2937; flex: 1; min-width: 0; word-break: break-word; }
.siparis-kart-value small { color: #64748b; }
.siparis-kart-footer {
    display: flex; align-items: center; gap: 8px;
    padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.siparis-kart-toplam-lbl {
    font-size: 10.5px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em;
    font-weight: 600;
}
.siparis-kart-toplam-val {
    font-size: 14px; font-weight: 700; color: var(--vardar-blue, #1a2848);
    flex: 1;
}
.siparis-kart-detay-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #1a2848; color: #fff; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 150ms;
}
.siparis-kart-detay-btn:hover { background: #2a3a5e; }

/* Bekleyen Ürünler kart varyantı (resim + 3'lü miktar grid) */
.bekleyen-kart .bekleyen-kart-top {
    display: grid; grid-template-columns: 64px 1fr; gap: 10px;
    margin-bottom: 8px; padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}
.bekleyen-kart-thumb {
    width: 64px; height: 64px; object-fit: contain;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    cursor: zoom-in;
}
.bekleyen-kart-info { min-width: 0; }
.bekleyen-kart-stok {
    font-family: 'SF Mono', Menlo, monospace; font-weight: 700;
    color: #1a2848; font-size: 12px;
}
.bekleyen-kart-aciklama {
    font-size: 12px; color: #1f2937; font-weight: 500;
    margin: 2px 0;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.bekleyen-kart-miktar {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
    margin-bottom: 8px;
    background: #f8fafc; padding: 6px; border-radius: 6px;
}
.bekleyen-mik-cell {
    display: flex; flex-direction: column; align-items: center;
    font-size: 11.5px; gap: 2px;
}
.bekleyen-mik-cell .siparis-kart-label { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   EKSTRE — Mobil/Dar viewport kart görünümü
   ════════════════════════════════════════════════════════════════════ */
.ekstre-list-mobile { display: none; }
@media (max-width: 1200px) {
    .ekstre-list-desktop { display: none; }
    .ekstre-list-mobile {
        display: flex; flex-direction: column; gap: 10px;
        padding: 8px 0;
    }
}
.ekstre-mobil-kart {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eef2f7;
    border-left: 4px solid #cbd5e1;
}
.ekstre-mobil-kart.borc { border-left-color: #d9534f; }
.ekstre-mobil-kart.alacak { border-left-color: #5cb85c; }
.ekstre-kart-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9;
    gap: 8px;
}
.ekstre-kart-evrak {
    font-family: 'SF Mono', Menlo, monospace; font-weight: 700;
    color: #1a2848; font-size: 12.5px;
}
.ekstre-kart-tip {
    background: #f1f5f9; color: #475569;
    padding: 2px 6px; border-radius: 4px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
.ekstre-kart-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ekstre-kart-row { display: flex; gap: 8px; font-size: 11.5px; }
.ekstre-kart-label {
    color: #94a3b8; min-width: 70px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    padding-top: 1px;
}
.ekstre-kart-value { color: #1f2937; flex: 1; min-width: 0; }
.ekstre-kart-footer {
    display: flex; align-items: center; gap: 8px;
    padding-top: 8px; border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.ekstre-kart-tutar {
    font-size: 13px; font-weight: 700;
    flex: 1;
}
.ekstre-kart-tutar.borc { color: #d9534f; }
.ekstre-kart-tutar.alacak { color: #2e7d32; }
.ekstre-kart-actions { display: flex; gap: 6px; }

/* ════════════════════════════════════════════════════════════════════
   ÖDEME — POS / Nakit mobil/dar viewport kart görünümü
   ════════════════════════════════════════════════════════════════════ */
.odeme-list-mobile { display: none; }
@media (max-width: 1200px) {
    .odeme-list-desktop { display: none; }
    .odeme-list-mobile {
        display: flex; flex-direction: column; gap: 10px;
        padding: 8px 0;
    }
}
/* POS/Nakit kart listesi — Havale gibi her ekranda kart (responsive grid) */
.odeme-kart-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px; padding: 6px 2px;
}
.odeme-daha-fazla { display: flex; justify-content: center; padding: 14px 0 4px; }

/* ════════ AI İçgörü paneli (Dashboard + AdminDashboard ortak bileşeni) ════════ */
.dash-ai { margin-top:20px; background:linear-gradient(180deg,#faf5ff,#fff); border:1px solid #e9d5ff; border-radius:12px; padding:14px 16px; }
.dash-ai-head { display:flex; align-items:center; gap:10px; }
.dash-ai-title { font-weight:800; color:#7c3aed; font-size:15px; margin-right:auto; }
.dash-ai-body { margin-top:12px; }
.dash-ai-kapsam { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:12px; padding:10px 12px; background:#faf5ff; border:1px solid #e9d5ff; border-radius:10px; }
.dak-et { font-size:12px; font-weight:700; color:#7c3aed; }
.dak-input { flex:1; min-width:200px; height:34px; border:1px solid #d8b4fe; border-radius:8px; padding:0 10px; font-size:13px; }
.dak-btn { background:#7c3aed; color:#fff; border:none; border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.dak-btn:disabled { opacity:.6; }
.dak-genel { background:#fff; color:#6d28d9; border:1px solid #d8b4fe; }
.dak-sec { background:#16a34a; }
.dak-sonuc { width:100%; margin-top:8px; display:flex; flex-direction:column; gap:4px; max-height:240px; overflow:auto; }
.dak-sonuc-baslik { font-size:11.5px; font-weight:700; color:#92400e; margin-bottom:2px; }
.dak-sonuc-item { text-align:left; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:7px 10px; font-size:12.5px; color:#1f2937; cursor:pointer; }
.dak-sonuc-item:hover { background:#faf5ff; border-color:#d8b4fe; }
.dak-sonuc-item small { color:#94a3b8; }
.dak-aktif { font-size:12px; font-weight:700; color:#475569; margin-left:auto; }
.grafik-kapsam { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:#475569; cursor:pointer; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:5px 10px; }
.grafik-kapsam input { accent-color:#7c3aed; }
.dash-stat-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:14px; }
.dash-stat-card { background:#fff; border:1px solid #ede9fe; border-left:4px solid #a78bfa; border-radius:10px; padding:10px 12px; }
.dash-stat-cards .dash-stat-card:nth-child(1) { border-left-color:#22c55e; }
.dash-stat-cards .dash-stat-card:nth-child(2) { border-left-color:#3b82f6; }
.dash-stat-cards .dash-stat-card:nth-child(3) { border-left-color:#14b8a6; }
.dash-stat-cards .dash-stat-card:nth-child(4) { border-left-color:#f59e0b; }
.dash-stat-cards .dash-stat-card:nth-child(5) { border-left-color:#8b5cf6; }
.dash-stat-cards .dash-stat-card:nth-child(6) { border-left-color:#ef4444; }
.dsc-ust { font-size:11.5px; color:#7c3aed; font-weight:700; }
.dsc-deger { font-size:18px; font-weight:800; color:#1f2937; margin:3px 0; }
.dsc-deger.dsc-up { color:#16a34a; }
.dsc-deger.dsc-down { color:#dc2626; }
.dsc-deger.dsc-flat { color:#6b7280; }
.dsc-segment { font-size:15px; color:#6d28d9; }
.dsc-alt { font-size:11px; color:#94a3b8; }
.dash-ai-chart { background:#fff; border:1px solid #ede9fe; border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.dash-ai-chart-title { font-size:12.5px; font-weight:700; color:#7c3aed; margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.dash-ai-chart-kapat { margin-left:auto; background:#f3e8ff; color:#6d28d9; border:none; border-radius:6px; width:22px; height:22px; cursor:pointer; font-size:12px; line-height:1; }
.dash-ai-empty { color:#888; font-size:13px; padding:8px 0; }
.dash-ai-yorum { background:#fff; border:1px solid #ede9fe; border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.6; color:#1f2937; }
.dash-ai-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.dash-ai-chip { background:#f3e8ff; color:#6d28d9; border:none; border-radius:16px; padding:7px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.dash-ai-chip:hover { background:#e9d5ff; }
.dash-ai-chip-ana { background:#7c3aed; color:#fff; }
.dash-ai-chip-ana:hover { background:#6d28d9; }
.dash-ai-chip-ana:disabled { opacity:.55; }
.dash-ai-history { margin-top:12px; display:flex; flex-direction:column; gap:10px; }
.dash-ai-qa { background:#fff; border:1px solid #ede9fe; border-radius:8px; padding:10px 12px; }
.dash-ai-q { font-weight:700; color:#5b21b6; font-size:13px; margin-bottom:6px; }
.dash-ai-a { font-size:13px; line-height:1.55; color:#1f2937; }
.dash-ai-input { display:flex; gap:8px; margin-top:12px; }
.dash-ai-input input { flex:1; height:38px; border:1px solid #d8b4fe; border-radius:8px; padding:0 12px; font-size:13.5px; }
.dash-ai-input button { background:linear-gradient(135deg,#8e2de2,#4a00e0); color:#fff; border:none; border-radius:8px; width:46px; font-size:16px; font-weight:700; cursor:pointer; }
.dash-ai-input button:disabled { opacity:.5; }
.odeme-mobil-kart {
    background: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid #eef2f7;
}
.odeme-kart-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid #f1f5f9; gap: 8px;
}
.odeme-kart-evrak {
    font-family: 'SF Mono', Menlo, monospace; font-weight: 700;
    color: #1a2848; font-size: 12.5px;
}
.odeme-kart-body { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.odeme-kart-row { display: flex; gap: 8px; font-size: 11.5px; }
.odeme-kart-label {
    color: #94a3b8; min-width: 78px; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
    padding-top: 1px;
}
.odeme-kart-value { color: #1f2937; flex: 1; min-width: 0; }
.odeme-kart-value small { color: #64748b; }
.odeme-kart-footer {
    display: flex; align-items: center; gap: 8px;
    padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.odeme-kart-tutar { font-size: 14px; font-weight: 700; flex: 1; }
.odeme-kart-tutar.pos { color: #2e7d32; }
.odeme-kart-tutar.nakit { color: #1565c0; }
.odeme-kart-makbuz-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: #d9534f; color: #fff; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 150ms;
}
.odeme-kart-makbuz-btn:hover { background: #c9302c; }
.b2b-layout .rz-tabview > .rz-tabview-panels > .rz-tabview-panel {
    padding-top: 0 !important;
}

/* Pagination — Radzen DataGrid alt kısmı (rz-pager / rz-pager-numeric-button).
   Radzen 10.x sınıf adları: .rz-pager + .rz-pager-numeric-button.
   Hem CSS değişkenleri hem doğrudan selector'lerle çift cephe override. */
.b2b-layout .legacy-grid {
    --rz-pager-numeric-button-selected-background-color: var(--grid-accent, #337ab7);
    --rz-pager-numeric-button-selected-color: #fff;
    --rz-pager-numeric-button-background-color: transparent;
    --rz-pager-numeric-button-color: var(--grid-accent, #337ab7);
    --rz-pager-numeric-button-hover-background-color: var(--grid-hover-tint, #eaf3fb);
    --rz-pager-numeric-button-hover-color: var(--grid-accent, #337ab7);
    --rz-pager-back-button-color: var(--grid-accent, #337ab7);
    --rz-pager-back-button-background-color: transparent;
    --rz-pager-next-button-color: var(--grid-accent, #337ab7);
    --rz-pager-next-button-background-color: transparent;
}

.b2b-layout .legacy-grid .rz-pager-numeric-button.rz-state-active,
.b2b-layout .legacy-grid .rz-pager .rz-pager-numeric-button.rz-state-active,
.b2b-layout .legacy-grid .rz-pager-numeric-button.rz-state-active:hover,
.b2b-layout .legacy-grid .rz-pager-numeric-button.rz-state-active:focus {
    background: var(--grid-accent, #337ab7) !important;
    background-color: var(--grid-accent, #337ab7) !important;
    color: #fff !important;
    border-color: var(--grid-accent, #337ab7) !important;
}
.b2b-layout .legacy-grid .rz-pager-numeric-button:hover:not(.rz-state-active),
.b2b-layout .legacy-grid .rz-pager-element:hover:not(.rz-state-active),
.b2b-layout .legacy-grid .rz-pager-first:hover,
.b2b-layout .legacy-grid .rz-pager-last:hover,
.b2b-layout .legacy-grid .rz-pager-next:hover,
.b2b-layout .legacy-grid .rz-pager-back:hover {
    background: var(--grid-hover-tint, #eaf3fb) !important;
    background-color: var(--grid-hover-tint, #eaf3fb) !important;
    color: var(--grid-accent, #337ab7) !important;
}
/* Aktif olmayan numerik buton metni ve oklar — accent rengi */
.b2b-layout .legacy-grid .rz-pager-numeric-button:not(.rz-state-active),
.b2b-layout .legacy-grid .rz-pager-first,
.b2b-layout .legacy-grid .rz-pager-last,
.b2b-layout .legacy-grid .rz-pager-next,
.b2b-layout .legacy-grid .rz-pager-back {
    color: var(--grid-accent, #337ab7) !important;
}

/* ════════════════════════════════════════════════════════════════════
   BUTON TEMASI (bağımsız axis — sadece .btn-ara / .btn-temizle /
   .btn-listele class'ı verilen butonları etkiler)
   ════════════════════════════════════════════════════════════════════ */

.b2b-layout.btn-tema-varsayilan {
    --btn-ara-bg: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --btn-ara-shadow: rgba(17, 153, 142, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #ee0979 0%, #ff6a00 100%);
    --btn-temizle-shadow: rgba(238, 9, 121, 0.30);
    --btn-listele-bg: #337ab7;
    --btn-listele-shadow: rgba(51, 122, 183, 0.30);
}

.b2b-layout.btn-tema-kurumsal {
    --btn-ara-bg: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    --btn-ara-shadow: rgba(30, 60, 114, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --btn-temizle-shadow: rgba(245, 158, 11, 0.35);
    --btn-listele-bg: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    --btn-listele-shadow: rgba(15, 23, 42, 0.35);
}

.b2b-layout.btn-tema-pastel {
    --btn-ara-bg: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
    --btn-ara-shadow: rgba(124, 58, 237, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    --btn-temizle-shadow: rgba(225, 29, 72, 0.30);
    --btn-listele-bg: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    --btn-listele-shadow: rgba(79, 70, 229, 0.35);
}

.b2b-layout.btn-tema-mono {
    --btn-ara-bg: linear-gradient(135deg, #475569 0%, #1e293b 100%);
    --btn-ara-shadow: rgba(30, 41, 59, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    --btn-temizle-shadow: rgba(100, 116, 139, 0.30);
    --btn-listele-bg: #0f172a;
    --btn-listele-shadow: rgba(15, 23, 42, 0.40);
}

.b2b-layout.btn-tema-okyanus {
    --btn-ara-bg: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --btn-ara-shadow: rgba(8, 145, 178, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
    --btn-temizle-shadow: rgba(194, 65, 12, 0.35);
    --btn-listele-bg: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%);
    --btn-listele-shadow: rgba(12, 74, 110, 0.40);
}

.b2b-layout.btn-tema-bordo {
    --btn-ara-bg: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    --btn-ara-shadow: rgba(217, 119, 6, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #7f1d1d 0%, #450a0a 100%);
    --btn-temizle-shadow: rgba(127, 29, 29, 0.40);
    --btn-listele-bg: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    --btn-listele-shadow: rgba(120, 53, 15, 0.35);
}

.b2b-layout.btn-tema-aurora {
    --btn-ara-bg: linear-gradient(135deg, #f472b6 0%, #db2777 100%);
    --btn-ara-shadow: rgba(219, 39, 119, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    --btn-temizle-shadow: rgba(99, 102, 241, 0.35);
    --btn-listele-bg: linear-gradient(135deg, #5b21b6 0%, #1e3a8a 50%, #2563eb 100%);
    --btn-listele-shadow: rgba(91, 33, 182, 0.40);
}

.b2b-layout.btn-tema-mint {
    --btn-ara-bg: linear-gradient(135deg, #34d399 0%, #059669 100%);
    --btn-ara-shadow: rgba(5, 150, 105, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    --btn-temizle-shadow: rgba(234, 88, 12, 0.35);
    --btn-listele-bg: linear-gradient(135deg, #064e3b 0%, #022c22 100%);
    --btn-listele-shadow: rgba(6, 78, 59, 0.40);
}

.b2b-layout.btn-tema-jade {
    --btn-ara-bg: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%);
    --btn-ara-shadow: rgba(15, 118, 110, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #fbbf24 0%, #b45309 100%);
    --btn-temizle-shadow: rgba(180, 83, 9, 0.35);
    --btn-listele-bg: linear-gradient(135deg, #134e4a 0%, #042f2e 100%);
    --btn-listele-shadow: rgba(19, 78, 74, 0.40);
}

/* Tek kural seti — Radzen butonun internal class'larını override etmek
   için !important şart. */
.b2b-layout .btn-ara,
.b2b-layout .btn-ara.rz-button {
    background: var(--btn-ara-bg) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px var(--btn-ara-shadow) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
.b2b-layout .btn-temizle,
.b2b-layout .btn-temizle.rz-button {
    background: var(--btn-temizle-bg) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px var(--btn-temizle-shadow) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
.b2b-layout .btn-listele,
.b2b-layout .btn-listele.rz-button {
    background: var(--btn-listele-bg) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 6px var(--btn-listele-shadow) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* ════════════════════════════════════════════════════════════════════
   FORM TEMASI (4. bağımsız axis — DropDown / CheckBox / TextBox /
   DatePicker / Switch / RadioButton focus + işaretli durumlarını sürer)
   ════════════════════════════════════════════════════════════════════ */

.b2b-layout.form-tema-varsayilan { --form-accent: #337ab7; --form-hover-tint: #eaf3fb; }
.b2b-layout.form-tema-koyu       { --form-accent: #C90000; --form-hover-tint: #fee2e2; }
.b2b-layout.form-tema-forest     { --form-accent: #22c55e; --form-hover-tint: #dcfce7; }
.b2b-layout.form-tema-rose       { --form-accent: #fbbf24; --form-hover-tint: #fce7f3; }
.b2b-layout.form-tema-mor        { --form-accent: #a855f7; --form-hover-tint: #ede9fe; }
.b2b-layout.form-tema-okyanus    { --form-accent: #22d3ee; --form-hover-tint: #cffafe; }
.b2b-layout.form-tema-aurora     { --form-accent: #f472b6; --form-hover-tint: #fae8ff; }
.b2b-layout.form-tema-karbon     { --form-accent: #38bdf8; --form-hover-tint: #e0f2fe; }
.b2b-layout.form-tema-mint       { --form-accent: #34d399; --form-hover-tint: #d1fae5; }
.b2b-layout.form-tema-kum        { --form-accent: #b45309; --form-hover-tint: #fef3c7; }

/* Radzen input/dropdown/datepicker/checkbox CSS değişkenlerini --form-accent'e yönlendir */
.b2b-layout {
    --rz-input-focus-border: 1px solid var(--form-accent, #337ab7);
    /* Material teması altta ayrı border-block-end kullanıyor; onu da bağla */
    --rz-input-focus-border-block-end: 1px solid var(--form-accent, #337ab7);
    --rz-input-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--form-accent, #337ab7) 22%, transparent);
    --rz-input-focus-outline: 0 none;
    --rz-input-hover-border: 1px solid color-mix(in srgb, var(--form-accent, #337ab7) 60%, #cbd5e1);
    --rz-input-hover-border-block-end: 1px solid color-mix(in srgb, var(--form-accent, #337ab7) 60%, #cbd5e1);
    --rz-dropdown-open-border: 1px solid var(--form-accent, #337ab7);
    --rz-dropdown-item-selected-background-color: var(--form-hover-tint, #eaf3fb);
    --rz-dropdown-item-selected-color: var(--form-accent, #337ab7);
    --rz-datepicker-trigger-icon-color: var(--form-accent, #337ab7);
    --rz-datepicker-trigger-icon-hover-color: var(--form-accent, #337ab7);
    --rz-checkbox-focus-outline: 2px solid color-mix(in srgb, var(--form-accent, #337ab7) 35%, transparent);
}

/* Fallback: değişkenleri okumayan/eski sürümlerde alt kenarı zorla — focus + hover */
.b2b-layout .rz-textbox:focus,
.b2b-layout .rz-textarea:focus,
.b2b-layout .rz-numeric:focus,
.b2b-layout .rz-dropdown:focus,
.b2b-layout .rz-multiselect:focus,
.b2b-layout .rz-autocomplete:focus-within,
.b2b-layout .rz-datepicker > .rz-inputtext:focus,
.b2b-layout .rz-state-focused .rz-form-field-content {
    border-bottom-color: var(--form-accent, #337ab7) !important;
}
.b2b-layout .rz-textbox:hover:not(:disabled):not(.rz-state-disabled),
.b2b-layout .rz-textarea:hover:not(:disabled):not(.rz-state-disabled),
.b2b-layout .rz-numeric:hover:not(:disabled):not(.rz-state-disabled),
.b2b-layout .rz-dropdown:hover:not(.rz-state-disabled),
.b2b-layout .rz-multiselect:hover:not(.rz-state-disabled),
.b2b-layout .rz-autocomplete:hover:not(.rz-state-disabled),
.b2b-layout .rz-datepicker > .rz-inputtext:hover:not(:disabled):not(.rz-state-disabled) {
    border-bottom-color: color-mix(in srgb, var(--form-accent, #337ab7) 60%, #cbd5e1) !important;
}

/* Aktif Müşteri seçici (topbar kartı) — Form Teması'nı izler */
.b2b-layout .musteri-topbar-card:hover {
    border-color: var(--form-accent, #337ab7) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--form-accent, #337ab7) 22%, transparent) !important;
}
.b2b-layout .musteri-topbar-icon {
    background: linear-gradient(135deg,
        var(--form-accent, #337ab7) 0%,
        color-mix(in srgb, var(--form-accent, #337ab7) 75%, #000) 100%) !important;
}
.b2b-layout .musteri-topbar-change {
    color: var(--form-accent, #337ab7) !important;
}

/* Reklam Carousel — Form Teması'nı izler (aktif nokta + hover okları) */
.b2b-layout .reklam-dot.aktif {
    background: var(--form-accent, #C90000) !important;
    border-color: color-mix(in srgb, var(--form-accent, #C90000) 25%, #fff) !important;
}
.b2b-layout .reklam-arrow:hover {
    background: color-mix(in srgb, var(--form-accent, #C90000) 85%, transparent) !important;
}

/* Mobil/kart görünümünde seçili kart çerçevesi — Form Teması'nı izler */
.b2b-layout .stok-mobil-kart.selected,
.b2b-layout .sepet-mobil-kart.secili {
    border-color: var(--form-accent, #337ab7) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--form-accent, #337ab7) 18%, transparent),
                0 4px 14px rgba(0, 0, 0, 0.08) !important;
}
/* Hover'da hafif aksan ipucu (idle border korunur) */
.b2b-layout .stok-mobil-kart:hover:not(.selected),
.b2b-layout .sepet-mobil-kart:hover:not(.secili) {
    border-color: color-mix(in srgb, var(--form-accent, #337ab7) 50%, #cbd5e1) !important;
}

/* ════════════════════════════════════════════════════════════════════
   KAMPANYA SATIRI VURGU RENGİ (.legacy-grid > .grid-row-campaign)
   + GRİD SEÇİLİ SATIR GRADIENT TOGGLE
   ════════════════════════════════════════════════════════════════════ */

.b2b-layout.kampanya-tema-sari    { --kampanya-bg: #fff6c8; --kampanya-bg-hover: #fff0a5; --kampanya-color: #5b4500; }
.b2b-layout.kampanya-tema-mint    { --kampanya-bg: #d1fae5; --kampanya-bg-hover: #a7f3d0; --kampanya-color: #065f46; }
.b2b-layout.kampanya-tema-pembe   { --kampanya-bg: #fce7f3; --kampanya-bg-hover: #fbcfe8; --kampanya-color: #9d174d; }
.b2b-layout.kampanya-tema-turuncu { --kampanya-bg: #ffedd5; --kampanya-bg-hover: #fed7aa; --kampanya-color: #9a3412; }
.b2b-layout.kampanya-tema-mor     { --kampanya-bg: #ede9fe; --kampanya-bg-hover: #ddd6fe; --kampanya-color: #5b21b6; }
.b2b-layout.kampanya-tema-mavi    { --kampanya-bg: #dbeafe; --kampanya-bg-hover: #bfdbfe; --kampanya-color: #1e3a8a; }
.b2b-layout.kampanya-tema-kapali  { --kampanya-bg: transparent; --kampanya-bg-hover: var(--grid-hover-tint, #eaf3fb); --kampanya-color: inherit; }

.b2b-layout .legacy-grid .grid-row-campaign > td {
    background: var(--kampanya-bg, #fff6c8) !important;
    color: var(--kampanya-color, inherit) !important;
}
.b2b-layout .legacy-grid .grid-row-campaign:hover > td,
.b2b-layout .legacy-grid .rz-data-row.grid-row-campaign:hover > td {
    background: var(--kampanya-bg-hover, #fff0a5) !important;
}

/* Seçili satır gradient kapalıysa düz aksan rengiyle boya — Sepetim gibi yoğun ekranlarda daha sade */
.b2b-layout.grid-secim-flat .legacy-grid .grid-row-selected > td,
.b2b-layout.grid-secim-flat .legacy-grid .rz-data-row.grid-row-selected > td {
    background: color-mix(in srgb, var(--grid-accent, #337ab7) 18%, #fff) !important;
    box-shadow: inset 4px 0 0 var(--grid-accent, #337ab7) !important;
    color: #0f172a !important;
}
/* Flat seçimde descendant link/span'lar da koyu metin (zemin açık olduğu için) */
.b2b-layout.grid-secim-flat .legacy-grid .grid-row-selected > td *:not(svg):not(path),
.b2b-layout.grid-secim-flat .legacy-grid .rz-data-row.grid-row-selected > td *:not(svg):not(path) {
    color: #0f172a !important;
}

/* CheckBox işaretli arka plan — Radzen değişken sunmuyor, direkt selector */
.b2b-layout .rz-chkbox .rz-chkbox-box.rz-state-active,
.b2b-layout .rz-chkbox-box.rz-state-active {
    background: var(--form-accent, #337ab7) !important;
    border-color: var(--form-accent, #337ab7) !important;
}
.b2b-layout .rz-chkbox .rz-chkbox-box.rz-state-active .rz-chkbox-icon { color: #fff !important; }

/* RadioButton işaretli halka */
.b2b-layout .rz-radiobutton-box.rz-state-active {
    border-color: var(--form-accent, #337ab7) !important;
}
.b2b-layout .rz-radiobutton-box.rz-state-active .rz-radiobutton-icon {
    background: var(--form-accent, #337ab7) !important;
}

/* Switch açık durumu */
.b2b-layout .rz-switch.rz-state-active .rz-switch-circle,
.b2b-layout .rz-switch-checked .rz-switch-circle {
    background: var(--form-accent, #337ab7) !important;
}
.b2b-layout .rz-switch.rz-state-active,
.b2b-layout .rz-switch-checked {
    background: color-mix(in srgb, var(--form-accent, #337ab7) 50%, #fff) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SystemSoft teması — parlak mavi klasik B2B görünümü.
   Her grup HEM master (.ana-tema-systemsoft) HEM ilgili alt-tema sınıfına bağlı:
     - chrome  → .ana-tema-systemsoft + .theme-systemsoft
     - grid    → .ana-tema-systemsoft + .grid-tema-systemsoft   (--grid-* değişkenleri)
     - buton   → .ana-tema-systemsoft + .btn-tema-systemsoft    (--btn-* değişkenleri)
     - form    → .ana-tema-systemsoft + .form-tema-systemsoft   (--form-* değişkenleri)
   En sonda tanımlı → Ana Tema=SystemSoft seçiliyse çakışan alt-temayı ezer.
   ════════════════════════════════════════════════════════════════════ */

/* ── Chrome: sidebar + topbar + nav (parlak mavi gradyan) ── */
.b2b-layout.ana-tema-systemsoft .b2b-sidebar,
.b2b-layout.theme-systemsoft .b2b-sidebar {
    background: linear-gradient(180deg, #4a8bc4 0%, #21568f 100%);
    color: #eaf3fb;
}
.b2b-layout.ana-tema-systemsoft .b2b-sidebar .sidebar-brand,
.b2b-layout.theme-systemsoft .b2b-sidebar .sidebar-brand {
    background: linear-gradient(180deg, #4a8bc4 0%, #1f5288 100%);
    border-bottom: 1px solid #1f5288;
}
.b2b-layout.ana-tema-systemsoft .brand-title,
.b2b-layout.theme-systemsoft .brand-title { color: #eaf3fb; }
.b2b-layout.ana-tema-systemsoft .b2b-nav li a:hover,
.b2b-layout.ana-tema-systemsoft .b2b-nav li a.active,
.b2b-layout.ana-tema-systemsoft .b2b-nav li button:hover,
.b2b-layout.theme-systemsoft .b2b-nav li a:hover,
.b2b-layout.theme-systemsoft .b2b-nav li a.active,
.b2b-layout.theme-systemsoft .b2b-nav li button:hover {
    background: rgba(255, 255, 255, 0.18);
    border-left-color: #cfe6ff;
    color: #fff;
}
.b2b-layout.ana-tema-systemsoft .sidebar-collapse-btn,
.b2b-layout.theme-systemsoft .sidebar-collapse-btn {
    color: #21568f; border-color: #cfe0f2;
}
.b2b-layout.ana-tema-systemsoft .sidebar-collapse-btn:hover,
.b2b-layout.theme-systemsoft .sidebar-collapse-btn:hover {
    background: #21568f; color: #fff;
}
.b2b-layout.ana-tema-systemsoft .b2b-nav .badge-count,
.b2b-layout.theme-systemsoft .b2b-nav .badge-count { background: #1f5fa8; }
.b2b-layout.ana-tema-systemsoft .sidebar-admin-link a,
.b2b-layout.theme-systemsoft .sidebar-admin-link a {
    background: linear-gradient(135deg, #4a9be6 0%, #1f5fa8 100%);
}
/* Topbar: beyaz yerine parlak mavi gradyan + açık metin */
.b2b-layout.ana-tema-systemsoft .b2b-topbar,
.b2b-layout.theme-systemsoft .b2b-topbar {
    background: linear-gradient(180deg, #5b9bd5 0%, #2e6da4 100%);
    color: #fff;
    border-bottom: 1px solid #1f5288;
    box-shadow: 0 1px 6px rgba(31, 82, 136, 0.25);
}
/* Topbar'daki hamburger çizgileri (mavi zeminde) beyaz olsun */
.b2b-layout.ana-tema-systemsoft .b2b-topbar .b2b-hamburger span,
.b2b-layout.theme-systemsoft .b2b-topbar .b2b-hamburger span { background: #fff; }

/* ── Grid (--grid-* değişkenleri) ── */
.b2b-layout.ana-tema-systemsoft,
.b2b-layout.ana-tema-systemsoft2,
.b2b-layout.grid-tema-systemsoft {
    --grid-accent: #2f6fb5;
    --grid-header-bg: linear-gradient(180deg, #eef5fc 0%, #cfe0f2 100%);
    --grid-header-color: #1f4e79;
    --grid-hover-tint: #d8e9f8;
    --grid-row-selected: linear-gradient(90deg, #bcd9f2 0%, #dcebfa 50%, #eef6fd 100%);
    --grid-row-selected-color: #14365c;
    --tab-active-color: #2f6fb5;
    --tab-hover-bg: #eef5fc;
}

/* ── Butonlar (--btn-* değişkenleri) ── */
.b2b-layout.ana-tema-systemsoft,
.b2b-layout.ana-tema-systemsoft2,
.b2b-layout.btn-tema-systemsoft {
    --btn-ara-bg: linear-gradient(135deg, #4a9be6 0%, #1f5fa8 100%);
    --btn-ara-shadow: rgba(31, 95, 168, 0.35);
    --btn-temizle-bg: linear-gradient(135deg, #9aa7b5 0%, #5b6b7d 100%);
    --btn-temizle-shadow: rgba(91, 107, 125, 0.30);
    --btn-listele-bg: #2f6fb5;
    --btn-listele-shadow: rgba(47, 111, 181, 0.30);
}

/* ── Form kontrolleri (--form-* değişkenleri) ── */
.b2b-layout.ana-tema-systemsoft,
.b2b-layout.ana-tema-systemsoft2,
.b2b-layout.form-tema-systemsoft {
    --form-accent: #2f6fb5;
    --form-hover-tint: #e3eefb;
}

/* ── Üst yatay menü (layout-topbar) uyumu — SystemSoft masaüstü görünümü ──
   Ana Tema=SystemSoft seçilince MainLayout _layout'u "topbar" yapar; bu yüzden
   .b2b-sidebar artık yatay menü çubuğudur. Aşağıdaki kurallar yalnız bu kombinasyonda devreye girer. */
.b2b-layout.ana-tema-systemsoft.layout-topbar .b2b-sidebar {
    background: linear-gradient(180deg, #5b9bd5 0%, #2e6da4 100%);
    box-shadow: 0 1px 6px rgba(31, 82, 136, 0.25);
}
/* Aktif/hover menü öğesi: global --accent (#C90000 kırmızı) yerine açık mavi alt-çizgi */
.b2b-layout.ana-tema-systemsoft.layout-topbar .b2b-nav li a:hover,
.b2b-layout.ana-tema-systemsoft.layout-topbar .b2b-nav li a.active {
    border-bottom-color: #cfe6ff;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ── Masaüstü-app yoğunluğu — içerik + grid satırlarını sıkılaştır ── */
.b2b-layout.ana-tema-systemsoft .b2b-content { padding: 12px; }
.b2b-layout.ana-tema-systemsoft .legacy-grid .rz-data-row td {
    padding-top: 4px;
    padding-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════
   SystemSoft 2 — masaüstü program düzeni (ayrı Ana Tema, systemsoft'tan bağımsız).
   Renk paleti systemsoft ile ortak (mavi); farkı yoğunluk + 2-satır ikon toolbar +
   Ürün Ara kompakt 3-kutulu başlık + yoğun grid. systemsoft2 her zaman layout-topbar.
   ════════════════════════════════════════════════════════════════════ */

/* ── Chrome: topbar + yatay menü çubuğu (mavi) ── */
.b2b-layout.ana-tema-systemsoft2 .b2b-topbar {
    background: linear-gradient(180deg, #5b9bd5 0%, #2e6da4 100%);
    color: #fff;
    border-bottom: 1px solid #1f5288;
    box-shadow: 0 1px 6px rgba(31, 82, 136, 0.25);
    padding: 4px 12px;
    gap: 8px;
    min-height: 0;
}
.b2b-layout.ana-tema-systemsoft2 .b2b-topbar .b2b-hamburger span { background: #fff; }
.b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-sidebar {
    background: linear-gradient(180deg, #4a8bc4 0%, #21568f 100%);
    box-shadow: 0 1px 6px rgba(31, 82, 136, 0.25);
    color: #eaf3fb;
}
.b2b-layout.ana-tema-systemsoft2 .b2b-nav .badge-count { background: #1f5fa8; }
.b2b-layout.ana-tema-systemsoft2 .sidebar-admin-link a {
    background: linear-gradient(135deg, #4a9be6 0%, #1f5fa8 100%);
}

/* ── 2-satır ikon toolbar — yatay menüyü ikon-üstü-metin kompakt düğme ızgarasına çevir ── */
@media (min-width: 769px) {
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-sidebar {
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav {
        flex-wrap: wrap;
        justify-content: center;
        overflow: visible;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav li { flex: 0 0 auto; }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav li a {
        flex-direction: column;
        height: 48px;
        min-width: 78px;
        gap: 2px;
        padding: 4px 12px;
        font-size: 11px;
        border-left: none;
        border-bottom: 3px solid transparent;
        justify-content: center;
        white-space: nowrap;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav-icon { font-size: 19px; line-height: 1; }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav-text {
        font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav li a:hover,
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav li a.active {
        border-bottom-color: #cfe6ff;
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav .badge-count {
        position: absolute; top: 6px; right: 6px;
    }
    /* Sağdaki kullanıcı/çıkış bloğu dikey ortalansın */
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .sidebar-user { align-items: center; }
}

/* ── İçerik yoğunluğu ── */
.b2b-layout.ana-tema-systemsoft2 .b2b-content { padding: 10px; }
.b2b-layout.ana-tema-systemsoft2 .legacy-grid .rz-data-row td { padding: 2px 6px; font-size: 12px; }
.b2b-layout.ana-tema-systemsoft2 .legacy-grid .rz-grid-table th { padding: 4px 6px; font-size: 12px; }

/* Depo bazlı stok adeti rozetleri (masaüstü ERP görünümü) — tüm temalarda */
.depo-q { display:inline-block; min-width:26px; padding:1px 6px; border-radius:5px; background:#dcfce7; color:#15803d; font-weight:700; font-size:11.5px; border:1px solid #bbf7d0; }
.depo-x { color:#dc2626; font-weight:700; font-size:13px; }
.b2b-layout.ana-tema-systemsoft2 .depo-q { background:#d6ebff; color:#1f5fa8; border-color:#a9cdf0; border-radius:3px; }

/* SS2 üst reklam bandı (masaüstü ERP gibi) */
.ss2-reklam-band { margin:0 0 8px; border:1px solid #cfe0f2; border-radius:6px; overflow:hidden; background:#fff; line-height:0; }
.ss2-reklam-band img { width:100%; max-height:110px; object-fit:cover; display:block; }

/* Sekme çubuğu — SystemSoft mavi şerit */
.b2b-layout.ana-tema-systemsoft2 .rz-tabview-nav {
    background: linear-gradient(180deg, #eef5fc 0%, #cfe0f2 100%);
    border-bottom: 1px solid #9cc3e8;
}

/* ── Ürün Ara: kompakt 3-kutulu arama başlığı (.ss2-search-header) ── */
.ss2-search-header {
    display: flex;
    gap: 12px;
    align-items: stretch;
}
.ss2-search-col {
    flex: 0 0 380px;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #b9d4ee;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(31, 82, 136, 0.10);
}
.ss2-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 8px;
    background: #f7fbff;
    border: 1px solid #b9d4ee;
    border-radius: 6px;
}
.ss2-search-box:focus-within { border-color: #2f6fb5; box-shadow: 0 0 0 2px rgba(47, 111, 181, 0.15); }
.ss2-search-box .rz-icon, .ss2-search-box .notranslate { color: #2f6fb5; font-size: 18px; }
.ss2-search-box input {
    flex: 1; border: none; outline: none; background: transparent;
    height: 34px; font-size: 13px; color: #1f4e79;
}
.ss2-search-col .ss2-marka { width: 100%; }
.ss2-filter-strip {
    display: flex; flex-wrap: wrap; gap: 4px 12px;
    font-size: 11.5px; color: #334; padding: 2px 0;
}
.ss2-filter-strip label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ss2-actions { display: flex; gap: 6px; margin-top: 2px; }
.ss2-search-header .reklam-carousel,
.ss2-search-header > :last-child { flex: 1; min-width: 0; }

/* Mobil: kutu kolonu tam genişlik, banner alta */
@media (max-width: 768px) {
    .ss2-search-header { flex-direction: column; }
    .ss2-search-col { flex: 1 1 auto; max-width: 100%; }
}

/* ── SystemSoft 2: sol üst firma logosu + canlı saat ── */
.ss2-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 0 6px;
    flex-shrink: 0;
}
.ss2-brand-logo { height: 34px; max-width: 130px; object-fit: contain; }
.ss2-clock {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 6px;
    padding: 2px 8px;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}
@media (max-width: 768px) { .ss2-clock { display: none; } }

/* ── SystemSoft 2: ikon toolbar'ı 2 satıra zorla (nav'ı sınırlandır, sağ blok sağa itilsin) ── */
@media (min-width: 769px) {
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .b2b-nav {
        flex: 0 1 620px;          /* ~6 kompakt düğme/satır → 12 öğe = 2 satır */
        justify-content: flex-start;
    }
    .b2b-layout.ana-tema-systemsoft2.layout-topbar .sidebar-admin-link { margin-left: auto; }
}