/**
Project: Kaktüs Creative Pazaryeri
Version: 2
**/

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


:root {
    /* Primary - Pastel Mavi */
    --color-primary: #6BA3E3;
    --color-primary-dark: #4A8DD8;
    --color-primary-light: #8BB5ED;
    --color-primary-bg: #E8F2FC;
    --color-primary-text: #1E5A9E;
    --color-primary-border: #B8D4F0;

    /* Success - Pastel YeÅŸil */
    --color-success: #7BC89A;
    --color-success-dark: #5BA87A;
    --color-success-light: #9DD8B5;
    --color-success-bg: #E0F5E9;
    --color-success-text: #2D6B4A;
    --color-success-border: #B8E5CC;

    /* Warning - Pastel Turuncu */
    --color-warning: #F5B97F;
    --color-warning-dark: #E89A5A;
    --color-warning-light: #F8C99F;
    --color-warning-bg: #FEF4E8;
    --color-warning-text: #B8753A;
    --color-warning-border: #F9D9B8;

    /* Danger - Pastel Kırmızı */
    --color-danger: #F5A3A3;
    --color-danger-dark: #E87A7A;
    --color-danger-light: #F8B8B8;
    --color-danger-bg: #FEE8E8;
    --color-danger-text: #B84A4A;
    --color-danger-border: #F9C8C8;

    /* Info - Pastel Cyan */
    --color-info: #7BCDD4;
    --color-info-dark: #5BA8B2;
    --color-info-light: #9DE2E8;
    --color-info-bg: #E0F5F7;
    --color-info-text: #2D6B72;
    --color-info-border: #B8E5EA;

    /* Secondary - Pastel Mor */
    --color-secondary: #B8A3E3;
    --color-secondary-dark: #9A7DD8;
    --color-secondary-light: #D4C5ED;
    --color-secondary-bg: #F0EBFC;
    --color-secondary-text: #6B4A9E;
    --color-secondary-border: #D9C8F0;

    /* Dark - Modern Gri Tonları */
    --color-dark: #6B7280;
    --color-dark-dark: #4B5563;
    --color-dark-light: #9CA3AF;
    --color-dark-bg: #F3F4F6;
    --color-dark-text: #1F2937;
    --color-dark-border: #D1D5DB;

    /* Light - Açık Gri */
    --color-light: #F9FAFB;
    --color-light-dark: #F3F4F6;
    --color-light-light: #FFFFFF;
    --color-light-bg: #FFFFFF;
    --color-light-text: #6B7280;
    --color-light-border: #E5E7EB;

    /* Neutral Gri Tonları */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;

    /* Modern Tarz CSS - Ek Renk Değişkenleri (Uyumluluk için) */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --info-50: #f0f9ff;
    --info-100: #e0f2fe;
    --info-500: #0ea5e9;
    --info-600: #0284c7;
    --info-700: #0369a1;
}

@media (max-width: 575.98px) {}

@media (min-width: 576px) and (max-width: 767.98px) {}

@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        width: 99%;
        min-width: 99%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        width: 99%;
        min-width: 99%;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 95%;
        min-width: 95%;
    }
}

@media (min-width: 1900px) {
    .container {
        width: 80%;
        min-width: 80%;
    }
}

.musterisol {
    border: 1px solid #ddd;
    font-size: 12px;
    color: #000;
    padding: 6px;
    width: 22%;
    background: #F9FCFF;
}

.musterisag {
    border: 1px solid #ddd;
    font-size: 12px;
    color: #000;
    padding: 6px;
    width: 78%;
    background: #fff;
}

.nav-pills {
    --bs-nav-pills-border-radius: 0.375rem;
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: var(--color-danger);
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: #666;
    --bs-nav-link-hover-color: #000;
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

#v-pills-tab {
    float: left;
    width: 25%;
    height: auto;
    font-size: 16px;
    ;
}

#v-pills-tab button {
    font-size: 16px !important;
    border: 1px solid #efecec;
    border-radius: 0;
    padding: 10px;
}

#v-pills-tabContent {
    float: left;
    width: 75%;
    height: auto;
    font-size: 16px;
    ;
    line-height: 25px;
}

body {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: #F0F2F7;
    color: #1F2937;
    line-height: 1.6;
    background-attachment: fixed;
    min-height: 100vh;
}

span.default_ibare {
    font-size: 11px;
    border: 1px solid #777;
    padding: 3px 7px 3px 7px;
    border-radius: 12px;
    margin: 6px 2px 6px 2px;
    float: left;
    width: auto;
    height: auto;
}

a {
    text-decoration: none;
    color: var(--color-dark);
}

a:hover {
    text-decoration: none;
}

button {
    font-size: 16px !important;
    padding-top: 4px !important;
    padding-bottom: px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    cursor: pointer !important;
}


/* Base Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* btn içindeki tüm child elementler */
.btn * {
    pointer-events: none !important;
}

.btn {
    pointer-events: auto !important;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Primary Button - Pastel Mavi */
.btn-primary {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-border);
    color: var(--color-primary-text);
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-primary:hover {
    background: var(--color-primary-bg);
    border-color: var(--color-primary-dark);
    color: var(--color-primary-text);
    box-shadow: 0 2px 8px rgba(107, 163, 227, 0.3);
}

/* Success Button - Pastel YeÅŸil */
.btn-success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-text);
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-success:hover {
    background: var(--color-success-bg);
    border-color: var(--color-success-dark);
    color: var(--color-success-text);
    box-shadow: 0 2px 8px rgba(123, 200, 154, 0.3);
}

/* Danger Button - Pastel Kırmızı */
.btn-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-text);
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-dark);
    color: var(--color-danger-text);
    box-shadow: 0 2px 8px rgba(245, 163, 163, 0.3);
}

/* Warning Button - Pastel Turuncu */
.btn-warning {
    background: var(--color-warning);
    border-color: var(--color-warning-border);
    color: #FFFFFF;
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-warning:hover {
    background: var(--color-warning-dark);
    border-color: var(--color-warning-dark);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(245, 185, 127, 0.3);
}

/* Info Button - Pastel Cyan */
.btn-info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-info:hover {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
    color: var(--color-info-text);
    box-shadow: 0 2px 8px rgba(123, 205, 212, 0.3);
}

/* Secondary Button - Pastel Mor */
.btn-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary-border);
    color: #FFFFFF;
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
    border-radius: 8px;
}

.btn-secondary:hover {
    background: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(184, 163, 227, 0.3);
}

/* Dark Button */
.btn-dark {
    background: var(--color-dark-bg);
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-dark:hover {
    background: var(--color-dark-bg);
    border-color: var(--color-dark-border);
    color: var(--color-dark-text);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.3);
}

/* Light Button */
.btn-light {
    background: var(--color-light-bg) !important;
    border: 1px solid var(--color-light-border) !important;
    color: var(--color-light-text) !important;
    padding: 10px 20px !important;
    font-weight: 500;
    font-size: 14px !important;
}

.btn-light:hover {
    background: var(--color-light-dark) !important;
    border-color: var(--color-gray-300) !important;
    color: var(--color-dark-text) !important;
}

/* Outline Buttons - Pastel Renk Düzeni */
.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    padding: 10px 20px !important;
}

.btn-outline-primary:hover {
    background: var(--color-primary);
    border-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

.btn-outline-success {
    background: transparent;
    border: 1px solid var(--color-success) !important;
    color: var(--color-success) !important;
    padding: 10px 20px !important;
}

.btn-outline-success:hover {
    background: var(--color-success);
    border-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--color-danger) !important;
    color: var(--color-danger) !important;
    padding: 10px 20px !important;
}

.btn-outline-danger:hover {
    background: var(--color-danger);
    border-color: var(--color-danger) !important;
    color: #FFFFFF !important;
}

.btn-outline-warning {
    background: transparent;
    border: 1px solid var(--color-warning) !important;
    color: var(--color-warning) !important;
    padding: 10px 20px !important;
}

.btn-outline-warning:hover {
    background: var(--color-warning);
    border-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}

.btn-outline-info {
    background: transparent;
    border: 1px solid var(--color-info) !important;
    color: var(--color-info) !important;
    padding: 10px 20px !important;
}

