.navbar {
                    background-color: rgba(9,76,108,0.9) !important; /*N1*/
                }
                .navbar .navbar-brand {
                    color: #ffffff !important; /*NT1*/
                }
                .breadcrumbs {
                    background-color:  !important; /*B1*/
                    display: none; 
                }
                .sidebar {
                    background-color:  !important; /*S1*/
                    border-color:  !important; /*S1*/
                    display: none; 
                }
                .sidebar + .main-content { margin-left: 0px!important; } 
                
                .no-skin .sidebar-shortcuts {
                    background-color:  !important; /*S1*/
                }
                .no-skin .sidebar-toggle {
                    background-color:  !important; /*S1*/
                    border-color:  /*MT1*/
                }
                .no-skin .nav-list > li {
                    border-color: ; /*S1*/
                }
                .sidebarColor {
                    color: #f8f8f8!important; /*S1*/
                }
                .no-skin .nav-list > li > a {
                    background-color:  !important; /*M1*/
                    color: ; /*MT1*/
                }
                .no-skin .sidebar.menu-min .nav-list > li > a > .menu-text
                {
                    background-color:  !important; /*M2*/
                }
                .no-skin .sidebar-toggle > .ace-icon, .no-skin .sidebar-scroll .sidebar-toggle {
                    border-color: ; /*MT1*/
                    color: ; /*MT1*/
                    background-color:  !important; /*S1*/
                }
                .logging-in
                {
                    color: rgba(9,76,108,0.9) !important; /*MT1*/
                }

                li.menuIndicatorBackgroundColor:hover > a, .no-skin .nav-list > li.menuIndicatorBackgroundColor:hover > a {
                    background-color: !important; /*I1*/
                }
                .no-skin .nav-list > li.active > a,
                .no-skin .nav-list > li.active > a:hover,
                .no-skin .nav-list > li.active > a:focus,
                .no-skin .nav-list .open > a,
                .no-skin .nav-list .open > a:hover,
                .no-skin .nav-list .open > a:focus,
                .no-skin .nav-list > li.open > a,
                .no-skin .nav-list > li:hover > a {
                    background-color:  !important; /*M2*/
                    color: ; /*MT2*/
                }
                .nav-list > li:before {
                    background-color: ; /*I1*/
                }
                .menuIndicatorBackgroundColor {
                    background-color: !important; /*I1*/
                }
              
                .menuIndicatorColor {
                    color: !important; /*I1*/
                }
                .no-skin .nav-list > li.active:after {
                    border-color: ;  /*I1*/
                }
                .no-skin .nav-list li.active > a:after {
                    border-right-color: ; /*I1*/
                    -moz-border-right-colors: ; /*I1*/
                }
                .no-skin .nav-list > li .submenu > li > a {
                    border-top-color:  !important; /*S1*/
                    background-color:  !important; /*M0*/
                    color: ; /*MT0*/
                }
                .no-skin .nav-list > li .submenu > li.active > a, .no-skin .nav-list > li .submenu > li > a:hover {
                    background-color:  !important; /*M0.5*/
                    color:  !important; /*I1*/
                }
                .no-skin {
                    
                    background: url() no-repeat center;                    
                    background-position: center center;
                    background-size: cover;
                    background-attachment: fixed;
                }
                .main-container:before
                {
                    background-color: transparent !important;
                }
                .main-content-inner, .b2bBackground
                {
                    
                }
                .page-content {
                    background-color: transparent !important; 
                }
                .no-skin .nav-list > li .submenu
                {
                    background-color:  !important; 
                }
                .no-skin .nav-list > li > .submenu li > .submenu > li a {
                    color:  !important; 
                }
                .no-skin .nav-list > li > .submenu li.open > a
                {
                    color:  !important; 
                }
                .no-skin .navbar .navbar-toggle
                {
                    background-color: transparent !important; 
                }
                .no-skin .navbar .navbar-toggle:hover
                {
                    background-color:  !important; 
                }
                .no-skin .navbar .navbar-toggle.display, .no-skin .navbar .navbar-toggle[data-toggle=collapse]:not(.collapsed)
                {
                    background-color:  !important; 
                }
                .owl-theme .owl-nav [class*=owl-]:hover {
                    background-color: rgba(9,76,108,0.9) !important;
                }                
                .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
                    background-color: #cecece4d;
                }

                .loginWidget { 
                    background-color: rgb(255 255 255 / 60%);
                    border: 10px solid rgb(255 255 255 / 60%);
                    border-radius: 15px;
                    box-shadow: rgba(9,76,108,0.9)66 0px 20px 30px;
                }

                                

                .btn-primary.b2b-theme, .btn.btn-primary.b2b-theme:focus {
                    color: #ffffff !important;
                    background-color: rgba(9,76,108,0.9) !important; /*N1*/
                    border-color: rgba(9,76,108,0.9) !important; /*N1*/
                }
                .btn-primary.b2b-theme:hover, .btn-primary.b2b-theme:active, .open > .btn-primary.b2b-theme.dropdown-toggle {                   
                    background-color: rgba(9,76,108,0.9)cc !important; /*N1*/
                    border-color: rgba(9,76,108,0.9) !important; /*N1*/
                }
                a.b2b-theme {
                    color: rgba(9,76,108,0.9) !important;
                }
                input.b2b-theme,input.b2b-theme:focus {
                    border-color: rgba(9,76,108,0.9) !important;
                }
                a.b2b-theme:hover, a.b2b-theme:focus {
                    color: rgba(9,76,108,0.9)cc;
                }
                .dealer-page .separator {
                    background-color: rgba(9,76,108,0.9);
                }

                 #ecomHighlihtedMenu a.btn.btn-white.active,#ecomHighlihtedMenu a.btn.btn-white:hover,#ecomHighlihtedMenu a.btn.btn-white:active {
                    background-color: rgba(9,76,108,0.9) !important;
                    color: #ffffff !important;
                }

                #ecomTopMenu .dropdown-menu > li:hover > a, 
                #ecomTopMenu .dropdown-menu > li > a:focus, 
                #ecomTopMenu .dropdown-menu > li > a:active, 
                #ecomTopMenu .dropdown-menu > li.active > a, 
                #ecomTopMenu .dropdown-menu > li.active:hover > a {
                    background: rgba(9,76,108,0.9) !important;
                    color: #ffffff !important;
                }

               

                 

                

                /* =====================================================
ULTRA MODERN PROFESSIONAL THEME - COMPLETE
Tüm Sorunlar Çözüldü - Eksiksiz CSS
===================================================== */
/* =====================================================
MODERN FONT IMPORT - INTER (Google Fonts)
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root {
/* Navbar */
/*--nav-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);*/
--nav-bg: linear-gradient(135deg, #bac1d1 0%, #1e293b 100%);
--nav-text: #ffffff;
--pill-bg: rgba(255,255,255,.15);
--pill-hover: rgba(255,255,255,.25);
--pill-active: #06b6d4;
/* Ana Renkler */
--primary: #06b6d4;
--primary-dark: #0891b2;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #06b6d4;

/* Arka Plan */
--bg-page: #f1f5f9;
--bg-card: #ffffff;
--bg-gray: #f8fafc;
--bg-hover: #f1f5f9;

/* Metin */
--text-dark: #0f172a;
--text-gray: #64748b;
--text-light: #94a3b8;

/* Border */
--border: #e2e8f0;

/* Shadow */
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow: 0 1px 3px rgba(0,0,0,.1);
--shadow-md: 0 4px 6px rgba(0,0,0,.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,.1);
--shadow-xl: 0 20px 25px rgba(0,0,0,.15);

/* Radius */
--radius: 8px;
--radius-lg: 12px;
--radius-full: 9999px;

/* Font */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}
/* =====================================================
GLOBAL RESET & BASE
===================================================== */

