@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
:root {
  --navy-950: #1c1a3f;
  --navy-900: #24215a;
  --navy-800: #017EF2;
  --navy-700: #3a3570;
  --maroon-700: #6b1626;
  --maroon-600: #7d1b2e;
  --maroon-500: #8f2136;
  --ink-900: #1f2130;
  --ink-700: #4a4d5e;
  --ink-500: #7b7e8f;
  --ink-300: #c3c5d1;
  --paper-0: #ffffff;
  --paper-50: #f6f7fb;
  --paper-100: #eef0f6;
  --line-200: #e3e5ee;
  --ok-600: #1c8a52;
  --ok-100: #e3f6ea;
  --warn-600: #a9720c;
  --warn-100: #fdf1d6;
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(28, 26, 63, 0.04), 0 8px 24px -12px rgba(28, 26, 63, 0.12);
  --shadow-pop: 0 20px 60px -20px rgba(28, 26, 63, 0.35);
  --mvm-navy: #017EF2;
  --mvm-navy-ink: #1c1a45;
  --mvm-safety-yellow: #ffc72c;
  --mvm-safety-yellow-dark: #e0a500;
  --mvm-ink-900: #1c2233;
  --mvm-ink-600: #5b6178;
  --mvm-ink-400: #8b90a3;
  --mvm-line: #e3e5ee;
  --mvm-bg-panel: #f6f7fb;
  --mvm-success: #1c8a52;
  --mvm-danger: #b3261e;
}

* {
    box-sizing: border-box;
}
html, body {
    background-color:#F5F5F5;
    margin:0px !important;
    padding:0px !important;
    height: 100%;
}
body {
    font-family: var(--font-body);
    color: var(--ink-900);
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
}
::selection {
    background: var(--maroon-500);
    color: #fff;
}
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    padding: 6px;
    margin-right: 8px;
    color: var(--ink-900);
}
.hamburger-btn svg {
    width: 22px;
    height: 22px;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 63, 0.45);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sidebar-overlay.open {
    display: block;
    opacity: 1;
}
@media (max-width: 991px) {
    .hamburger-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sidebar {
        left: -280px;
        transition: left 0.25s ease;
     z-index: 1050;
    }
    .sidebar.open {
        left: 0;
        box-shadow: 20px 0 40px -20px rgba(0,0,0,0.4);
    }
    body.sidebar-locked {
        overflow: hidden;
    }
}
.app-shell {
    display: flex;
    height:100%;
}
.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sidebar {
    width: 264px;
    flex-shrink: 0;
    background-color:#2D2D62;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 28px 20px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sidebar-brand img {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    background: #fff;
    object-fit: contain;
    padding: 4px;
}
.sidebar-brand .brand-name {
  font-family: #FFF;
  font-weight: 800 !important;
  font-size: 18px !important;
  letter-spacing: 0.3px;
  color: #fff;
  line-height: 1.1;
}
.sidebar-brand .brand-sub {
    font-size: 12px;
    font-weight:700 !important;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #FFF;
}
.sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 20px 0 0;
    flex: 1;
}
.sidebar-nav li + li {
    margin-top: 2px;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    color: #FFF;
    font-size: 13.7px;
    text-decoration:none !important;
    font-weight: 700;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar-nav a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}
.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration:none !important;
}
.sidebar-nav a.active {
    background: var(--maroon-600);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(125, 27, 46, 0.7);
}
.sidebar-rep {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
}
.sidebar-rep .rep-label {
    font-size: 11px;
    font-weight:800;
    text-transform: uppercase;
    letter-spacing: 0px;
    color: #FFF;
    margin-bottom: 4px;
}
.sidebar-rep .rep-name {
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
    font-size: 15.5px;
}
.sidebar-rep .rep-line a{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.2px;
    color: #FFF;
    text-decoration:none !important;
    font-weight:600;
    margin-bottom: 6px;
    word-break: break-all;
}
.sidebar-rep .rep-line svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    background: var(--paper-0);
    border-bottom: 1px solid var(--line-200);
}
.topbar-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: #0F172A;
}
.topbar-sub {
    font-size: 13px;
    color: #2D2D62;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.page-body {
    padding:32px;
    flex: 1;
}
.page-footer {
    display:none !important;
    background-color:#2D2D62;
    color: #FFF;
    text-align: left;
    font-size: 12px;
    padding: 14px;
    font-weight:700;
    letter-spacing: 0.3px;
}
.bank-card {
    padding: 20px;
    height: 100%;
}
.bank-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.bank-card-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}
.bank-name {
    font-weight: 800;
    color: #0F172A;
    font-size: 16px;
}
.bank-branch {
    font-size: 13px;
    font-weight:600;
    color: #475569;
}
.bank-divider {
    border-top: 1px solid var(--line-200);
    margin: 14px 0;
}
.bank-field-label {
    font-size: 11.5px;
    font-weight:900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #94A3B8;
    margin-bottom: 3px;
}
.bank-field-value {
    font-weight: 600;
    color: #2D2D62;
    font-size: 14px;
    margin-bottom: 12px;
    word-break: break-all;
}
.btn-copy {
    background-color:#912C32;
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
    white-space: nowrap;
}
.btn-copy:hover {
    background: var(--maroon-700);
    color: #fff;
}
.btn-copy.copied {
    background: var(--ok-600);
}
.notice-warn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--warn-100);
    border: 1px solid #f0d68a;
    color: #7a550a;
    font-weight:700;
    border-radius: var(--radius-md);
    padding: 14px 18px;
    font-size: 14px;
    margin-bottom: 24px;
}
.notice-warn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.notice-warn strong {
    color: #5f4207;
}
.field-label {
    font-size: 12.6px;
    font-weight: 700;
    color: #6B7A8E;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: block;
}
.field-label .req {
    color: var(--maroon-600);
}
.form-control-mvm {
    width: 100%;
    border: 1.5px solid var(--line-200);
    border-radius: var(--radius-sm);
    padding: 11px 14px;
    font-size: 14px;
    font-weight:600;
    color: var(--ink-900);
    background: var(--paper-0);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control-mvm:focus {
    outline: none;
    border-color: var(--navy-700);
    box-shadow: 0 0 0 3px rgba(58, 53, 112, 0.12);
}
.form-control-mvm::placeholder {
    color: var(--ink-300);
}
.btn-mvm-navy {
    background: var(--navy-800);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13.6px;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease;
}

.btn-mvm-navy:hover {
    background: var(--navy-900);
    color: #fff;
}
.card-surface {
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17.6px;
    color: var(--ink-900);
    margin-bottom: 15px !important;
}
.section-desc {
    color: #000;
    font-weight:500;
    font-size: 14.1px;
    margin-bottom: 24px;
}
.summary-card {
    padding: 20px;
}
.summary-card h6 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
    color: #000
}
.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--line-200);
    font-size: 13.6px;
    font-weight:600;
}
.summary-row:last-of-type {
    border-bottom: none;
}
.summary-row .k {
    color: var(--ink-500);
}
.summary-row .v {
    font-weight: 600;
    color: var(--ink-900);
}
.badge-status-active {
    background: var(--ok-100);
    color: var(--ok-600);
    font-weight: 700;
    font-size: 12.5px;
    padding: 3px 10px;
    border-radius: 999px;
}
.summary-note {
    margin-top: 14px;
    font-size: 13.2px;
    font-weight:500;
    color: var(--maroon-600);
    line-height: 1.5;
}
.cart-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--paper-0);
    border: 1px solid var(--line-200);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--ink-900);
    transition: border-color 0.15s ease;
}
.cart-pill:hover {
    border-color: var(--maroon-600);
    color: var(--ink-900);
}
.cart-pill svg {
    width: 18px;
    height: 18px;
}
.cart-badge {
    background: var(--navy-800);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}