.btn-outline-info:hover {
    background: var(--color-info);
    border-color: var(--color-info) !important;
    color: #FFFFFF !important;
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
    padding: 10px 20px !important;
}

.btn-outline-secondary:hover {
    background: var(--color-secondary);
    border-color: var(--color-secondary) !important;
    color: #FFFFFF !important;
}

.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--color-dark) !important;
    color: var(--color-dark) !important;
    padding: 10px 20px !important;
}

.btn-outline-dark:hover {
    background: var(--color-dark);
    border-color: var(--color-dark) !important;
    color: #FFFFFF !important;
}

span.title3 {
    font-size: 15px;
    font-weight: 700;
}

.productimage {
    width: 100px;
    height: 80px;
    aspect-ratio: 4/4;
    border: 1px solid #ddd;
}

.coverImg {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.fasttable {
    float: left;
    width: 100%;
    height: auto;
    padding: 12px !important;
}

.fasttable h4 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #001C40;
    margin: 0 0 0 0;
    background: #efecec;
    border-bottom: 1px solid #efecec;
    padding: 10px;
}

.geneltek {
    float: left;
    width: 100%;
    height: auto;
    font-size: 14px;
}

.geneltitle {
    float: left;
    width: 85%;
    height: auto;
    padding: 6px;
    border: 1px solid #ddd;
    font-weight: 600;
}

.genelvalue {
    float: left;
    width: 15%;
    height: auto;
    padding: 6px;
    border: 1px solid #ddd;
}

td.text {
    color: #555;
    font-size: 14px;
}

.boslukat {
    float: left;
    width: 100%;
    height: auto;
    margin: 3px 0 3px 0;
    clear: both;
}

.istabasko {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.istabasko .btn-outline-light {
    background: #fff;
    color: #222;
    float: right;
    font-size: 14px !important;
    padding: 10px !important;
    margin-right: 6px;
    border: 1px solid #efecec;
}

/* Modern Header Action Buttons */
.header-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    margin-right: 6px;
    background: #ffffff;
    color: #374151;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    float: right;
    position: relative;
    box-shadow: none;
    min-width: 70px;
    text-align: center;
}

.header-action-btn:hover {
    background: #f9fafb;
    border-color: transparent;
    color: #111827;
    box-shadow: none;
    transform: translateY(-1px);
}

.header-action-btn i {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: #6b7280;
    transition: color 0.2s ease;
    display: block;
    margin: 0 auto;
}

.header-action-btn:hover i {
    color: #111827;
}

.header-action-btn span {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    display: block;
}

.header-action-btn-wrapper {
    display: inline-flex;
}

.header-action-btn.dropdown-toggle {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.header-action-btn.dropdown-toggle::after {
    display: none;
}

.header-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
    box-shadow: none;
}

/* Form alanları – modern stil */
input:not(#hwpwrap input):not(.bootstrap-tagsinput):not([data-role="tagsinput"]),
textarea:not(#hwpwrap textarea),
select:not(#hwpwrap select),
.form-control:not(#hwpwrap .form-control):not(.bootstrap-tagsinput),
.form-select:not(#hwpwrap .form-select) {
    font-size: 14px !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #1F2937;
    transition: all 0.2s ease;
}

input:not(#hwpwrap input):not(.bootstrap-tagsinput):not([data-role="tagsinput"]):focus,
textarea:not(#hwpwrap textarea):focus,
select:not(#hwpwrap select):focus,
.form-control:not(#hwpwrap .form-control):not(.bootstrap-tagsinput):focus,
.form-select:not(#hwpwrap .form-select):focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: #9CA3AF;
    font-size: 14px;
}

textarea:not(#hwpwrap textarea),
textarea.form-control[name='description'] {
    resize: vertical;
}

strong {
    font-weight: 600 !important;
    color: #1F2937;
}

label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151;
}

h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 20px;
    font-weight: 600;
    color: #1F2937;
}

h2 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

h3 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 14px;
    font-weight: 600;
}

h4 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 12px;
    font-weight: 600;
}

h5 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 12px;
    font-weight: 600;
}

/* 2.0.0  */
.fastbutton {
    font-size: 15px;
    padding: 10px 0 10px 0;
    white-space: nowrap;
}

.fastbutton .btn {
    border-radius: 12px;
    padding: 0;
    width: 32px;
    height: 32px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    margin: 0 0 0 0 !important;
    transition: all 0.2s ease;
    box-shadow: none;
}

.fastbutton .btn:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

.fastbutton .btnEdit {
    background: (var(--color-success-bg));
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border) !important;
}

.fastbutton .btnEdit:hover {
    background: (var(--color-success-bg));
    color: var(--color-success-text);
}

.fastbutton .btnRemove {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border) !important;
}

.fastbutton .btnRemove:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.fastbutton .btnSession {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border) !important;
}

.fastbutton .btnSession:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.fastbutton .btnAddress {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border) !important;
}

.fastbutton .btnAddress:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.fastbutton .btnKey {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border) !important;
    color: var(--color-warning-text);
}

.fastbutton .btnKey:hover {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.fastbutton .btnCart {
    background: var(--color-primary-bg);
    border: 1px solid var(--color-primary-border) !important;
    color: var(--color-primary-text);
}

.fastbutton .btnCart:hover {
    background: var(--color-primary-bg);
    color: var(--color-primary-text);
}

.fastbutton .btnFav {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border) !important;
    color: var(--color-danger-text);
}

.fastbutton .btnFav:hover {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}

.fastbutton .btn {
    position: relative;
}

.fastbutton .badge-mini {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-danger-bg);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.fancybox__container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    direction: ltr;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    color: var(--fancybox-color, #fff);
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    z-index: 20000 !important;
    outline: none;
    transform-origin: top left;
    --carousel-button-width: 48px;
    --carousel-button-height: 48px;
    --carousel-button-svg-width: 24px;
    --carousel-button-svg-height: 24px;
    --carousel-button-svg-stroke-width: 2.5;
    --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.4));
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000 !important;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    outline: 0 !important;
}

/* Modal Backdrop - Blur Efekti */
.modal-backdrop {
    background-color: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease !important;
}

.modal-backdrop.fade {
    opacity: 0 !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

/* Modal Dialog - Kompakt ve Modern */
.modal-dialog {
    margin: 1.5rem auto !important;
    max-width: 90% !important;
    position: relative;
    pointer-events: auto;
}

.modal-dialog.modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3rem) !important;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    transform: translate(0, -30px) scale(0.95) !important;
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: translate(0, 0) scale(1) !important;
    opacity: 1;
}

/* Modal Content - Belirgin ve Modern */
.modal-content {
    background-color: #FFFFFF !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative;
}

/* Modal Header - Kompakt ve Modern */
.modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
    margin: 0 !important;
    line-height: 1.4;
}

/* Modal Close Button - Modern */
.modal-header .btn-close,
.modal-content .btn-close {
    background: rgba(107, 114, 128, 0.1) !important;
    opacity: 1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    filter: brightness(0) saturate(100%) invert(30%) !important;
}

.modal-header .btn-close:hover,
.modal-content .btn-close:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    filter: brightness(0) saturate(100%) invert(30%) sepia(100%) saturate(5000%) hue-rotate(0deg) !important;
    transform: scale(1.1) !important;
}

.modal-header .btn-close:focus,
.modal-content .btn-close:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    outline: none !important;
}

/* Modal Body - Kompakt Padding */
.modal-body {
    padding: 24px !important;
    font-size: 14px !important;
    line-height: 1.6;
    color: #4B5563;
}

/* Modal Footer - Kompakt */
.modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #E5E7EB !important;
    background: #F9FAFB !important;
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.modal-footer .btn {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

/* Responsive Modal Sizes */
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 500px !important;
    }

    .modal-dialog.modal-sm {
        max-width: 400px !important;
    }
}

@media (min-width: 992px) {
    .modal-dialog.modal-lg {
        max-width: 800px !important;
    }

    .modal-dialog.modal-xl {
        max-width: 1140px !important;
    }
}

@media (max-width: 575px) {
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    .modal-header {
        padding: 16px 20px !important;
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
    }

    .modal-body {
        padding: 20px !important;
    }

    .modal-footer {
        padding: 12px 20px !important;
        border-bottom-left-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
        flex-direction: column-reverse !important;
    }

    .modal-footer .btn {
        width: 100% !important;
    }
}