{
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body,
.page-content,
.container-fluid {
background: var(--bg-page) !important;
font-family: var(--font-family) !important;
color: var(--text-dark);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =====================================================
NAVBAR
===================================================== */
nav.topMenu,
nav.topMenu .navbar,
nav.topMenu .navbar-collapse,
nav.topMenu ul.nav,
nav.topMenu ul.navbar-nav {
background: var(--nav-bg) !important;
border: none !important;
box-shadow: var(--shadow-md);
margin: 0 !important;
}
nav.topMenu {
position: sticky;
top: 0;
z-index: 9999;
}
nav.topMenu .container-fluid {
padding: 6px 15px;
}
/* =====================================================
NAVBAR MENU ITEMS
===================================================== */
nav.topMenu ul.navbar-nav > li {
    
padding: 3px 4px;
}
nav.topMenu ul.navbar-nav > li > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 15px;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 600;
color: var(--nav-text) !important;
background: var(--pill-bg);
transition: all .2s ease;
text-decoration: none;
white-space: nowrap;
}
nav.topMenu ul.navbar-nav > li > a:hover {
background: var(--pill-hover);
transform: translateY(-1px);
}
nav.topMenu ul.navbar-nav > li.open > a,
nav.topMenu ul.navbar-nav > li.active > a {
background: var(--pill-active) !important;
box-shadow: 0 4px 12px rgba(6,182,212,.4);
}
nav.topMenu ul.navbar-nav > li > a .caret {
opacity: .8;
margin-left: 2px;
transition: transform .2s;
}
nav.topMenu ul.navbar-nav > li.open > a .caret {
transform: rotate(180deg);
}
/* =====================================================
DROPDOWN MENU - FIX KAPANMA SORUNU
===================================================== */
nav.topMenu .dropdown-menu {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 6px;
margin-top: 6px;
max-height: 480px;
overflow-y: auto;
}
/* KRITIK: Dropdown kapanma sorunu için padding ekle */
nav.topMenu .dropdown-menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background: transparent;
}
nav.topMenu .dropdown-menu > li > a {
display: block;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-dark);
transition: all .15s ease;
text-decoration: none;
}
nav.topMenu .dropdown-menu > li > a:hover {
background: var(--bg-hover);
color: var(--primary);
padding-left: 16px;
}
/* =====================================================
SUBMENU - FIX KAPANMA SORUNU
===================================================== */
.dropdown-submenu {
position: static;
padding: 10px;
}
.dropdown-submenu > .dropdown-menu {
display: none;
position: static;
margin: 4px 0;
padding: 4px 0;
background: var(--bg-gray);
border-left: 3px solid var(--primary);
border-radius: 6px;
}
.dropdown-submenu.open > .dropdown-menu {
display: block;
}
/* KRITIK: Submenu geçişlerinde hover alanı genişlet */
.dropdown-submenu > a {
position: static;
padding-right: 32px !important;
}
.dropdown-submenu > .dropdown-menu li a {
padding: 6px 12px 6px 24px;
font-size: 12.5px;
}
.dropdown-submenu > a::after {
content: "›";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
color: var(--text-gray);
transition: all .2s;
}
.dropdown-submenu.open > a::after {
transform: translateY(-50%) rotate(90deg);
color: var(--primary);
}
/* KRITIK: Hover alanını genişlet - mouse geçişi için 
 */