.btn-mvm-primary {
    background: var(--maroon-600);
    border: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, transform 0.1s ease;
}
.btn-mvm-primary:hover {
    background: var(--maroon-700);
    color: #fff;
}
.btn-mvm-primary:active {
    transform: translateY(1px);
}
.btn-mvm-outline {
    background: transparent;
    border: 1.5px solid var(--line-200);
    color: var(--ink-700);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}
.btn-mvm-outline:hover {
    border-color: var(--maroon-600);
    color: var(--maroon-600);
}
.mvm-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.mvm-table thead th {
    background: var(--navy-900);
    color: #fff;
    font-size: 12.6px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 900;
    padding: 13px 18px;
    border: none;
}
.mvm-table thead th:first-child {
    border-top-left-radius: var(--radius-md);
}
.mvm-table thead th:last-child {
    border-top-right-radius: var(--radius-md);
}
.mvm-table tbody td {
    padding: 14px 18px;
    font-size: 13.5px;
    color: #000;
    font-weight:600;
    border-bottom: 1px solid var(--line-200);
    vertical-align: middle;
}
.mvm-table tbody tr:last-child td {
    border-bottom: none;
}
.mvm-table tbody tr:hover td {
    background: var(--paper-50);
}
.order-code {
    font-weight: 700;
    color: var(--navy-800);
}
.btn-view {
    text-decoration:none !important;
    background: var(--navy-800);
    border: none;
    color: #fff;
    font-size: 13.1px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-view:hover {
    background: var(--navy-950);
    color: #fff;
}
.btn-view svg {
    width: 14px;
    height: 14px;
}
.order-meta-card {
    padding: 22px 26px;
}
.order-meta-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 4px;
}   
.order-meta-label {
    font-size: 12.4px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--ink-500);
    font-weight:700;
    margin-bottom: 4px;
}
.order-meta-value {
    font-weight: 700;
    font-size: 14.3px;
    color: #000;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ok-100);
    color: var(--ok-600);
    font-weight: 700;
    font-size: 12.5px;
    padding: 5px 14px;
    border-radius: 999px;
}
.status-pill.pending {
    background: var(--warn-100);
    color: var(--warn-600);
}
.detail-side-card {
    padding: 20px;
}
.detail-side-card h6 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #000;
}
.detail-side-card h6 svg {
    width: 16px;
    height: 16px;
    color: var(--maroon-600);
}
.fee-row {
    display: flex;
    justify-content: space-between;
    font-size: 13.5px;
    padding: 7px 0;
    font-weight:600;
    color: #000;
}
.fee-row.discount .v {
    color: var(--ok-600);
    font-weight: 600;
}
.fee-row.total {
    border-top: 1.5px solid var(--line-200);
    margin-top: 6px;
    padding-top: 12px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink-900);
}
.product-name {
    font-weight: 600;
    color: var(--ink-900);
}
.product-code {
    font-size: 11.5px;
    color: var(--ink-500);
}
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--paper-50); 
}
.auth-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(28,26,63,0.55) 0%, rgba(28,26,63,0.75) 100%),
        radial-gradient(circle at 15% 15%, rgba(47,43,99,0.5) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(107,22,38,0.45) 0%, transparent 40%);
    z-index: 0;
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--paper-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    padding: 40px 36px;
    position: relative;
    z-index: 1;
}
.auth-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8px;
}
.auth-logo img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin-bottom: 10px;
}
.auth-tagline {
    text-align: center;
    color: #000;
    font-weight:600;
    font-size: 13.5px;
    margin-bottom: 28px;
}
.auth-forgot {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--navy-800);
}
.auth-forgot:hover {
    color: var(--maroon-600);
}
.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--ink-500);
    padding: 4px;
}
.pw-toggle svg {
    width: 18px;
    height: 18px;
}
.auth-submit {
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    font-size: 14.5px;
}
.auth-footer-link {
    text-align: center;
    margin-top: 18px;
    font-weight:600;
    font-size: 13.6px;
    color: var(--ink-500);
}
.auth-footer-link a {
    font-weight: 700;
    color: var(--maroon-600);
}
.auth-footer-link a:hover {
    color: var(--maroon-700);
}
.mvm-modal-content {
    border-radius: var(--radius-lg);
    border: none;
    overflow: hidden;
}
.mvm-modal-header {
    background: var(--navy-900);
    border-bottom: none;
    padding: 18px 24px;
}
.mvm-modal-header .modal-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: #fff;
}
.mvm-modal-header .close {
    color: #fff;
    opacity: 0.8;
    text-shadow: none;
}
.mvm-modal-header .close:hover {
    opacity: 1;
    color: #fff;
}
.mvm-modal-body {
    padding: 24px;
}
.mvm-modal-desc {
    font-size: 13.5px;
    color: var(--ink-500);
    margin-bottom: 16px;
}
.mvm-modal-footer {
    border-top: 1px solid var(--line-200);
    padding: 16px 24px;
}
.apply-wrap {
    min-height: 100vh;
    padding: 56px 24px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--paper-50); 
}