.alert-secondary {
    background: #f7f7f7;
    font-size: 14px;
}


/* GiriÅŸ Yap */
.beyazekran {
    float: left;
    position: relative;
    top: 20% !important;
    width: 100%;
    height: auto;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-shadow: none;
    border: none;
}

.solresim {
    float: left;
    width: 50%;
    height: 450px;
    border-right: 1px solid #ddd;
    opacity: 0.5;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.saggiris {
    float: left;
    width: 50%;
    height: auto;
    padding: 60px;
}

.girlogo {
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin: 0 0 40px 0;
}

.girlogo img {
    max-width: 100%;
}

.saggiris input {
    padding: 10px !important;
    background: #e4eaef !important;
}

/* Anasayfa */
#ustbeyaz {
    float: left;
    width: 100%;
    height: auto;

    border-bottom: 1px solid #efecec;
}

.ustsolbe {
    float: left;
    width: auto;
    height: auto;
    font-size: 13px;
    padding: 12px 0 12px 0;
    border-right: 1px solid #efecec;
    padding-right: 6px;
    margin-right: 6px;
}

.ustsagbe {
    float: right;
    width: auto;
    height: auto;
    font-size: 15px;
    padding: 12px 0 12px 0;
    border-left: 1px solid #efecec;
    padding-left: 6px;
    margin-left: 6px;
}

.ustsagbe a {
    color: #444;
}

.scroll {
    float: left;
    width: 100%;
    max-height: 250px;
    overflow-y: scroll;
}

.form-check-label {
    font-size: 14px !important;
}

#beyaz {
    float: left;
    width: 100%;
    height: auto;
    padding: 25px 0 25px 0;
}

.plogo {
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 6px 0 0 0;
}

.plogo img {
    max-width: 70%;
    margin: 0 auto;
    height: auto;
    display: block;
}

.sagss {
    float: right;
    width: 100%;
    height: auto;
    padding: 10px 0 10px 0;
    text-align: right;
}

.sagss a {
    color: #083857;
    font-size: 15px;
    font-weight: 400;
    margin-left: 20px;
}

.bredbred {
    width: 100%;
    background: #FFFFFF;
    padding: 20px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: none;
    border: none;
    margin-bottom: 24px;
}

.bredsol {
    display: flex;
    align-items: center;
}

.bredsol h1 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    color: #1F2937;
}

.bredsag {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.form-checksty {
    font-size: 15px;
    padding: 0;
    margin: 0;
}




/* Modern Switch Card Container */
.modern-switch-card {
    width: 100% !important;
    height: auto !important;
    background: #FFFFFF !important;
    padding: 12px 16px !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
}

.modern-switch-card:hover {
    border-color: #D1D5DB !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.modern-switch-card .form-check-label {
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin: 0 !important;
    flex: 1 !important;
}

.form-check {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: auto !important;
    padding-left: 0 !important;
}

.form-check-label {
    font-size: 14px !important;
    color: #475569 !important;
    cursor: pointer !important;
    user-select: none !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.form-check-input {
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


.bredbred .form-control {
    padding: 6px 12px !important;
}

/* Ürünler filtre alanı (Ürünler / Öne Çıkanlar / İndirimli vb.) */
.bredfilters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 10px 16px;
    width: 100%;
    overflow-x: auto;
}

.bredfilters-search {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 380px;
    width: 100%;
}

.bredfilters-search input[type="text"] {
    flex: 1 1 auto;
}

.bredfilters-search .form-select {
    flex: 0 0 150px;
}

.bredfilters-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.tummakale {
    float: left;
    width: 100%;
    height: auto;
    margin: 0px 0 0 0;
}

.tummakale .dropdown-item {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 3px 10px 3px 10px !important;
}

.genelliste {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
}

.genellistedar {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
}

.genellistedar .dropdown-item {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 3px 10px 3px 10px !important;
}

.yeniolustur {
    float: left;
    width: 70%;
    height: auto;
    background: #FFFFFF;
    margin: 24px 0 0 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.boskutu {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin: 24px 0 0 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    color: #1F2937;
    text-align: center;
    border: none;
}

/* Sipariş Düzenle Styles */
.siparisarka {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin: 0 0 0 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.siparisarka h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 10px 0;
    font-size: 17px;
    font-weight: 700;
}

.siparisarka td,
.siparisarka th {
    border: 1px solid #ddd;
}

.ibaresol {
    float: left;
    width: 50%;
    height: auto;
    min-height: 36px;
    border: 1px solid #E7F4FF;
    font-size: 13px;
    font-weight: 600;
    padding: 7px;
    background: #F9FCFF;
}

.ibaresag {
    float: left;
    width: 50%;
    height: auto;
    min-height: 36px;
    border: 1px solid #E7F4FF;
    font-size: 13px;
    font-weight: 500;
    padding: 7px;
    color: #001C40;
}

.tamboy {
    float: left;
    width: 100%;
    height: auto;
    border: 1px solid #E7F4FF;
    font-size: 14px;
    font-weight: 400;
    padding: 7px;
    color: #001C40;
    background: #F9FCFF;
}

.storeright {
    height: auto;
    margin: 20px 0 0 0;
}

.storebox {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin: 0 0 0 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.storebox h1 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 20px;
    font-weight: 600;
    color: #1F2937;
    margin: 0 0 24px 0;
}

.golgelibeyaz {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin: 24px 0 0 0;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.golgelibeyazkutu {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    margin: 12px 0 0 0;
    box-shadow: none;
    padding: 16px;
    border: none;
    border-radius: 8px;
}

.golgelibeyaz h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #6B7280;
}

.golgelibeyaz h2 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 700;
    color: #1F2937;
}

.modal-content img {
    max-width: 100%;
}

#hwpwrap .control-section .accordion-section-title {
    border: 1px solid #dfdfdf !important;
    padding: 10px 10px 11px 14px;
    line-height: 21px;
    background: #fff;
}

#hwpwrap .accordion-section-content {
    display: none;
    padding: 10px 20px 15px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ddd;
}

.kisimla {
    float: left;
    width: 100%;
    height: auto;
    padding: 10px;
    border: 1px solid #efecec;
}

.kisimla h1 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid #efecec;
    padding: 0 0 10px 0;
    font-size: 15px !important;
}

.yasalbilgi {
    float: left;
    width: 100%;
    height: auto;
    text-align: left !important;
    padding: 20px;
}

.yasalbilgi img {
    max-width: 50%;
    height: auto;
    margin: 0 0 15px 0;
}

.yasalbilgi h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 16px;
    font-weight: 500;
    text-align: left !important;
}