/* =====================================================
SCROLLBAR
===================================================== */
nav.topMenu .dropdown-menu::-webkit-scrollbar {
width: 10px;
}
nav.topMenu .dropdown-menu::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.2);
border-radius: 10px;
}
nav.topMenu .dropdown-menu::-webkit-scrollbar-track {
background: transparent;
}
/* =====================================================
SAĞ MENÜ - SEPET, ZİL, MÜŞTERİ
===================================================== */
nav.topMenu ul.navbar-right > li {
padding: 3px 4px;
border-radius: 80px;

}
nav.topMenu ul.navbar-right > li > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 8px 15px !important;
border-radius: var(--radius-full) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #fff !important;
background: rgba(255,255,255,.15) !important;
border: none !important;
transition: all .2s ease !important;
white-space: nowrap !important;
text-decoration: none !important;
}
nav.topMenu ul.navbar-right > li > a:hover {
background: rgba(255,255,255,.25) !important;
transform: translateY(-1px) !important;
}
/* MÜŞTERİ SEÇ BUTONU - Özel cyan renk */
#liCST > a {
background: var(--primary) !important;
box-shadow: 0 4px 12px rgba(6,182,212,.4) !important;
}
#liCST > a:hover {
background: var(--primary-dark) !important;
}
/* SPAN ve BADGE içindeki inline stilleri temizle */
nav.topMenu ul.navbar-right > li > a span,
nav.topMenu ul.navbar-right > li > a .badge,
nav.topMenu ul.navbar-right > li > a font,
nav.topMenu ul.navbar-right > li > a > * {
background: transparent !important;
background-color: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
display: inline !important;
color: inherit !important;
}
/* Element.style ile gelen tüm inline stilleri ez */
nav.topMenu ul.navbar-right > li > a[style],
nav.topMenu ul.navbar-right > li > a[style] span[style],
nav.topMenu ul.navbar-right > li > a[style] .badge[style],
nav.topMenu ul.navbar-right > li > a[style] font[style] {
background: rgba(255,255,255,.15) !important;
}
nav.topMenu ul.navbar-right > li > a *[style] {
background: transparent !important;
background-color: transparent !important;
}
/* Müşteri seç içindeki elementler de temiz */
#liCST > a span,
#liCST > a .badge,
#liCST > a font,
#liCST > a > * {
background: transparent !important;
background-color: transparent !important;
}
/* İKONLAR - Düzgün görünsün */
nav.topMenu ul.navbar-right > li > a i,
nav.topMenu ul.navbar-right > li > a .fa {
color: inherit !important;
background: transparent !important;
margin-right: 4px !important;
}
/* SAYAÇ BADGE varsa (sepet sayısı gibi) */
nav.topMenu ul.navbar-right > li > a .badge-counter {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 2px 5px;
font-size: 10px;
font-weight: 700;
background: #ef4444 !important;
color: #fff !important;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
}
/* =====================================================
USER DROPDOWN
===================================================== */
nav.topMenu .user-menu.dropdown-menu {
min-width: 200px;
}
nav.topMenu .user-menu.dropdown-menu li a {
color: var(--text-dark) !important;
}
nav.topMenu .user-menu.dropdown-menu li a:hover {
background: var(--bg-hover) !important;
color: var(--primary) !important;
}
/* =====================================================
KARTLAR & FORM ROWS - MODERN GÖRÜNÜM
===================================================== */
.page-header,
#SiparisBilgileri,
#MusteriBilgileri,
.cw-form-row {
background: var(--bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border);
padding: 1px;
margin-bottom: 1px;
transition: all .2s ease;
}
.cw-form-row:hover {
box-shadow: var(--shadow-md);
}
.page-header h3,
#SiparisBilgileri h4,
#MusteriBilgileri h4 {
font-size: 15px;
font-weight: 700;
color: var(--primary-dark);
border-bottom: 2px solid var(--border);
padding-bottom: 8px;
margin-bottom: 12px;
}
/* =====================================================
FORM LABELS - MODERN
===================================================== */
.cw-label-column,
.form-group label {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 600;
color: var(--text-gray);
margin-bottom: 0;
}
/* =====================================================
FORM ELEMENTS - PROFESYONEL
===================================================== */
.form-group {
margin-bottom: 10px;
}
.form-control,
select,
textarea,
input[type="text"],
input[type="number"],
input[type="email"],
.cw-select-input {
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--text-dark);
background: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius);
transition: all .2s ease;
font-family: var(--font-family) !important;
}
.form-control:focus,
select:focus,
textarea:focus,
.cw-select-input:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(6,182,212,.1);
background: #ffffff;
}
.form-control:hover,
.cw-select-input:hover {
border-color: var(--primary);
}
.form-control[readonly],
.cw-select-input-disabled {
background: var(--bg-gray) !important;
cursor: not-allowed;
opacity: 0.7;
}
textarea {
height: auto;
min-height: 70px;
resize: vertical;
}
/* =====================================================
INPUT GROUP ADDON - MODERN
===================================================== */
.input-group-addon {
background: var(--bg-gray);
border: 1.5px solid var(--border);
border-left: none;
padding: 8px 12px;
color: var(--text-gray);
transition: all .2s ease;
}
.cw-select-open {
cursor: pointer;
border-radius: 0 var(--radius) var(--radius) 0;
}
.cw-select-open:hover {
background: var(--primary);
color: #fff;
}
.cw-select-open-selected {
background: var(--primary);
color: #fff;
}
.cw-select-remove {
cursor: pointer;
background: var(--danger);
color: #fff;
border-color: var(--danger);
border-radius: 0 var(--radius) var(--radius) 0;
}
.cw-select-remove:hover {
background: #dc2626;
}
/* =====================================================
MODAL - ULTRA MODERN
===================================================== */
.cw-modal .modal-dialog {
margin: 30px auto;
}
.cw-modal .modal-content {
border: none;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.cw-modal-header {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #ffffff;
padding: 16px 20px;
border: none;
}
.cw-modal-header .modal-title {
font-size: 16px;
font-weight: 700;
color: #ffffff;
}
.cw-modal-header .close {
color: #ffffff;
opacity: .8;
text-shadow: none;
font-size: 28px;
font-weight: 300;
}
.cw-modal-header .close:hover {
opacity: 1;
}
.cw-modal-body {
padding: 20px;
background: var(--bg-page);
}
/* =====================================================
MODAL İÇİ TABLO HEADER - MODERN
===================================================== */
.cw-header {
background: var(--bg-card);
border-radius: var(--radius);
padding: 10px;
margin-bottom: 10px;
border: 1px solid var(--border);
}
.cw-header .cw-column {
font-size: 12px;
font-weight: 700;
color: var(--text-gray);
text-transform: uppercase;
letter-spacing: .5px;
}
/* =====================================================
MODAL İÇİ ARAMA INPUT
===================================================== */
.cw-custom-row input[type="text"] {
height: 38px;
padding: 8px 12px;
font-size: 13px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
background: var(--bg-card);
transition: all .2s ease;
}
.cw-custom-row input[type="text"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(6,182,212,.1);
}
/* =====================================================
MODAL ROWS - DATA LIST
===================================================== */
.cw-rows {
background: var(--bg-card);
border-radius: var(--radius);
border: 1px solid var(--border);
//max-height: 400px !important;
overflow-y: auto;
}
.cw-rows::-webkit-scrollbar {
width: 6px;
}
.cw-rows::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.2);
border-radius: 10px;
}
/* =====================================================
PAGINATION - MODERN
===================================================== */
.cw-pager {
margin-top: 15px;
}
.pagination {
display: flex;
gap: 4px;
padding: 0;
margin: 0;
list-style: none;
}
.pagination li a {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 6px 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
}
.pagination li a:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.pagination li.active a {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
/* =====================================================
MODAL FOOTER
===================================================== */
.modal-footer {
background: var(--bg-card);
border-top: 1px solid var(--border);
padding: 15px 20px;
}
/* =====================================================
BUTONLAR - ULTRA MODERN
===================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius);
border: none;
cursor: pointer;
transition: all .2s ease;
text-decoration: none;
white-space: nowrap;
font-family: var(--font-family) !important;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.btn-primary {
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: #fff;
}
.btn-success {
background: var(--success);
color: #fff;
}
.btn-warning {
background: var(--warning);
color: #fff;
}
.btn-danger {
background: var(--danger);
color: #fff;
}
.btn-info {
background: #cffafe;
color: #0e7490;
}
.btn-default,
.btn-white {
background: var(--bg-gray);
color: var(--text-dark);
border: 1px solid var(--border);
}
.btn-xs {
padding: 6px 12px;
font-size: 12px;
}
.btn-sm {
padding: 7px 14px;
font-size: 12.5px;
}
/* =====================================================
SEPET İŞLEMLERİ BAR
===================================================== */
.sepet-actions,
#SepetIslemleri {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 0;
margin-bottom: 12px;
}
#SepetIslemleri .btn {
padding: 7px 12px;
font-size: 12px;
}
#SepetIslemleri .btn-info,
#SepetIslemleri .btn-default {
background: #cffafe !important;
color: #0e7490 !important;
}
#SepetIslemleri .btn-primary,
#SepetIslemleri .btn-success {
background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
color: #fff !important;
}
#SepetIslemleri .btn-warning {
background: var(--warning) !important;
color: #fff !important;
}
#SepetIslemleri .btn-danger {
background: var(--danger) !important;
color: #fff !important;
}
#SepetIslemleri .btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* =====================================================
TABLO - COMPACT & MODERN
===================================================== */
.table-responsive {
overflow-x: auto;
}
.table {
width: 100%;
background: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
border: 1px solid var(--border);
border-collapse: collapse;
}
.table thead th {
background: linear-gradient(135deg, #aeb6c7, #f1fffd);
color: #ffffff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
padding: 8px 10px;
text-align: left;
border: none;
}
.table tbody td {
padding: 6px 10px;
font-size: 13px;
color: var(--text-dark);
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:hover {
background: var(--bg-gray);
}
.table tbody td:first-child {
font-weight: 700;
color: var(--primary-dark);
}
.price,
.amount {
font-weight: 700;
color: var(--primary-dark);
}
tr.indirim {
background: #ecfdf5 !important;
color: #065f46;
font-weight: 600;
}
tr.masraf {
background: #fff7ed !important;
color: #9a3412;
font-weight: 600;
}
.risk-negative {
color: var(--danger);
font-weight: 700;
}
.risk-positive {
color: var(--success);
font-weight: 700;
}
.table input,
.table select {
height: 28px;
padding: 4px 8px;
font-size: 12px;
border-radius: 5px;
}
/* =====================================================
BADGE & LABELS
===================================================== */
.badge,
.label {
display: inline-block;
padding: 3px 8px;
font-size: 11px;
font-weight: 600;
border-radius: 5px;
}
.badge-primary {
background: var(--primary);
color: #fff;
}
.badge-success {
background: var(--success);
color: #fff;
}
.badge-warning {
background: var(--warning);
color: #fff;
}
.badge-danger {
background: var(--danger);
color: #fff;
}
.badge-info {
background: var(--info);
color: #fff;
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 992px) {
nav.topMenu ul.navbar-nav > li,
nav.topMenu ul.navbar-right > li {
padding: 2px 3px;
}
nav.topMenu ul.navbar-nav > li > a,
nav.topMenu ul.navbar-right > li > a {
    padding: 7px 12px !important;
    font-size: 12px !important;
}

}
@media (max-width: 768px) {
.table {
font-size: 11.5px;
}
.table thead th {
    padding: 6px 8px;
    font-size: 10px;
}

.table tbody td {
    padding: 5px 8px;
}

#SepetIslemleri .btn {
    padding: 6px 10px;
    font-size: 11px;
}

}
/* =====================================================
UTILITY CLASSES
===================================================== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.mt-20 { margin-top: 20px; }
.mb-20 { margin-bottom: 20px; }
/* =====================================================
ANIMATIONS
===================================================== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-menu {
animation: fadeIn .2s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal.in .modal-dialog {
animation: slideDown .3s ease;
}
/* =====================================================
PRINT
===================================================== */
@media print {
nav.topMenu,
.sepet-actions,
#SepetIslemleri {
display: none !important;
}
.table {
    box-shadow: none;
    border: 1px solid #000;
}

.table thead th {
    background: #000 !important;
    color: #fff !important;
}

}
/* =====================================================
NAVBAR BACKGROUND LOGO
===================================================== */
.navbar-bg-logo {
    position: absolute;
    top: 20px;
    left: 0;

    width: 100%;
    height: 100%;

    background-image: url("https://www.ekspreslastik.com.tr/images/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px auto;

    opacity: 0.60;
    pointer-events: none;
    z-index: 0;
}


/* ===================================================== SUBMENU - FIX KAPANMA SORUNU (GÜNCEL) ===================================================== */

.dropdown-submenu { position: static; }

.dropdown-submenu > .dropdown-menu { display: none; position: static; margin: 4px 0 4px 12px; padding: 4px 0; background: var(--bg-gray); border-left: 3px solid var(--primary); border-radius: 6px; transition: all 0.2s ease; }

.dropdown-submenu.open > .dropdown-menu { display: block; }

/* KRITIK: Submenu geçişlerinde hover alanı genişlet */ .dropdown-submenu > a { position: static; padding-right: 32px !important; cursor: pointer; user-select: none; }

.dropdown-submenu > .dropdown-menu li a { padding: 6px 12px 6px 24px; font-size: 12.5px; }

.dropdown-submenu > a::after { content: "›"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--text-gray); transition: all .2s; }

.dropdown-submenu.open > a::after { transform: translateY(-50%) rotate(90deg); color: var(--primary); }

/* KRITIK: Hover ile otomatik açılmayı kaldır - sadece hover ile kontrol */

nav.topMenu .dropdown-submenu {
    position: static !important;
}




/* =====================================================
   PRODUCT DETAIL – DEPO ALANI (TEMA UYUMLU)
===================================================== */

.product-detail-flex {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* SAĞ DEPO KUTUSU */
.depo-right-box {
  min-width: 460px;   /* ?? GENİŞLİK AYARI BURADAN */
  max-width: 520px;   /* ?? BURAYI DEĞİŞTİREREK OYNA */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* DEPO STOK BAŞLIĞI */
.depo-stok-baslik {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-dark);
  margin: 6px 0 4px;
}

/* TABLOLAR */
.depo-right-box table {
  width: 100%;
  font-size: 12px;
}

/* BAKİYE + STOK TABLO AYRIMI */
.depo-right-box .table {
  margin-bottom: 8px;
}

/* MOBİL */
@media (max-width: 992px) {
  .product-detail-flex {
    flex-direction: column;
  }

  .depo-right-box {
    max-width: 100%;
    min-width: 100%;
  }
}