.apply-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(28,26,63,0.55) 0%, rgba(28,26,63,0.75) 100%),
        radial-gradient(circle at 15% 15%, rgba(47,43,99,0.5) 0%, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(107,22,38,0.45) 0%, transparent 40%);
    z-index: 0;
}

.apply-header,
.apply-card {
  position: relative;
  z-index: 1;
}
.apply-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color:#1E40AF;
    color: #FFF;
    padding:12px;
    border-radius:5px;
    text-decoration:none !important;
    font-weight: 700;
    font-size: 13.5px;
    margin-bottom: 22px;
}
.apply-back-link:hover {
    color: #fff;
}
.apply-back-link svg {
    width: 16px;
    height: 16px;
}
.apply-header {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 32px;
}
.apply-header h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--ink-900);
    margin-bottom: 8px;
}
.apply-header p {
    color: var(--ink-500);
    font-size: 14.5px;
    font-weight:600;
}
.apply-card {
    max-width: 780px;
    margin: 0 auto;
    padding: 36px 40px;
}
.apply-footer-note {
    color: var(--ink-500);
    font-size: 12.5px;
    font-weight:600;
    max-width: 320px;
}
.empty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.empty-tile {
    background: var(--paper-100);
    border: 1.5px dashed var(--line-200);
    border-radius: var(--radius-md);
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-300);
}
.empty-tile svg {
    width: 30px;
    height: 30px;
    opacity: 0.5;
}
.empty-state-note {
    text-align: center;
    color: var(--ink-500);
    font-size: 13px;
    margin-top: 24px;
}
.text-navy { color: var(--navy-800); }
.text-maroon { color: var(--maroon-600); }



.cart-panel {
  position: sticky;
  top: 24px;
}

.cart-panel-header {
  background: #3B82F6;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  text-transform: uppercase;
}

.cart-panel-body {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 24px 20px;
  box-shadow: var(--shadow-card);
}

.cart-empty-note {
  text-align: center;
  color: var(--ink-500);
  font-size: 13.5px;
  font-weight: 600;
  padding: 20px 0;
}

.cart-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-200);
  font-size: 12.8px;
}

.cart-line:last-of-type {
  border-bottom: none;
}

.cart-line .cl-name {
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.3;
}

.cart-line .cl-meta {
  color: var(--ink-500);
  font-size: 11.5px;
  margin-top: 2px;
}

.cart-line .cl-remove {
  background: none;
  border: none;
  color: var(--maroon-600);
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
}

.cart-panel-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px solid var(--line-200);
  font-weight: 800;
  font-size: 15px;
}

.cart-panel-checkout {
  width: 100%;
  margin-top: 14px;
}

.product-search-wrap {
  margin-bottom: 16px;
}

.product-search-input {
  width: 100%;
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 15px;
  font-style: italic;
  color: var(--ink-700);
  background: var(--paper-0);
  box-shadow: var(--shadow-card);
}

.product-search-input:focus {
  outline: none;
  border-color: var(--navy-700);
}

.payment-select-card {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.payment-select-label {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-500);
  margin-right: 4px;
}

.payment-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--line-200);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
  transition: all 0.15s ease;
  user-select: none;
}

.payment-option input {
  display: none;
}

.payment-option svg {
  width: 16px;
  height: 16px;
}

.payment-option.active {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: #fff;
}

.payment-option:hover:not(.active) {
  border-color: var(--navy-700);
}

.payment-select-note {
  font-size: 12px;
  color: var(--ink-500);
  width: 100%;
  margin-top: -4px;
}


.cat-block {
  margin-bottom: 4px;
}

.cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin-bottom: 2px;
  transition: filter 0.15s ease;
}

.cat-header:hover {
  filter: brightness(1.06);
}