.yasalbilgi p {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.kategorileri {
    float: left;
    width: 30%;
    height: auto;
    margin: 20px 0 0 0;
}

a .kategorisoltek {
    color: #4B5563;
    font-size: 14px;
}

.kategorisoltek {
    float: left;
    width: 100%;
    height: auto;
    padding: 16px 20px;
    border-bottom: none !important;
    border: none;
    background: #FFFFFF;
    font-weight: 500;
    margin: 0 0 10px 0;
    box-shadow: none;
    border-radius: 8px;
}

.bloktek {
    float: right;
    width: 93%;
    height: auto;
    margin: 0 0 20px 0;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.bloktek img {
    max-width: 100%;
}

.bloktek h1 {
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

.blokteksol {
    float: left;
    width: 93%;
    height: auto;
    margin: 0 0 20px 0;
    background: #FFFFFF;
    box-shadow: none;
    border-radius: 12px;
    padding: 24px;
    border: none;
}

.blokteksol img {
    max-width: 100%;
}

.blokteksol h1 {
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

.galerialani {
    float: left;
    width: 100%;
    height: auto;
    padding: 24px;
    background: #FFFFFF;
    box-shadow: none;
    border: none;
    border-radius: 12px;
    margin: 0 0 24px 0;
}

.galerisoltek {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid #f1f1f1;
    margin-right: 5px;
    margin-bottom: 5px;
}

.galerisoltek img {
    max-width: 100%;
}

.galeriyeekle {
    float: left;
    width: 100px;
    height: 100px;
    background: #f1f1f1;
    border: 1px solid #ddd;
    text-align: center;
    padding: 40px 0 0 0;
    color: #ddd;
}

.fotokaldir {
    float: right;
    width: auto;
    height: auto;
    position: relative;
    color: #fe0000 !important;
    cursor: pointer;
    right: 0;
    font-size: 26px;
}

.fotokaldir a:hover {
    color: #444 !important;
}

a.resimSil {
    color: #fe0000;
}

.ayarblock {
    float: left;
    width: 23%;
    height: auto;
    padding: 24px;
    box-shadow: none;
    background: #FFFFFF;
    margin: 24px 0 0 0;
    border-radius: 12px;
    font-size: 14px !important;
    border: none;
}

.ayaric {
    float: right;
    /* width: 75%; */
    height: auto;
    padding: 24px;
    box-shadow: none;
    background: #FFFFFF;
    margin: 24px 0 0 0;
    border-radius: 12px;
    font-size: 14px !important;
    border: none;
}

.ayarblock .nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.ayarblock .nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #083857;
}

.ayarblock .nav-pills .nav-link {
    border-radius: .25rem;
    color: #083857;
}

.ayarblock .nav-link {
    display: block;
    padding: .5rem 1rem;
}

.avatarresmi {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    border: 2px solid #f2f2f2;
    margin: 0 auto;
}

.sliderresmi {
    width: 100%;
    height: 350px;
    border: 2px solid #f2f2f2;
    margin: 0 auto;
}

/* Eski kategoriresmi stili yukarıda güncellendi */

.sitelogoav {
    width: 250px;
    height: 100px;
    border: 2px solid #f2f2f2;
    float: left;
}

.sitelogofav {
    width: 70px;
    height: 70px;
    border: 2px solid #f2f2f2;
    float: left;
}

.psag {
    float: right;
    width: 100%;
    height: auto;
    text-align: right !important;
}

.sagagit {
    float: right;
    width: auto;
    height: auto;
    margin-left: 12px;
}

.mesajlarim {
    float: right;
}

.bildirimlerim {
    float: right;
}

.hide {
    display: none;
}

.hiddenme:hover+.hide {
    display: block;
    position: absolute;
    background: #fff;
    left: 180px;
    width: 100px;
    height: auto;
    padding: 5px;
    border: 1px solid #f2f2f2;
    box-shadow: 0 10px 18px 0 rgba(34, 66, 125, .08);
}

.panelhabertek {
    float: left;
    width: 100%;
    height: auto;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 0 10px 0;
}

.panelhabfoto {
    float: left;
    width: 15%;
    height: 70px;
    border: 1px solid #f1f1f1;
    padding: 10px;
    text-align: center;
    font-size: 30px;
    color: #444;
}

.panelhabacik {
    float: left;
    width: 85%;
    height: auto;
    padding: 0 10px 0 10px;
}

.panelhabacik h5 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 13px;
    font-weight: 400;
    color: #444;
}

.panelhabacik h1 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 17px;
    font-weight: 500 !important;
    margin: 0 0 5px 0 !important;
}

.modal-body h5 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin: 0 0 12px 0 !important;
}

.modal-body h1 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 12px 0 !important;
}

/* Modal içindeki form elemanları */
.modal-body .form-control,
.modal-body .form-select {
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Modal içindeki butonlar */
.modal-body .btn {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.yazilimtek {
    float: left;
    width: 24%;
    height: 120px;
    margin-right: 1%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px 12px 10px 12px;
    text-align: center;
}

.yazilimtek h1 {
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 13px !important;
    font-weight: 700;
}

.yazilimtek img {
    max-width: 65%;
}

.istatistikkutucuk {
    float: left;
    width: 100%;
    height: auto;
    padding: 0;
    background: #FFFFFF;
    box-shadow: none;
    margin: 0 0 24px 0;
    border-radius: 12px;
    border: none;
}

.istatistikkutucuk h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 14px;
    padding: 16px 20px;
    background: #F9FAFB;
    color: #6B7280;
    font-weight: 500;
    text-align: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.istatistikkutucuk h2 {
    float: left;
    width: 100%;
    height: auto;
    padding: 24px;
    margin: 0 0 0 0;
    font-size: 32px;
    color: #1F2937;
    font-weight: 700;
    text-align: center;
}

.kututek {
    float: left;
    width: 50%;
    height: auto;
    padding: 10px;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.kututek .kututekic {
    float: left;
    width: 75%;
    height: auto;
}

.kututek .kututeksimge {
    float: left;
    width: 25%;
    height: auto;
    text-align: center;
}

.kututek span.baslik {
    float: left;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

.kututek span.oranlar {
    float: left;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

.kututek span.toplam {
    float: left;
    width: 100%;
    height: auto;
    font-size: 20px !important;
    font-weight: 600;
    color: #6ab131 !important;
}

.kutucuk {
    float: left;
    width: 100%;
    height: auto;
    padding: 24px;
    border-radius: 12px;
    background: #FFFFFF;
    border: none;
    box-shadow: none;
    margin: 0 0 24px 0;
}

.kutucuk h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.kutucuk h2 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 32px;
    color: #1F2937;
    font-weight: 700;
}

a .kutucuk:hover {
    border: none;
}

.kututek2 {
    float: left;
    width: 50%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    padding-left: 20px;
}

.kututek2 .kututekic {
    float: left;
    width: 75%;
    height: auto;
}

.kututek2 .kututeksimge {
    float: left;
    width: 25%;
    height: auto;
    text-align: center;
}

.kututek2 span.baslik {
    float: left;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

.kututek2 span.oranlar {
    float: left;
    width: 100%;
    height: auto;
    font-size: 12px;
    font-weight: 400;
    color: #777;
}

.kututek2 span.toplam {
    float: left;
    width: 100%;
    height: auto;
    font-size: 20px !important;
    font-weight: 600;
    color: #6ab131 !important;
}

.bildirimtek {
    float: left;
    width: 100%;
    height: auto;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0 8px 0;
}

.bildirimtek h1 {
    float: left;
    width: 100%;
    height: auto;
    margin: 3px 0 4px 0 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1F2937 !important;
}

.bildirimtek h2 {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6B7280 !important;
}

.copyright {
    float: left;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: none;
    color: #4B5563;
    padding: 16px 20px;
    margin: 24px 0 0 0;
    border-radius: 8px;
}

.copysol {
    float: left;
    width: 50%;
    height: auto;
}

.copysag {
    float: right;
    width: 50%;
    height: auto;
    text-align: right;
}

.copysag a {
    font-weight: 500;
    margin-left: 12px;
    color: #4B5563;
}

.kayarslayt {
    float: left;
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: #FFFFFF;
    border: none;
    box-shadow: none;
    margin: 0 0 24px 0;
}

#bayibanneri {
    float: left;
    width: 100%;
    height: auto;
    margin: 10px 0 0 0;
}

#bayibanneri .item {
    float: left;
    width: 100%;
    height: auto;
}

#bayibanneri .item img {
    max-width: 100%;
}

#bayibanneri .item h5 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 15px;
    font-weight: 300;
    color: #083857;
    margin: 10px 0 0 0;
}

span.detaylisi {
    float: left;
    width: 100%;
    height: auto;
    margin: 0 0 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #083857;
    margin: 12px 0 0 0;
    clear: both;
    text-align: right;
}

span.detaylisi a {
    color: #083857;
}

span.detaylisi a:hover {
    color: var(--color-danger);
}

span.tekveri {
    float: left;
    width: 100%;
    height: auto;
    font-size: 15px;
    color: #083857;
    font-weight: 600;
    padding: 4px 0 4px 0;
    border-bottom: 1px dotted #083857;
}

.modultek {
    float: left;
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 24px;
    background: #FFFFFF;
    padding: 0 0 24px 0;
    box-shadow: none;
    border: none;
}

.modultek img {
    float: left;
    max-width: 100%;
    height: auto;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modultek h1 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    padding: 0 24px 0 24px;
    margin: 24px 0 8px 0;
}

.modultek h2 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: 400;
    color: #6B7280;
    padding: 0 24px 0 24px;
    margin: 0 0 0 0;
}