.cat-header .chev {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.cat-header.open .chev {
  transform: rotate(180deg);
}

.cat-header.tone-blue { background: #3B82F6; }
.cat-header.tone-gray { background: #6B7280; }
.cat-header.tone-dark { background: #374151; }
.cat-header.tone-orange { background: #E8603C; }

.cat-sub-wrap {
  padding-left: 0;
}

.cat-body {
  display: none;
  overflow: hidden;
}

.cat-body.open {
  display: block;
}

.product-list {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  margin-bottom: 14px;
  overflow: hidden;
}

.product-row {
  display: grid;
  grid-template-columns: 90px 56px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  border-bottom: 1px dashed var(--line-200);
}

.product-row:last-child {
  border-bottom: none;
}

.product-row-code {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 14.5px;
  line-height: 1.25;
}

.product-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-600);
}

.product-row-icon svg {
  width: 30px;
  height: 30px;
}

.product-row-main .prn-name {
  font-weight: 700;
  color: var(--ink-900);
  font-size: 14.5px;
  margin-bottom: 6px;
}

.price-tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
}

.price-tier {
  display: flex;
  flex-direction: column;
}

.price-tier .pt-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink-500);
  margin-bottom: 2px;
}

.price-tier .pt-value {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-700);
}

.price-tier.tier-list .pt-value {
  text-decoration: line-through;
  color: var(--ink-300);
}

.price-tier.tier-dealer .pt-value {
  color: var(--navy-800);
}

.price-tier.tier-final .pt-value {
  color: var(--ok-600);
  font-size: 16px;
}

.product-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qty-input {
  width: 64px;
  text-align: center;
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-sm);
  padding: 9px 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-900);
}

.qty-input:focus {
  outline: none;
  border-color: var(--navy-700);
}

.btn-add {
  background: #3B82F6;
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-add:hover {
  background: #2563eb;
  color: #fff;
}

.btn-add.added {
  background: var(--ok-600);
}

.no-results-note {
  text-align: center;
  color: var(--ink-500);
  font-size: 13.5px;
  padding: 40px 0;
}

@media (max-width: 640px) {
  .product-row {
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "icon main"
      "code main"
      "actions actions";
    row-gap: 10px;
  }
  .product-row-icon { grid-area: icon; justify-content: flex-start; }
  .product-row-icon svg { width: 22px; height: 22px; }
  .product-row-code { grid-area: code; font-size: 12.5px; }
  .product-row-main { grid-area: main; }
  .product-row-actions { grid-area: actions; justify-content: space-between; }
  .price-tiers { gap: 10px 16px; }
  .payment-select-card { padding: 14px 16px; }
  .payment-option { padding: 8px 12px; font-size: 12.5px; }
}
@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        left: -280px;
        z-index: 1050;
        transition: left 0.2s ease;
    }
    .sidebar.open {
        left: 0;
    }
    .empty-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 576px) {
    .page-body {
        padding: 18px;
    }
    .empty-grid {
        grid-template-columns: 1fr;
    }
    .auth-card {
        padding: 30px 22px;
    }
}




.products-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 991px) {
  .products-layout {
    grid-template-columns: 1fr;
  }
  .cart-panel {
    position: static !important;
    order: 2;
  }
}


.cart-panel {
  background: #fff;
  border: 1px solid var(--mvm-line);
  border-radius: 14px;
  overflow: hidden;
  position: sticky;
  top: 20px;
  box-shadow: 0 8px 24px -16px rgba(28, 26, 69, 0.25);
}

.cart-panel-header {
  background: var(--mvm-navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 20px;
  letter-spacing: 0.2px;
}

.cart-panel-body {
  padding: 18px 20px 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.cart-empty-note {
  color: var(--mvm-ink-400);
  font-size: 13.5px;
  margin: 0;
  text-align: center;
  padding: 24px 0;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cart-item-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--mvm-line);
}

.cart-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--mvm-ink-900);
  line-height: 1.3;
}

.cart-item-meta {
  font-size: 11.5px;
  color: var(--mvm-ink-400);
  margin-top: 2px;
}

.cart-item-total {
  font-size: 13px;
  font-weight: 700;
  color: var(--mvm-navy);
  white-space: nowrap;
}

.cart-item-remove {
  border: none;
  background: transparent;
  color: var(--mvm-danger);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.15s ease;
}
.cart-item-remove:hover {
  background: rgba(179, 38, 30, 0.08);
}

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px solid var(--mvm-ink-900);
  font-weight: 800;
  font-size: 15px;
  color: var(--mvm-ink-900);
}

@media (max-width: 768px) {
    
.product-card-mvm {
    flex-direction: row; 
  }
  .product-card-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .product-card-name,
  .product-card-code {
    font-size: 12px;
  }
  
  .product-table-wrap {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}

@media (max-width: 500px) {
  .product-table-wrap {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  .products-layout {
    padding-bottom: 70px;
  }
}


.product-search-wrap {
  margin-bottom: 14px;
}

    .variant-select-mvm {
        width:100%;
        margin-bottom:6px;
        padding:6px 8px;
        border:1px solid #ddd;
        border-radius:6px;
        font-size:13px;
        background:#fff;
    }
.product-search-input {
  width: 100%;
  padding: 13px 18px;
  border: 1.5px solid var(--mvm-line);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-search-input:focus {
  outline: none;
  border-color: var(--mvm-navy);
  box-shadow: 0 0 0 3px rgba(36, 33, 90, 0.12);
}

.payment-select-card {
  background: #fff;
  border: 1px solid var(--mvm-line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 22px;
}

.payment-select-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mvm-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.payment-option-btn {
  border: 1.5px solid var(--mvm-line);
  background: #fff;
  color: var(--mvm-ink-600);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.payment-option-btn:hover {
  border-color: #017EF1 !important;
  color: var(--mvm-navy);
}

.payment-option-btn.active {
  background-color: #017EF1 !important;
  border-color:#017EF1 !important;
  color: #fff;
}

.payment-select-note {
  display: block;
  font-size: 11.5px;
  color: var(--mvm-ink-400);
  margin-top: 10px;
}

.category-block {
  margin-bottom: 14px;
}

.category-block[data-depth="0"] > .category-title {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  padding: 12px 18px 12px 24px;
  margin-bottom: 0;
  
  background-color:#017EF2;
  border-radius: 10px;
  overflow: hidden;
}


.category-block[data-depth="1"] > .category-title {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background-color:#F85940;
  border-radius: 8px;
  padding: 10px 14px 10px 16px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.category-title-text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.category-block[data-depth="0"] .category-count-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  display:none !important;
}
.category-block[data-depth="1"] .category-count-badge {
  background: #FFF;
  display:none !important;
  color: #F85940;
}
.category-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.category-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.category-block[data-depth="1"] .category-chevron {
  width: 16px;
  height: 16px;
}

.category-block.is-open > .category-title .category-chevron {
  transform: rotate(180deg);
}

.category-block > .category-body {
  display: none;
  padding-top: 14px;
}
.category-block.is-open > .category-body {
  display: block;
}

.category-block[data-depth="1"] > .category-body {
  padding: 12px 4px 4px 4px;
}

.subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.category-block.search-match > .category-title {
  box-shadow: 0 0 0 2px var(--mvm-safety-yellow) inset;
}

@media (max-width: 480px) {
  .product-card-mvm {
    flex-direction: column;
  }
  .product-card-image {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--mvm-line);
  }
}
.product-table-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-card-mvm {
    background-color: #fff;
    border: 1px solid var(--mvm-line);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.product-card-mvm:hover {
  box-shadow: 0 14px 28px -18px rgba(28, 26, 69, 0.35);
  transform: translateY(-2px);
}
.product-card-image {
    width: 160px;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    background-color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 1px solid var(--mvm-line);
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.product-card-image .no-image {
  color: var(--mvm-ink-400);
  font-size: 11.5px;
  text-align: center;
}

.product-card-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  flex: 1;
}

.product-card-code {
  margin-bottom: 0;
  min-width: 70px;
}

.product-card-name {
  min-height: auto;
  margin-bottom: 0;
  flex: 1;
  min-width: 180px;
}

.product-card-prices {
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100px;
}

.price-dealer-note {
  margin-bottom: 0;
}

.product-card-footer {
  margin-top: 0;
  flex-shrink: 0;
}
.product-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mvm-ink-900);
  line-height: 1.35;
  margin-bottom: 10px;
  min-height: 36px;
}

.product-card-prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.price-list {
  font-size: 12.5px;
  color: var(--mvm-ink-400);
  text-decoration: line-through;
}

.price-final {
  font-size: 18px;
  font-weight: 800;
  color: var(--mvm-navy);
}

.price-dealer-note {
  font-size: 13px;
  font-weight:700;
  color: var(--mvm-success);
  font-weight: 600;
  margin-bottom: 12px;
}

.product-card-footer {
  margin-top: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.qty-input-mvm {
  width: 56px;
  padding: 9px 8px;
  text-align: center;
  border: 1.5px solid var(--mvm-line);
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mvm-ink-900);
}

.qty-input-mvm:focus {
  outline: none;
  border-color: var(--mvm-navy);
}
.btn-mvm-add-cart {
  flex: 1;
  border: none;
  background: var(--mvm-navy);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}
.btn-mvm-add-cart:hover {
  background: var(--mvm-navy-ink);
}
.btn-mvm-add-cart.in-cart {
  background: var(--mvm-success);
}
.stock-badge-out {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--mvm-danger);
  background: rgba(179, 38, 30, 0.08);
  padding: 10px 12px;
  border-radius: 8px;
}
.catalog-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--mvm-ink-400);
}

.catalog-empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.mobile-cart-fab {
  display: none;
}

@media (max-width: 991px) {
  .mobile-cart-fab {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    background: var(--mvm-navy);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 10px 24px -8px rgba(28, 26, 69, 0.5);
    cursor: pointer;
  }

  .mobile-cart-fab-icon {
    font-size: 18px;
  }

  .mobile-cart-fab-count {
    background: var(--mvm-safety-yellow, #ffcc00);
    color: var(--mvm-ink-900, #1c1a45);
    font-size: 11px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
  }

  .mobile-cart-fab-total {
    font-size: 13px;
    font-weight: 700;
  }

  .cart-panel {
    display: none;
  }
}

.pushbar .cart-panel-body {
  max-height: calc(100vh - 60px);
  padding: 18px 20px 20px;
  overflow-y: auto;
}
.pushbar .cart-panel-header {
  background: var(--mvm-navy);
  color: #fff;
  padding: 16px 20px;
  font-weight: 700;
}
.pushbar-close-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
    .empty-grid {
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap:16px;
    }
    .kampanya-tile {
        cursor:pointer;
        overflow:hidden;
        position:relative;
        border-radius:10px;
        min-height:220px;
        background:#f5f5f5;
    }
    .kampanya-img {
        width:100%;
        height:100%;
        min-height:220px;
        object-fit:cover;
        display:block;
        transition:transform .2s ease;
    }
    .kampanya-tile:hover .kampanya-img {
        transform:scale(1.04);
    }
    .kampanya-baslik {
        position:absolute; left:0; right:0; bottom:0;
        background:rgba(0,0,0,0.55); color:#fff; font-size:14px;
        padding:8px 10px; text-align:left;
    }

    .kampanya-modal-overlay {
        position:fixed; inset:0; background:rgba(0,0,0,0.75);
        display:flex; align-items:center; justify-content:center; z-index:9999;
        padding:20px;
    }
    .kampanya-modal-box {
        background:#fff; border-radius:8px; width:auto; max-width:95vw;
        max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
    }
    .kampanya-modal-header {
        display:flex; justify-content:space-between; align-items:center;
        padding:12px 16px; border-bottom:1px solid #eee;
    }
    .kampanya-modal-kapat {
        border:none; background:none; font-size:24px; cursor:pointer; color:#888;
        line-height:1;
    }
    .kampanya-modal-kapat:hover { color:#333; }
    .kampanya-modal-body {
        padding:0; overflow:auto; display:flex; align-items:center; justify-content:center;
        background:#000;
    }
    .kampanya-modal-body img {
        max-width:90vw;
        max-height:80vh;
        display:block;
        object-fit:contain;
    }
    

#iptalModal .modal-dialog {
  max-width: 440px;
}

#iptalModal .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  font-family: var(--font-body);
}

#iptalModal .modal-header {
  background: var(--mvm-navy);
  border-bottom: none;
  padding: 20px 24px;
  position: relative;
}