.modultek h3 {
    float: left;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-weight: 600;
    color: #4B5563;
    padding: 0 24px 0 24px;
    margin: 12px 0 12px 0;
}

.modultek .btn-success {
    margin-left: 17px;
}

.modultek .btn-primary {
    margin-left: 17px;
}

.modfiyat {
    float: left;
    width: auto;
    height: auto;
    margin-left: 12px;
    font-size: 25px;
    font-weight: 700;
    color: #ff7018;
}

.listeavatar {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    background: #f2f2f2;
    border-radius: 50%;
}

.bootstrap-tagsinput {
    background-color: transparent !important;
    width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    color: #1F2937 !important;
    vertical-align: middle !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    line-height: 1.5 !important;
    cursor: text !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    position: relative !important;
}

/* Form-control class'ı bootstrap-tagsinput container'ına uygulanırsa override et */
.bootstrap-tagsinput.form-control {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.bootstrap-tagsinput:hover {
    border: none !important;
    box-shadow: none !important;
}

.bootstrap-tagsinput.focus {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.bootstrap-tagsinput input {
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
    background-color: #FFFFFF !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    color: #1F2937 !important;
    line-height: 1.5 !important;
    flex: 1 1 100% !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.bootstrap-tagsinput input:focus {
    border-color: #2563EB !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
    outline: none !important;
}

.bootstrap-tagsinput input:hover {
    border-color: #D1D5DB !important;
}

.bootstrap-tagsinput input::placeholder {
    color: #9CA3AF !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: #9CA3AF !important;
    opacity: 1 !important;
}

.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #9CA3AF !important;
}

.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #9CA3AF !important;
}

.bootstrap-tagsinput input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Modern Etiket (Tag) Tasarımı */
.bootstrap-tagsinput .tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: linear-gradient(135deg, #2563EB 0%, #1e40af 100%) !important;
    color: #FFFFFF !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
    transition: all 0.2s ease !important;
    border: none !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.bootstrap-tagsinput .tag:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.35) !important;
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
}