#iptalModal .modal-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    45deg,
    var(--mvm-safety-yellow) 0px,
    var(--mvm-safety-yellow) 5px,
    var(--navy-950) 5px,
    var(--navy-950) 10px
  );
}

#iptalModal .modal-title {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.1px;
}

#iptalModal .modal-header .close {
  color: #fff;
  opacity: 0.75;
  text-shadow: none;
  font-weight: 400;
  font-size: 24px;
  transition: opacity 0.15s ease;
}
#iptalModal .modal-header .close:hover {
  opacity: 1;
  color: #fff;
}

#iptalModal .modal-body {
  padding: 22px 24px 8px;
}

#iptalModal .modal-body p {
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.5;
  margin-bottom: 14px;
}

#iptalModal #iptalSebep {
  border: 1.5px solid var(--mvm-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--mvm-ink-900);
  resize: vertical;
  min-height: 100px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#iptalModal #iptalSebep:focus {
  outline: none;
  border-color: var(--mvm-navy);
  box-shadow: 0 0 0 3px rgba(36, 33, 90, 0.1);
}

#iptalModal #iptalSebep::placeholder {
  color: var(--mvm-ink-400);
}

#iptalModal .modal-footer {
  border-top: 1px solid var(--mvm-line);
  padding: 16px 24px 20px;
  gap: 10px;
}

#iptalModal .btn-secondary {
  background: #fff;
  border: 1.5px solid var(--mvm-line);
  color: var(--mvm-ink-600);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}
#iptalModal .btn-secondary:hover {
  border-color: var(--mvm-ink-400);
  color: var(--mvm-ink-900);
  background: var(--mvm-bg-panel);
}

#iptalModal .btn-mvm-navy {
  background: var(--maroon-600);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}
#iptalModal .btn-mvm-navy:hover {
  background: var(--maroon-700);
  color: #fff;
}

.modal-backdrop.show {
  opacity: 0.55;
}

#odCancelZone .alert-warning {
  background: var(--warn-100);
  border: 1px solid rgba(169, 114, 12, 0.25);
  color: var(--warn-600);
  border-radius: var(--radius-md);
  font-weight: 500;
}

#odCancelZone .btn-outline-danger {
  border: 1.5px solid var(--mvm-danger);
  color: var(--mvm-danger);
  background: #fff;
  font-weight: 700;
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}
#odCancelZone .btn-outline-danger:hover {
  background: var(--mvm-danger);
  color: #fff;
}
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.app-main {
    background-color:#EEEFF3;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ===== TOP NAVBAR (eski sidebar yerine) ===== */
.topnav {
    background-color: #2D2D62;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 68px;
    flex-shrink: 0;
}
.topnav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 24px;
    margin-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.topnav-brand img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #fff;
    object-fit: contain;
    padding: 3px;
}
.topnav-brand .brand-name {
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    line-height: 1.1;
}
.topnav-brand .brand-sub {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.75;
}
.topnav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow-x: auto;
}
.topnav-links li {
    flex-shrink: 0;
}
.topnav-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: #fff;
    font-size: 13.3px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.topnav-links a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}
.topnav-links a svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}

.topnav-links a:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.topnav-links a.active {
    background: var(--maroon-600);
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(125, 27, 46, 0.7);
}

@media (max-width: 991px) {
    .topnav {
        height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
    }
    .hamburger-btn {
        display: inline-flex;
        margin-left: auto;
        color: #fff;
    }
    .topnav-links {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        width: 240px;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background-color: #2D2D62;
        padding: 10px;
        border-radius: 0 0 0 var(--radius-md);
        box-shadow: -8px 12px 30px -10px rgba(28, 26, 63, 0.45);
        z-index: 1060;
    }
    .topnav-links.open {
        display: flex;
    }
    .topnav-links a {
        padding: 12px 14px;
    }
}
@media (max-width: 576px) {
    .topbar {
        display:none !important;
    }
}
.bin{
    width:1200px;
    background-color:#FFF;
    padding:20px;
    border-radius:6px;
    margin:auto !important;
}
/* ===== ESKİ TARZ ÜST LOGO BAR + HOŞGELDİN MENÜ BARI ===== */
/* ===== ESKİ TARZ ÜST LOGO BAR + HOŞGELDİN MENÜ BARI ===== */

.brand-topbar {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.brand-topbar img {
    max-height: 60px;
    object-fit: contain;
}

.welcome-menu-bar {
    width:1200px !important;
    margin-top:15px;
    border-radius:6px;
    margin:auto !important;
    background: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 28px;
}

.welcome-menu-text {
    color: #f1f1f1;
    font-size: 12.5px;
    font-weight: 400;
}
.welcome-menu-text strong {
    color: #ffffff;
    font-weight: 800;
}

.welcome-menu-actions {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
}
.welcome-menu-actions li {
    display: flex;
}

.welcome-menu-btn {
    background: #3b82f6;
    color: #fff !important;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
}
.welcome-menu-btn:hover {
    background: #2563eb;
    color: #fff;
}
.welcome-menu-btn:active {
    transform: translateY(1px);
}

.welcome-menu-btn.logout {
    background: #ec6b4d;
}
.welcome-menu-btn.logout:hover {
    background: #d9563a;
}

.welcome-menu-btn.active {
    background: #1d4ed8;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset;
}

.welcome-menu-bar .hamburger-btn {
    display: none;
    color: #fff;
    margin-left: auto;
}

@media (max-width: 991px) {
    .welcome-menu-bar {
        position: relative;
        justify-content: flex-start;
    }
    .welcome-menu-bar .hamburger-btn {
        display: inline-flex;
    }
    .welcome-menu-actions {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #4a4a4a;
        padding: 12px 16px;
        z-index: 1060;
        box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4);
    }
    .welcome-menu-actions.open {
        display: flex;
    }
    .welcome-menu-actions li {
        width: 100%;
    }
    .welcome-menu-btn {
        width: 100%;
        justify-content: center;
        border-radius: var(--radius-sm, 6px);
    }
}

@media (max-width: 576px) {
    .welcome-menu-bar {
        padding: 14px 16px;
    }
}

/* ===== YENİ BANKA BİLGİLERİ SAYFASI ===== */

.bank-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #3b82f6;
    color: #fff !important;
    border: none;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 999px;
    text-decoration: none !important;
    margin-bottom: 18px;
    transition: background 0.15s ease;
}
.bank-back-btn:hover {
    background: #2563eb;
    color: #fff;
}
.bank-back-btn svg {
    width: 18px;
    height: 18px;
}

.bank-page-title {
    background: #1c1c1c;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 22px;
}

.bank-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.bank-info-card {
    border: 1.5px solid #dcdde3;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.bank-info-row {
    display: grid;
    grid-template-columns: 60px 1fr;
    padding: 14px 18px;
    border-bottom: 1px solid #dcdde3;
    font-size: 14.5px;
}
.bank-info-row:last-child {
    border-bottom: none;
}
.bank-info-row .bi-label {
    font-weight: 800;
    font-size:13.5px;
    color: var(--ink-900);
    white-space: nowrap;
}
.bank-info-row .bi-value {
    color: var(--ink-900);
    font-weight: 600;
    font-size:13.5px;
    word-break: break-word;
}

@media (max-width: 991px) {
    .bank-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .bank-grid {
        grid-template-columns: 1fr;
    }
    .bank-info-row {
        grid-template-columns: 80px 1fr;
        font-size: 13.5px;
        padding: 12px 14px;
    }
}

/* ===== SAYFA GENEL KAPSAYICI (1100px sabit genişlik + beyaz panel) ===== */

body {
    background: #eef0f3;
}

.page-container {
    max-width: 1100px;
    margin: 0 auto;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    min-height: 100vh;
}

.page-container .welcome-menu-bar {
    border-radius: 0;
}

.page-container .page-body {
    padding: 28px 32px;
}

@media (max-width: 1150px) {
    .page-container {
        max-width: 100%;
        box-shadow: none;
    }
}

/* ===== KULLANICI / FİRMA BİLGİLERİ SAYFASI ===== */

.info-form-block {
    margin-bottom: 26px;
}
.info-form-block:last-child {
    margin-bottom: 0;
}

.info-field {
    margin-bottom: 20px;
}
.info-field:last-of-type {
    margin-bottom: 22px;
}

.info-field-label {
    display: block;
    font-size: 13.3px;
    font-weight: 700;
    color: #1c1c1c;
    margin-bottom: 8px;
}

.info-field-input {
    width: 100%;
    border: 1.5px solid #e3e5ee;
    border-radius: var(--radius-sm);
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-900);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.info-field-input:focus {
    outline: none;
    border-color: var(--navy-700);
    box-shadow: 0 0 0 3px rgba(58, 53, 112, 0.12);
}

.info-field-locked-wrap {
    position: relative;
}
.info-field-locked {
    background: #e2e2e2;
    color: #4a4a4a;
    cursor: not-allowed;
}
.info-field-lock-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #4a4a4a;
    pointer-events: none;
}

.btn-mvm-green {
    background: #3aa76d;
    border: none;
    color: #fff;
    font-weight: 800;
    font-size: 12.7px;
    letter-spacing: 0.4px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    transition: background 0.15s ease;
}
.btn-mvm-green:hover {
    background: #2f8f5b;
    color: #fff;
}
.btn-mvm-green:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== SİPARİŞLERİM SAYFASI (DataTables) ===== */

.orders-table-wrap {
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

#ordersTable_wrapper {
    padding: 20px 22px 22px;
}

#ordersTable_wrapper .dataTables_filter input {
    border: 1.5px solid var(--line-200);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 13.5px;
    margin-left: 8px;
    min-width: 260px;
}
#ordersTable_wrapper .dataTables_filter input:focus {
    outline: none;
    border-color: var(--navy-700);
}
#ordersTable_wrapper .dataTables_filter label {
    font-size: 0;
}
#ordersTable_wrapper .dataTables_filter label::before {
    content: "";
}

#ordersTable_wrapper .dataTables_length select {
    border: 1.5px solid var(--line-200);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 13.8px;
    margin: 0 6px;
}

#ordersTable_wrapper .dataTables_info {
    font-size: 13px;
    color: var(--ink-500);
    padding-top: 14px;
}

table.dataTable#ordersTable {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
}