/* Etiket Silme Butonu */
.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "×" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    background: rgba(255, 255, 255, 0.4) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    transform: scale(0.95) !important;
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Label Info Stili (Eğer kullanılıyorsa) */
.bootstrap-tagsinput .label-info {
    background: linear-gradient(135deg, #2563EB 0%, #1e40af 100%) !important;
    color: #FFFFFF !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25) !important;
}

/* Tagsinput Form Control Özel Stiller */
/* Orijinal input'u tamamen gizle - bootstrap-tagsinput kendi container'ını oluşturuyor */
input[data-role="tagsinput"],
input.tagsinputform[data-role="tagsinput"],
input.form-control[data-role="tagsinput"],
input.tagsinputform.form-control[data-role="tagsinput"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* sr-only class'ı için de ekstra güvence */
.sr-only,
input.sr-only,
input.tagsinputform.sr-only,
input.form-control.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* Bootstrap-tagsinput container'ı border'sız olsun - sadece input'un border'ı var */
.bootstrap-tagsinput {
    position: relative !important;
    display: inline-flex !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* Orijinal input'un wrapper'ını etkisiz hale getir */
input[data-role="tagsinput"]+.bootstrap-tagsinput,
input.tagsinputform[data-role="tagsinput"]+.bootstrap-tagsinput {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Form-control class'ı varsa bile container border'sız */
.tagsinputform.bootstrap-tagsinput,
.bootstrap-tagsinput.form-control {
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Responsive Tasarım */
@media (max-width: 768px) {
    .bootstrap-tagsinput {
        padding: 0 !important;
        min-height: auto !important;
        font-size: 13px !important;
    }

    .bootstrap-tagsinput input {
        width: 100% !important;
        min-width: 100% !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
    }

    .bootstrap-tagsinput .tag {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
}

/* Eski badge-info kaldırıldı - Standart badge sınıfları kullanılmalı */

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333;
    white-space: nowrap;
}

.tt-suggestion:hover,
.tt-suggestion:focus {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
    outline: 0;
    background-color: #083857;
}

.variant_table {
    font-size: 15px;
}

.grid-btn {
    border-radius: 3px;
    border: 1px solid;
    margin-right: 10px;
    padding: 6px;
}

.grid-btn.btn1l {
    border-color: var(--color-success);
    color: var(--color-success-text);
}

.grid-btn.btn2l {
    border-color: var(--color-danger);
    color: var(--color-danger-text);
}

.grid-btn:last-child {
    margin-right: 0;
}

.ui-menu-item {
    display: flex;
}

.ui-menu-item .ui-menu-item-wrapper {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 4px 6px !important;
}

.ui-menu-item img.ui-menu-item-wrapper {
    flex-grow: 0;
    flex-shrink: 0;
    width: 100px;
    padding: 4px 6px !important;
}

.invoice-modal {
    padding-right: 0px !important;
    background: #fff;
    z-index: 99999999999999;
}

.invoice-modal .modal-header .formats {
    float: left;
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    left: 0px;
}

.invoice-modal .modal-header .formats li {
    float: left;
    width: auto;
    height: auto;
    list-style: none;
    padding: 10px;
}

.invoice-modal .modal-header .formats li.active {
    float: left;
    width: auto;
    height: auto;
    border-bottom: 3px solid #e89f05 !important;
}

.invoice-modal .modal-dialog {
    max-width: 100%;
    top: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

.invoice-modal .modal-header .headbtn {
    padding: 0px !important;
    background: none;
    border: none;
    margin-top: 3px;
    font-weight: 600;
}

.invoice-modal .modal-header .headbtn:focus {
    outline: none;
}

.invoice-modal .modal-header .formats li {
    padding: 0px;
    margin-left: 20px;
}

.invoice-modal .yazdir {
    color: #fff;
}

.invoice-modal .modal-body {
    background-color: #efefef;
    padding: 0px;
}

.invoice-modal .modal-content {
    border: none;
}

.invoice-modal .print-receipt-area {
    background: #fff;
    background-size: 100% auto;
    border: 1px solid #fff;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    font-size: .35cm;
    height: 29.67354cm;
    line-height: 1.2;
    margin: 15px auto 45px;
    position: relative;
    transition: all .2s linear;
    width: 21cm;
}

.invoice-modal .print-receipt-area-inner {
    height: 100%;
    position: relative;
}

.invoice-modal .draggable {
    position: absolute;
    transition: all .2s linear;
}

.invoice-modal .print-receipt-area .buyer {
    width: 9cm;
}

.invoice-modal .print-receipt-area .buyerDetail {
    margin-top: 14px;
}

.invoice-modal .print-receipt-area .date {
    margin-left: 56px;
    margin-top: 31px;
}

.invoice-modal .print-receipt-area .products {
    margin-left: 3px;
    margin-top: 2px;
    width: 615px;
}

.invoice-modal .print-receipt-area .cargoCodeContainerBottom {
    text-align: center;
    width: 120px;
}

.invoice-modal .text-x-small {
    font-size: 10px;
}

.invoice-modal .print-receipt-area .cargoCodeContainerBottom svg {
    height: auto;
    width: 112.5px;
}

.invoice-modal .print-receipt-area .total {
    font-weight: 700;
    margin-left: 13px;
    margin-top: -2px;
    width: 180px;
}

.invoice-modal .print-receipt-area .total .label {
    flex: 1 0 75px;
    max-width: 75px;
    text-align: right;
}

.invoice-modal .print-receipt-area .total .value {
    flex: 1 1;
    text-align: right;
}

.invoice-modal .print-receipt-area .decimal-writer {
    font-weight: 700;
    margin-left: -1px;
    margin-top: -2px;
}

.invoice-modal .print-receipt-item {
    align-items: center;
    display: flex;
    line-height: 1.2;
    padding-bottom: 5px;
}

.invoice-modal .print-receipt-item .quantity {
    flex: 0 0 69px;
    max-width: 69px;
}

.invoice-modal .print-receipt-item .name {
    flex: 1 1;
    letter-spacing: -.5px;
    padding-right: 10px;
}

.invoice-modal .print-receipt-item .tax {
    flex: 0 0 45px;
    max-width: 45px;
}

.invoice-modal .print-receipt-item .tax-rate {
    padding: 0 10px 0 7px;
}

.invoice-modal .print-receipt-item .priceWithoutTax {
    flex: 0 0 80px;
    max-width: 80px;
    text-align: right;
}

.invoice-modal .print-receipt-item .priceWithoutTaxSubTotal {
    flex: 0 0 107px;
    max-width: 107px;
    text-align: right;
}

.invoice-modal .print-receipt-area .buyerDetail span {
    display: none;
}

.invoice-modal .print-receipt-area.format-2 .buyerDetail {
    margin-top: 13px;
    width: 300px;
}

.invoice-modal .print-receipt-area .buyerDetail div:first-child {
    margin-bottom: 17px;
}

.invoice-modal .print-receipt-area.format-2 .buyerDetail div:first-child {
    margin-bottom: 0;
}

.invoice-modal .print-receipt-area.format-2 .buyerDetail span {
    display: inline;
    font-weight: 700;
}

.invoice-modal .print-receipt-area.format-2 .buyerDetail div:nth-child(2) {
    margin-top: 6px;
}

.invoice-modal .print-receipt-area.format-2 .buyerDetail span {
    display: inline;
    font-weight: 700;
}

.invoice-modal .print-receipt-area .date div:first-child {
    margin-bottom: 22px;
}

.invoice-modal .print-receipt-area .date div:nth-child(2) {
    margin-bottom: 19px;
}

.invoice-modal .print-receipt-area.format-2 .date {
    margin-left: 76px;
    margin-top: 13px;
}

.invoice-modal .print-receipt-area.format-2 .date div:first-child {
    margin-bottom: 12px;
}

.invoice-modal .print-receipt-area.format-2 .date div:nth-child(2) {
    margin-bottom: 5px;
}

.invoice-modal .print-receipt-area.format-2 .products {
    margin-top: 4px;
    width: 694px;
}

.invoice-modal .print-receipt-area.format-2 .products .print-receipt-item {
    padding-bottom: 1px;
}

.invoice-modal .print-receipt-area.format-2 .products .tax {
    flex: 0 0 50px;
    max-width: 50px;
}

.invoice-modal .print-receipt-area.format-2 .products .quantity {
    flex: 0 0 127px;
    max-width: 127px;
    padding-left: 53px;
    text-align: left;
}

.invoice-modal .print-receipt-area.format-2 .products .priceWithoutTaxSubTotal {
    flex: 0 0 114px;
    max-width: 114px;
}

.invoice-modal .print-receipt-area.format-3 .buyer {
    margin-top: 1px;
}

.invoice-modal .print-receipt-area.format-3 .buyer div:first-child {
    margin-bottom: 30px;
}

.invoice-modal .print-receipt-area.format-3 .buyerDetail {
    display: flex;
    margin-top: 20px;
    width: 300px;
}

.invoice-modal .print-receipt-area.format-3 .buyerDetail div:first-child {
    flex: 1 0 162px;
    margin-bottom: 0;
    max-width: 162px;
}

.invoice-modal .print-receipt-area.format-3 .date {
    margin-left: 76px;
    margin-top: 14px;
}

.invoice-modal .print-receipt-area.format-3 .date div:first-child {
    margin-bottom: 41px;
}

.invoice-modal .print-receipt-area.format-3 .date div:nth-child(2) {
    margin-bottom: 0;
}

.invoice-modal .print-receipt-area.format-3 .products {
    margin-left: 3px;
    margin-top: 4px;
    width: 634px;
}

.invoice-modal .print-receipt-area.format-3 .products .print-receipt-item {
    padding-bottom: 2px;
}

.invoice-modal .print-receipt-area.format-3 .products .quantity {
    flex: 0 0 125px;
    max-width: 125px;
    padding-left: 47px;
    text-align: left;
}

.invoice-modal .print-receipt-area.format-3 .products .priceWithoutTaxSubTotal {
    flex: 0 0 114px;
    max-width: 114px;
}

.invoice-modal .print-receipt-area.format-3 .total {
    margin-left: 98px;
    margin-top: -3px;
    width: 80px;
}

.invoice-modal .print-receipt-area.format-3 .total>div {
    margin-bottom: 0;
}

.invoice-modal .print-receipt-area.format-3 .total .label {
    display: none;
}

.invoice-modal .print-receipt-area {
    display: none;
}

.invoice-modal .print-receipt-area.format-4 .decimal-writer {
    margin-left: 19px;
    margin-top: -85px;
    width: 150px;
}

@media print {
    .yazdiriliyor .modal-dialog {
        margin: 0px;
        top: 0px;
    }

    .yazdiriliyor {
        overflow: hidden !important;
    }

    .yazdiriliyor .modal-header {
        display: none;
    }

    .yazdiriliyor .print-receipt-area {
        margin: 0px !important;
    }

    .invoice-modal .print-receipt-area-inner {
        left: -50px;
    }
}

.rating_wrap .rating {
    overflow: hidden;
    position: relative;
    height: 20px;
    font-size: 12px;
    width: 70px;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    vertical-align: middle;
}

.product_rate {
    overflow: hidden;
    float: left;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 1.5em;
    color: #F6BC3E;
}

.product_rate::before {
    font-size: 12px;
    content: "\f005\f005\f005\f005\f005";
    top: 0;
    position: absolute;
    left: 0;
    font-weight: 900;
}

.color-picker .input-group-text i {
    width: 24px;
    height: 100%;
    display: block;
    cursor: pointer;
}

.settingsmenu {
    flex: 0 0 auto;
    width: 30%;
    margin-right: 20px;
}

.settingsmenu+form {
    flex: 1 1 auto;
    width: 100%;
}

.shipment_detail {
    display: none;
}

.shipment_detail.on {
    display: block;
}

.form-select[name='order_status'],
.form-select[name='cargo_type'],
.form-control[name='cargo_code'] {
    font-size: 14px !important;
    padding: 4px !important;
}

.indirimlikutugoster label,
.kargolukutugoster label {
    font-size: 13px !important;
    white-space: nowrap;
}

#colorbox.elfinderCbox,
#cboxOverlay.elfinderCbox {
    z-index: 10000;
}

.variantModal form {
    position: absolute;
    top: 51px;
    left: 0px;
    width: 100%;
    height: calc(100% - 58px);
    overflow: hidden;
    background-color: #fff;
    transition: transform .2s ease-in;
}

.variantModal form.slide {
    transform: translateX(-100%);
}

.variantEditPage .table-wrapper {
    overflow-x: auto;
}

.variantEditPage #table-container {
    overflow-x: auto;
}

.variantModal .modal-dialog {
    height: calc(100% - 56px);
}

.variantModal .modal-content {
    overflow: hidden;
    height: calc(100% - 53px);
}

.variantModal .modal-body {
    overflow: hidden auto;
    height: calc(100% - 58px);
}

.variantModal .galerialani {
    max-height: 252px;
    overflow: hidden auto;
}

#variant-modal-form-body {
    height: 100%;
}

/*#hwpwrap input, #hwpwrap select{*/
/*    padding: 3px 5px!important;*/
/*    font-size: 14px!important;*/
/*}*/
#hwpwrap .customlinkdiv>p>label {
    display: flex;
}

#hwpwrap .customlinkdiv>p>label span {
    float: none !important;
    width: 100px;
}

#hwpwrap .customlinkdiv>p>label input {
    width: auto !important;
}

#hwpwrap .staticlinkdiv {
    max-height: 200px;
    overflow: hidden auto;
    margin-bottom: 10px;
    padding: 5px 0;
}

#hwpwrap .staticlinkdiv p>label {
    display: block;
    position: relative;
    padding: 5px;
}

#hwpwrap .staticlinkdiv p>label i {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

#hwpwrap .staticlinkdiv p:hover label {
    background-color: #f1f1f1;
}

#hwpwrap .staticlinkdiv p:last-child {
    margin-bottom: 0;
}

textarea.form-control[name='description'] {
    resize: none;
    overflow: hidden auto;
    min-height: 50px;
    max-height: 300px;
}

/* İstatistik Kartları Grid - 5 Sütun */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .dashboard-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* İstatistik Kartları */
.dashboard-stat-card {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 18px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    border: none;
}

.dashboard-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: none;
}

.dashboard-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.dashboard-stat-card.stat-primary .stat-icon {
    background: #2563EB;
    color: #FFFFFF;
}