table.dataTable#ordersTable thead th {
    background: #e7f3df;
    color: var(--ink-900);
    font-weight: 700;
    font-size: 13px;
    padding: 14px 18px;
    border-bottom: none;
}
table.dataTable#ordersTable thead th.sorting:before,
table.dataTable#ordersTable thead th.sorting:after,
table.dataTable#ordersTable thead th.sorting_asc:before,
table.dataTable#ordersTable thead th.sorting_asc:after,
table.dataTable#ordersTable thead th.sorting_desc:before,
table.dataTable#ordersTable thead th.sorting_desc:after {
    color: var(--ink-500);
    opacity: 0.7;
}

table.dataTable#ordersTable tbody td {
    padding: 15px 18px;
    font-size: 13.6px;
    color: var(--ink-900);
    border-bottom: 1px solid var(--line-200);
    vertical-align: middle;
}
table.dataTable#ordersTable tbody tr:hover td {
    background: var(--paper-50);
}

.order-status {
    font-weight: 600;
}
.order-status.status-onay { color: var(--ok-600); }
.order-status.status-iptal { color: var(--mvm-danger); }
.order-status.status-bekleme { color: var(--warn-600); }
.order-status.status-diger { color: var(--ink-700); }

.order-sevk-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}
.order-sevk-link:hover {
    text-decoration: underline;
    color: #1d4ed8;
}

.btn-incele {
    background: #1c1c1c;
    color: #fff !important;
    border: none;
    font-size: 12.6px;
    font-weight: 700;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s ease;
}
.btn-incele:hover {
    background: #000;
    color: #fff;
}

#ordersTable_wrapper .dataTables_paginate .paginate_button {
    border: 1.5px solid var(--line-200);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    margin-left: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-700) !important;
    background: #fff !important;
}
#ordersTable_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--navy-800) !important;
    border-color: var(--navy-800);
    color: #fff !important;
}
#ordersTable_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: 0.5;
}
#ordersTable_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled) {
    background: var(--paper-100) !important;
    border-color: var(--navy-700);
}

@media (max-width: 768px) {
    #ordersTable_wrapper .dataTables_filter input {
        min-width: 160px;
    }
}

.order-status-pill {
    display: flex;
    align-items: center;
    padding: 12px 22px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    white-space: nowrap;
}
.order-status-pill.status-onay { background: var(--ok-600); }
.order-status-pill.status-iptal { background: var(--mvm-danger); }
.order-status-pill.status-bekleme { background: var(--warn-600); }
.order-status-pill.status-diger { background: var(--navy-800); }
 
@media (max-width: 640px) {
    .order-status-pill {
        border-radius: var(--radius-md);
        width: 100%;
        justify-content: center;
    }
    .bank-page-title[style*="border-radius"] {
        border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    }
}

.order-detail-grid .bank-info-row {
    grid-template-columns: 110px 1fr;
    gap: 10px;
}
 
@media (max-width: 640px) {
    .order-detail-grid .bank-info-row {
        grid-template-columns: 100px 1fr;
    }
}
 
@media (max-width: 1250px) {
    .welcome-menu-bar {
        width:100% !important;
    }
    .bin {
        width:96% !important;
    }
}


products-page-wrap{
    display: block;
    width: 100%;
}
.products-page-wrap > .row{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px 20px;
}
.products-page-wrap > .row > [class*="col-"]{
    padding: 0 10px;
}

/* ============ ÖDEME + ARAMA SATIRI ============ */
.row.filter-row{
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -10px 20px !important;
    align-items: stretch !important;
}
.row.filter-row > .col-lg-8{
    flex: 0 0 66.6667% !important;
    max-width: 66.6667% !important;
    padding: 0 10px !important;
    display: flex !important;
}
.row.filter-row > .col-lg-4{
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
    padding: 0 10px !important;
    display: flex !important;
}

.payment-select-card{
    border: 1px solid var(--border-c);
    border-radius: 12px;
    padding: 0 20px;
    background: #fff;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.payment-select-label{
    display: inline-block;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
    color: #161527;
    margin-bottom: 0;
    white-space: nowrap;
}

.payment-select-note{
    display: none !important;
}
.payment-select-card #paymentOptions{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.payment-option-btn{
    border: 1px solid var(--border-c);
    background: #fff;
    color: #22213b;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 30px;
    transition: .2s;
    white-space: nowrap;
}

.payment-option-btn:hover{
    border-color: var(--indigo);
}
.payment-option-btn.active{
    background: var(--indigo);
    border-color: var(--indigo);
    color: #fff;
}

.urun-arama-wrap{
    width: 100%;
    display: block;
}
.urun-arama-input{
    width: 100%;
    flex: 1;
    min-height: 52px !important;
    border: 1px solid var(--border-c);
    background: #fff;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 14px;
    box-sizing: border-box;
}
.urun-arama-input:focus{
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(75,62,228,.12);
}

@media (max-width: 991px){
    .row.filter-row > .col-lg-8,
    .row.filter-row > .col-lg-4{
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .products-page-wrap > .row{
        flex-direction: column;
    }
    .products-page-wrap > .row > [class*="col-"]{
        width: 100%;
        margin-bottom: 14px;
    }
}

/* ============ SEPET PANELİ ============ */
.cart-panel{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    border: 1px solid var(--border-c);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
@media (max-width: 576px){
    .payment-select-card{
        height: auto;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 16px 18px 18px;
        gap: 10px;
        border-radius: 14px;
    }
    .payment-select-label{
        width: 100%;
        font-size: 13.5px;
        margin-bottom: 2px;
    }
    .payment-select-card #paymentOptions{
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
    }
    .payment-option-btn{
        padding: 10px 18px;
        font-size: 13.5px;
    }
}