.dashboard-stat-card.stat-success .stat-icon {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    color: #fff;
}

.dashboard-stat-card.stat-info .stat-icon {
    background: #06B6D4;
    color: #FFFFFF;
}

.dashboard-stat-card.stat-warning .stat-icon {
    background: #F59E0B;
    color: #FFFFFF;
}

.dashboard-stat-card.stat-danger .stat-icon {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: #fff;
}

.dashboard-stat-card.stat-secondary .stat-icon {
    background: #1F2937;
    color: #FFFFFF;
}

.dashboard-stat-card .stat-content {
    flex: 1;
}

.dashboard-stat-card .stat-label {
    font-size: 11px;
    font-weight: 500;
    color: #6B7280;
    margin: 0 0 4px 0;
    text-transform: none;
    letter-spacing: 0;
}

.dashboard-stat-card .stat-value {
    font-size: 25px;
    font-weight: 700;
    color: #1F2937;
    margin: 0 0 2px 0;
    line-height: 1.2;
}

.dashboard-stat-card .stat-period {
    font-size: 10px;
    color: #9CA3AF;
    display: block;
}

/* Dashboard Kartları */
.dashboard-card {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: none;
    border: none;
    overflow: hidden;
}

.dashboard-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.dashboard-card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-card-header h2 i {
    color: var(--color-primary);
    font-size: 16px;
}

.dashboard-card-body {
    padding: 24px;
}

/* Katalog İstatistik Kutuları */
.catalog-stat-box {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: 10px;
    padding: 16px 12px;
    height: auto;
    width: 100%;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
}

.catalog-stat-box:hover {
    background: #F3F4F6;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.catalog-stat-box i {
    font-size: 18px;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    margin: 0 auto 8px auto;
    display: block;
    flex-shrink: 0;
}

.catalog-stat-box i[data-lucide] {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.catalog-stat-box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.catalog-stat-box span {
    font-size: 13px;
    color: #6B7280;
    font-weight: 500;
    display: block;
    line-height: 1.2;
}

/* Google Analytics Widget */
#google-analytics-widget {
    padding: 0;
}

.analytics-placeholder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.analytics-item {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.analytics-item:hover {
    background: #F3F4F6;
    transform: translateY(-1px);
}

.analytics-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.analytics-content h4 {
    font-size: 13px;
    font-weight: 500;
    color: #6B7280;
    margin: 0 0 4px 0;
    text-transform: none;
    letter-spacing: 0;
}

.analytics-content .analytics-value {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px 0;
}

.analytics-content .analytics-period {
    font-size: 12px;
    color: #9CA3AF;
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-placeholder {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-stat-card {
        flex-direction: column;
        text-align: center;
    }

    .dashboard-stat-card .stat-icon {
        margin-bottom: 8px;
    }
}

/* Modern Tablo Tasarımı - inline class ile kullanım için
   Örnek: <table class="table table-modern"> */
.table-modern {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
}

.table-modern thead th {
    background: #F9FAFB;
    color: #6B7280;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    padding: 12px 24px;
    border-bottom: 1px solid #E5E7EB;
    white-space: nowrap;
}

.table-modern tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
}

.table-modern tbody tr:hover {
    background-color: #F9FAFB;
}

.table-modern th,
.table-modern td {
    padding: 16px 24px;
    font-size: 13px !important;
    color: #1F2937;
    vertical-align: middle !important;
}

.table-modern td.text {
    color: #4B5563;
}

/* Ürünler tablosu – özel hücre düzenleri */
.table-modern .cell-order {
    text-align: center;
}

.table-modern .cell-order .form-control {
    max-width: 70px;
    margin: 0 auto;
    padding: 6px 8px !important;
    font-size: 14px !important;
}

.table-modern .cell-image {
    text-align: center;
}

.table-modern .cell-image .productimage {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    overflow: hidden;
    border: none;
    background-color: #f3f4f6;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.table-modern .cell-product {
    padding-right: 40px;
}

.table-modern .product-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-modern .product-star {
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.table-modern .product-star .fa-star {
    font-size: 14px;
}

.table-modern .product-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}

.table-modern .product-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.table-modern .product-tag {
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    background-color: #f3f4f6;
    color: #4b5563;
}

.table-modern .cell-analytics {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.5;
}

.table-modern .cell-category {
    font-size: 13px;
    color: #6B7280;
}

.table-modern .cell-price strong {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
}

.table-modern .cell-price del {
    font-size: 12px;
    color: #9CA3AF;
}

.table-modern .cell-tax {
    font-size: 13px;
    color: #6b7280;
}

.table-modern td.cell-actions {
    position: relative;
    vertical-align: middle;
    /* satır yüksekliğinin ortası referans alınsın */
    text-align: center;
}



/* Satır yüksekliği ve aralıklar */
.table-modern tbody tr:last-child {
    border-bottom: none;
}

/* Müşteri hücresi (avatar + isim + alt satır) */
.table-modern .cell-customer {
    display: flex;
    align-items: center;
    gap: 14px;
}

.table-modern .customer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #5b47ff 0%, #8d4fff 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 8px 18px rgba(91, 71, 255, 0.45);
}

.table-modern .customer-info {
    display: flex;
    flex-direction: column;
}

.table-modern .customer-name {
    font-weight: 600;
    font-size: 14px;
    color: #1F2937;
}

.table-modern .customer-sub {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Yeşil kalan süre yazısı */
.table-modern .cell-remaining {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-success);
}

.table-modern .cell-remaining span.date {
    display: block;
    font-weight: 500;
    font-size: 11px;
    color: #6B7280;
}

/* Base Badge Styles */
.badge,
.badge-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
    width: max-content;
    line-height: 1.5;
    vertical-align: baseline;
}

/* Badge Status - Pastel Arka Plan, Koyu Metin */
.badge-status.badge-primary,
.badge.badge-primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-text);
    border: 1px solid var(--color-primary-border);
}

.badge-status.badge-success,
.badge.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success-text);
    border: 1px solid var(--color-success-border);
}

.badge-status.badge-danger,
.badge.badge-danger {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
    border: 1px solid var(--color-danger-border);
}

.badge-status.badge-warning,
.badge.badge-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    border: 1px solid var(--color-warning-border);
}

.badge-status.badge-info,
.badge.badge-info {
    background-color: var(--color-info-bg);
    color: var(--color-info-text);
    border: 1px solid var(--color-info-border);
}

.badge-status.badge-secondary,
.badge.badge-secondary {
    background-color: var(--color-secondary-bg);
    color: var(--color-secondary-text);
    border: 1px solid var(--color-secondary-border);
}

.badge-status.badge-dark,
.badge.badge-dark {
    background-color: var(--color-dark-bg);
    color: var(--color-dark-text);
    border: 1px solid var(--color-dark-border);
}

.badge-status.badge-light,
.badge.badge-light {
    background-color: var(--color-light-bg);
    color: var(--color-light-text);
    border: 1px solid var(--color-light-border);
}

/* Solid Badge Variants - Pastel Renk, Beyaz Metin */
.badge-solid.badge-primary,
.badge.bg-primary {
    background-color: var(--color-primary);
    color: #FFFFFF;
    border: 1px solid var(--color-primary);
}

.badge-solid.badge-success,
.badge.bg-success {
    background-color: var(--color-success);
    color: #FFFFFF;
    border: 1px solid var(--color-success);
}

.badge-solid.badge-danger,
.badge.bg-danger {
    background-color: var(--color-danger);
    color: #FFFFFF;
    border: 1px solid var(--color-danger);
}

.badge-solid.badge-warning,
.badge.bg-warning {
    background-color: var(--color-warning);
    color: #FFFFFF;
    border: 1px solid var(--color-warning);
}

.badge-solid.badge-info,
.badge.bg-info {
    background-color: var(--color-info);
    color: #FFFFFF;
    border: 1px solid var(--color-info);
}

.badge-solid.badge-secondary,
.badge.bg-secondary {
    background-color: var(--color-secondary);
    color: #FFFFFF;
    border: 1px solid var(--color-secondary);
}

.badge-solid.badge-dark,
.badge.bg-dark {
    background-color: var(--color-dark);
    color: #FFFFFF;
    border: 1px solid var(--color-dark);
}

/* Bildirim butonu (örnek: 1. Bildirim) */
.notify-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: 12px;
    font-weight: 700;
    border: none;
}

.notify-chip--secondary {
    background-color: var(--color-danger-bg);
    color: var(--color-danger-text);
}

/* İşlemler butonları (mor kare içerisinde daire ikon) */
.table-modern .cell-actions {
    display: inline-flex;
    gap: 10px;
}

.action-pill {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5142ff 0%, #7c3aed 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(81, 66, 255, 0.45);
}

.action-pill-inner {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5142ff;
    font-size: 14px;
}

/* Küçük ekranlarda tabloyu kaydırılabilir yap */
.table-modern-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: none;
    border: none;
}

.table-modern-wrapper table {
    min-width: 600px;
}

/* Tablo Başlık Alanı */
.table-modern-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #FFFFFF;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid #E5E7EB;
}

.table-modern-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
}

.table-modern-head .table-count {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

/* Marka Görsel Yükleme Alanı */
.kategoriresmi {
    width: 200px;
    height: 150px;
    border: 2px dashed #ddd;
    border-radius: 12px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Bloktek içindeki Liste Görseli alanı %100 genişlik */
.bloktek .kategoriresmi {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
}

.kategoriresmi:hover {
    border-color: #2563EB;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1);
    background-color: #FFFFFF;
}

.fotokaldir a {
    background: #EF4444;
    color: #FFFFFF !important;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 14px;
}

.fotokaldir a:hover {
    background: #DC2626;
    transform: scale(1.05);
    color: #FFFFFF !important;
}

/* ============================================
   SIDEBAR MENÜ TASARIMI - SOL MENÜ
   ============================================ */

.sidebar-menu {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin-bottom: 24px;
    box-shadow: none;
    border: none;
}

.sidebar-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu-item {
    margin-bottom: 4px;
}

.sidebar-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #192437;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-menu-link i,
.sidebar-menu-link svg {
    font-size: 16px;
    width: 18px;
    height: 18px;
    text-align: center;
    color: #192437;
    stroke: #192437;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.sidebar-menu-link:hover {
    background: #F3F4F6;
    color: #2563EB;
}

.sidebar-menu-link:hover i,
.sidebar-menu-link:hover svg {
    color: #2563EB;
    stroke: #2563EB;
}

.sidebar-menu-link.active,
.sidebar-menu-item.active>.sidebar-menu-link {
    background: #EFF6FF;
    color: #2563EB;
}

.sidebar-menu-link.active i,
.sidebar-menu-link.active svg,
.sidebar-menu-item.active>.sidebar-menu-link i,
.sidebar-menu-item.active>.sidebar-menu-link svg {
    color: #2563EB;
    stroke: #2563EB;
}

.sidebar-submenu {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 32px;
    display: none;
    animation: slideDown 0.2s ease;
}

.sidebar-menu-item.active>.sidebar-submenu,
.sidebar-menu-item.has-active>.sidebar-submenu {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-submenu li {
    margin-bottom: 2px;
}

.sidebar-submenu a {
    display: block;
    padding: 10px 12px;
    color: #6B7280;
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.sidebar-submenu a:hover {
    background: #F9FAFB;
    color: #2563EB;
    padding-left: 16px;
}

.sidebar-submenu a.active {
    background: #EFF6FF;
    color: #2563EB;
    font-weight: 500;
}

.main-content-wrapper {
    min-height: 400px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Sidebar Scrollbar Styling */
.sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
    background: #F9FAFB;
    border-radius: 10px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
    background: #D1D5DB;
    border-radius: 10px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF;
}

/* ============================================
   MODERN KULLANICILAR SAYFASI TASARIMI
   ============================================ */

/* Modern Müşteri Avatar */
.customer-avatar-modern {
    transition: all 0.3s ease;
    position: relative;
}

.customer-avatar-modern:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-color: #2563EB !important;
}

/* Müşteri Bilgileri - Modern Görünüm */
.table-modern .cell-product .product-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
    margin-bottom: 4px !important;
}

.table-modern .cell-product span[style*="font-size: 13px"] {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.table-modern .cell-product span[style*="font-size: 13px"] i {
    flex-shrink: 0 !important;
}

/* İzinler Kısmı - Modern Görünüm */
.table-modern .cell-analytics {
    font-size: 13px !important;
}

.table-modern .cell-analytics>div {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.table-modern .cell-analytics>div>div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Fastbutton - Modern Görünüm */
.fastbutton {
    display: flex !important;
    gap: 6px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    overflow-x: auto !important;
}

.fastbutton .btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
}

.fastbutton .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.fastbutton .btn i {
    width: 13px !important;
    height: 13px !important;
}

/* Badge Mini - Standart Küçük Badge */
.badge-mini {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: var(--color-danger) !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--color-danger-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    height: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3) !important;
}

/* Dashboard Card Header - Modern Görünüm */
.dashboard-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
}

.dashboard-card-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dashboard-card-header h2 i {
    color: var(--color-primary) !important;
}

/* Responsive - Kullanıcılar Sayfası */
@media (max-width: 768px) {
    .dashboard-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .dashboard-card-header .d-flex {
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .dashboard-card-header .d-flex>div {
        width: 100% !important;
        max-width: 100% !important;
    }

    .fastbutton {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .fastbutton .btn {
        width: 32px !important;
        height: 32px !important;
    }

    .table-modern .cell-analytics>div {
        gap: 4px !important;
    }
}

/* Avatar Resmi - Modern Görünüm */
.avatarresmi {
    width: 200px !important;
    height: 200px !important;
    border: 4px solid #E5E7EB !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto !important;
    display: block !important;
}

.avatarresmi:hover {
    border-color: #2563EB !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2) !important;
    transform: scale(1.02) !important;
}

/* Liste Avatar - Modern Görünüm */
.listeavatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    border: 2px solid #E5E7EB !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/* Form Label - Modern Görünüm */
.dashboard-card-body label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.dashboard-card-body small {
    font-size: 11px !important;
    color: #9CA3AF !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Parola Eşleşme Mesajı - Modern */
#message,
#messageiki {
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-top: 8px !important;
    display: none !important;
}

#message i,
#messageiki i {
    flex-shrink: 0 !important;
}

/* ============================================
   SIDEBAR MENÜ LİNKLERİ - FONT BOYUTU
   ============================================ */

/* Sidebar Ana Menü Linkleri */
.sidebar-menu-link {
    font-size: 15px !important;
}

.sidebar-menu-link span {
    font-size: 15px !important;
}

/* Sidebar Alt Menü Linkleri */
.sidebar-submenu a {
    font-size: 15px !important;
}

.sidebar-submenu li a {
    font-size: 15px !important;
}

/* Category Selection Modernization */
.bloktek .form-group.scroll {
    max-height: 400px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 8px;
    padding: 5px !important;
}

.bloktek .form-group.scroll::-webkit-scrollbar {
    width: 6px;
}

.bloktek .form-group.scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.bloktek .form-group.scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.bloktek .form-group.scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.bloktek .form-group.scroll .form-check {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    /* Reduced padding */
    margin-bottom: 2px;
    /* Reduced margin */
    background-color: transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-height: 28px;
    /* Ensure clickability */
}

.bloktek .form-group.scroll .form-check:hover {
    background-color: var(--color-primary-50);
}

.bloktek .form-group.scroll input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 0;
    margin-right: 8px;
    cursor: pointer;
    border-color: var(--color-gray-300);
    border-radius: 4px;
    border: 1px solid var(--color-gray-300);
}

.bloktek .form-group.scroll input[type="checkbox"]:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.bloktek .form-group.scroll input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.25rem rgba(107, 163, 227, 0.25);
    border-color: var(--color-primary);
}

.bloktek .form-group.scroll .form-check-label {
    font-size: 13px;
    /* Slightly smaller font for compact list */
    font-weight: 500;
    color: var(--color-gray-700);
    cursor: pointer;
    width: 100%;
    user-select: none;
}

/* Utilities */
.cursor-pointer {
    cursor: pointer !important;
}

.hover-bg-light:hover {
    background-color: #f8f9fa !important;
    border-color: var(--color-primary-300) !important;
}