/* #region Icon & Font Libraries */

/* Font Awesome (CDN) */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/* Unicons — tek sürümde sabitle (4.0.8) */
@import url("https://unicons.iconscout.com/release/v4.0.8/css/line.css");

/* Bircan Dashboard ikon fontları (lokal) */
@import url("./bircan-dashboard.css");
@import url("./bircan-dashboard-codes.css");
@import url("./bircan-dashboard-ie7.css");
@import url("./bircan-dashboard-ie7-codes.css");

/* #endregion */

/* #region Local Font-Face Definitions */

/* Euclid Circular B */
@font-face {
    font-family: 'Euclid Circular B';
    src: url('../font/Euclid-Circular-B-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('../font/Euclid-Circular-B-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('../font/Euclid-Circular-B-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('../font/Euclid-Circular-B-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Euclid Circular B';
    src: url('../font/Euclid-Circular-B-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Courgette-Regular */
@font-face {
    font-family: 'Courgette-Regular';
    src: url('../font/Courgette-Regular.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}

/* #endregion */

/* #region Root and Body /// Fixed Styles /// Customize CSS */
* {
    box-sizing: border-box;
    font-family: 'Euclid Circular B';
    background-color: initial;
    -webkit-tap-highlight-color: transparent;
    /* veya rgba(0,0,0,0) */

}

.html {
    height: 100vh;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    font-family: 'Euclid Circular B';
    height: 100vh;
    background-color: var(--white, #ffffff); /* Light tema varsayılan */
    color: var(--ana-renk, #2E3237);
    transition: .3s all ease-in-out;
}

/* Dark tema için ayrı class */
body.dark-mode {
    background-color: var(--ana-renk, #1D2026);
    color: var(--white, #e5e5e5);
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.relative-position {
    position: relative;
}

.small-icon {
    font-size: 15px;
}

/* #region Toast Notification Styles */
/* #region Toast Notification - Genel Ayarlar */
ul.notifications {
  all: unset;
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 99999 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: none;
}

/* #endregion */

/* #region Toast Notification - Temel Toast Kartı */
.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 250px;
  max-width: 320px;
  background-color: var(--toast-bg);
  color: var(--toast-text);
  border-left: 5px solid;
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 10px;
  box-shadow: 0 4px 12px var(--toast-shadow);
  animation: slideInUp 0.4s ease;
  z-index: 100000;
  border: none;
}

/* #endregion */

/* #region Toast Notification - İç Yapılar */
.toast .column {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.toast .column i {
  font-size: 18px;
  margin: 0;
  padding: 0;
  color: var(--toast-success);
}

.toast .fa-xmark {
  cursor: pointer;
  margin-left: 13px;
  color: var(--toast-text);
  font-size: 12px;
}

/* #endregion */

/* #region Toast Notification - Tür Renkleri */

/* Error Toast Stilleri */
.toast.error:not(.interactive) {
  border-color: var(--toast-error);
  background-color: var(--toast-error);
  color: var(--toast-text-white) !important;
}

.toast.error:not(.interactive) .column i {
  color: var(--toast-text-white) !important;
}

.toast.error .fa-xmark {
  color: var(--toast-text-white) !important;
}

/* Warning Toast Stilleri */
.toast.warning:not(.interactive) {
  border-color: var(--toast-warning);
  background-color: var(--toast-warning);
  color: var(--toast-warning-text) !important;
}

.toast.warning:not(.interactive) .column i {
  color: var(--toast-warning-text) !important;
}

.toast.warning .fa-xmark {
  color: var(--toast-warning-text) !important;
}

/* Info Toast Stilleri */
.toast.info:not(.interactive) {
  border-color: var(--toast-info);
  background-color: var(--toast-bg);
  color: var(--toast-text);
}

/* customSifreGonderildi Toast Stilleri */
.toast.customSifreGonderildi:not(.interactive) {
  border-color: var(--toast-success);
  background-color: var(--toast-pass-bg);
  color: var(--toast-success);
}

.toast.customSifreGonderildi:not(.interactive) .column i,
.toast.customSifreGonderildi .fa-xmark {
  color: var(--toast-success);
}

/* Teslim foto popup overlay */
#teslimFotoOverlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--overlay-bg-black);
    z-index: 9999;
}

#teslimFotoOverlay.active,
#teslimFotoOverlay[aria-hidden="false"] {
    display: flex;
}

#teslimFotoOverlay .teslim-foto-modal {
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    /* box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); */
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}
#teslimFotoOverlay .teslim-foto-modal .fa-solid {
    color: var(--ana-renk);
    font-size: 50px;
}

#teslimFotoOverlay .teslim-foto-modal h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    color: var(--ana-renk);
}
#teslimFotoOverlay .teslim-foto-modal p {
    color: var(--ana-renk);
}

#teslimFotoOverlay .teslim-foto-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#teslimFotoOverlay .teslim-foto-actions button {
    padding: 10px 18px;
    border-radius: 30px;
    border: none;
    font-weight: 600;    
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#teslimFotoOverlay .teslim-foto-actions button:hover {
opacity: 0.8;
}



#teslimFotoOverlay .teslim-foto-actions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#teslimFotoOverlay .teslim-foto-add {
    background: var(--mavi-renk);
    color: var(--white);
}

#teslimFotoOverlay .teslim-foto-skip {
    background-color: var(--neutral-gray-b1);
    /* padding: 10px 24px; */
    /* border-radius: 5px; */
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
}

#teslimFotoOverlay .teslim-foto-status {
    min-height: 24px;
    font-size: 13px;
    color: var(--ana-renk, #2e3237);
    display: none;
}

#teslimFotoOverlay .teslim-foto-input {
    display: none;
}

#teslimFotoOverlay .btn-close-form {
    align-self: flex-end;


}

.icon-btn-kapat {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    padding: 13px;
    border: none;
    /* position: absolute;
    top: 14px;
    right: 14px; */
    color: var(--ana-renk, #2e3237);
}

.icon-btn-kapat i {
    font-size: 14px;
}

/* #endregion */

/* #region Toast Notification - Giriş ve Çıkış Animasyonları */
.toast.hide {
  animation: fadeOut 0.5s forwards;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* #endregion */

/* #region Toast Notification - Etkileşimli Toast (Evet / Hayır) */
.toast-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-bg-black);
  z-index: 9998;
}

.toast.interactive {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--toast-bg);
  z-index: 9999;
  max-width: 420px;
  width: auto;
  padding: 32px 24px;
  border-radius: 10px;
  box-shadow: 0 8px 30px var(--toast-shadow);
  font-size: 14px;
  font-weight: 500;
  color: var(--toast-text);
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: fadeInCenter 0.3s ease forwards;
  cursor: default;
}

.toast.interactive.hide {
  animation: fadeOutCenter 0.3s ease forwards;
}

.toast.interactive .toast-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.toast-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.toast-message {
  font-size: 15px;
  color: var(--toast-text);
  text-align: center;
}

.toast-btn-confirm {
  background-color: var(--toast-button-confirm);
  color: var(--toast-text-white);
}

.toast-btn-confirm:hover,
.toast-btn-cancel:hover {
  opacity: 0.9;
}

.toast-btn-cancel {
  background-color: var(--toast-button-cancel);
  color: var(--toast-text-dark);
}

@keyframes fadeInCenter {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes fadeOutCenter {
  to {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
}

/* #endregion */
/* #endregion Toast Notification Styles */


:root {
    /* Kart Tür Renkleri - DİNAMİK OLARAK color-utils.js TARAFINDAN YÖNETİLİYOR */
    /* Varsayılan değerler (color-utils.js yüklenmeden önce fallback) */
    --karttur-bg-organizasyon: rgba(246, 71, 152, 0.1);
    --karttur-bg-organizasyon-border: rgba(246, 71, 152, 1);
    --karttur-bg-organizasyon-text: rgba(246, 71, 152, 1);
    --karttur-bg-ozelsiparis: rgba(110, 79, 174, 0.1);
    --karttur-bg-ozelsiparis-border: rgba(110, 79, 174, 1);
    --karttur-bg-ozelsiparis-text: rgb(153, 123, 212);
    --karttur-bg-ozelgun: rgb(255, 52, 25, .1);
    --karttur-bg-ozelgun-border: rgba(222, 60, 0, 1);
    --karttur-bg-ozelgun-text: rgba(222, 60, 0, 1);
    --karttur-bg-aracsusleme: rgba(255, 136, 0, 0.1);
    --karttur-bg-aracsusleme-border: rgba(255, 136, 0, 1);
    --karttur-bg-aracsusleme-text: rgba(255, 136, 0, 1);
    /* Kart Tür Renkleri */

    --anakart-ciceksepeti-bg: #e1def1;


    --full-black-only: #000000;
    --full-black: #000000;
    --ana-renk: #2E3237;
    --ikincil-renk: #282C5B;
    --mavi-renk: #053FC7;
    --gri70: #707070;
    --border-renk: #f1f3f7;
    --placeholder: #9e9e9e;
    --white: #ffffff;
    --ciceksepeti-anakart-bg: #ffffff;
    --ciceksepeti-anakart-text: #000000;
    --ciceksepeti-anakart-border: #f64798;
    --white-only: #ffffff;
    --light-gray: #e0e0e0;
    --ultralight-gray: #f1f1f1;
    --islem-ikon-bg: #e7e7e7;
    --mid-gray: #d8d8d8;
    --dark-gray: #384047;
    --gray-border: #d8d8d8;
    --accent-pink: #C22C71;
    --input-border-gray: #e5e5e5;
    --border-color: #c8c8c8;
    --highlight-button-pink: #eb5e91;
    --karttur-bg-organizasyon-border: #F64798;
    --light-bg: #e4e6e9;
    --subtle-gray: #A7A7A7;
    --gray-overlay: rgba(139, 139, 139, .1);
    --blue-transparent: rgba(5, 63, 199, 0.2);
    --extra-light-gray: #f3fbff;
    --gray-soft-dark: #8A8B8B;
    --gray-subtle-dark: #959595;
    --gray-ultra-light: #dbdbdb;
    --pink-soft-bg: #FAE3ED;
    --arsiv-orgbaslik-color: #c2f2e1;
    --arsiv-detay-btn-color: #2b4d41;
    --success-green: #33BE5C;
    --danger-pink: #ff004c;
    --action-blue: #004aca;
    --ultra-light-bg: #f7f9fd;
    --mint-blue: #b6ccff;
    --mint-green: #b6ffd2;
    --mint-orange: #ffdbb6;
    --extra-light-bg: #f9f9f9;
    --form-dark-bg: #f5f5f5;
    --soft-blue-bg: #ccecf1;
    --success-green-transparent: rgba(51, 190, 92, 0.1);
    --lavender-bg: #F6F3FA;
    --sky-light-bg: #bedef3;
    --blue-dark: #060F8D;
    --calm-cyan: #6cbdca;
    --light-aqua-bg: #e4fbfe;
    --ay-aqua-bg: #b6dee3;
    --hafta-aqua-bg: #ddf7fd;
    --light-violet-bg: #f7eaff;
    --neutral-gray-b1: #B1B1B1;
    --neutral-gray-e3: #e3e3e3;
    --panel-bg-light: #F2F5FC;
    --box-bg-light: #F2F5FC;
    --overlay-gray-light: rgba(216, 216, 216, 0.3);
    --overlay-gray-medium: rgba(216, 216, 216, 0.5);
    --shadow-gray-soft: rgba(112, 112, 112, 0.2);
    --text-gray-muted: #929598;
    --gray-surface-light: #bcbcbc;
    --gray-classic: #A9A9A9;
    --accent-green-alpha: #d9ffe7;
    --accent-green-alpha-hover: #c0edd1;
    --accent-green-bold: #00bc45;
    --accent-red: #ff0000;
    --accent-blue-soft: rgba(5, 63, 199, 0.4);
    --bg-blue-pale: #d6e1ff;
    --divider-gray-fade: rgba(200, 200, 200, 0.3);
    --magenta-deep: #9E0036;
    --green-transparent: rgba(0, 255, 4, 0.1);
    --green-deep: #006e30;
    --pink-blush-alpha: rgba(246, 71, 153, 0.1);
    --yellow-soft: #edffb1;
    --olive-dark-base: #687901;
    --green-secondary: #358256;
    --pink-alpha-strong: rgba(246, 71, 152, 0.5);
    --olive-alpha: rgba(76, 99, 0, 0.5);
    --gray-zero-alpha: #9f9f9f00;
    --gray-light-ce: #cecece;
    --gray-light-ec: #ececec;
    --gray-light-v2: #E2E2E2;
    --white-off: #FCFDFE;
    --black-alpha-25: rgba(0, 0, 0, 0.25);
    --box-shadow-light: rgba(0, 0, 0, 0.1);
    --black-true: black;
    --whatsapp-green: #075E54;
    --whatsapp-text: #fff;
    --gray-light-comon: #ece5dd;
    --gray-ui-bg: #f4f4f4;
    --gray-text-base: #606060;
    --gray-light-cc: #ccc;
    --gray-light-f2: #f2f2f2;
    --gray-light-dd: #ddd;
    --pink-rich-alpha: rgba(194, 44, 113, 0.5);
    --peach-tint: #FEF6EC;
    --orange-bright: #ff9100;
    --red-warm: #ea2121;
    --popup-saatkalan-sure-uyari: #ff0900;
    --gray-light-ee: #e9e9e9;
    --pink-intense: #ff009d;
    --blue-vivid: #0037ff;
    --yellow-pure: #dbff00;
    --gray-basic: gray;
    --pattern-bg-light-1: #fafafa;
    --pattern-bg-light-2: #f0f0f0;
    --export-button-blue: #282C5B;
    --export-button-text: #ffffff;
    --form-date-input-bg: #e0f6ff;
    --overlay-bg-black: #353543d9;
    --yazi-not: yellow;
    --dark-green-button: #005530;
    --edit-button-bg: #EBF1EE;
    --edit-button-bg-hover: #bfd4ca;
    --partner-siparis-input-bg: #fff2f8;
    --gray-border: rgb(46, 50, 55, .5);
    --parameter-save-button: rgb(5, 63, 199, .8);
    --list-item-hover: #f2f2f2;
    --bakiye-yesil: #E3FEE4;
    --kirilgan-yesil: #F8FCF2;
    --gri-seffaf: rgba(112, 112, 112, 0.3);
    --yesil-canli: #7DC500;
    --mavi-seffaf: rgba(5, 63, 199, 0.8);
    --gri-orta: #999999;
    --gri-acik: #b3b3b3;
    --mavi-canli: #3f81ff;
    --yesil-dogal: #57ad57;
    --kirmizi-canli: #ff3f3f;
    --kirmizi-sicak: #e95252;
    --yesil-destek: #19ba39;
    --info-card-bg: #dbe4e7;
    --auto-color-1-1959a9: #373d3f;
    --auto-color-2-5edde7: #ae9090;
    --auto-color-3-5f6ebe: #ECEFF1;
    --auto-color-4-50c71d: #f44336;
    --auto-color-5-bdd34b: #EF71A7;
    --auto-color-6-84d56e: #c5ddd1;
    --auto-color-7-78c464: #F6AA47;
    --auto-color-8-8a8a56: #E2F2EA;
    --auto-color-9-5f3fcb: #F1F2F5;
    --auto-color-10-2ea908: #bbbbbb;
    --auto-color-11-44d210: #1249CA;
    --auto-color-12-896e70: #05C760;
    --auto-color-13-f96d40: #ffaa00;
    --auto-color-14-33a56b: rgba(180, 180, 180, 0.2);
    --auto-color-15-cc704d: #ff0000;
    --auto-color-16-7c2376: #fff6f6;
    --auto-color-17-b95ff8: #ffbaba;
    --auto-color-18-8cb1d2: #00FF00;
    --auto-color-19-5596d6: #F8F8F8;
    --auto-color-20-0aceba: #FA9E57;
    --auto-color-21-515809: rgba(0, 0, 0, 0.1);
    --auto-color-22-69d815: #d5ffd5;
    --auto-color-23-98f2d3: rgba(204, 204, 204, 0.3);
    --auto-color-24-3561fd: rgba(216, 216, 216, .3);
    --auto-color-25-84fd30: rgba(180, 180, 180, 0.1);
    --auto-color-26-c11b5c: rgba(200, 200, 200, .5);
    --auto-color-27-59e8bf: rgba(5, 63, 199, .5);
    --auto-color-28-f69643: rgba(5, 63, 199, .1);
    --auto-color-29-0313fa: rgba(5, 63, 199, .03);
    --auto-color-30-286696: rgba(204, 204, 204, 0.2);
    --auto-color-31-4934b2: rgba(112, 112, 112, .6);
    --auto-color-32-a173a3: #f3fffe;
    --auto-color-33-533816: #e6fdff;
    --auto-color-34-09000d: rgba(196, 196, 196, 0.2);
    --auto-color-35-8376cd: rgba(200, 200, 200, .6);
    --auto-color-36-e978e6: rgba(255, 0, 93, .2);
    --auto-color-37-a2c1e4: rgba(255, 255, 255, 0.85);
    --auto-color-38-a2437e: #f1f1f1;
    --auto-color-39-3d5cfd: #e3e3e3;
    --auto-color-40-22b6cd: rgba(255, 255, 255, .9);
    --auto-color-41-447ebf: rgba(112, 112, 112, .8);
    --auto-color-42-0e3343: rgba(235, 235, 235, .4);
    --auto-color-43-11a34c: rgba(112, 112, 112, .5);
    --auto-color-44-754ec1: rgba(5, 63, 199, .05);
    --auto-color-45-c0d775: rgba(185, 185, 185, .3);
    --auto-color-46-4d0bcd: rgba(5, 63, 199, .02);
    --auto-color-47-02eee3: rgba(5, 63, 199, .2);
    --auto-color-48-7b1960: rgba(194, 44, 113, .3);
    --auto-color-49-5dba46: #e8ffef;
    --auto-color-50-6ebe39: rgba(0, 255, 76, 0.179);
    --auto-color-51-be0bed: rgba(246, 71, 71, .05);
    --auto-color-52-abcd12: #d6f5e2;
    --auto-color-53-123abc: rgba(0, 123, 255, 0.1);
    /* Çiçek Sepeti Siparişler */
    --cckspt-primary-text: #0a5191;
    --cckspt-bg-left: #fff;
    --cckspt-modal-bottom: #fff3cd;
 --cckspt-bg-datetime: #00ff440d;
 --cckspt-border-datetime: #00ff44;
    --cckspt-text-datetime: #00370F;
    /* Çiçek Sepeti Siparişler */
    --rapor-sicak-bg: #ff0000ab;
    --rapor-sicak-color: #ffffff;
    --tur-odeme: #ffd8e9;
    --tur-tahsilat: #dfffeb;
    --login-text: #ffffff;
    --login-form-bg: #f1f3f7;
    --img-mask: rgba(26, 27, 43, 0.4);
    --landscape-overlay-bg: #ffffff;
    --chart-color-1: var(--mavi-canli);
    --chart-color-2: var(--highlight-button-pink);
    --chart-color-3: var(--accent-green-bold);
    --chart-color-4: var(--karttur-bg-ozelgun-text);
    --chart-color-5: var(--gray-soft-dark);
    --kart-menu-content: #fff;
    --gecmissiparisuyari-bg: #fff3cd;
    --gecmissiparisuyari-border: #ffc107;
    --bg-musteri-sec-satir: #e0eaff;
    --tablo-satir-hover: #f9f9f9;
    --siparis-detay-tablo-satir: #f5f5f5;
    /* ------Toast Notification------ */
    --toast-bg: #ffffff;
    --toast-text: #333333;
    --toast-text-dark: #333333;
    --toast-text-white: #fff;
    --toast-shadow: rgba(0, 0, 0, 0.1);
    --toast-success: #28a745;
    --toast-error: #dc3545;
    --toast-warning: #ffc107;
    --toast-warning-text: #392b00;
    --toast-info: #17a2b8;
    --toast-checked-bg: #e6ffe8;
    --toast-pass-bg: #e6ffe8;
    --toast-button-confirm: #28a745;
    --toast-button-cancel: #f0f0f0;
    --toast-overlay-bg: rgba(0, 0, 0, 0.6);
    --popup-overlay-bg: rgba(0, 0, 0, 0.6);
    /* ------Toast Notification------ */
    --partner-siparis-verilen: #e65c43;
    --partner-siparis-verilen-i-bg: #ff8b773d;
    --partner-siparis-alinan: #e0428d;
    --partner-siparis-alinan-i-bg: #ff77b530;
    /* ------Teslim Saati Süre Uyarıları------ */
    --ts-kalan-sure-uyari-text: #ffffff;
    --ts-kalan-sure-uyari-bg: #ff0000;
    --ts-saat-gecti-uyari-text: #293300;
    --ts-saat-gecti-uyari-bg: #cfff00;
    --ts-saat-gecti-uyari-border: #779300;
    --ts-daha-zaman-var-text: #2E3237;
    --ts-daha-zaman-var-bg: #ffffff;
    --ts-daha-zaman-var-border: #d8d8d8;
    /* ------Teslim Saati Süre Uyarıları------ */
    /* Scroll Bar Renk */
    --scroll-thumb-color: #9e9e9e;
    --scroll-thumb-color-hover: #bebebe;
    --scroll-track-color: #f1f1f1;
    /* Scroll Bar Renk */
    /* Tablo Satır Teslim Edildi ve Hover */
    --tablo-satir-teslim-edilen: #d6f5e5;
    --tablo-satir-teslim-edilen-hover: #b5dbc8;
    /* Tablo Satır Teslim Edildi ve Hover */
    /* Araç Takip Alanları */
    --arac-takip-teslimat-kenarlık: #e1e5e9;
    --arac-takip-beklemede-zemin: #fed7d7;
    --arac-takip-beklemede-metin: #c53030;
    --arac-takip-aktif-zemin: #c6f6d5;
    --arac-takip-aktif-metin: #2f855a;
    --arac-takip-tamamlandi-zemin: #bee3f8;
    --arac-takip-tamamlandi-metin: #2b6cb0;
    /* Araç Takip Alanları */
    /* Yaklaşan Siparişler */
    --yaklasan-siparis-bg: #d8e7ed;
    --yaklasan-siparis-footer: #c1dce6;
    --yaklasan-siparis-text: #2E3237;
    --yaklasan-siparis-alan-bg: #ffffff;
    /* Yaklaşan Siparişler */
    /* Satış Türü Badge Renkleri - Light Mode */
    --rapor-nakit-bg: #e8f5e8;
    --rapor-nakit-color: #2e7d32;
    --rapor-pos-bg: #e3f2fd;
    --rapor-pos-color: #1565c0;
    --rapor-havale-bg: #fff3e0;
    --rapor-havale-color: #ef6c00;
    --rapor-cari-bg: #f3e5f5;
    --rapor-cari-color: #7b1fa2;
    /* Fatura */
    --fatura-kesildi-bg: #d4edda;
    --fatura-kesildi-color: #155724;
    --fatura-kesilmedi-bg: #f8d7da;
    --fatura-kesilmedi-color: #721c24;
    --fatura-taslak-bg: #fff3cd;
    --fatura-taslak-color: #856404;
    --fatura-gonderildi-bg: #cce5ff;
    --fatura-gonderildi-color: #004085;
}

body.dark-mode {
    /* Kart Tür Renkleri - TAMAMEN color-utils.js TARAFINDAN YÖNETİLİYOR */
    /* CSS'te dark mode için statik değer YOK - JavaScript dinamik olarak set eder */

    --anakart-ciceksepeti-bg: #0e0a25;

    --ana-renk: #e5e5e5;
    --ikincil-renk: #d9d9d9;
    --mavi-renk: #b7cdff;
    --gri70: #c8c8c8;
    --border-renk: #36353F;
    --placeholder: #939393;
    --white: #1D2026;
    --ciceksepeti-anakart-bg: #001425;
    --ciceksepeti-anakart-text: #ffffff;
    --ciceksepeti-anakart-border: #f64798;
    --white-only: #ffffff;
    --light-gray: #2a2d39;
    --ultralight-gray: #2a2d39;
    --islem-ikon-bg: #373a45;
    --mid-gray: #545454;
    --dark-gray: #e1e1e1;
    --gray-border: #444;
    --accent-pink: #FF77B5;
    --input-border-gray: #7f7f7f;
    --border-color: #414141;
    --highlight-button-pink: #ff77ab;
    --karttur-bg-organizasyon-border: #F64798;
    --light-bg: #1a1a1a;
    --subtle-gray: #999;
    --gray-overlay: rgba(255, 255, 255, 0.05);
    --blue-transparent: rgba(152, 178, 224, 0.493);
    --extra-light-gray: #292e39;
    --gray-soft-dark: #999;
    --gray-subtle-dark: #aaa;
    --gray-ultra-light: #666;
    --pink-soft-bg: #4e2e3e;
    --arsiv-orgbaslik-color: #2b4d41;
    --arsiv-detay-btn-color: #c2f2e1;
    --success-green: #10b251;
    --danger-pink: #ff5f7a;
    --action-blue: #6c8dff;
    --ultra-light-bg: #212937;
    --mint-green: #14411a;
    --mint-blue: #374b79;
    --mint-orange: #593f0f;
    --extra-light-bg: #44444c;
    --form-dark-bg: #3a3f4b;
    --soft-blue-bg: #485581;
    --success-green-transparent: rgba(16, 178, 81, 0.12);
    --lavender-bg: #2e2a33;
    --sky-light-bg: #384368;
    --blue-dark: #d1d4ff;
    --calm-cyan: #7581ba;
    --light-aqua-bg: #262933;
    --ay-aqua-bg: #3e7981;
    --hafta-aqua-bg: #3d4358;
    --light-violet-bg: #583d5c;
    --neutral-gray-b1: #a1a1a1;
    --neutral-gray-e3: #4e4e4e;
    --panel-bg-light: #33487f;
    --box-bg-light: #2d3447;
    --overlay-gray-light: #5d5d5d;
    --overlay-gray-medium: rgba(100, 100, 100, 0.4);
    --shadow-gray-soft: rgba(186, 186, 186, 0.15);
    --text-gray-muted: #7a7c80;
    --gray-surface-light: #717171;
    --gray-classic: #666666;
    --accent-green-alpha: #2b4d3e;
    --accent-green-alpha-hover: #35614e;
    --accent-green-bold: #00c878;
    --accent-red: #ff5050;
    --accent-blue-soft: rgba(80, 120, 230, 0.3);
    --bg-blue-pale: #27365a;
    --divider-gray-fade: rgba(130, 130, 130, 0.3);
    --magenta-deep: #ff4a8f;
    --green-transparent: rgba(0, 255, 100, 0.1);
    --green-deep: #009b50;
    --pink-blush-alpha: rgba(255, 100, 180, 0.1);
    --yellow-soft: #e7f197;
    --olive-dark-base: #3b4600;
    --green-secondary: #49b473;
    --pink-alpha-strong: rgba(255, 120, 190, 0.5);
    --olive-alpha: rgba(153, 189, 40, 0.5);
    --gray-zero-alpha: #4e4e4e00;
    --gray-light-ce: #5e5e5e;
    --gray-light-ec: #3d3d3d;
    --gray-light-comon: #2e2e2e;
    --white-off: #1a1a1a;
    --black-alpha-25: rgba(255, 255, 255, 0.1);
    --box-shadow-light: rgba(0, 0, 0, 0.1);
    --black-true: white;
    --whatsapp-green: #008339;
    --whatsapp-text: #fff;
    --gray-ui-bg: #2a2a2a;
    --gray-text-base: #aaaaaa;
    --gray-light-cc: #cccccc;
    --gray-light-f2: #888888;
    --gray-light-dd: #777777;
    --pink-rich-alpha: rgba(255, 110, 190, 0.5);
    --peach-tint: #caa79a;
    --orange-bright: #ffaa44;
    --red-warm: #ff7878;
    --popup-saatkalan-sure-uyari: #ff0900;
    --gray-light-ee: #494949;
    --pink-intense: #ff5ebb;
    --blue-vivid: #336cff;
    --yellow-pure: #dbff00;
    --gray-basic: #999999;
    --full-black-only: #000000;
    --full-black: #ffffff;
    --whatsapp-bg-light: #2a2a2a;
    --pattern-bg-light-1: rgba(23, 23, 23, .1);
    --pattern-bg-light-2: rgba(25, 25, 25, .5);
    --export-button-blue: #474852;
    --export-button-text: #d9d9d9;
    --form-date-input-bg: #194a5e;
    --overlay-bg-black: #353543d9;
    --yazi-not: #626722;
    --dark-green-button: #EBF1EE;
    --edit-button-bg: #005530;
    --edit-button-bg-hover: #05854d;
    --partner-siparis-input-bg: #3d2e35;
    --gray-border: rgba(169, 178, 190, 0.5);
    --parameter-save-button: #91b2ff;
    --list-item-hover: #303037;
    --bakiye-yesil: #47914a;
    --kirilgan-yesil: #1D2018;
    --gri-seffaf: rgba(255, 255, 255, 0.15);
    --yesil-canli: #5c9100;
    --mavi-seffaf: rgba(130, 160, 255, 0.25);
    --gri-orta: #b5b5b5;
    --gri-acik: #d0d0d0;
    --mavi-canli: #699dff;
    --yesil-dogal: #6fcf6f;
    --kirmizi-canli: #ff6b6b;
    --kirmizi-sicak: #ff7c7c;
    --yesil-destek: #44db64;
    --info-card-bg: #27383f;
    --auto-color-1-1959a9: #1f2324;
    --auto-color-2-5edde7: #8e7c7c;
    --auto-color-3-5f6ebe: #2a2d2f;
    --auto-color-4-50c71d: #ff6659;
    --auto-color-5-bdd34b: #ff94c1;
    --auto-color-6-84d56e: #a2bcb4;
    --auto-color-7-78c464: #ffc270;
    --auto-color-8-8a8a56: #234233;
    --auto-color-9-5f3fcb: #2b2c2f;
    --auto-color-10-2ea908: #cccccc;
    --auto-color-11-44d210: #4675f5;
    --auto-color-12-896e70: #00f3a2;
    --auto-color-13-f96d40: #e0a830;
    --auto-color-14-33a56b: rgba(255, 255, 255, 0.1);
    --auto-color-15-cc704d: #ff4444;
    --auto-color-16-7c2376: #3a1f1f;
    --auto-color-17-b95ff8: #5f2a2a;
    --auto-color-18-8cb1d2: #00cc00;
    --auto-color-19-5596d6: #2a2a2a;
    --auto-color-20-0aceba: #ffb178;
    --auto-color-21-515809: rgba(255, 255, 255, 0.05);
    --auto-color-22-69d815: #284128;
    --auto-color-23-98f2d3: rgba(255, 255, 255, 0.2);
    --auto-color-24-3561fd: rgba(200, 200, 200, 0.2);
    --auto-color-25-84fd30: rgba(255, 255, 255, 0.05);
    --auto-color-26-c11b5c: rgba(255, 255, 255, 0.3);
    --auto-color-27-59e8bf: rgba(130, 160, 255, 0.3);
    --auto-color-28-f69643: rgba(130, 160, 255, 0.1);
    --auto-color-29-0313fa: rgba(130, 160, 255, 0.03);
    --auto-color-30-286696: rgba(255, 255, 255, 0.1);
    --auto-color-31-4934b2: rgba(180, 180, 180, 0.70);
    --auto-color-32-a173a3: #182020;
    --auto-color-33-533816: #2d4d4d;
    --auto-color-34-09000d: rgba(255, 255, 255, 0.1);
    --auto-color-35-8376cd: rgba(255, 255, 255, 0.4);
    --auto-color-36-e978e6: rgba(255, 100, 150, 0.2);
    --auto-color-37-a2c1e4: rgba(72, 72, 72, 0.85);
    --auto-color-38-a2437e: #3d3d3d;
    --auto-color-39-3d5cfd: #3a3a3a;
    --auto-color-40-22b6cd: rgba(255, 255, 255, 0.9);
    --auto-color-41-447ebf: rgba(255, 255, 255, 0.6);
    --auto-color-42-0e3343: rgba(255, 255, 255, 0.4);
    --auto-color-43-11a34c: rgba(255, 255, 255, 0.5);
    --auto-color-44-754ec1: rgba(130, 160, 255, 0.05);
    --auto-color-45-c0d775: rgba(255, 255, 255, 0.2);
    --auto-color-46-4d0bcd: rgba(130, 160, 255, 0.02);
    --auto-color-47-02eee3: rgba(130, 160, 255, 0.2);
    --auto-color-48-7b1960: rgba(255, 100, 180, 0.3);
    --auto-color-49-5dba46: #1a2e22;
    --auto-color-50-6ebe39: rgba(0, 255, 81, 0.13);
    --auto-color-51-be0bed: rgba(255, 100, 100, 0.05);
    --auto-color-52-abcd12: #243b2d;
    --auto-color-53-123abc: rgba(0, 123, 255, 0.1);
    /* Çiçek Sepeti Siparişler */
    --cckspt-primary-text: #fff;
    --cckspt-bg-left: #26292e;
    --cckspt-modal-bottom: #26292e;
    --cckspt-bg-datetime: #00ff440d;
    --cckspt-border-datetime: #00ff44;
    --cckspt-text-datetime: #fff;
    /* Çiçek Sepeti Siparişler */
    --rapor-sicak-bg: #ff0000ab;
    --rapor-sicak-color: #ffffff;
    --tur-odeme: #9b3d66;
    --tur-tahsilat: #234c33;
    --login-text: #ffffff;
    --login-form-bg: #282d37;
    --img-mask: rgba(26, 27, 43, 0.4);
    --landscape-overlay-bg: #1d2026;
    --chart-color-1: var(--blue-vivid);
    --chart-color-2: var(--pink-intense);
    --chart-color-3: var(--yesil-destek);
    --chart-color-4: var(--orange-bright);
    --chart-color-5: var(--gray-light-cc);
    --kart-menu-content: #050810;
    --gecmissiparisuyari-bg: #3c3623;
    --gecmissiparisuyari-border: #d8b200;
    --bg-musteri-sec-satir: #2a354a;
    /* --tablo-satir-hover: #292d34; */
    --tablo-satir-hover: #22272f;
    --siparis-detay-tablo-satir: #2c2c35;
    /* ------Toast Notification------ */
    --toast-bg: #3d3d3d;
    --toast-text: #e0e0e0;
    --toast-text-dark: #333333;
    --toast-text-white: #fff;
    --toast-shadow: rgba(0, 0, 0, 0.6);
    --toast-success: #44d46b;
    --toast-error: #dc3545;
    --toast-warning: #ffcc5c;
    --toast-warning-text: #392b00;
    --toast-info: #4dd0e1;
    --toast-checked-bg: #1d7b3b;
    --toast-pass-bg: #003805;
    --toast-button-confirm: #28a745;
    --toast-button-cancel: #f0f0f0;
    --toast-overlay-bg: rgba(0, 0, 0, 0.9);
    --popup-overlay-bg: rgba(0, 0, 0, 0.6);
    /* ------Toast Notification------ */
    --partner-siparis-verilen: #ff8b77;
    --partner-siparis-verilen-i-bg: #ff8b7740;
    --partner-siparis-alinan: #ff77b5;
    --partner-siparis-alinan-i-bg: #ff77b542;
    /* ------Teslim Saati Süre Uyarıları------ */
    --ts-kalan-sure-uyari-text: #ffffff;
    --ts-kalan-sure-uyari-bg: #ff5050;
    --ts-saat-gecti-uyari-text: #293300;
    --ts-saat-gecti-uyari-bg: #cfff00;
    --ts-saat-gecti-uyari-border: #779300;
    --ts-daha-zaman-var-text: #2E3237;
    --ts-daha-zaman-var-bg: #ffffff;
    --ts-daha-zaman-var-border: #d8d8d8;
    /* ------Teslim Saati Süre Uyarıları------ */
    /* Scroll Bar Renk */
    --scroll-thumb-color: #939393;
    ;
    --scroll-thumb-color-hover: #abaaaa;
    --scroll-track-color: #2a2d39;
    /* Scroll Bar Renk */
    /* Tablo Satır Teslim Edildi ve Hover */
    --tablo-satir-teslim-edilen: #234233;
    --tablo-satir-teslim-edilen-hover: #183226;
    /* Tablo Satır Teslim Edildi ve Hover */
    /* Araç Takip Alanları */
    --arac-takip-teslimat-kenarlık: #4a5568;
    --arac-takip-beklemede-zemin: #742a2a;
    --arac-takip-beklemede-metin: #fed7d7;
    --arac-takip-aktif-zemin: #22543d;
    --arac-takip-aktif-metin: #c6f6d5;
    --arac-takip-tamamlandi-zemin: #2a4365;
    --arac-takip-tamamlandi-metin: #bee3f8;
    /* Araç Takip Alanları */
    /* Yaklaşan Siparişler */
    --yaklasan-siparis-bg: #223151;
    --yaklasan-siparis-footer: #343d4f;
    --yaklasan-siparis-text: #ffffff;
    --yaklasan-siparis-alan-bg: #0e1b35;
    /* Yaklaşan Siparişler */
    /* Satış Türü Badge Renkleri - Dark Mode */
    --rapor-nakit-bg: rgba(46, 125, 50, 0.2);
    --rapor-nakit-color: #81c784;
    --rapor-pos-bg: rgba(21, 101, 192, 0.2);
    --rapor-pos-color: #64b5f6;
    --rapor-havale-bg: rgba(239, 108, 0, 0.2);
    --rapor-havale-color: #ffb74d;
    --rapor-cari-bg: rgba(123, 31, 162, 0.2);
    --rapor-cari-color: #ce93d8;
    /* Satış Türü Badge Renkleri - Dark Mode */
    /* Fatura */
    --fatura-kesildi-bg: #1e4620;
    --fatura-kesildi-color: #7dd87f;
    --fatura-kesilmedi-bg: #4a1e20;
    --fatura-kesilmedi-color: #ff8a8a;
    --fatura-taslak-bg: #4a3d1e;
    --fatura-taslak-color: #ffd700;
    --fatura-gonderildi-bg: #1e3a4a;
    --fatura-gonderildi-color: #87ceeb;
}


/* #region Media Query Ekran Uyarı Stilleri */
.mobil-ekran-uyari,
.tablet-ekran-uyari,
.landscape-overlay {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--landscape-overlay-bg);
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10100;
    color: var(--ana-renk);
}

.mobil-ekran-uyari span,
.tablet-ekran-uyari span,
.landscape-overlay span {
    font-weight: 500;
}

.mobil-ekran-uyari i,
.tablet-ekran-uyari i,
.landscape-overlay i {
    opacity: .8;
    font-size: 72px;
    padding-bottom: 20px;
}

/* #endregion Media Query Ekran Uyarı Stilleri */

.header-alan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    padding-bottom: 24px;
}

.header-alan .baslik {
    font-size: 16px;
    font-weight: 500;
    color: var(--ana-renk);
    width: fit-content;
    cursor: default;
}

.tl-input {
    width: 100px;
    max-width: 100px;
    min-width: 100px;
}

a {
    text-decoration: none;
    color: inherit;
}

li {
    list-style: none;
}

button {
    border: none;
    outline: none;
    font-family: 'Euclid Circular B';
}

.primary-button {
    background-color: var(--mavi-renk);
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
}

.primary-button:hover {
    opacity: .9;
}

.secondary-button {
    background-color: var(--neutral-gray-b1);
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
}

.secondary-button:hover {
    background-color: var(--gri70);
}

input {
    height: 36px;
    font-size: 13px;
    border: 1px solid var(--input-border-gray);
    border-radius: 4px;
    outline: none;
    padding: 0 0 0 10px;
    background: var(--white);
    color: var(--ana-renk);
    width: 100%;
}

input::placeholder {
    color: var(--placeholder);
}

input:focus {
    border: 1px solid var(--mavi-renk);
    color: var(--mavi-renk);
}

textarea {
    color: var(--ana-renk);
}

textarea::placeholder {
    color: var(--placeholder);
}

textarea:focus {
    border: 1px solid var(--mavi-renk) !important;
}

select {
    height: 36px;
    font-size: 13px;
    border: 1px solid var(--input-border-gray);
    border-radius: 4px;
    outline: none;
    padding: 0 0 0 10px;
    background: var(--white);
    color: var(--ana-renk);
    width: 100%;
}

select::placeholder {
    color: var(--placeholder);
}

select:focus {
    border: 1px solid var(--mavi-renk);
}

.icon-btn-kapat {
    font-size: 12px;
    color: var(--ana-renk);
}

::selection {
    background-color: var(--gray-classic) !important;
}

table thead {
    cursor: default !important;
    user-select: none;
    background-color: var(--gray-light-ee);
    
}

.tablo-satir:hover {
    background-color: var(--tablo-satir-hover);
}

/* Number input'taki artır/azalt oklarını gizle */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox için */
/* input[type="number"] {
    -moz-appearance: textfield;
} */

/*#region Scrool Kaydırma Çubuğu Stilleri*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
    margin-right: 20px;
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    cursor: default;
    background-clip: padding-box;
    border: 4px solid transparent;
    background-color: var(--scroll-thumb-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-color-hover);
}

/*#endregion Scrool Kaydırma Çubuğu Stilleri*/
/* #region Script.js içerisindek: Tablo Arama & Satır Seçim (Çoklu tablo destekli ve tab sistemine duyarlı) */
tr.tablo-bos-mesaj {
    display: table-row;
    width: 100%;
}

tr.tablo-bos-mesaj td {
    padding: 0;
    text-align: center;
    background: transparent;
    border: none;
    position: relative;
    height: 100px;
}

table.tablo tr td.tablo-bos-hucre::before {
    display: none !important;
}

.tablo-bos-mesaj-icerik {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    width: 100%;
    font-size: 14px;
    color: var(--gray-soft-dark);
    opacity: 0;
    animation: fadeIn 0.3s ease-in-out forwards;
}

.tablo-bos-mesaj-icerik i {
    font-size: 16px;
    color: var(--gri70);
    padding: 0;
    width: fit-content;
}

.tablo-bos-mesaj-icerik p {
    margin: 0;
    color: var(--gri70);
    font-weight: 400;
}

.tablo-bos-mesaj-icerik i::before {
    padding: 0;
    margin: 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* --- Organizasyon Kartlar Menüsündeki Tümü Teslim Edildi İşaretle Stilleri */
.teslim-edildi-bilgi-mesaji {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    gap: 10px;
    white-space: normal;
}

.teslim-edildi-bilgi-mesaji i {
    font-size: 20px;
}

.teslim-edildi-not {
    font-size: 11px;
    color: var(--gri60);
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
}

/* --- Organizasyon Kartlar Menüsündeki Tümü Teslim Edildi İşaretle Stilleri */
/* #region Sipariş Bulunmuyor Mesajı */
.bos-siparis-mesaji {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 15px;
    margin: 6px 12px;
    background: repeating-linear-gradient(-45deg,
            var(--mint-green),
            var(--white) 5px,
            transparent 1px,
            transparent 6px);
    border-radius: 6px;
    min-height: 140px;
    text-align: center;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    white-space: normal;
}

.bos-siparis-mesaji i {
    font-size: 20px;
}

.bos-siparis-mesaji small {
    font-size: 11px;
    color: var(--gri60);
    line-height: 1.4;
    text-align: center;
    box-sizing: border-box;
    white-space: normal;
    display: block;
    /* margin-top: 10px; */
}

/* #endregion */
/* #region Sipariş Kart Detay - Empty Row Stilleri */
tr.empty-row td {
    text-align: center;
    padding: 40px;
    color: var(--gri70, #666);
    background: repeating-linear-gradient(-45deg, var(--mint-green), var(--white) 5px, transparent 1px, transparent 6px);
    height: 200px;
    vertical-align: middle;
}

tr.empty-row td > div {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    gap: 10px;
    height: 100%;
}

tr.empty-row td > div i {
    font-size: 24px;
    opacity: 0.5;
}
/* #endregion */

/* #region Tablolar boşsa veya veri yoksa çıkacak uyarı not */
.tabloda-veri-yok-wrapper {
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 20px;
    width: 100%;
    background-color: var(--extra-light-gray);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--light-gray);
    font-size: 14px;
    color: var(--gray-soft-dark);
    cursor: default;
}

.tabloda-veri-yok-not {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tablo.hidden {
    display: none !important;
}

/* #endregion */


/* #endregion */
/* #endregion Script.js içerisindek: Tablo Arama & Satır Seçim (Çoklu tablo destekli ve tab sistemine duyarlı) */
/* ---------------------------------
Radio Checkbox ve Buttons Customize Style
--------------------------------- */
input[type="radio"] {
    height: 14px;
    width: 14px;
    appearance: none;
    border: 1px solid var(--gri70);
    border-radius: 50%;
    position: relative;
    top: 0;
    padding: 6px;
    cursor: pointer;
    margin: 0;
    margin-right: 3px;
}

input[type="radio"]:checked {
    border: 1px solid var(--mavi-renk);
    background-color: var(--mavi-renk);
    cursor: pointer;
}

input[type="radio"]:checked+label {
    color: var(--mavi-renk);
    cursor: pointer;
}


input[type="radio"]+label {
    cursor: pointer;
}

input[type="radio"]:checked::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f00c";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--white);
    font-size: 7px;
    cursor: pointer;
}

/* ---------------- */
/* ---------------- */

input[type="checkbox"] {
    height: 16px;
    width: 16px;
    appearance: none;
    border: 1px solid var(--gri70);
    border-radius: 3px;
    /* Radio'dan farklı - köşeli */
    position: relative;
    top: 0;
    padding: 6px;
    cursor: pointer;
    margin: 0;
    margin-right: 3px;
}

input[type="checkbox"]:checked {
    border: 1px solid var(--mavi-renk);
    background-color: var(--mavi-renk);
    cursor: pointer;
}

input[type="checkbox"]:checked+label {
    color: var(--success-green);
    cursor: pointer;
    font-weight: 600;
}

input[type="checkbox"]+label {
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    content: "\f00c";
    /* Check ikonu */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--white);
    font-size: 8px;
    cursor: pointer;
}

/* ---------------------------------
  Checkbox ve Radio Buttons Customize Style
  --------------------------------- */
.search-popup {
    display: none;
    background-color: var(--yellow-pure);
    font-size: 24px;
}

/* #endregion Root and Body /// Fixed Styles /// Customize CSS */

/* #region Index ve Diğer Sayfalar /// Fixed Styles /// Master Styles */
.saat-ve-aciklama {
    position: relative;
}

.saat-ve-aciklama .saat-input-wrapper {
    position: relative;
    display: inline-block;
}

.saat-ve-aciklama input[type="time"] {
    border: 1px solid var(--mavi-renk);
    color: var(--mavi-renk);
    font-size: 14px;
    font-weight: 700;
    height: 36px;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--white);
}

.saat-ve-aciklama input[type="time"]:focus {
    outline: none;
}

.saat-ve-aciklama input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

.saat-ve-aciklama .icon-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    font-size: 16px;
    color: var(--mavi-renk);
    cursor: pointer;
    pointer-events: auto;
}

.saat-ve-aciklama .icon-button i {
    font-family: 'bircan-dashboard';
}



.urun-fiyati-ve-aciklama {
    display: flex;
    gap: 10px;
}

.urun-fiyati-ve-aciklama #siparisurunaciklama {
    width: 100%;
}

.urun-fiyati-ve-aciklama .tl-input {
    width: 100px;
}

#ekstraucret {
    width: 100px;
}

.btn-close-form {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    padding: 13px;
}

.btn-close-form:hover {
    background-color: var(--light-gray);
}

.partner-siparisler {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid var(--mid-gray);
    border-radius: 5px;
    padding: 6px;
    gap: 5px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gri70);
    cursor: pointer;
    height: 30px;
}

.partner-siparisler i {
    font-size: 18px;
}

.partner-siparisler i::before {
    margin: 0;
}

.ucret-secim .cari-hesap {
    display: flex;
    align-items: center;
    background-color: var(--panel-bg-light);
    width: fit-content;
    padding: 0 8px;
    border-radius: 5px;
    gap: 2px;
}

.odeme-tipleri .odeme-tip-column .odeme-tip-radio-box {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}



.mobile-navbar {
    display: none;
}

/* ↓↓↓ DropDown Menüler*/
.dropbtn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    background-color: var(--white);
    min-width: max-content;
    box-shadow: 0px 8px 16px 0px var(--gray-overlay);
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    padding-bottom: 10px;
    float: left;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%, 8%);
    margin: 0;
    z-index: 999;
}

.dropdown-content .liste-baslik {
    color: var(--subtle-gray);
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 16px;
}

.profil .liste-baslik {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profil .liste-baslik #oturum-kisisi-rol {
    font-size: 11px;
    font-weight: 400;
}

.dropdown-content .liste-alt a {
    color: var(--mavi-renk);
    text-decoration: underline;
    font-size: 11px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-content .liste-alt a:hover {
    background-color: inherit;
}

.dropdown-content hr {
    border: 1px solid var(--input-border-gray);
    opacity: .2;
    width: 100%;
    margin: 10px 0;
}

.dropdown-content a {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    gap: 10px;
}

.dropdown-content a:hover {
    background-color: var(--light-gray)
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* ↑↑↑ DropDown Menüler*/
/* ↓↓↓ ClickDropdown Menüler*/
.clickdropbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.clickdropdown {
    position: relative;
}

.clickdropdown-content {
    display: none;
    background-color: var(--white);
    min-width: max-content;
    box-shadow: 0px 8px 16px 0px var(--gray-overlay);
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    padding-bottom: 10px;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: 10px;
    z-index: 9988;
}

.profiller .clickdropdown-content {
    display: none;
    background-color: var(--white);
    min-width: max-content;
    box-shadow: 0px 8px 16px 0px var(--gray-overlay);
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    padding-bottom: 10px;
    width: 200px;
    position: absolute;
    top: 100%;
    left: 50% !important;
    transform: translate(-28%, 5%);
    margin-top: 10px;
    z-index: 999;
}

.clickdropdown-content .liste-baslik {
    color: var(--subtle-gray);
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px 10px 20px;
}

.clickdropdown-content .liste-alt {
    padding: 10px 0 6px 0;
}

.clickdropdown-content .liste-alt a {
    color: var(--mavi-renk);
    text-decoration: underline;
    font-size: 11px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
    cursor: pointer !important;
}

.clickdropdown-content .liste-alt a:hover {
    background-color: inherit;
}

.clickdropdown-content hr {
    border: 1px solid var(--input-border-gray);
    opacity: .2;
    width: 100%;
    /* margin: 10px 0; */
    margin: 0;
}

/* Bildirim yükleme ve boş durum mesajları */
.bildirim-yukleniyor,
.bildirim-bos-mesaj {
    padding: 20px;
    text-align: center;
    color: var(--gri70);
    font-size: 14px;
}



.clickdropdown-content a {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 10px 20px;
    text-decoration: none;
    display: flex;
    gap: 10px;
}

.clickdropdown-content .btn-yazdir {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    gap: 10px;
    background-color: transparent;
    width: 100%;
    cursor: pointer;
}

.clickdropdown-content .btn-disa-aktar {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    gap: 10px;
    background-color: transparent;
    width: 100%;
    cursor: pointer;
}

.clickdropdown-content .btn-yazdir:hover,
.clickdropdown-content .btn-disa-aktar:hover {
    background-color: var(--light-gray)
}

.clickdropdown-content a:hover {
    background-color: var(--border-renk);
    cursor: pointer;
}

/* .clickdropdown-content a:hover .bildirim-kisi {
    background-color: var(--white);
    border: 1px solid var(--ana-renk);
} */

.clickdropdown.open .clickdropdown-content {
    display: block;
    cursor: default;
}

/* ↑↑↑ ClickDropdown Menüler*/
/* ↓↓↓ Dışa Aktar Butonlar*/
.buton-pasif {
    opacity: .1;
}

.buton-disa-aktar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--export-button-blue);
    color: var(--white);
    font-weight: 300;
    border-radius: 5px;
    padding: 0 4px 0 14px;
    height: 40px;
    width: 180px;
    gap: 12px;
    cursor: pointer;
}

.buton-disa-aktar .dosya-tur {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    color: var(--ikincil-renk);
    font-weight: 500;
    border-radius: 5px;
    background-color: var(--white);
    padding: 7px 12px;
    height: 30px;
    width: 64px;
    font-size: 13px;
}

.buton-disa-aktar .dosya-tur i {
    font-size: 8px;
    color: var(--ikincil-renk);
}

.buton-disa-aktar .dosya-tur .dosya-tur-content i {
    font-size: 16px;
    color: var(--ikincil-renk);
}

.buton-disa-aktar .btn-baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
    color: var(--export-button-text);
}

.buton-disa-aktar .btn-baslik i {
    font-size: 12px;
}

.siparis-sirala span {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    gap: 10px;
    cursor: pointer;
}

.siparis-sirala span:hover {
    background-color: var(--light-gray);
}

/* ↑↑↑ Dışa Aktar Butonlar*/


/* ↓↓↓ Tüm Tablolar ve Formlardaki islem-ikonlar Stilleri*/
.islem-ikonlar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: fit-content;
    gap: 5px;
}

.islem-ikonlar .islem-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--islem-ikon-bg);
    border-radius: 50%;
    height: 32px;
    width: 32px;
    cursor: pointer;
    color: var(--gri70);
    font-size: 11px;
}

/* .islem-ikonlar .duzenle-ikon,
.islem-ikonlar .sil-ikon,
.islem-ikonlar .arsivle-ikon,
.islem-ikonlar .teslimedildi-ikon,
.islem-ikonlar .detay-ikon,
.islem-ikonlar .fatura-kes-ikon,
.islem-ikonlar .fatura-gor-ikon,
.islem-ikonlar .fatura-pdf-ikon,
.islem-ikonlar .fatura-mail-ikon,
.islem-ikonlar .tahsilat-makbuz-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--islem-ikon-bg);
    border-radius: 50%;
    height: 32px;
    width: 32px;
    cursor: pointer;
    color: var(--gri70);
    font-size: 11px;
} */

.islem-ikonlar .sil-ikon:hover {
    background-color: var(--kirmizi-sicak) !important;
    color: var(--white) !important;
}

.islem-ikonlar .duzenle-ikon:hover {
    background-color: var(--action-blue) !important;
    color: var(--white) !important;
}

.islem-ikonlar .arsivle-ikon:hover {
    background-color: var(--orange-bright) !important;
    color: var(--white) !important;
}

.islem-ikonlar .teslimedildi-ikon:hover {
    background-color: var(--yesil-destek) !important;
    color: var(--white) !important;
}

.islem-ikonlar .detay-ikon:hover {
    background-color: var(--success-green);
    color: var(--white);
}


.islem-ikonlar .fatura-kes-ikon:hover {
    background-color: var(--mavi-renk);
    color: var(--white) !important;
}

.islem-ikonlar .fatura-gor-ikon:hover {
    background-color: var(--gri70);
    color: var(--white) !important;
}

.islem-ikonlar .fatura-pdf-ikon:hover {
    background-color: var(--yesil-dogal);
    color: var(--white) !important;
}

.islem-ikonlar .fatura-mail-ikon:hover {
    background-color: var(--action-blue) !important;
    color: var(--white) !important;
}

.islem-ikonlar .tahsilat-makbuz-ikon:hover {
    background-color: var(--yesil-dogal);
    color: var(--white) !important;
}


.islem-ikonlar .partner-telefon-ikon:hover {
    background-color: var(--action-blue) !important;
    color: var(--white) !important;
}

.islem-ikonlar .partner-eposta-ikon:hover {
    background-color: var(--action-blue) !important;
    color: var(--white) !important;
}


/* ↑↑↑ Tüm Tablolar ve Formlardaki islem-ikonlar Stilleri*/


/* #endregion Index ve Diğer Sayfalar /// Fixed Styles /// Master Styles */

/* ////////////////////////////////////////////////// */
/* #region Desktop — 1920px ve üzeri */

/* #region Dosya ve Görsel Yükle Alan Stilleri // Master Styles */

.dosya-yukle-alan {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mavi-renk);
    border-radius: 5px;
    text-align: left;
    color: var(--auto-color-41-447ebf);
    font-size: 12px;
    min-height: 54px;
    max-height: 54px;
    padding: 0 8px;
    cursor: pointer;
    transition: ease .3s;
}

.dosya-yukle-alan:not(.kart-gorseli):hover {
    background-color: var(--extra-light-bg);
    color: var(--ana-renk);
}

.dosya-yukle-alan.dragover {
    background-color: var(--extra-light-bg);
    color: var(--ana-renk);
}


.dosya-yukle-alan i {
    font-size: 20px !important;
    margin-right: 5px;
    margin-top: 1px;
}

.dosya-yukle-alan img {
    margin-right: 10px;
}

.dosya-yukle-alan:hover img {
    opacity: 1;
}

.dosya-yukle-alan .file-label {
    white-space: wrap;
}

#gorselYukle {
    position: relative;
    /* border-color: transparent; */
    /* border-style: solid; */
    transition: .3s ease-in-out;
}

/* #gorselYukle:hover {
    scale: .98;
    transition: .3s ease-in-out;
}

#gorselYukle:hover .remove-button {
    opacity: 1;
} */

input[type="file"] {
    display: none;
}


.remove-button {
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: var(--auto-color-4-50c71d);
    color: var(--white-only);
    border: none;
    border-radius: 3px;
    display: none;
    margin-left: 10px;
}

/* #endregion Dosya ve Görsel Yükle Alan Stilleri // Master Styles */

/*#region Tooltip Base*/
.tooltip {
    position: fixed;
    background-color: var(--dark-gray);
    color: var(--white);
    padding: 6px 8px;
    border-radius: 5px;
    font-size: 12px;
    white-space: normal;
    z-index: 99999;
    pointer-events: none;
    max-width: 150px;
    word-wrap: break-word;
    line-height: 1.3;
    text-align: center;
}

/*#endregion*/

/* #region Tooltip /// Master Styles */
/* TOP: hedefin üstünde görünürken ok aşağıya bakar (kutunun alt kenarında) */
.tooltip.tooltip--top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--dark-gray);
    /* aşağı bakan ok */
}

/* BOTTOM: hedefin altında görünürken ok yukarıya bakar (kutunun üst kenarında) */
.tooltip.tooltip--bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--dark-gray);
    /* yukarı bakan ok */
}

/* LEFT: kutu solda, ok sağa bakar (kutunun sağ kenarında) */
.tooltip.tooltip--left::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--dark-gray);
}

/* RIGHT: kutu sağda, ok sola bakar (kutunun sol kenarında) */
.tooltip.tooltip--right::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: var(--dark-gray);
}

/* #endregion Tooltip /// Master Styles */

/* #region Header */
.main--content {
    width: 100%;
    height: 100% !important;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: var(--white);
}

.mobile-header-logo-band {
    display: none;
}


.main--content .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    color: var(--ikincil-renk);
    width: 100%;
    padding: 14px 0 14px 20px;
    height: 64px;
}

.main--content .header .title {
    font-size: 24px;
    font-weight: 500;
}

.header .h-sol {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.header .h-sol .header-title {
    font-size: 20px;
    font-weight: 400;
}

.header .orta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header .h-sag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* min-width: 345px; */
    max-width: max-content;
    width: 100%;
    padding-left: 16px;
    padding-right: 24px;
    gap: 20px;
}

.header .h-sag .icon-partner-siparis {
    font-size: 20px;
}

.header .h-sag .mobile-siparis-filtrele .buton-sirala {
    display: none;
}

/* ///// Header kullanici-adi-wrapper "Profil" clickdropdown ////// */

.profil .clickdropdown-content {
    min-width: 200px;
    width: 200px;
}

.header .h-sag .clickdropdown-content {
    left: 24%;
}

.header .h-sag .profil {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    color: var(--ana-renk);
}

.header .h-sag .profil .kullanici-alan-wrapper {
    display: flex;
    align-items: center;
    user-select: none;
}

.header .h-sag .profil .kullanici-alan-wrapper .profil-resmi {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* padding-right: 7px; */
    margin-right: 7px;
    object-fit: cover;
}

.header .h-sag .profil .kullanici-alan-wrapper .menu-ok {
    font-size: 8px;
    padding-left: 14px;
}


.header .h-sag .profil .kullanici-alan-wrapper .kullanici-alan {
    /* display: flex;
    flex-direction: column;
    gap: 10px; */
    cursor: pointer;
    /* margin-top: -3px; */
}

.header .h-sag .profil .kullanici-alan-wrapper .kullanici-alan .kullanici-adi {
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
}

.header .h-sag .profil .kullanici-alan-wrapper .kullanici-alan .kullanici-yetki {
    font-size: 10px;
    font-weight: 300;
}

/* ///// Header kullanici-adi-wrapper "Profil" clickdropdown ////// */


.header .ikonlar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.header .h-sag .header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--border-renk);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    height: 36px;
    width: 36px;
    position: relative;
}

.header .h-sag .header-icon:hover {
    background-color: var(--light-bg);
}

.header .h-sag .ikon-bildirimler .bildirimvar {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgb(0, 207, 0);
    /* min-height: 4px; */
    /* min-width: 4px; */
    height: 14px;
    width: 14px;
    padding: 4px;
    border-radius: 10px;
    z-index: 999;
    animation: blink 1s infinite;
    font-size: 9px;
    font-weight: 600;
    color: var(--white-only);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.header .h-sag .ikon-bildirimler a:hover {
    cursor: default;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* #region Teknik Destek Modal */
.teknik-destek-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.teknik-destek-overlay.active {
    display: block;
    opacity: 1;
}

.teknik-destek-modal {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    max-width: 90vw;
    height: 100vh;
    background: var(--white);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.teknik-destek-modal.active {
    transform: translateX(0);
}

.teknik-destek-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-renk);
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.teknik-destek-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

}

.teknik-destek-kapat {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ana-renk);
    font-size: 16px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.teknik-destek-kapat:hover {
    background-color: var(--light-bg);
}

.teknik-destek-modal-content {
    padding: 24px;
    flex: 1;
}

/* Kullanıcı Kartı */
.support-user-card {
    /* background: linear-gradient(135deg, var(--light-bg) 0%, var(--border-renk) 100%); */
    background-color: var(--border-renk);
    /* border: 1px solid var(--mavi-canli); */
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.support-user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--mavi-renk);
    flex-shrink: 0;
}

.support-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.support-user-info {
    flex: 1;
}

.support-user-info h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0 0 4px 0;
}

.support-user-info p {
    font-size: 13px;
    color: var(--gri70);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.support-user-info p i {
    font-size: 12px;
    color: var(--gri70);
}

/* Bilgi Mesajı */
.quick-support-info {
    background-color: var(--auto-color-38-a2437e);
    border-left: 3px solid var(--mavi-renk);
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

.quick-support-info p {
    font-size: 13px;
    font-weight: 300;
    color: var(--ana-renk);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-support-info p i {
    color: var(--mavi-renk);
}

/* Form Stilleri */
.quick-support-form {
    display: block;
}

.quick-support-form .form-group {
    margin-bottom: 20px;
}

.quick-support-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--ana-renk);
    font-size: 14px;
}

/* .quick-support-form select,
.quick-support-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--input-border-gray);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: all 0.2s ease;
    box-sizing: border-box;
    background-color: var(--white);
    color: var(--ana-renk);
} */

.quick-support-form select:focus,
.quick-support-form textarea:focus {
    outline: none;
    border-color: var(--mavi-renk);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.quick-support-form textarea {
    min-height: 120px;
    resize: vertical;
}

.quick-support-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* Başarı Mesajı */
.support-success-message {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.support-success-message.active {
    display: block;
}

.support-loading-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-loading-icon i {
    font-size: 32px;
    color: white;
}

.support-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background-color: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.support-success-icon i {
    font-size: 32px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}

.support-success-message h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0 0 8px 0;
}

.support-success-message p {
    font-size: 14px;
    color: var(--gri70);
    margin: 0;
}

/* Modal Footer */
.teknik-destek-modal-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 24px;
    border-top: 1px solid var(--border-renk);
    background: var(--white);
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.teknik-destek-modal-footer .btn {
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* .teknik-destek-modal-footer .btn-secondary {
    background-color: var(--neutral-gray-b1);
    color: var(--white);
}

.teknik-destek-modal-footer .btn-secondary:hover {
    background-color: var(--gri70);
} */

.teknik-destek-modal-footer .btn-primary {
    background-color: var(--mavi-renk);
    color: var(--white);
}

.teknik-destek-modal-footer .btn-primary:hover {
    opacity: 0.8;
}

.teknik-destek-modal-footer .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.teknik-destek-modal-content .form-group {
    margin-bottom: 20px;
}

.teknik-destek-modal-content .form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
}

.teknik-destek-modal-content .form-group input,
.teknik-destek-modal-content .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--input-border-gray);
    border-radius: 4px;
    font-size: 13px;
    color: var(--ana-renk);
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.teknik-destek-modal-content .form-group input:focus,
.teknik-destek-modal-content .form-group textarea:focus {
    outline: none;
    border-color: var(--mavi-renk);
}

.teknik-destek-modal-content .form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.teknik-destek-modal-content .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-renk);
}

.teknik-destek-modal-content .btn {
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.teknik-destek-modal-content .btn-secondary {
    background-color: var(--neutral-gray-b1);
    color: var(--white);
}

.teknik-destek-modal-content .btn-secondary:hover {
    background-color: var(--gri70);
}

.teknik-destek-modal-content .btn-primary {
    background-color: var(--mavi-renk);
    color: var(--white);
}

.teknik-destek-modal-content .btn-primary:hover {
    opacity: 0.9;
}

/* Teknik destek butonu stili */
.header .h-sag .btn-teknik-destek {
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-right: 8px; */
}

.header .h-sag .btn-teknik-destek .btn-teknik-destek-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .h-sag .btn-teknik-destek .btn-teknik-destek-btn .header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--mavi-canli);
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    height: 36px;
    width: 36px;
    position: relative;
    color: var(--white-only);
}

.header .h-sag .btn-teknik-destek .btn-teknik-destek-btn .header-icon:hover {
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* Mobile görünüm */
@media only screen and (max-width: 600px) {
    .teknik-destek-modal {
        width: 100%;
        max-width: 100%;
    }
}
/* #endregion Teknik Destek Modal */

.header .h-sag a {
    display: flex;
    justify-content: space-between;
}

.icerik-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 220px;
}

.bildirim-icerik {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bildirim-durum-ok {
    background-color: var(--success-green);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.bildirim-durum-iptal {
    background-color: var(--kirmizi-sicak);
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

.bildirim-durum-arsiv {
    background-color: var(--auto-color-13-f96d40);
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.bildirim-icerik .baslik {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
    gap: 6px;
    padding-bottom: 3px;
}

.bildirim-icerik .bildirim-arsiv-sebep {
    font-size: 11px;
    font-weight: 400;
    color: var(--gri70);
    margin-top: -2px;
    padding-bottom: 2px;
}

.bildirim-icerik .bildirim-arsiv-sebep:empty {
    display: none;
}

.bildirim-icerik .siparis-veren-musteri {
    font-size: 12px;
    font-weight: 500;
    color: var(--ana-renk);
}

.bildirim-icerik .siparis-veren-musteri:empty {
    display: none;
}

.bildirim-icerik .siparis-edilen-urun {
    font-size: 11px;
    color: var(--ana-renk);
    padding: 2px 8px 2px 2px;
    border: 1px solid var(--mid-gray);
    border-radius: 5px;
    width: fit-content;
    background-color: var(--white);
    display: flex;
    align-items: center;
    gap: 5px;
}

.bildirim-icerik .siparis-edilen-urun:empty {
    display: none;
}

.bildirim-icerik .siparis-organizasyon {
    font-size: 11px;
    font-weight: 500;
    color: var(--ana-renk);
}

.bildirim-icerik .siparis-organizasyon:empty {
    display: none;
}

/* Bildirim ürün resmi */
.bildirim-urun-resmi {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 4px;
    /* margin-right: 6px; */
    vertical-align: middle;
    display: inline-block;
}

/* Okunmamış bildirimler için arka plan rengi */
/* .bildirim-item:not(.bildirim-okundu) {
    background-color: var(--auto-color-21-515809);
} */

/* Okundu bildirimleri için yeşil arka plan */
.bildirim-item.bildirim-okundu {
    border-left: 3px solid var(--success-green);
    background-color: var(--success-green-transparent) !important;
}

.bildirim-item.bildirim-okundu:hover {
    background-color: var(--success-green-transparent) !important;
}

.bildirim-kisi {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 500px;
    background-color: var(--border-renk);
    /* border: 1px solid transparent; */
    border-radius: 100px;
    padding: 2px;
}

.bildirim-kisi img {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background-size: cover;
}

.bildirim-kisi .dzn-kisitarih {
    font-size: 10px;
    font-weight: 500;
    color: var(--gri70);
    padding-left: 5px;
    padding-right: 8px;
}

.ikon-bildirim-ac {
    font-size: 12px;
}

.indirilenler-icerik {
    display: flex;
    align-items: center;
    gap: 12px;
    /* border-bottom: 1px solid var(--light-gray); */
    /* padding-bottom: 10px; */
}

.indirilenler-icerik .dosya {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.indirilenler-icerik .dosya-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.indirilenler-icerik img {
    height: 32px;
}

.indirilenler-icerik .dosya-adi {
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
}

.indirilenler-icerik .dosya-tur {
    display: flex;
    font-size: 11px;
    font-weight: 500;
    color: var(--gri70);
    gap: 3px;
}

.indirilenler-icerik .dosya-tur span {
    font-size: 11px;
    color: var(--mavi-renk);
    text-decoration: underline;
    padding: 0;
    cursor: pointer;
}

.indirilenler-icerik .indirilme-zaman {
    font-size: 10px;
    font-weight: 500;
    color: var(g);
}

/* #region Tüm Sayfalar --- SearchBox Input  */
.search-box {
    display: flex;
    align-items: center;
    position: relative;
    border: 1px solid var(--shadow-gray-soft);
    border-radius: 5px;
}

.search-box Input {
    width: 264px;
    padding: 12px;
    padding-left: 40px;
    font-size: 13px;
    gap: 10px;
    background-color: var(--white);
    color: var(--placeholder);
}

.search-box Input::placeholder {
    color: var(--gray-soft-dark);
}

.search-box Input:focus {
    color: var(--ana-renk);
    border: 1px solid var(--mavi-renk);
}

.search-box i {
    position: absolute;
    font-size: 14px;
    left: 16px;
    z-index: 999;
}

.icon-input-week-indicator {
    position: absolute;
    right: 17px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 7px;
    color: var(--ana-renk);
}


/* #endregion Tüm Sayfalar --- SearchBox Input */
/* --------------------------------------
--------------------------------------
-------------------------------------- */

.header-butonlar-mobile {
    display: none;
}

/* --------------------------- */

.header .olustur-butonlar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header .olustur-butonlar button {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--border-renk);
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--ikincil-renk);
    height: 36px;
}

.header .olustur-butonlar button:hover {
    background-color: var(--light-bg);
    cursor: pointer;
}

.header .olustur-butonlar button i {
    font-size: 16px;
}

.header .olustur-butonlar button::after {
    content: attr(data-value);
    color: inherit;
    white-space: nowrap;
}

/* --------------------------- */

.h-sag .ikonlar .btn-theme-mode {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: var(--border-renk);
    padding: 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
    color: var(--ikincil-renk);
    height: 36px;
}

.h-sag .ikonlar .btn-theme-mode:hover {
    background-color: var(--light-bg);
    cursor: pointer;
}

.header .profiller {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    position: relative;
    margin-left: 20px;
    gap: 10px;
}

.header .profiller .profil-kisiler {
    display: flex;
    align-items: center;
    margin-right: 80px;
    cursor: pointer;
}

.header .profiller .dropdown-content {
    width: 260px;
}

.header .profiller a {
    display: flex;
}

.header .profiller a img {
    height: 28px;
    width: 28px;
    border-radius: 50%;
}

.header .profiller a .profil-isim {
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

.header .profiller a .profil-isim span {
    font-size: 10px;
}

.header .profiller .kisi-profil-resmi-1 {
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--white);
    position: absolute;
    left: 0px;
    right: 0px;
}

.header .profiller .kisi-profil-resmi-2 {
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--white);
    position: absolute;
    left: 24px;
    right: 0px;
}

.header .profiller .daha-fazla-profil {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--light-gray);
    height: 36px;
    width: 36px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 500;
    color: var(--gri70);
    border: 3px solid var(--white);
    position: absolute;
    left: 48px;
    cursor: pointer;
}

.header .profiller .profiller-liste {
    width: 230px;
}

.header .profiller .yeni-profil-ekle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header .profiller .yeni-profil-ekle i {
    font-size: 24px;
}

.header .profiller .yeni-profil-ekle:hover i {
    opacity: .5;
}

.search-box-title {
    display: flex;
    align-items: center;
    position: relative;
}

.search-box-title #search-box {
    display: block;
    background-color: var(--border-renk);
    width: 500px;
    padding: 12px;
    padding-left: 40px;
    color: var(--placeholder);
    font-size: 13px;
    border-radius: 5px;
    gap: 10px;
    outline: none;
    border: none;
}

.search-box-title #search-box::placeholder,
.search-box-title #search-box-mobile::placeholder {
    color: var(--gray-soft-dark);
}

.search-box-title #search-box:focus,
.search-box-title #search-box-mobile:focus {
    color: var(--ana-renk);
}

.search-box-title i {
    position: absolute;
    font-size: 14px;
    left: 16px;
    z-index: 999;
}

.mobile-search {
    display: none;
}

/* #endregion Header */

/* #region Sol Panel */
.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px 30px 40px 30px;
    background-color: var(--white);
    width: 72px;
    min-width: 72px;
    max-width: 72px;
}

.sidebar .sidebar-ikon {
    font-size: 24px;
    color: var(--gri70);
    cursor: pointer;
}

.sidebar .sidebar-ikon:hover {
    opacity: .8;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}


.sidebar-logo img {
    display: block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 32px;
    height: fit-content;
}

.sidebar-logo img:hover {
    transform: scale(0.9);
}

/* .sidebar-logo img:hover {
    filter: drop-shadow(0 0 16px red);
    box-shadow: none;
} */


.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* #endregion Sol Panel */

/* #region Card Container */
.bg-alan {
    display: flex;
    height: calc(100% - 64px);
    background: var(--white);
}

/* .dashboard-container {
    height: 100%;
    background-color: var(--border-renk);
    width: 100%;
    border-radius: 25px 25px 0 0;
} */
.dashboard-container {
    background-color: var(--border-renk);
    border-radius: 15px 15px 0 0;
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
    width: 100%;
    height: 100%;
}

.dashboard-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.dashboard-header .baslik-alan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--overlay-gray-medium);
    padding: 12px 20px;
    height: 60px;
}

.dashboard-header .baslik-alan .baslik-tarih-ve-aciklama {
    display: flex;
    align-items: center;
}

.dashboard-header .baslik-alan .baslik-tarih {
    font-weight: 500;
    background-color: var(--white);
    border-radius: 5px;
    padding: 5px 10px;
    color: var(--ikincil-renk);
    cursor: default;
}

.dashboard-header .baslik-alan .baslik-tarih-aciklama {
    font-weight: 400;
    margin-left: 5px;
    color: var(--ikincil-renk);
    margin-top: -2px;
    cursor: default;
}

.dashboard-container .dashboard-header .butonlar {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    gap: 10px;
}

.dashboard-container .dashboard-header .butonlar .buton-sirala {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    border-radius: 5px;
    padding: 12px 24px;
    gap: 5px;
    cursor: pointer;
    color: var(--ikincil-renk);
    white-space: nowrap;
}

.dashboard-container .dashboard-header .butonlar .ciceksepeti-integration-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: var(--white); */
        /* background: linear-gradient(135deg, #0012c8, #00a53e); */
        background-color: var(--yesil-canli);
    border-radius: 5px;
    padding: 12px;
    gap: 5px;
    cursor: pointer;
    color: var(--white-only);
    white-space: nowrap;
}

/* .dashboard-container .dashboard-header .butonlar .buton-sirala:hover {
    background-color: var(--gray-classic);
} */


/* -------------------------------------------
-------------------------------------------
------------------------------------------- */
/* #region Index Header - "kart-filtreler" Kart Filtreler */
.dashboard-container .dashboard-header .kart-filtreler {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 24px;
    user-select: none;
}

.dashboard-container .dashboard-header .kart-filtreler .tum-siparisleri-goster {
    font-weight: 600;
}

.dashboard-container .dashboard-header .kart-filtreler ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 15px;
}

.dashboard-container .dashboard-header .kart-filtreler li {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-renk);
    cursor: pointer;
    color: var(--ana-renk);
    height: 28px;
}

.dashboard-container .dashboard-header .kart-filtreler li:hover {
    border-bottom: 1px solid var(--ikincil-renk);
    color: var(--ikincil-renk);
}

.dashboard-container .dashboard-header .kart-filtreler .filtre-secili {
    border-bottom: 1px solid var(--ikincil-renk);
    color: var(--ikincil-renk);
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .kart-filtreler .kartin-tur-adi .kart-sayisi {
    margin-left: 5px;
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .kart-filtreler .kartin-tur-adi::after {
    content: attr(data-kart-adeti);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--ana-renk);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    height: 12px;
    width: 12px;
    padding: 4px;
    margin-left: 5px;
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .kart-filtreler .filtre-pasif {
    pointer-events: none !important;
    color: var(--gray-surface-light) !important;
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .kart-filtreler .filtre-aktif {
    pointer-events: auto !important;
    color: var(--ana-renk) !important;
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .kart-filtreler .filtre-pasif:after {
    border: 1px solid var(--gray-surface-light) !important;
}

.dashboard-container .dashboard-header .tum-siparisleri-goster.filtre-pasif {
    pointer-events: none;
    color: var(--gray-surface-light) !important;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.dashboard-container .dashboard-header .tum-siparisleri-goster.filtre-aktif {
    pointer-events: auto;
    color: var(--ana-renk) !important;
    transition: all 0.3s ease;
}

/* #endregion Index Header - "kart-filtreler" Kart Filtreler */
/* -------------------------------------------
-------------------------------------------
------------------------------------------- */
/* #endregion Card Container */

/* #region Grid Container */
.grid-container {
    display: grid;
    height: calc(100% - 120px);
}

.empty-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100% - 130px);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-subtle-dark);
    height: 100%;
    border-radius: 20px;
    background: repeating-linear-gradient(-45deg, var(--pattern-bg-light-1), var(--pattern-bg-light-2) 5px, transparent 5px, transparent 10px);
    margin-right: 24px;
}

.empty-message i {
    font-size: 48px !important;
    color: var(--gray-classic);
    margin-bottom: 14px;
}

.empty-message .message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    gap: 5px;
    width: 100%;
}

.empty-message .message span {
    font-weight: 300;
}

/* Backend Bağlantı Mesajı - Empty message ile aynı stil */
.backend-connection-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100% - 130px);
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-subtle-dark);
    height: 100%;
    border-radius: 20px;
    background: repeating-linear-gradient(-45deg, var(--pattern-bg-light-1), var(--pattern-bg-light-2) 5px, transparent 5px, transparent 10px);
    margin-right: 24px;
    position: relative;
    z-index: 10; /* empty-message'ın üstünde görünsün */
}

.backend-connection-message i {
    font-size: 48px !important;
    color: var(--gray-classic);
    margin-bottom: 14px;
}

.backend-connection-message .message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    gap: 5px;
    width: 100%;
}

.backend-connection-message .message span {
    font-weight: 300;
}

.empty-search-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100% - 130px);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-subtle-dark);
    height: 100%;
    border-radius: 20px;
    background: repeating-linear-gradient(-45deg, var(--pattern-bg-light-1), var(--pattern-bg-light-2) 5px, transparent 5px, transparent 10px);
    margin-right: 24px;
}

.empty-search-message i {
    font-size: 48px !important;
    color: var(--gray-classic);
    margin-bottom: 14px;
}

.empty-search-message .message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    gap: 5px;
    width: 100%;
}

.empty-search-message .message span {
    font-weight: 300;
}

.hata-mesaji {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100% - 130px);
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-subtle-dark);
    height: 100%;
    background: repeating-linear-gradient(-45deg, var(--pattern-bg-light-1), var(--pattern-bg-light-2) 5px, transparent 5px, transparent 10px);
}

.hata-mesaji img {
    height: 48px !important;
    opacity: .6;
    margin-bottom: 10px;
}

.hata-mesaji .tumsiparislerigoster {
    background-color: var(--highlight-button-pink);
    color: var(--white);
    font-size: 13px;
    font-weight: 400;
    padding: 8px 14PX;
    border-radius: 5px;
    width: fit-content;
    cursor: pointer;
    opacity: 1;
    margin-top: 10px;
}

.grid-item {
    height: 100%;
}

.main {
    padding: 0;
    overflow-y: hidden;
    padding-left: 20px;
}

.items .item[style*="display: none"] {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    flex: 0 0 0 !important;
}

.items {
    position: relative;
    display: flex;
    flex-grow: 1;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    cursor: grabbing;
    padding-bottom: 20px;
    max-height: 100%;
    padding-right: 20px;
    height: 100%;
    gap: 12px;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
}

.item:empty {
    display: none !important;
}

.items.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.item {
    cursor: grabbing;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.item.archived {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.item-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    flex: 0 0 0 !important;
}

/* #endregion Grid Container */

/* #region Sipariş Kart Alan */
.sk-kart-alan .alt-kart-alan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    z-index: 9988;
}

.sk-kart-alan .alt-kart-alan .butonlar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sk-kart-alan .alt-kart-alan .duzenleyen {
    display: flex;
    align-items: center;
    background-color: var(--ultralight-gray);
    padding: 2px;
    width: fit-content;
    border-radius: 500px;
}

.sk-kart-alan .alt-kart-alan .duzenleyen img {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-size: contain;
}

.sk-kart-alan .alt-kart-alan .duzenleyen i{
   width: 16px;
 height: 16px;
 background: #27ae60;
 color: var(--white);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 9px;
}

.sk-kart-alan .alt-kart-alan .duzenleyen .duzenleme-tarih {
    font-size: 9px;
    font-weight: 500;
    color: var(--gri70);
    padding-left: 5px;
    padding-right: 8px;
}

.sk-kart-alan .alt-kart-alan .kart-butonlar .icon-kart-menu-arsivle:hover {
    color: var(--orange-bright);
}

.sk-kart-alan .alt-kart-alan .kart-butonlar .icon-ks-sil:hover {
    color: var(--danger-pink);
}

.sk-kart-alan .alt-kart-alan .kart-butonlar .icon-ks-duzenle:hover {
    color: var(--action-blue);
}

.sk-kart-alan .alt-kart-alan .kart-butonlar .icon-ks-tamamlandi:hover {
    color: var(--success-green);
}

.sk-kart-alan .siparis-kart .alt-kart-alan .kart-butonlar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transform: translatey(50px);
    transition: .2s ease-in-out;
    z-index: 9988;
}

.sk-kart-alan .siparis-kart:hover .alt-kart-alan .kart-butonlar {
    display: flex;
    transform: translateY(0);
    transition: .2s ease-in-out;
    z-index: 9988;
}

.sk-kart-alan .siparis-kart .alt-kart-alan .kart-butonlar i {
    color: #A9A9A9;
    text-decoration: none;
    font-style: normal;
    font-size: 14px;
}

.sk-kart-alan .konum-grup {
    display: flex;
    flex-direction: column;
    background-color: var(--sky-light-bg);
    margin: 0 10px 6px 10px;
    padding: 6px 0 0 0;
    border-radius: 10px;
}

.sk-kart-alan .konum-grup:hover {
    background-color: var(--soft-blue-bg)
}

.sk-kart-alan .konum-grup .grup-mahalle {
    font-size: 11px;
    text-transform: uppercase;
}

.sk-kart-alan .konum-grup .grup-mahalle-baslik .title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.sk-kart-alan .konum-grup .grup-mahalle-baslik {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--light-aqua-bg);
    border-radius: 6px;
    padding: 4px 6px;
    margin: 0 6px 6px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ana-renk);
    cursor: pointer;
}

.sk-kart-alan .konum-grup:hover .grup-mahalle-baslik {
    background-color: var(--white);
}

.sk-kart-alan .konum-grup .grup-mahalle-sp-sayisi {
    text-align: center;
    border: 1px solid var(--calm-cyan);
    padding: 3px;
    border-radius: 8px;
    width: 24px;
    background-color: var(--white);
}

.konum-grup.kapali .siparis-kart {
    display: none;
}

.konum-grup.kapali .akordiyon-icon {
    transform: rotate(-180deg);
    transition: transform 0.2s ease;
    font-size: 16px;
}

.akordiyon-icon {
    transition: transform 0.2s ease;
    font-size: 16px;
}

/* #endregion Sipariş Kart Alan */

/* #region ana-kart Ana Kart */
.ana-kart .yeni-siparis-ekle {
    display: flex;
    align-items: end;
    justify-content: end;
    border-top: 1px solid var(--mid-gray);
    width: 100%;
    padding: 6px 0;
}

.ana-kart .yeni-siparis-ekle button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 5px;
    border: none;
    margin-right: 12px;
    text-decoration: none;
    color: var(--ana-renk);
    background-color: var(--white);
    cursor: pointer;
}

.ana-kart .yeni-siparis-ekle button span {
    font-size: 20px;
    font-weight: 300;
    padding-bottom: 2px;
    text-decoration: none;
}

.ana-kart .yeni-siparis-ekle button:hover {
    background-color: var(--light-gray);
}

.ana-kart .siparis-tutari {
    font-size: 11px;
    font-weight: 600;
    display: flex;
}

/* .ana-kart .siparis-tutari i {
    background-color: var(--auto-color-15-cc704d);
    color: var(--white-only);
    margin-right: 4px;
    font-weight: bold;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.ana-kart .siparis-tutari i {
    color: var(--success-green);
}


.ana-kart .urun-bilgisi {
    display: flex;
    align-items: center;
}

.ana-kart .urun-gorsel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.ana-kart .odeme-yontemi {
    font-size: 9px;
}

/* .ana-kart .siparis-veren-telefon,
.ana-kart .teslim-kisisi-telefon {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px 4px 3px;
    border: 1px solid var(--overlay-gray-medium);
    border-radius: 5px;
    width: fit-content;
    color: var(--ana-renk);
} */
.ana-kart .siparis-veren-telefon,
.ana-kart .teslim-kisisi-telefon {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px 4px 3px;
    border: 1px solid var(--overlay-gray-medium);
    border-radius: 5px;
    width: fit-content;
    color: var(--ana-renk);
    gap: 4px;
}

.ana-kart .siparis-veren-telefon:hover,
.ana-kart .teslim-kisisi-telefon:hover {
    background-color: var(--light-gray);
    cursor: pointer;
}

.ana-kart .kisi-telefon i {
    padding: 3px;
}

.ana-kart .kisi-telefon:hover {
    background-color: var(--light-gray);
    cursor: pointer;
}

.ana-kart .urun-yazisi-wrapper {
    display: Flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: fit-content;
    font-size: 11px;
    cursor: pointer;
    text-wrap: wrap;
    user-select: none;
    overflow: hidden;
}

.ana-kart .urun-yazisi {
    display: flex;
    align-items: center;
}

.ana-kart .urun-yazisi-mevcut {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    font-size: 11px;
    cursor: pointer;
    text-wrap: wrap;
    user-select: none;
    border: 1px solid var(--input-border-gray);
    padding: 5px;
    border-radius: 4px;
    background-color: var(--border-renk);
}

.ana-kart .urun-yazisi-mevcut i {
    padding-right: 6px;
}

.ana-kart .urun-yazisi-mevcut:hover {
    background-color: var(--primary-color);
    color: var(--ana-renk);
}

.ana-kart .urun-yazisi-wrapper i {
    padding-right: 5px;
}

.ana-kart .icon-urun-yazisi {
    font-size: 16px;
}

.ana-kart .yazi-not {
    color: inherit;
    background-color: var(--extra-light-bg);
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 300;
}

.ana-kart .yazi-not:hover {
    background-color: var(--yazi-not);
}

.ana-kart .yazi-not i {
    color: inherit;
}

.urunyazisi-alert {
    display: none;
    position: fixed;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--white);
    color: var(--ana-renk);
    padding: 15px 20px;
    border: 1px solid var(--border-renk);
    border-radius: 8px;
    box-shadow: 0 8px 16px var(--black-alpha-25);
    max-width: 300px;
    min-width: 300px;
    z-index: 9999;
}

.urunyazisi-alert .alert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background-color: rgb(66, 255, 135, .2);
    padding: 20px;
    border-radius: 50%;
    height: 64px;
    width: 64px;
    margin-right: 10px;
    color: var(--accent-green-bold);
    ;
}

.urunyazisi-alert .copied-text-wrapper {
    display: flex;
    align-items: center;
}

.urunyazisi-alert .alert-message {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 13px;
    color: var(--gray-soft-dark);
}

.urunyazisi-alert .copied-text {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    text-wrap: wrap;
    color: var(--ana-renk);
}

.urunyazisi-alert .close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    height: 24px;
    width: 24px;
    border-radius: 5px;
}

.urunyazisi-alert .close-button i {
    font-size: 11px !important;
}

.urunyazisi-alert .close-button:hover {
    background-color: var(--light-gray);
}

.ana-kart .kart-etiket {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mid-gray);
    border-radius: 5px;
    color: var(--ana-renk);
    font-size: 9px;
    font-weight: 500;
    padding: 0px 6px;
    height: 24px;
    text-transform: uppercase;
    cursor: default;
}

.ana-kart .kart-aciklama {
    font-size: 12px;
    padding: 5px 0 5px 0;
    white-space: wrap;
    overflow: hidden;
}

.ana-kart .kart-aciklama span {
    font-weight: 500;
    text-decoration: underline;
}

.ana-kart .icon-saat {
    font-size: 11px;
}

.ana-kart .kalan-sure-uyari .icon-saat {
    color: var(--sure-uyari-text);
}

.icon-saat::before {
    width: fit-content;
    margin: 0;
    margin-right: 4px;
}

.daha-zaman-var {
    display: flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    border-radius: 5px;
    border: .5px solid var(--ts-daha-zaman-var-border);
    background-color: var(--ts-daha-zaman-var-bg);
    color: var(--ts-daha-zaman-var-text);
}

.kalan-sure-uyari {
    display: flex;
    align-items: center;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 10px;
    border-radius: 5px;
    background-color: var(--ts-kalan-sure-uyari-bg);
    color: var(--ts-kalan-sure-uyari-text);
    animation: blinker 2s linear infinite;
    height: 20px;
}

.sure-gecti {
    display: flex;
    align-items: center;
    font-size: 8px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid var(--ts-saat-gecti-uyari-border);
    background-color: var(--ts-saat-gecti-uyari-bg);
    color: var(--ts-saat-gecti-uyari-text);
    height: 20px;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}



.ana-kart .baglantili-siparisler-yok {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--mid-gray);
    padding: 2px 5px;
    width: fit-content;
    font-size: 12px;
    gap: 2px;
    cursor: default;
    background-color: var(--gray-ultra-light);
}

.ana-kart .baglantili-siparisler {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid var(--mid-gray);
    padding: 2px 5px;
    width: fit-content;
    font-size: 12px;
    gap: 2px;
    cursor: default;
}

.ana-kart .icon-baglantili-siparisler {
    font-size: 10px;
    padding-right: 4px;
}

.ana-kart .sk-kart-alan {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 5px 0 5px 0;
    display: flex;
    flex-direction: column;
    /* transition: .3s all ease-in-out; */
}

.ana-kart .sk-kart-alan-organizasyon {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 5px 0 5px 0;
    display: flex;
    flex-direction: column;
}

.ana-kart .sk-kart-alan::-webkit-scrollbar {
    display: none;
}

.ana-kart .teslim-zaman {
    display: flex;
    justify-content: center;
    border: 1px solid var(--blue-transparent);
    border-radius: 5px;
    background-color: var(--ultra-light-bg);
    color: var(--mavi-renk);
    margin: 0 12px 0 12px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
}

.ana-kart .teslim-saat {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blue-transparent);
    border-radius: 5px;
    background-color: var(--ultra-light-bg);
    color: var(--mavi-renk);
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
    padding: 5px 5px;
}

.ana-kart .teslim-saat .saat-icerik {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ana-kart .teslim-zaman .tarih {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    margin: 0 16px;
    width: 100%;
    text-wrap: wrap;
    color: var(--mavi-renk);
}

.ana-kart .teslim-zaman .vr {
    border: 1px solid var(--blue-transparent);
    height: auto;
    padding: 0px;
    margin: 0px;
}

.ana-kart .teslim-zaman .teslim-saat {
    padding: 0;
    clear: both;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    border: none;
    gap: 2px;
    width: 100%;
    background-color: transparent;
}

.ana-kart .siparis-kart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mid-gray);
    background-color: var(--white);
    border-radius: 5px;
    padding: 12px 12px 8px 12px;
    margin: 0 12px 5px 10px;
    position: relative;
    z-index: 666;
    gap: 5px;
    /* transition: .3s all ease-in-out; */
}

.ana-kart .konum-grup .siparis-kart {
    padding: 12px 12px 8px 12px;
    margin: 0 6px 5px 6px;
}

.ana-kart .siparis-kart .kart-sira {
    font-size: 12px;
}

/* Drag-Drop Stilleri */
.siparis-kart.dragging {
    opacity: 0.6;
    transform: rotate(5deg);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: all 0.2s ease;
}

.siparis-kart.valid-drop-target {
    border: 2px dashed #4CAF50;
    background-color: rgba(76, 175, 80, 0.1);
    transform: scale(1.02);
    transition: all 0.2s ease;
}

.siparis-kart.invalid-drop-target {
    border: 2px dashed #f44336;
    background-color: rgba(244, 67, 54, 0.1);
    transition: all 0.2s ease;
}

.siparis-kart.over {
    border: 2px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
    transform: scale(1.05);
    transition: all 0.2s ease;
}

.siparis-kart.drop-denied {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.ana-kart .siparis-kart.drag-hover {
    border: 2px dashed var(--primary);
    transition: border 0.2s;
}


.ana-kart {
    display: flex !important;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 10px;
    border: 1px solid var(--divider-gray-fade);
    color: var(--ana-renk);
    max-width: 270px;
    min-width: 270px;
    max-height: 100% !important;
    height: fit-content;
    border: 1px solid transparent;
    cursor: default;
}


.ana-kart .kart-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 12px 10px 12px;
}

.ana-kart .siparis-kart .partner-firma-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.ana-kart .siparis-kart .partner-alinan-siparisi {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    color: var(--partner-siparis-alinan);
}

.ana-kart .siparis-kart .partner-alinan-siparisi .partner-firma {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: 500;
}

.ana-kart .siparis-kart .partner-alinan-siparisi span {
    font-size: 10px;
}

.ana-kart .siparis-kart .partner-alinan-siparisi i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--partner-siparis-alinan-i-bg);
    padding: 5px;
    border-radius: 50%;
    font-size: 20px;
}

.ana-kart .siparis-kart .partner-verilen-siparisi {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
    color: var(--partner-siparis-verilen);
}

.ana-kart .siparis-kart .partner-verilen-siparisi .partner-firma {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: 500;
}

.ana-kart .siparis-kart .partner-verilen-siparisi span {
    font-size: 10px;
}

.ana-kart .siparis-kart .partner-verilen-siparisi i {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--partner-siparis-verilen-i-bg);
    padding: 5px;
    border-radius: 50%;
    font-size: 20px;
}

.ana-kart .siparis-kart .baslik {
    font-size: 10px;
}

.ana-kart .kart-header-sol {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.ana-kart .kart-header-sol .kart-tur img {
    width: auto;
    height: 20px;
}

.ana-kart .kart-header-sag {
    display: flex;
    align-items: center;
}

.ana-kart .kart-header-alt-satir {
    display: flex;
    justify-content: space-between;
    padding: 0 12px 0 12px;
}
.ana-kart .alt-satir-ciceksepeti {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12px 5px 12px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sag {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .toplam-siparisler {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--success-green-transparent);
    border-radius: 5px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--success-green);
    cursor: pointer;
    height: 24px;
    width: 54px;
    min-width: 54px;
    max-width: 64px;
    gap: 5px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .toplam-siparisler i {
    font-size: 13px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .partner-siparisler {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border: 1px solid var(--mid-gray);
    border-radius: 5px;
    padding: 5px;
    gap: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--gri70);
    height: 24px;
    cursor: default;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .partner-siparisler i {
    font-size: 14px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .partner-siparisler .partner-siparis-sayisi:empty {
    display: none;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .partner-siparisler .partner-siparis-sayisi {
    margin-left: 5px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .partner-siparisler:hover {
    background-color: var(--extra-light-gray);
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .siparis-teslim-foto-ekle {
    display: flex;
    align-items: center;
    background-color: var(--white);
    border: 1px solid var(--mid-gray);
    border-radius: 5px;
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gri70);
    height: 24px;
    cursor: pointer;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .siparis-teslim-foto-ekle i {
    font-size: 14px;
    margin-top: 1px;
}

.ana-kart .siparis-teslim-foto-ekle .foto-sayi:empty {
    display: none;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .siparis-teslim-foto-ekle .foto-sayi {
    margin-left: 5px;
}

.ana-kart .kart-header-alt-satir .alt-satir-sol .kart-ekler .icon-ekler:before {
    content: '\e801';
}

.ana-kart .kart-header-alt-satir .alt-satir-sag .kart-ekler {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding-bottom: 5px;
}

.ana-kart .kart-gorsel img {
    height: 24px;
    /* width: 36px; */
    border-radius: 2px;
    cursor: pointer;
    transition: .3s ease-in-out;
}

.ana-kart .kart-gorsel img:hover {
    scale: .95;
    transition: .3s ease-in-out;
}

.ana-kart .ozel-gun-turu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 10px;
    color: var(--ana-renk);
    /* padding: 5px 12px 0 12px; */
    padding-top: 10px;
    font-size: 14px;
    font-weight: 400;
    text-wrap: wrap;
}

.ana-kart .ozel-gun-turu .alt-tur {
    background-color: var(--white);
    border: 1px solid var(--karttur-bg-ozelgun-text);
    color: var(--karttur-bg-ozelgun-text);
    width: fit-content;
    border-radius: 5px;
    padding: 3px 8px;
}

.ana-kart .teslimat-konum {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 10px;
    color: var(--ana-renk);
    padding: 6px 12px 10px 12px;
}

.ana-kart .siparis-kart .teslimat-konum {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 10px;
    color: var(--ana-renk);
    padding: 0;
}

.ana-kart .teslimat-konum .mahalle {
    font-size: 16px;
    font-weight: 500;
    text-wrap: wrap;
}

.ana-kart .teslimat-konum .acik-adres {
    font-size: 11px;
    text-wrap: wrap;
}

.ana-kart .teslimat-konum .il-ilce {
    font-size: 11px;
    /* color: var(--gri70); */
    text-wrap: wrap;
    /* text-transform: uppercase; */
}

.ana-kart .siparis-kart .teslimat-konum .acik-adres {
    font-size: 12px;
    white-space: wrap;
    overflow: hidden;
}

.ana-kart .organizasyon-sahip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px 10px 12px;
}

.ana-kart .organizasyon-sahip .title {
    font-size: 10px;
    color: var(--gri70);
}

.ana-kart .organizasyon-sahip .teslim-kisisi {
    font-size: 13px;
    font-weight: 500;
}

.ana-kart .siparis-kart .teslim-kisisi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
}

.ana-kart .siparis-kart .teslim-kisisi i {
    font-size: 12px;
}

.ana-kart .siparis-kart .orta-alan {
    display: flex;
    align-items: center;
    color: var(--ana-renk);
    gap: 10px;
}

.ana-kart .siparis-kart .kenar-cizgi {
    border-left: 3px solid var(--magenta-deep);
    height: 200px;
}

.ana-kart .siparis-kart .siparis-veren {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    white-space: wrap;
    gap: 5px;
}

.ana-kart .siparis-kart .siparis-veren i {
    font-size: 12px;
}

.ana-kart .siparis-urun-bilgileri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.ana-kart .siparis-urun-bilgileri .urun-bilgisi .urun-gorsel img {
    height: 24px;
    border-radius: 3px;
}

.ana-kart .siparis-urun-bilgileri .siparis-urun {
    font-size: 11px;
    font-weight: 500;
    background-color: var(--lavender-bg);
    color: var(--blue-dark);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid var(--mid-gray);
}

.ana-kart .siparis-urun-bilgileri .fiyat-bilgisi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.ana-kart .siparis-kart .teslimat-konum .mahalle {
    font-size: 12px;
    font-weight: 500;
}

/* .ana-kart .orgkart.organizasyon .teslim-zaman {
    display: flex;
    justify-content: space-between;
    text-align: center;
    border: 1px solid var(--blue-transparent);
    border-radius: 5px;
    background-color: var(--ultra-light-bg);
    color: var(--mavi-renk);
    margin: 0 12px 0 12px;
    padding: 5px 0;
} */
.ana-kart .sicaksatiskart {
    margin-right: 30px;
}

.ana-kart .sicaksatiskart .siparis-veren {
    background-color: var(--extra-light-bg);
    padding: 6px;
    border-radius: 5px;
}

.ana-kart .sicaksatiskart .icon-organizasyon-sahibi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-style: normal;
}

#sicaksatis .kart-header .kart-header-sol .kart-tur {
    display: inline-block;
    background-color: var(--green-transparent);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--green-deep);
    font-size: 13px;
    font-weight: 500;
    cursor: default;
}

.orgkart.organizasyon .kart-header .kart-header-sol .kart-tur {
    display: inline-block;
    background-color: var(--karttur-bg-organizasyon);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--karttur-bg-organizasyon-text);
    font-size: 13px;
    font-weight: 500;
    cursor: default;
}

#sicaksatis .siparis-kart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--green-deep);
    height: 50%;
}

.orgkart.organizasyon .siparis-kart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--karttur-bg-organizasyon-border);
    height: 50%;
}

.orgkart.organizasyon .siparis-kart:hover {
    border: 1px solid var(--subtle-gray);
}



#sicaksatis .siparis-kart:hover {
    border: 1px solid var(--green-secondary);
}

.orgkart.aracsusleme .kart-header .kart-header-sol .kart-tur {
    display: inline-block;
    background-color: var(--karttur-bg-aracsusleme);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--karttur-bg-aracsusleme-text);
    font-size: 13px;
    font-weight: 500;
}

.orgkart.aracsusleme .siparis-kart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--karttur-bg-aracsusleme-border);
    height: 50%;
}

.orgkart.aracsusleme .siparis-kart:hover {
    border: 1px solid var(--subtle-gray);
}

.orgkart.aracsusleme .arac-bilgileri .arac-marka-model {
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 5px;
}

.orgkart.aracsusleme .arac-bilgileri .arac-ozellikler {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-bottom: 5px;
}

.orgkart.aracsusleme .arac-bilgileri .arac-ozellikler>div {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 4px;
    border-radius: 3px;
    border: .5px solid var(--mid-gray);
    background-color: var(--white);
    color: var(--ana-renk);
    text-transform: uppercase;
}

.orgkart.aracsusleme .arac-bilgileri .arac-plaka {
    position: relative;
    padding-left: 6px !important; 
    border: 1px solid black !important;
    font-weight: 600 !important;
}


.orgkart.aracsusleme .arac-bilgileri .arac-plaka:before {
    content: "";
    border-left: 4px solid var(--mavi-renk);
    border-radius: 3px 0 0 3px;
    display: inline-block; /* veya block */
    height: 100%; /* Parent elementin yüksekliği kadar */
    position: absolute; /* Konumlandırma için */
    left: 0;
    top: 0;
}

.orgkart.aracsusleme .kart-header-alt-satir {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12px 5px 12px;
}

.orgkart.ozelsiparis .kart-header .kart-header-sol .kart-tur {
    display: inline-block;
    background-color: var(--karttur-bg-ozelsiparis);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--karttur-bg-ozelsiparis-text);
    font-size: 13px;
    font-weight: 500;
    cursor: default;
}

.orgkart.ozelsiparis .siparis-kart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--karttur-bg-ozelsiparis-border);
    height: 50%;
    z-index: -1;
}

.orgkart.ozelsiparis .siparis-kart:hover {
    border: 1px solid var(--subtle-gray);
}

.orgkart.ozelsiparis .kart-header-alt-satir {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12px 5px 12px;
    gap: 5px;
}

.orgkart.ozelsiparis .siparis-kart .teslimat-adresi .mahalle {
    font-size: 12px;
    font-weight: 500;
}

.orgkart.ozelgun .kart-header .kart-header-sol .kart-tur {
    display: inline-block;
    background-color: var(--karttur-bg-ozelgun);
    padding: 4px 8px;
    border-radius: 5px;
    color: var(--karttur-bg-ozelgun-text);
    font-size: 13px;
    font-weight: 500;
    cursor: default;
}

.orgkart.ozelgun .siparis-kart::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid var(--karttur-bg-ozelgun-border);
    height: 50%;
}

.orgkart.ozelgun .siparis-kart:hover {
    border: 1px solid var(--subtle-gray);
}

.orgkart.ozelgun .kart-header-alt-satir {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 12px 5px 12px;
}

/* #endregion ana-kart Ana Kart */

/* #region Sag Panel */
.sag-panel {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    position: relative;
    background: var(--white);
    padding: 0 24px;
    overflow: hidden;
    max-width: 345px;
    min-width: 345px;
    padding-bottom: 20px;
    height: 100vh;
    height: 100dvh;
    height: 100%;
}

.sag-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, var(--gray-zero-alpha), var(--gray-light-ce));
    border-radius: 4px;
}


.sag-panel .sag-panel-icerik {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    gap: 14px;
    flex: 1;
}

.sag-panel .sag-panel-icerik .takvim-imaj img {
    user-select: none;
}

.sag-panel .sag-panel-icerik .gorsel img {
    padding-bottom: 22px;
    padding-top: 5px;
}

.sag-panel .sag-panel-icerik .gorsel-baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 18px;
    font-weight: 500;
    color: var(--ana-renk);
    padding-bottom: 14px;
    user-select: none;
}

.sag-panel .sag-panel-icerik .gorsel-baslik span {
    font-size: 13px;
    font-weight: 500;
    color: var(--gri70);
    padding-top: 5px;
    color: var(--ikincil-renk);
}

.sag-panel .sag-panel-icerik .takvim-hafta input[type="week"] {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: var(--ana-renk);
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    padding: 0;
    width: 100%;
    background-color: var(--white);
    pointer-events: auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sag-panel input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
}

.sag-panel .week-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.sag-panel .week-wrapper .input-kapsayici {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sag-panel .week-wrapper i {
    color: var(--ana-renk);
    font-size: 12px;
}



.sag-panel .week-wrapper .icon-input-week-indicator {
    font-family: 'bircan-dashboard';
    font-size: 9px;
    color: var(--gri70);
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
    cursor: pointer;
    z-index: 2;
}

.sag-panel .sag-panel-icerik .takvim-hafta {
    padding: 0;
    margin: 0;
    height: fit-content;
    width: 100%;
    /* EKLE: */
    flex-shrink: 0;
}

.sag-panel .sag-panel-icerik .takvim-hafta .baslik-ve-nav .nav {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 30px;
    visibility: visible !important;
    opacity: 1 !important;
}

.sag-panel .sag-panel-icerik .takvim-hafta .baslik-ve-nav .nav button {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sag-panel .sag-panel-icerik .takvim-hafta .baslik-ve-nav .nav i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    border: 1px solid var(--gri70) !important;
    border-radius: 50% !important;
    height: 30px !important;
    width: 30px !important;
    color: var(--gri70) !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sag-panel .sag-panel-icerik .takvim-hafta .baslik-ve-nav .nav i:hover {
    background-color: var(--gray-light-f2);
    color: var(--white);
}

.takvim-hafta-mobile,
.takvim-hafta {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.takvim-hafta-mobile {
    display: none;
}

.takvim-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.label-container {
    display: flex;
    align-items: center;
}

.sag-panel .sag-panel-icerik .baslik-ve-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sag-panel .sag-panel-icerik .takvim-hafta .label-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 5px 0;
    width: 100%;
}

.sag-panel .sag-panel-icerik .takvim-hafta .week-picker-label,
.sag-panel .sag-panel-icerik .takvim-hafta .day-details-label {
    font-size: 18px;
}

.sag-panel .sag-panel-icerik .takvim-hafta .clickable-day-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
}

.sag-panel .sag-panel-icerik .takvim-hafta .clickable-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ikincil-renk);
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    width: 36px;
    height: 51px;
    padding: 10px;
    border-radius: 3px;
    cursor: default;
}

.sag-panel .clickable-day:hover {
    background: var(--gray-light-ec);
}

.sag-panel .sag-panel-icerik .takvim-hafta .day-number {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    width: 32px;
    height: 51px;
    padding: 2px;
    border-radius: 3px;
    cursor: default;
    color: var(--ikincil-renk);
    border-radius: 8px;
    user-select: none;
}

.sag-panel .sag-panel-icerik .takvim-hafta .day-name {
    font-size: 12px;
    font-weight: 500;
    margin-top: -2px;
}

.sag-panel .sag-panel-icerik .takvim-hafta .today {
    background: var(--highlight-button-pink);
    color: var(--white);
}

.sag-panel .clickable-day.secili {
    background: var(--highlight-button-pink);
    border-radius: 6px;
}

.sag-panel .clickable-day.secili .day-name,
.sag-panel .clickable-day.secili .day-number {
    color: var(--white) !important;
}

.sag-panel .sag-panel-icerik .takvim-hafta .today .day-number {
    color: var(--white);
}

.sag-panel .sag-panel-icerik .takvim-hafta .takvim-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sag-panel .sag-panel-icerik .takvim-hafta .year-month-label {
    font-size: 16px;
    font-weight: 600;
    cursor: default;
    color: var(--ana-renk);
    user-select: none;
}

.sag-panel .sag-panel-icerik .takvim-hafta .buHaftaButton {
    background-color: var(--border-renk);
    font-size: 12px;
    font-weight: 500;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    cursor: pointer;
    color: var(--ana-renk);
}

.sag-panel .sag-panel-icerik .takvim-hafta .buHaftaButton:hover {
    background-color: var(--highlight-button-pink);
    color: var(--white);
}

.sag-panel .sag-panel-icerik .takvim-hafta hr {
    width: 100%;
    border: 1px solid var(--mid-gray);
    opacity: .3;
    margin: 20px 0;
    outline: none;
}

.sag-panel-icerik .panel-merged {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    /* min-height: 0; */
}

.sag-panel-icerik .panel-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 0;
    flex: 1;
    /* Kalan alanı doldursun */
    min-height: 0;
}


.sag-panel-icerik .toplam-siparis-bilgi-kart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-light-comon);
    border-radius: 12px;
    padding: 10px 14px 10px 14px;
    color: var(--ikincil-renk);
    cursor: default;
    width: 100%;
    user-select: none;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .baslik {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .baslik span {
    font-size: 14px;
    cursor: pointer;
    color: var(--gri70);
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 40px;
    font-weight: 500;
    width: 100%;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan span {
    font-size: 14px;
    padding: 0;
    margin: 0;
    text-wrap: nowrap;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan .siparis-adet-kapsayici {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    height: fit-content;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan .siparis-adet-kapsayici i {
    font-size: 18px;
    margin-bottom: 10px;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan .siparis-adet-kapsayici i::before {
    width: 100%;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .vr {
    border: 1px solid var(--mid-gray);
    opacity: .4;
    height: 83%;
    margin-top: 13px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan {
    display: flex;
    flex-direction: column;
    padding: 6px;
    text-align: center;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan .toplam-organizasyon-sayisi {
    font-size: 54px;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan span {
    font-size: 14px;
    font-weight: 500;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-teslim-edilen-siparisler-kapsayici {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 400;
    margin-top: 10px;
    color: var(--ana-renk);
    background-color: var(--mint-green);
    text-align: center;
    padding: 5px 8px;
    border-radius: 5px;
    width: 100%;
    gap: 5px;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-teslim-edilen-siparisler-kapsayici .toplam-teslim-edilen-sayisi {
    font-weight: 500;
}

.sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .teslim-edilen span {
    font-weight: 500;
}

.sag-panel-icerik .ekle-butonlar {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    text-align: center;
    gap: 10px;
    width: 100%;
}

.sag-panel-icerik .ekle-butonlar .buttongroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: transparent;
}

.sag-panel-icerik .ekle-butonlar .buttongroup .button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 133px;
    height: 112px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    color: var(--ikincil-renk);
    margin: 0;
    padding: 0;
    width: 100%;
    background: var(--border-renk);
}

.sag-panel-icerik .ekle-butonlar .buttongroup .button .buton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: g;
    width: 133px;
    height: 112px;
    border-radius: 12px;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    color: var(--ikincil-renk);
    margin: 0;
    padding: 0;
    width: 100%;
    gap: 14px;
    background: var(--border-renk);
}

.sag-panel-icerik .ekle-butonlar .buttongroup .button .buton:hover {
    background-color: var(--white-off);
}

.sag-panel-icerik .ekle-butonlar .button i {
    padding: 14px 0;
    font-size: 26px;
}

.sag-panel-icerik .ekle-butonlar .button:hover {
    background-color: var(--white-off);
    transition: .3s ease-in-out;
}

.sag-panel-icerik .ekle-butonlar .button:hover i {
    scale: 1.2;
    transition: .3s ease-in-out;
}


/* #region Araç Takip Alan Tek ve Çoklu Araç Stilleri */

/* #region Ortak Animasyonlar ve Temel Stiller */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(72, 187, 120, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(72, 187, 120, 0);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    40% {
        transform: translate(-50%, -50%) translateY(-3px);
    }

    60% {
        transform: translate(-50%, -50%) translateY(-2px);
    }
}

@keyframes multiPulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* #endregion Ortak Animasyonlar ve Temel Stiller */

/* #region Single Araç Takip Alan #singleVehicle */
.sag-panel .arac-takip-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--ana-renk);
    font-size: 24px;
    width: 100%;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-renk);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    height: 300px;
    min-height: 300px;
}

.sag-panel .takip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    user-select: none;
}

.sag-panel .takip-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0;
    gap: 5px;
}

.sag-panel .takip-title img {
    height: 14px;
}

.sag-panel .status-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--yesil-dogal);
    border-radius: 50%;
    position: relative;
    animation: pulse 2s infinite;
}

.sag-panel .map-thumbnail {
    width: 100%;
    height: 90px;
    background-color: var(--border-renk);
    border-radius: 8px;
    position: relative;
    margin-bottom: 12px;
    overflow: hidden;
}

.sag-panel .map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.sag-panel .vehicle-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: var(--red-warm);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px var(--black-alpha-25);
    animation: bounce 2s infinite;
}

.sag-panel .route-line {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 2px;
    display: flex;
    justify-content: center;
}

.sag-panel .route-line::before {
    content: '';
    width: 50%;
    height: 100%;
    background: var(--red-warm);
    border-radius: 1px;
}

.sag-panel .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin-bottom: 5px;
    cursor: default;
    user-select: none;
}

.sag-panel .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: var(--border-renk);
    padding: 8px 12px;
    border-radius: 6px;
    text-align: center;
}

.sag-panel .info-label {
    font-size: 9px;
    color: var(--ana-renk);
    /* margin-bottom: 3px; */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sag-panel .info-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
}

.sag-panel .location-info {
    background-color: var(--border-renk);
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 5px;
    cursor: default;
    user-select: none;
}

.sag-panel .location-info .info-label {
    margin-bottom: 6px;
}

.sag-panel .location-info .info-value {
    font-size: 12px;
    line-height: 1.3;
}

.sag-panel #kartDurum {
    color: var(--green-secondary) !important;
}

.sag-panel .details-btn {
    width: 100%;
    background: var(--mavi-renk);
    color: var(--white);
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.sag-panel .details-btn:hover {
    opacity: .8;
}

.sag-panel .details-btn:active {
    transform: translateY(0);
}

/* Vehicle Driver Info - Araç ve Sürücü Bilgisi */
.sag-panel .vehicle-driver-info {
    /* margin-top: 10px; */
    margin-bottom: 5px;
    padding: 8px 12px;
    background-color: var(--border-renk);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.sag-panel .vehicle-driver-info > div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sag-panel .vehicle-driver-info .vehicle-driver-separator {
    width: 1px;
    height: 16px;
    background: #ddd;
    flex-shrink: 0;
}

.sag-panel .vehicle-driver-info i {
    color: #666;
    font-size: 11px;
}

.sag-panel .vehicle-driver-info #kartAracBilgisi,
.sag-panel .vehicle-driver-info #kartSurucuBilgisi {
    font-weight: 500;
    font-size: 9px;
}

/* Dark mode için vehicle-driver-info */
[data-theme="dark"] .sag-panel .vehicle-driver-info {
    background: var(--border-renk);
    border-color: var(--border-renk);
    color: var(--ana-renk);
}

[data-theme="dark"] .sag-panel .vehicle-driver-info i {
    color: var(--ana-renk);
}

[data-theme="dark"] .sag-panel .vehicle-driver-info .vehicle-driver-separator {
    background: var(--border-renk);
}

/* #endregion Single Araç Takip Alan #singleVehicle */

/* Sağ Panel Toggle Butonu - Varsayılan olarak gizli, sadece tablet görünümünde görünür */
.sag-panel-toggle-btn {
    display: none;
}

/* #region Multi Araç Takip Alan #multiVehicle */
.sag-panel .multi-arac-wrapper {
    display: flex;
    flex-direction: column;
    color: var(--ana-renk);
    width: 100%;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-renk);
    position: relative;
    overflow: hidden;
    flex: 1;
    /* panel-wrapper içinde kalan alanı doldursun */
    min-height: 200px;
}

.sag-panel .multi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding-bottom: 8px;
    /* border-bottom: 1px solid var(--border-renk); */
    user-select: none;
}

.sag-panel .multi-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0;
    gap: 5px;
}

.sag-panel .multi-title img {
    height: 14px;
}

.sag-panel .multi-status {
    width: 8px;
    height: 8px;
    background: #48bb78;
    border-radius: 50%;
    position: relative;
    animation: multiPulse 2s infinite;
}

.sag-panel .active-vehicles-info {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--auto-color-52-abcd12);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    user-select: none;
}

.sag-panel .active-vehicles-info .vehicles-info {
    font-size: 12px;
    color: var(--ana-renk);
}

.sag-panel .active-vehicles-info span {
    font-weight: 600;
}

.sag-panel .vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* max-height: 220px; <- Bu satırı kaldırın */
    overflow-y: auto;
    /* padding-bottom: 20px; */
    flex: 1;
    /* Kalan alanı doldursun */
    min-height: 0;
    /* Flexbox overflow için gerekli */
}

.sag-panel .vehicle-item {
    background-color: var(--border-renk);
    border-radius: 8px;
    padding: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.sag-panel .vehicle-item:hover {
    background-color: var(--hover-bg, var(--auto-color-53-123abc));
    /* transform: translateY(-1px); */
}

.sag-panel .vehicle-main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* margin-bottom: 6px; */
}

.sag-panel .vehicle-plate {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sag-panel .plate-icon {
    width: 16px;
    height: 16px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sag-panel .plate-number {
    font-size: 13px;
    font-weight: 700;
    color: var(--ana-renk);
}

.sag-panel .vehicle-status {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sag-panel .status-active {
    background-color: rgba(72, 187, 120, 0.2);
    color: var(--green-secondary);
}

.sag-panel .status-inactive {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--red-warm);
}

.sag-panel .vehicle-driver {
    font-size: 11px;
    color: var(--ana-renk);
    margin: 4px 0;
    font-weight: 500;
    opacity: 0.8;
}

.sag-panel .vehicle-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ana-renk);
}

.sag-panel .location-icon {
    font-size: 13px;
    margin-top: -4px;
}

/* Scrollbar Styling */
.sag-panel .vehicle-list::-webkit-scrollbar {
    width: 3px;
    display: none;
}

.sag-panel .vehicle-list::-webkit-scrollbar-track {
    background: transparent;
}

.sag-panel .vehicle-list::-webkit-scrollbar-thumb {
    background: var(--gray-border);
    border-radius: 2px;
}

.sag-panel .vehicle-list::-webkit-scrollbar-thumb:hover {
    background: var(--ana-renk);
    opacity: 0.5;
}

/* #endregion Multi Araç Takip Alan #multiVehicle */

/* #region Araç Takip Detay Modal */

/* Animasyonlar */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

@keyframes routeProgress {

    0%,
    100% {
        width: 60%;
    }

    50% {
        width: 80%;
    }
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 71, 87, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

/* Overlay Background */
.overlay-arac-takip-detay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg-black);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

/* #region İmza Popup Stilleri */
.imza-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg-black);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.imza-popup {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    position: relative;
}

.imza-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.imza-popup-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--ana-renk);
}

.imza-popup-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--gray-basic);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.imza-popup-close:hover {
    background: var(--bg-secondary);
    color: var(--ana-renk);
}

.imza-popup-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.imza-teslim-kisi {
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.imza-teslim-kisi strong {
    
    color: var(--gray-basic);
    margin-right: 2px;
}

.imza-teslim-kisi span {
    color: var(--ana-renk);
    font-weight: 500;
}

.imza-gorsel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.imza-gorsel-wrapper img {
    max-width: 100%;
    height: auto;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--white);
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.teslim-edildi-link {
    cursor: pointer;
    color: var(--primary);
    text-decoration: underline;
    transition: all 0.2s;
}

.teslim-edildi-link:hover {
    color: var(--primary-hover);
    text-decoration: none;
}
/* #endregion İmza Popup Stilleri */

/* #region WhatsApp QR Modal Stilleri */
/* WhatsApp yeşil rengi için variable ekle */
:root {
    --whatsapp-green: #25D366;
    --whatsapp-green-dark: #128C7E;
}

/* Dark mode için WhatsApp renkleri */
[data-theme="dark"] {
    --whatsapp-green: #25D366;
    --whatsapp-green-dark: #128C7E;
}

#whatsapp-qr-modal.whatsapp-qr-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg-black);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* backdrop-filter: blur(4px); */
}

.whatsapp-qr-modal-content {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); */
}

.whatsapp-qr-modal-title {
    color: var(--yesil-destek);
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
}

.whatsapp-qr-modal-instruction {
    margin-bottom: 20px;
    color: var(--ana-renk);
    font-size: 14px;
}

#whatsapp-qr-canvas.whatsapp-qr-canvas {
    border: 2px solid var(--whatsapp-green);
    padding: 10px;
    background: var(--white);
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

.whatsapp-qr-status-message {
    margin-top: 15px;
    font-size: 16px;
    color: var(--gray-basic);
    min-height: 24px;
}

.whatsapp-qr-status-message.qr-status-success {
    color: var(--green-secondary);
    font-weight: 600;
}

.whatsapp-qr-modal-help {
    margin-top: 10px;
    font-size: 14px;
    color: var(--gray-basic);
}

.whatsapp-qr-modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.whatsapp-qr-btn {
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.whatsapp-qr-btn-close {
    background: var(--whatsapp-green);
    color: var(--white-only);
}

.whatsapp-qr-btn-close:hover {
    opacity: 0.9;
    /* transform: translateY(-1px); */
}

.whatsapp-qr-loading {
    color: var(--gray-basic);
    padding: 20px;
    text-align: center;
}

.whatsapp-qr-loading-spinner-wrapper {
    margin-bottom: 15px;
}

.qr-loading-spinner {
    border: 4px solid var(--gray-light-ee);
    border-top: 4px solid var(--yesil-destek);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: qr-spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes qr-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.whatsapp-qr-loading-text {
    margin-bottom: 10px;
    font-weight: 500;
    color: var(--ana-renk);
    font-size: 14px;
}
/* #endregion WhatsApp QR Modal Stilleri */

.overlay-arac-takip-detay.active {
    display: flex;
}

/* Modal Container */
.detail-modal {
    background: var(--white);
    border-radius: 16px;
    width: 800px;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
    position: relative;
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    color: var(--white);
    border-radius: 16px 16px 0 0;
}

.modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    user-select: none;
}

.title-vehicle-info {
    display: flex;
    flex-direction: column;
}

#modalPlateNumber {
    font-size: 20px;
    font-weight: 600;
    color: var(--ana-renk);
}

#modalDriverName {
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
    color: var(--ana-renk);
}


.vehicle-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    padding: 13px;
    font-size: 12px;
    color: var(--ana-renk);
}

.close-btn:hover {
    background-color: var(--light-gray);
}

/* Modal Content */
.modal-content {
    padding: 0 24px 24px 24px;
}

.map-section {
    margin-bottom: 24px;
}

.map-container {
    width: 100%;
    height: 250px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="mapGrid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23mapGrid)"/></svg>');
    opacity: 0.3;
}

.route-visualization {
    position: absolute;
    top: 30%;
    left: 20%;
    right: 20%;
    height: 3px;
    background: var(--auto-color-37-a2c1e4);
    border-radius: 2px;
}

.route-visualization::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background-color: var(--red-warm);
    border-radius: 2px;
    animation: routeProgress 3s ease-in-out infinite;
}

.vehicle-marker-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-color: var(--red-warm);
    border: 3px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 4px 12px var(--black-alpha-25);
    animation: pulse 2s infinite;
}

.map-label {
    position: absolute;
    top: 16px;
    left: 16px;
    background-color: var(--success-green);
    color: var(--white-only);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
}

/* Info Grid */
.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.detail-info-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
    color: var(--ana-renk);
    user-select: none;
    transition: .5s all;
}

.detail-info-card:hover {
    border: 1px solid var(--mavi-renk);
    transition: .5s all;
}


.info-icon {
    width: 40px;
    height: 40px;
    background-color: var(--mavi-renk);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    color: var(--white);
    font-size: 18px;
    transition: .5s all;
}

.detail-info-label {
    font-size: 12px;
    color: var(--ana-renk);
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: .7;
}

.detail-info-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ana-renk);
}

.status-active-detail {
    color: #28a745;
}

.status-inactive-detail {
    color: #dc3545;
}

/* Location Section */
.location-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
}


.location-header {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.location-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ana-renk);
    text-transform: uppercase;
}

.location-info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding-left: 20px;
}

.location-info-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--border-color);
}


.location-address {
    font-size: 16px;
    color: var(--ana-renk);
    line-height: 1.4;

}

.location-coords {
    font-size: 12px;
    color: var(--gray-basic);
}

/* Action Buttons */
.modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.action-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.btn-secondary {
   
    background-color: var(--gri70);
    color: var(--white);
}

.btn-secondary:hover {
    background-color: var(--neutral-gray-b1);
}

/* #endregion Araç Takip Detay Modal */


/* #endregion Araç Takip Alan Tek ve Çoklu Araç Stilleri */

/* #endregion Sag Panel */

/* #region ana-kart Kart Ayarları ve Siparişleri Sırala - Hamburger Menuler */
.ana-kart .kart-menu-buton {
    border: none;
    outline: none;
    cursor: pointer;
    width: 100%;
    padding: 0;
    height: fit-content;
    color: var(--ana-renk);
}

.ana-kart .kart-menu-buton i {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
}

.ana-kart .kart-menu-buton i::before {
    width: 100%;
}

.ana-kart .kart-menu-buton i:hover {
    opacity: .6;
    ;
}

.ana-kart .kart-menu {
    position: relative;
    display: inline-block;
    margin-top: -1px;
}

.ana-kart .kart-menu-content {
    display: none;
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--kart-menu-content);
    min-width: max-content;
    box-shadow: 0 1px 10px 0 var(--black-alpha-25);
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    padding-bottom: 10px;
    width: 200px;
    margin: 0;
    z-index: 999;
}

.ana-kart .kart-menu-content a {
    color: var(--black-true);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ana-kart .kart-menu-content button {
    background-color: transparent;
    color: var(--black-true);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.ana-kart .kart-menu-content button:hover {
    background-color: var(--light-gray)
}

.ana-kart .kart-menu-content .wp-listesi-paylas {
    background-color: var(--whatsapp-green);
    margin: 10px;
    border-radius: 5px;
    color: var(--whatsapp-text);
}

.ana-kart .kart-menu-content .wp-listesi-paylas:hover {
    opacity: .9;
}

.ana-kart .kart-menu-content .kart-siparis-kunyesi-yazdir {
    background-color: var(--gray-light-comon);
    margin: 10px;
    border-radius: 5px;
    color: var(--ana-renk);
    font-weight: 500;
}

.ana-kart .kart-menu-content .kart-siparis-kunyesi-yazdir:hover {
    opacity: .8;
}

.ana-kart .kart-menu-content i {
    font-size: 16px;
}

.ana-kart .kart-menu-content .liste-baslik {
    color: var(--subtle-gray);
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 16px;
}

.ana-kart .kart-menu-content hr {
    border: 1px solid var(--input-border-gray);
    opacity: .2;
    width: 100%;
    margin: 10px 0;
}

.ana-kart .show {
    display: block;
}

.ana-kart .siparis-kart-filtrele-buton {
    border: none;
    outline: none;
    cursor: pointer;
    background-color: var(--gray-ui-bg);
    width: fit-content;
    padding: 0;
    margin-right: 10px;
    padding: 4px;
    border-radius: 3px;
}

.ana-kart .siparis-kart-filtrele-buton i {
    display: flex;
    font-size: 11px;
    cursor: pointer;
    color: var(--gray-text-base);
}

.ana-kart .siparis-kart-filtrele-buton:hover {
    background-color: var(--gray-ultra-light);
}

.ana-kart .siparis-kart-filtrele-buton i::before {
    width: 100%;
}

.ana-kart .sirala-menu {
    position: relative;
    display: inline-block;
    margin-top: -1px;
}

.ana-kart .filtre-menu-content {
    display: none;
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--kart-menu-content);
    min-width: max-content;
    box-shadow: 0 1px 10px 0 var(--black-alpha-25);
    border: 1px solid var(--light-gray);
    border-radius: 6px;
    padding-bottom: 10px;
    width: 200px;
    margin: 0;
    z-index: 999;
}

.ana-kart .filtre-menu-content a {
    color: var(--black-true);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ana-kart .filtre-menu-content a:hover {
    background-color: var(--light-gray)
}

.ana-kart .filtre-menu-content button {
    background-color: transparent;
    color: var(--black-true);
    padding: 12px 16px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: var(--ana-renk);
    padding: 9px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
}

.ana-kart .filtre-menu-content button:hover {
    background-color: var(--light-gray)
}

.ana-kart .filtre-menu-content .kart-siparis-kunyesi-yazdir {
    background-color: var(--gray-light-comon);
    margin: 10px;
    border-radius: 5px;
    color: var(--ana-renk);
    font-weight: 500;
}

.ana-kart .filtre-menu-content .kart-siparis-kunyesi-yazdir:hover {
    opacity: .8;
}

.ana-kart .filtre-menu-content i {
    font-size: 12px;
}

.ana-kart .filtre-menu-content .liste-baslik {
    color: var(--subtle-gray);
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 16px;
}

.ana-kart .filtre-menu-content hr {
    border: 1px solid var(--input-border-gray);
    opacity: .2;
    width: 100%;
    margin: 10px 0;
}

.ana-kart .show {
    display: block;
}

.ana-kart .kart-islem-popup {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--white);
    border: 1px solid var(--gray-light-cc);
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0 2px 4px var(--auto-color-21-515809);
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.ana-kart .kart-islem-popup i {
    margin-right: 5px;
    font-size: 24px;
    color: var(--accent-green-bold);
}

.flash {
    animation: flashAnimation 0.5s alternate infinite;
}

@keyframes flashAnimation {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* #endregion ana-kart Kart Ayarları ve Siparişleri Sırala - Hamburger Menuler */

/* #region Notification Card --- Yaklaşan Siparişler */
.notification-yaklasan-siparisler {
    position: fixed;
    bottom: 20px;
    right: 14px;
    /* padding-right: 6px; */
    width: 315px;
    max-height: 480px;
    background-color: var(--yaklasan-siparis-bg);
    border-radius: 12px;
    box-shadow: 0 10px 25px var(--auto-color-21-515809);
    /* border: 1px solid var(--white-only); */
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: slideInFromBottom 0.3s ease-out;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.notification-yaklasan-siparisler .notification-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 16px 10px 16px;
    margin-bottom: 10px;
    /* background-color: var(--white); */
    border-bottom: 1px solid var(--border-color);
    color: var(--ana-renk);
    user-select: none;
}

.notification-yaklasan-siparisler .notification-baslik {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    font-weight: 600;
}


.notification-yaklasan-siparisler .notification-baslik .baslik-icerik {
    display: flex;
    align-items: center;
    color: var(--ana-renk);
    gap: 5px;
}

.notification-yaklasan-siparisler .notification-baslik .alt-aciklama {
    font-size: 12px;
    font-weight: 400;
    color: var(--dark-gray);
}


.notification-yaklasan-siparisler .notification-baslik i {
    font-size: 16px;
    color: var(--ana-renk);
}




.notification-yaklasan-siparisler .notification-close {
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.notification-yaklasan-siparisler .notification-close i {
    font-size: 9px;
    color: var(--ana-renk);
}


.notification-yaklasan-siparisler .notification-close:hover {
    background-color: var(--white);
    color: var(--ana-renk);
}

.notification-yaklasan-siparisler .notification-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1px 10px 16px 16px;
    margin-right: 6px;
    overflow-y: auto;
}

.notification-yaklasan-siparisler .siparis-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background-color: var(--yaklasan-siparis-alan-bg);
    border-radius: 8px;
    user-select: none;
    border: 1px solid transparent;
    transition: .3s all;
}

/* .notification-yaklasan-siparisler .siparis-item:hover {
    padding: 12px 14px;
    border: 1px solid var(--placeholder);
    transition: .3s all;
} */



.notification-yaklasan-siparisler .siparis-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notification-yaklasan-siparisler .org-type {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    width: fit-content;
    text-align: center;
}

.notification-yaklasan-siparisler .org-type.orgkart.organizasyon {
    background-color: var(--karttur-bg-organizasyon);
    color: var(--karttur-bg-organizasyon-text);
}


.notification-yaklasan-siparisler .org-type.orgkart.ozelsiparis {
    background-color: var(--karttur-bg-ozelsiparis);
    color: var(--karttur-bg-ozelsiparis-text);
}

.notification-yaklasan-siparisler .org-type.orgkart.ozelgun {
    background-color: var(--karttur-bg-ozelgun);
    color: var(--karttur-bg-ozelgun-text);
}

.notification-yaklasan-siparisler .org-type.orgkart.aracsusleme {
    background-color: var(--karttur-bg-aracsusleme);
    color: var(--karttur-bg-aracsusleme-text);
}

.notification-yaklasan-siparisler .org-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--yaklasan-siparis-text);
}

.notification-yaklasan-siparisler .org-yer {
    font-size: 12px;
    font-weight: 500;
}

.notification-yaklasan-siparisler .teslim-saat {
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--gray-basic);
    padding: 5px;
    border-radius: 5px;
    width: fit-content;
}

.notification-yaklasan-siparisler .teslim-saat::before {
    content: 'Teslim Saati: ';
    font-weight: 400;
}

.notification-yaklasan-siparisler .organizasyon-sahibi {
    font-size: 10px;
}

.notification-yaklasan-siparisler .kalan-sure {
    font-size: 12px;
    font-weight: 700;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    min-width: 50px;
    color: var(--white-only);
    background-color: var(--ts-kalan-sure-uyari-bg);
}


.notification-yaklasan-siparisler .notification-footer {
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    font-weight: 400;
    color: var(--ana-renk);
    text-align: center;
    z-index: 999;
}


/* #region Fokus Efekti Stilleri */
.fokus-efekt {
    animation: fokusAnimasyonu 3s ease-in-out;
    z-index: 1000;
    position: relative;
}

@keyframes fokusAnimasyonu {
    0% {
        border: 1px solid transparent;
        transform: scale(1);
    }

    15% {
        border: 1px solid rgba(220, 53, 69, 0.8);
        transform: scale(0.95);
    }

    30% {
        border: 1px solid rgba(220, 53, 69, 0.4);
        transform: scale(0.98);
    }

    45% {
        border: 1px solid rgba(220, 53, 69, 0.8);
        transform: scale(0.96);
    }

    60% {
        border: 1px solid rgba(220, 53, 69, 0.3);
        transform: scale(0.99);
    }

    75% {
        border: 1px solid rgba(220, 53, 69, 0.6);
        transform: scale(0.97);
    }

    90% {
        border: 1px solid rgba(220, 53, 69, 0.2);
        transform: scale(1);
    }

    100% {
        border: 1px solid transparent;
        transform: scale(1);
    }
}

/* Tıklanabilir sipariş itemleri için hover efekti güncelle */
.notification-yaklasan-siparisler .siparis-item {
    transition: .3s all, box-shadow 0.2s ease;
}

.notification-yaklasan-siparisler .siparis-item:hover {
    padding: 12px 14px;
    border: 1px solid var(--placeholder);
    transition: .3s all;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* #endregion Fokus Efekti Stilleri */




/* #endregion Notification Card --- Yaklaşan Siparişler */

/* #region (Organizasyon Kartı - Kart Ayarları Menüsü) - Sipariş Künyesi Yazdır - Yazdırma Alanı Stilleri */
.kunye-template {
    position: relative;
    height: min(700px, 100vh);
    aspect-ratio: 760 / 1116;
    overflow: visible;
    margin: auto;
}

.kunye-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.kunye-template.rotated {
    transform: rotate(90deg);
    transform-origin: top left;
    width: 110mm;
    height: 75mm;
}

.k-date,
.k-time,
.k-telefon,
.k-urunturu,
.k-adres,
.k-teslimkisi,
.k-teslimtel,
.k-karttur,
.k-konum {
    position: absolute;
    font-size: 16px;
    color: var(--black-true);
    white-space: pre-line;
    font-weight: 500;
    text-align: left;
}

.k-date {
    top: 25px;
    left: 273px;
    font-size: 25px;
    font-weight: 500;
    width: 35%;
    text-align: center;
    width: 40%;
}

.k-time {
    top: 68px;
    left: 273px;
    font-size: 42px;
    font-weight: 600;
    width: 40%;
    text-align: center;
}

.k-siparisveren {
    display: none;
}

.k-telefon {
    top: 148px;
    right: 18px;
    color: var(--gray-basic);
    width: 100%;
    white-space: nowrap;
    text-align: right;
}

.k-urunturu {
    top: 192px;
    left: 118px;
    white-space: normal;
}

.k-urunturu .etiket {
    font-size: 20px;
    font-weight: 400;
}

.k-karttur {
    top: 237px;
    right: 14px;
    font-size: 16px;
    text-align: right;
    width: fit-content;
    background: var(--full-black);
    color: var(--white);
    padding: 10px 15px;
    border-radius: 5px 5px 0 5px;
}

.k-adres {
    top: 315px;
    left: 28px;
    width: 88%;
    font-size: 20px;
    font-weight: 500;
}

.k-konum {
    top: 280px;
    left: 28px;
    width: 88%;
    font-size: 24px;
    font-weight: 600;
    white-space: normal;
}

.k-teslimkisi {
    top: 455px;
    left: 28px;
    font-size: 20px;
    font-weight: 600;
}

.k-teslimtel {
    top: 485px;
    left: 28px;
    font-size: 18px;
    font-weight: 500;
}

/* ----------------------------- */
/* ----------------------------- */
/* ----------------------------- */

/* #region Künyede İşletme Bilgileri Stilleri - Dinamik Alt Kısım */
.k-isletme-bilgileri-container {
  position: absolute;
  bottom: 8px;
  left: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* padding: 8px 0; */
  border-radius: 6px;
  font-family: inherit;
  z-index: 10;
}

.k-isletme-logo-wrapper {
    flex-shrink: 0;
    width: 150px;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-isletme-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.k-isletme-detay-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* .k-isletme-firma-adi {
  font-weight: 600;
  font-size: 11px;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 2px;
} */

.k-isletme-tam-adres {
  font-size: 12px;
  color: #000;
  line-height: 1.2;
  margin-bottom: 2px;
  word-wrap: break-word;
  text-align: left;
}

.k-isletme-iletisim-satiri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
}

.k-isletme-web-satiri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  line-height: 1.2;
}

.k-isletme-telefon-item i,
.k-isletme-whatsapp-item i,
.k-isletme-eposta-item i,
.k-isletme-website-item i {
 font-size: 12px;
 margin-right: 4px;
 /* font-weight: 400;  */
}

/* PDF yazdırma için özel düzenlemeler */
@media print {
  .k-isletme-bilgileri-container {
    background: rgba(255, 255, 255, 0.98) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  
  .k-isletme-firma-adi,
  .k-isletme-tam-adres,
  .k-isletme-iletisim-satiri,
  .k-isletme-web-satiri {
    color: #000 !important;
  }
}
/* #endregion */

/* ----------------------------- */
/* ----------------------------- */
/* ----------------------------- */



/* #region QR Kod Kare Kod Stilleri */

/* QR kod küçük kutucuk */
.k-qrcode {
    position: absolute;
    right: 15px;
    bottom: 95px;
    width: 110px;
    height: 110px;
    /* background: #fff; */
    /* border: 1px solid var(--border-renk, #ddd); */
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 9999;
    /* background-color: yellow; */
}

.k-qrcode svg,
.k-qrcode canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* QR açma butonu */
.qr-btn {
    position: fixed;
    right: 28px;
    bottom: 112px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
    z-index: 10000;
    display: none;
}

.qr-btn i {
    font-size: 32px;
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg-black);
    display: grid;
    place-items: center;
    color: var(--ana-renk);
    z-index: 9999;
}

.modal[hidden] {
    display: none;
}

.modal__sheet {
    width: 92vw;
    max-width: 500px;
    background: var(--white);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    z-index: 10000;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 14px;
    border-bottom: 1px solid var(--border-color);
}

.modal__head h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.modal__close {
    border: 0;
    background: transparent;
    /* font-size: 22px; */
    cursor: pointer;
    /* line-height: 1; */
}

/* QR kamera alanı */
.scanner.hidden {
    display: none !important;
}

.scanner {
    position: relative;
    padding: 12px;
}

#qrViewport {
    width: 100%;
    max-width: 480px;
    margin: auto;
    border-radius: 10px;
    background: var(--full-black);
}

.hint {
    padding: 0 14px;
    font-size: 13px;
    /* opacity: .75; */
}

/* Detaylar */

#qrDetails[hidden],
#qrActions[hidden] {
    display: none !important;
}

#qrDetails {
    padding: 12px 14px;
    border-top: 1px solid var(--border-color);
    display: grid;
    gap: 10px;
}

#qrDetails p {
    margin: 0;
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: start;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ana-renk);
}

#qrDetails p strong {
    min-width: 150px;
    color: var(--ana-renk);
    font-weight: 600;
}

#qrDetails span {
    color: var(--ana-renk);
    flex: 1;
    word-break: break-word;
}

#qrDetails p span {
    font-weight: 400;
    /* Değerler kalın */
    margin-left: 4px;
    /* Metinle arasında küçük boşluk */
    color: var(--ana-renk);
}


/* Aksiyon butonları */
#qrActions {
    display: grid;
    gap: 10px;
    padding: 12px 14px 16px;
    border-top: 1px solid var(--border-color);
}

#qrActions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    /* border: 1px solid var(--border-color); */
    text-decoration: none;
    font-weight: 500;
    transition: transform .06s ease, box-shadow .12s ease;
    background-color: var(--mavi-renk);
    color: var(--white);
}

/* #qrActions .btn:active { transform: translateY(1px); }
  #qrActions .btn.is-disabled {
    opacity: .55;
    pointer-events: none;
  } */



/* popup boyut ve hizalama */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    /* background: #fff; */
    padding: 20px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
}

/* kamera alanı full genişlik */
#qrScanner {
    width: 100%;
    height: 300px;
    background: #000;
}


/* #endregion QR Kod Kare Kod Stilleri */





/* #endregion (Organizasyon Kartı - Kart Ayarları Menüsü) - Sipariş Künyesi Yazdır - Yazdırma Alanı Stilleri */

/* #region Index Header - Search Box Input - Çarpı İşareti Yapılandırma */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.search-box-title {
    position: relative;
}

.search-clear-btn {
    position: absolute;
    right: 10px;
    top: 45%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--ana-renk);
    cursor: pointer;
    display: none;
    z-index: 10;
}

/* #endregion Index Header - Search Box Input - Çarpı İşareti Yapılandırma */

/* #region whatsapp-paylas.js Gönderilecek Whatsapp Numarası Seçme Popup */
.wp-popup-container {
    position: fixed;
    inset: 0;
    background-color: var(--popup-overlay-bg);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.wp-popup {
    background: var(--white);
    padding: 24px 16px;
    border-radius: 10px;
    text-align: center;
    max-width: 90%;
    width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.wp-popup h3 {
    font-size: 14px;
    font-weight: 400;
    color: var(--ana-renk);
    margin: 0;
    margin-bottom: 10px;
}

.wp-button-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.wp-button-group button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background-color: var(--whatsapp-green);
    cursor: pointer;
    transition: background 0.3s;
    font-size: 14px;
    font-weight: 500;
    color: var(--whatsapp-text);
    gap: 10px;
    padding: 0;
    padding: 10px 14px 10px 10px;
}

.wp-button-group button:hover {
    opacity: .9;
}

.wp-popup .kapat {
    background-color: var(--neutral-gray-b1);
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    width: fit-content;
    color: var(--white);
}

.wp-popup .kapat:hover {
    background-color: var(--gri70);
}

.wp-button-group button strong {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 400;
    background: var(--white);
    padding: 6px;
    border-radius: 5px;
    color: var(--ana-renk);
}

.wp-button-group button small {
    font-size: 13px;
    font-weight: 400;
}

.wp-popup img {
    height: 48px;
}

/* #endregion whatsapp-paylas.js Gönderilecek Whatsapp Numarası Seçme Popup */

/* #region Sipariş Kartları Eylemleri Action Butonları Düzenle-Sil-Tamamalandı Olarak İşaretle Butonlar */
.siparis-kart.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease;
}

/* #endregion Sipariş Kartları Eylemleri Action Butonları Düzenle-Sil-Tamamalandı Olarak İşaretle Butonlar */

/* #region Organizasyon Kartları - Geçmiş Tarihli Sipariş İse Uyarı Göster (gecmis-siparis-uyari) */
.gecmis-siparis-uyari {
    background-color: var(--gecmissiparisuyari-bg);
    border-left: 3px solid var(--gecmissiparisuyari-border);
    padding: 10px;
    margin: 0 12px 10px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--ana-renk);
    white-space: wrap;
    text-align: center;
}

.gecmis-siparis-uyari .uyari-not {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    gap: 2px;
}

.gecmis-siparis-uyari .uyari-not span {
    font-weight: 500;
    display: none;
}

/* #endregion Organizasyon Kartları - Geçmiş Tarihli Sipariş İse Uyarı Göster (gecmis-siparis-uyari) */

/* #region Açılır Liste - acilirliste - Master Styles */
.arama-yok-mesaji {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--mavi-renk, #053FC7);
    display: block;
    cursor: default;
    user-select: none;
}

.placeholder-message {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--gray-soft-dark) !important;
    display: block;
    cursor: default;
    user-select: none;
}

.wrapper-acilirliste {
    width: 100%;
    position: relative;
}

.wrapper-acilirliste .acilirliste,
.wrapper-acilirliste li {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wrapper-acilirliste .acilirliste {
    height: 36px;
    font-size: 13px;
    justify-content: space-between;
    border: 1px solid var(--input-border-gray);
    background-color: var(--white);
    border-radius: 4px;
    outline: none;
    padding: 0 0 0 10px;
    width: 100%;
}

/* Select elementleri için özel stiller */
.wrapper-acilirliste select.acilirliste {
    height: 36px;
    font-size: 13px;
    border: 1px solid var(--input-border-gray);
    background-color: var(--white);
    border-radius: 4px;
    outline: none;
    padding: 0 10px;
    width: 100%;
    color: var(--ana-renk);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
}

.wrapper-acilirliste select.acilirliste:focus {
    border-color: var(--mavi-renk);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.wrapper-acilirliste select.acilirliste:disabled {
    background-color: var(--gray-overlay);
    color: var(--gri-orta);
    cursor: not-allowed;
    opacity: 0.6;
}

.wrapper-acilirliste .acilirliste span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ana-renk);
}

/* Dark mode'da açılır liste span'ları için düzeltme - mevcut sistem ile uyumlu */
/* body.dark-mode .wrapper-acilirliste .acilirliste span {
    color: var(--ana-renk) !important;
} */

.wrapper-acilirliste .acilirliste span img {
    height: 32px;
}

.wrapper-acilirliste .acilirliste i {
    font-size: 16px;
    padding-right: 10px;
    transition: transform 0.3s linear;
    color: var(--ana-renk);
}

.wrapper-acilirliste .content {
    display: none;
    padding: 10px 10px 0 10px;
    margin-top: 5px;
    background: var(--white);
    border-radius: 7px;
    box-shadow: 0 10px 25px var(--auto-color-21-515809);
    position: absolute;
    z-index: 999;
    border: 1px solid var(--input-border-gray);
    width: 100%;
}

.wrapper-acilirliste.active .content {
    display: block;
}

.wrapper-acilirliste .search {
    position: relative;
}

.wrapper-acilirliste .search i {
    top: 50%;
    left: 15px;
    color: var(--gri-orta);
    font-size: 18px;
    pointer-events: none;
    transform: translateY(-50%);
    position: absolute;
}

.wrapper-acilirliste .search input {
    height: 36px;
    width: 100%;
    outline: none;
    font-size: 14px;
    border-radius: 5px;
    padding: 0 20px 0 43px;
    border: 1px solid var(--gri-acik);
}

.wrapper-acilirliste .search input:focus {
    border: 1px solid var(--mavi-renk);
    color: var(--mavi-renk);
}

.wrapper-acilirliste ul {
    margin-top: 10px;
    max-height: 150px;
    overflow-y: auto;
    padding: 0;
    padding-right: 7px;
    display: none;
}

.wrapper-acilirliste.active ul {
    display: block;
}

.wrapper-acilirliste ul::-webkit-scrollbar {
    width: 7px;
}

.wrapper-acilirliste ul::-webkit-scrollbar-track {
    background: var(--scroll-track-color);
    border-radius: 25px;
}

.wrapper-acilirliste ul::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb-color) !important;
    border-radius: 25px;
}

.options-urunler li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wrapper-acilirliste ul li {
    height: 36px;
    padding: 5px 8px;
    font-size: 14px;
    color: var(--ana-renk);
    gap: 8px;
}

.wrapper-acilirliste.urunler ul li {
    height: 40px;
}

.wrapper-acilirliste ul li:hover,
.wrapper-acilirliste ul li.selected {
    border-radius: 5px;
    background: var(--gray-overlay);
}

.wrapper-acilirliste ul li img {
    height: 32px;
    mix-blend-mode: normal;
    border-radius: 3px;
}

.wrapper-acilirliste ul p {
    font-size: 13px;
    color: var(--mavi-renk);
    margin-top: 10px;
}

.wrapper-acilirliste button {
    display: inline-block;
    border: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    background-color: var(--mavi-renk);
    margin-top: 10px;
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--white);
    cursor: pointer;
}

.yeni-musteri-ekle-btn {
    display: flex !important;
    border: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    background-color: var(--mavi-renk) !important;
    margin-top: 10px !important;
    padding: 10px 24px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--white) !important;
    cursor: pointer !important;
    width: fit-content !important;
}

.yeni-musteri-ekle-btn:hover {
    opacity: .9;
}

.wrapper-acilirliste button:hover {
    opacity: .9;
}

.input-error {
    border: 1px solid var(--red-warm);
    border-radius: 6px;
}

/* Input-error olan input'larda focus border'ını gizle (mavi border yerine kırmızı border görünsün) */
.input-error:focus,
input.input-error:focus,
textarea.input-error:focus {
    outline: none;
    border: 1px solid var(--red-warm) !important;
    box-shadow: none;
}

/* Radio button wrapper'larında input-error border gösterme */
.label-kapsayici-org-tipler.input-error,
.label-kapsayici-org-tipler[data-required-radio].input-error,
[data-required-radio].input-error {
    border: none !important;
}

/* Hidden input (mahalle) için tooltip kaldırıldı - kırmızı border yeterli */

/* #endregion Açılır Liste - acilirliste - Master Styles */

/* #region Sipariş Kartları Sağa Tıkla "Sipariş Kartını Taşı" Listesi - Custom Context Menü */
.context-menu {
    position: absolute;
    z-index: 99999;
    display: none;
    background: var(--kart-menu-content);
    border: 1px solid var(--mid-gray);
    box-shadow: 0 1px 10px 0 var(--black-alpha-25);
    border-radius: 6px;
    min-width: 200px;
    font-size: 13px;
    color: var(--ana-renk);
}

.context-menu .liste-baslik {
    color: var(--subtle-gray);
    font-size: 14px;
    font-weight: 500;
    padding-left: 20px;
    padding-top: 16px;
}

.context-menu hr {
    border: 1px solid var(--input-border-gray);
    opacity: .2;
    width: 100%;
    margin: 0;
    margin-top: 10px;
}

.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.context-menu ul li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
}

.context-menu ul li i {
    font-size: 9px;
}

.context-menu ul li:hover {
    background-color: var(--light-gray);
}

.context-menu .not-alan {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--gray-basic);
    padding: 10px 0 10px 16px;
    max-width: 200px;
    gap: 8px;
    cursor: default;
}

.context-menu .not {
    border-left: 1px solid var(--border-renk);
    padding-left: 10px;
}

.context-menu .not-alan i {
    font-size: 18px;
    height: 100%;
}

/* ✅ DİNAMİK SUBMENU POZİSYONLAMA */
.context-submenu {
    position: absolute;
    top: 62px;
    display: none;
    background: var(--kart-menu-content);
    border: 1px solid var(--mid-gray);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-width: 300px;
    z-index: 100001;
    /* Varsayılan olarak sağa açıl */
    left: 100%;
    margin-left: -4px;
}

/* ✅ SOLA AÇILAN SUBMENU (Sağdan taştığında) */
.context-submenu.open-left {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -4px;
}

/* ✅ YUKARI AÇILAN SUBMENU (Aşağıdan taştığında) */
.context-submenu.open-up {
    top: auto;
    bottom: 0;
}

.context-submenu li {
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.context-submenu li:hover {
    background-color: var(--light-gray);
}

.context-submenu .submenu-uyari {
    color: var(--gray-basic);
    padding: 6px 12px;
}

/* ✅ UYARI LİSTE İÇİ STILI */
.uyari-liste-ici {
    color: var(--gray-basic) !important;
    /* font-style: italic; */
    cursor: default !important;
}

.uyari-liste-ici:hover {
    background-color: transparent !important;
}

/* Highlight – Taşınan Kartın Kırmızı Beyaz Yanıp Sönme Efekti */
@keyframes redWhiteBlink {

    0%,
    100% {
        border: 1px solid var(--toast-button-confirm);
        scale: .95;
        transition: .3s all ease-in-out;
    }

    50% {
        border: 1px solid var(--ana-renk);
        scale: 1;
        transition: .3s all ease-in-out;
    }
}

.highlight-border {
    animation: redWhiteBlink 1s ease-in-out 3;
}

/* #endregion Sipariş Kartları Sağa Tıkla "Sipariş Kartını Taşı" Listesi - Custom Context Menü */

/* #region Index Sayfa En Alt - Bilgi Band */
.bilgi-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    width: min-content;
    color: var(--ana-renk);
    font-size: 11px;
    font-weight: 300;
    padding-left: 20px;
    padding: 6px 20px 6px 20px;
    gap: 16px;
    overflow: hidden;
    cursor: default;
    width: 100%;
    border-top: 1px solid var(--mid-gray);
    height: 32px;
}

.bilgi-band .bilgi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-wrap: nowrap;
    overflow: hidden;
}

.bilgi-band .bilgi-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-wrap: nowrap;
    overflow: hidden;
    background-color: var(--white);
    border: 1px solid var(--mid-gray);
    padding: 2px 5px;
    font-size: 10px;
    font-weight: 300;
}

.bilgi-band .bilgi span {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    margin-top: 1px;
}

.bilgi-band .bilgi #tamam {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    width: 14px;
    margin-top: 0;
}

.bilgi-band .bilgi #tamam::before {
    content: "✓";
    font-size: 10px;
    line-height: 1;
    border: 0;
    outline: 0;
    color: var(--success-green);
    color: var(--white);
    background-color: var(--success-green);
    padding: 1px 2px;
    border-radius: 2px;
}

/* .bilgi-band .bilgi #teslimedildi {
    background-color: #00FF00;
} */
/* .bilgi-band .bilgi #tamam {
    background-color: #00FF00;
} */
/* .bilgi-band .bilgi #uyari {
    background-color: #ff006f;
    height: 2px;
    width: 20px;
} */
/* .bilgi-band .bilgi #arsiv {
    background-color: #ff8800;
} */
/* #endregion Index Sayfa En Alt - Bilgi Band */

/* #region Resim ve Görsel Alanlar - Lightbox */
#customLightbox {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-bg-black);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1000000 !important;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.2s ease;
    touch-action: none;
    cursor: grab;
}

#customLightbox.visible {
    display: flex;
    opacity: 1;
}

#lightboxImage {
    max-width: 88vw;
    max-height: 90vh;
    border-radius: 8px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    cursor: default;
}

#lightboxImage.fade-in {
    opacity: 0;
    animation: fadein 0.4s ease forwards;
}

@keyframes fadein {
    to {
        opacity: 1;
    }
}

#closeLightbox {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: var(--white);
    color: var(--ana-renk);
    padding: 12px;
    z-index: 100002;
    font-size: 16px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
}

#closeLightbox:hover {
    opacity: .85;
    transition: background 0.3s ease;
}

#prevBtn,
#nextBtn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white);
    color: var(--ana-renk);
    padding: 16px;
    border: none;
    border-radius: 50%;
    z-index: 100001;
    cursor: pointer;
    font-size: 18px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    backdrop-filter: blur(10px);
    touch-action: manipulation;
}

#prevBtn:hover,
#nextBtn:hover {
    opacity: .8;
}

#prevBtn {
    left: 32px;
}

#nextBtn {
    right: 32px;
}

body:has(#customLightbox.visible) {
    overflow: hidden;
}

/* #endregion Resim ve Görsel Alanlar - Lightbox */

/* #region Arşiv Sebep Popup - TÜM CSS Stilleri */

.arsiv-sebep-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-bg-black);
    z-index: 1000000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    /* backdrop-filter: blur(2px); */
}

.arsiv-sebep-popup {
    background: var(--white);
    border-radius: 12px;
    max-width: 380px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: popupSlideIn 0.3s ease-out;
    border: 1px solid var(--border-renk);
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

.arsiv-sebep-popup .popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 24px 16px;
    /* border-bottom: 1px solid var(--border-renk); */
    margin-bottom: 10px;
    user-select: none;
}

.arsiv-sebep-popup .popup-header i {
    font-size: 24px;
    color: var(--ana-renk);
    background: var(--extra-light-bg);
    padding: 8px;
    border-radius: 8px;
}

.arsiv-sebep-popup .popup-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ana-renk);
    margin: 0;
    line-height: 1.4;
}

.arsiv-sebep-popup .popup-subtitle {
    margin: 0;
    color: var(--gray-basic);
    font-size: 12px;
    text-align: left;
}

.arsiv-sebep-popup .sebep-listesi {
    padding: 0 24px;
    max-height: 300px;
    overflow-y: auto;
}

.arsiv-sebep-popup .sebep-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--extra-light-bg);
    user-select: none;
}


.arsiv-sebep-popup .siparisler-tamamlandi {
    background-color: var(--auto-color-22-69d815);
}




.arsiv-sebep-popup .sebep-option:hover {
    border-color: var(--mavi-renk);
    background: var(--bg-blue-pale);

}

.arsiv-sebep-popup .sebep-option.selected {
    border-color: var(--mavi-renk);
    background: var(--bg-blue-pale);
}

.arsiv-sebep-popup .sebep-option:last-child {
    margin-bottom: 0;
}

.arsiv-sebep-popup .sebep-option input[type="radio"] {
    margin: 0;
    accent-color: var(--mavi-renk);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.arsiv-sebep-popup .sebep-text {
    font-size: 13px;
    color: var(--ana-renk);
    flex: 1;
    font-weight: 400;
    line-height: 1.4;
}

.arsiv-sebep-popup .sebep-icon {
    font-size: 16px;
    color: var(--gri70);
    transition: color 0.2s ease;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arsiv-sebep-popup .sebep-option:hover .sebep-icon,
.arsiv-sebep-popup .sebep-option.selected .sebep-icon {
    color: var(--mavi-renk);
}

.arsiv-sebep-popup .popup-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    border-top: 1px solid var(--border-renk);
    margin-top: 20px;
}

.arsiv-sebep-popup .btn-popup {
    flex: 1;
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    outline: none;
    font-family: inherit;
}


/* ------ARŞİVLE Butonu------- */

.arsiv-sebep-popup .btn-confirm {
    background: var(--mavi-renk);
    color: var(--white);
}


.arsiv-sebep-popup .btn-confirm:hover:not(:disabled) {
    opacity: .8;
}

.arsiv-sebep-popup .btn-confirm:active:not(:disabled) {
    transform: translateY(0);
}

.arsiv-sebep-popup .btn-confirm:disabled {
    background: var(--mid-gray);
    color: var(--gri70);
    border-color: var(--mid-gray);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ------ARŞİVLE Butonu------- */

/* ------VAZGEÇ Butonu------- */

.arsiv-sebep-popup .btn-cancel {
    background-color: var(--neutral-gray-b1);
    color: var(--white);
}

.arsiv-sebep-popup .btn-cancel:hover {
    background: var(--gri70);
}

.arsiv-sebep-popup .btn-cancel:active {
    transform: translateY(0);
}

/* ------VAZGEÇ Butonu------- */

/* #endregion */

/* #region Sıcak Satış Ekle Popup */
.btn-sicak-satis-button {
    background: linear-gradient(135deg, #eb5e91, #eb5e5e);
    /* background: linear-gradient(135deg, #ff005c, #ffbc00); */
    color: var(--white-only);
    border: none;
    padding: 12px 16px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
    height: 40px;
    white-space: nowrap;
}

.btn-sicak-satis-button:hover {
    opacity: 0.8;
}

.btn-sicak-satis-button:active {
    transform: translateY(0);
}

/* Popup Overlay */
.sicak-satis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--overlay-bg-black);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    /* backdrop-filter: blur(2px); */
    color: var(--ana-renk);
}

.sicak-satis-overlay.show {
    display: flex;
    opacity: 1;
}

.sicak-satis-overlay.show .sicak-satis-popup {
    transform: scale(1) translateY(0);
    padding: 24px;
}

.sicak-satis-popup {
    background: var(--white);
    border-radius: 12px;
    width: 500px;
    max-width: 90%;
    transform: scale(0.8) translateY(20px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.sicak-satis-popup .subtitle {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-basic);
    padding-top: 5px;
}

.sicak-satis-popup .tl-input {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}



.sicak-satis-popup .header-alan {
    border-bottom: 1px solid var(--auto-color-45-c0d775);
    margin-bottom: 20px;
}

.sicak-satis-popup .header-alan .baslik {
    font-size: 20px;
}

.sicak-satis-popup input[type="radio"]:checked+span {
    color: var(--mavi-renk);
    font-weight: 600;
}


.sicak-satis-popup .header-alan .baslik i {
    padding-right: 5px;
}

.sicak-satis-popup .form-group-wrapper {
    display: flex;
    gap: 20px;
    width: 100%;
}

.sicak-satis-popup .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    width: 100%;
    gap: 5px;
}

.sicak-satis-popup .form-group label {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    font-weight: 500;
    color: var(--gri70);
}

.sicak-satis-popup .radio-groups {
    gap: 15px;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 0;
    border-radius: 5px;
    border: 1px solid var(--auto-color-45-c0d775);
    padding: 16px;
}

.sicak-satis-popup .radio-groups label {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.radio-group {
    display: flex;
    flex-direction: row !important;
    gap: 20px !important;
    flex-wrap: wrap;
}

.sicak-satis-popup .sicak-satis-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 20px;
    background: var(--white);
}

/* #endregion Sıcak Satış Ekle Popup */


/* #region Çiçek Sepeti Siparişleri Popup Toast ve Modal Stilleri */


/* #region Çiçeksepeti Toast Bildirimi Stilleri */

body.dark-mode .kart-tur img {
  filter: brightness(0) invert(1);
}

.ciceksepeti-toast-container {
    position: fixed;
    top: 64px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 310px;
}

.ciceksepeti-toast {
    background: linear-gradient(135deg, #0012c8, #00a53e);
    color: var(--white);
    border-radius: 12px;
    padding: 16px;
    /* box-shadow: 0 8px 25px rgba(0, 200, 81, 0.3); */
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* 🔥 Yanan sönen box-shadow animasyonu */
@keyframes ciceksepetiToastGlow {
    0% {
        box-shadow: 0 0 10px rgba(0, 200, 81, 0.4);
                    /* 0 0 20px rgba(0, 200, 81, 0.3), */
                    /* 0 0 30px rgba(0, 200, 81, 0.2); */
    }
    50% {
        box-shadow: 0 0 25px rgba(0, 200, 81, 0.8);
                    /* 0 0 50px rgba(0, 200, 81, 0.6), */
                    /* 0 0 70px rgba(0, 200, 81, 0.4); */
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 200, 81, 1);
                    /* 0 0 20px rgba(0, 200, 81, 0.3), */
                    /* 0 0 30px rgba(0, 200, 81, 0.2); */
    }
}

/* 📦 Toast geldiğinde animasyonu çalıştır */
.ciceksepeti-toast.show {
    transform: translateX(0);
    opacity: 1;
    /* animation: ciceksepetiToastGlow 1.5s infinite ease-in-out; */
}





.ciceksepeti-toast.hide {
    transform: translateX(100%);
    opacity: 0;
    margin-bottom: -100px;
}

.ciceksepeti-toast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ciceksepeti-toast-header .ciceksepeti-toast-logo {
    width: 110px;
    filter: brightness(0) invert(1);
}

.ciceksepeti-toast-header .ciceksepeti-toast-close {
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.ciceksepeti-toast-header .ciceksepeti-toast-close i {
    color: var(--white-only);
    font-size: 9px;
}

.ciceksepeti-toast-header .ciceksepeti-toast-close:hover {
    opacity: .8;
}

.ciceksepeti-toast-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--white-only);
}

.ciceksepeti-toast-subtitle {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 12px;
    color: var(--white-only);
}

.ciceksepeti-toast-orders {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 235px; 
    overflow-y: auto;
    padding-right: 4px;
    padding-top: 2px;
    
}

/* Scrollbar güzelleştirme (isteğe bağlı) */
.ciceksepeti-toast-orders::-webkit-scrollbar {
    width: 6px;
}

.ciceksepeti-toast-orders::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5);
    border-radius: 3px;
}

.ciceksepeti-toast-orders::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.8);
}

.ciceksepeti-toast-order-item {
    background: white;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
    position: relative;
    color: #2c3e50;
}

.ciceksepeti-toast-order-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
transition: all ease-in-out 0.2s;
}

.ciceksepeti-order-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ciceksepeti-order-title {
    font-weight: 500;
    font-size: 15px;
    color: #00C851;
    margin-bottom: 4px;
}

.ciceksepeti-order-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ciceksepeti-order-info .info-line {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 1.4;
}

.ciceksepeti-order-info .info-label {
    color: #6c757d;
    font-weight: 500;
    margin-right: 8px;
}

.ciceksepeti-order-info .info-value {
    color: #212529;
    font-weight: 500;
}

.ciceksepeti-status-indicator {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 10px;
    height: 10px;
    background: #00C851;
    border-radius: 50%;
    animation: ciceksepetiPulse 2s infinite;
}

@keyframes flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 0, 0, 0.1); }
}

@keyframes ciceksepetiPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 200, 81, 0.7);
    }
    
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 200, 81, 0);
    }
    
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 200, 81, 0);
    }
}

/* #endregion */

/* #region Çiçeksepeti Modal Stilleri - Tasarıma Uygun */

.ciceksepeti-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg-black);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ciceksepeti-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.ciceksepeti-modal {
    background-color: var(--white);
    border-radius: 16px;
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.8);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.ciceksepeti-modal-overlay.show .ciceksepeti-modal {
    transform: scale(1);
}

.ciceksepeti-modal-header {
    /* background: white; */
    padding: 20px 24px 16px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-renk);
    gap: 12px;
}

.ciceksepeti-modal-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
}

.ciceksepeti-modal-header-content .ciceksepeti-modal-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ciceksepeti-modal-header .ciceksepeti-modal-logo {
       width: auto;
    height: 32px;
}

.ciceksepeti-modal-header .ciceksepeti-modal-title {
    color: var(--cckspt-primary-text);
    font-size: 20px;
    font-weight: 500;
    margin-top: -4px;
}

.ciceksepeti-modal-header-right {
    display: flex;
    /* flex-direction: column; */
    /* align-items: flex-end; */
    justify-content: space-between;
    gap: 8px;
}

.ciceksepeti-modal-header .ciceksepeti-panel-link {
    color: var(--mavi-renk);
    font-size: 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ciceksepeti-modal-header .ciceksepeti-panel-link:hover {
    text-decoration: underline;
}

.ciceksepeti-modal-header .ciceksepeti-modal-close {
    display: flex
;
    align-items: center;
    justify-content: center;
    height: 32px;
    width: 32px;
    border-radius: 5px;
    cursor: pointer;
    background-color: transparent;
    padding: 13px;
    /* color: #6c757d; */
}

.ciceksepeti-modal-header .ciceksepeti-modal-close .icon-btn-kapat {
    color: var(--ana-renk);
}

.ciceksepeti-modal-header .ciceksepeti-modal-close:hover {
        background-color: var(--light-gray);
}

.ciceksepeti-modal-content {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.ciceksepeti-modal-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 400px;
}

.ciceksepeti-modal-left {
    background-color: var(--cckspt-bg-left);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ciceksepeti-modal-right {
    padding: 24px;
}

.ciceksepeti-siparis-no {
    font-size: 14px;
}

.ciceksepeti-siparis-no span {
    color: var(--gray-basic);
}

.ciceksepeti-siparis-no strong {
    color: var(--ana-renk);
    font-weight: 600;
}

.ciceksepeti-teslim-zaman {
    background: var(--cckspt-bg-datetime);
    border: 1px solid var(--cckspt-border-datetime);
    border-radius: 5px;
    padding: 16px;
    color: var(--cckspt-text-datetime);
    height: 72px;
    display: flex;
    align-items: center;
}

.ciceksepeti-teslim-zaman .teslim-zaman-badge {
    display: flex;
    align-items: center;
        gap: 8px;
}

.ciceksepeti-teslim-zaman .teslim-zaman-badge i {
    padding: 14px;
    background-color: var(--ana-renk);
    color: var(--white);
    border-radius: 50%;
    font-size: 20px;
    display: none;
}


.ciceksepeti-teslim-zaman .teslim-zaman-badge > span {
    font-size: 12px;
    opacity: 0.9;
}



.ciceksepeti-teslim-zaman .teslim-zaman-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ciceksepeti-teslim-zaman .teslim-zaman-info .teslim-tarih {
    font-weight: 600;
    font-size: 16px;
}
.ciceksepeti-teslim-zaman .teslim-zaman-info span {
    font-size: 12px;
}

.ciceksepeti-urun-section {
display: flex
;
    gap: 16px;
    align-items: center;
    background-color: var(--white);
    border-radius: 5px;
    padding: 16px;
    box-shadow: 0px -4px 41px -4px rgba(0, 0, 0, 0.1);
}

.ciceksepeti-urun-section .urun-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.ciceksepeti-urun-section .urun-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ciceksepeti-urun-section .urun-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ciceksepeti-urun-section .urun-name {
    font-weight: 600;
    color: var(--ana-renk);
    font-size: 18px;
}

.ciceksepeti-urun-section .urun-price {
    display: flex;
    align-items: center;
    gap: 5px;
}
.ciceksepeti-urun-section .urun-price span {
    color: var(--gray-basic);
    font-size: 12px;
}

.ciceksepeti-urun-section .urun-price strong {
color: var(--ana-renk);
    font-weight: 600;
    font-size: 12px;

}

.ciceksepeti-info-sections {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ciceksepeti-info-section h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-basic);
    user-select: none;
}

.ciceksepeti-info-section .info-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 13px;
    gap: 16px;
}

.teslimat-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.ciceksepeti-info-section .info-row.full-width {
    flex-direction: column;
    gap: 4px;
}

.ciceksepeti-info-section .info-row:last-child {
    margin-bottom: 0;
}

.ciceksepeti-info-section .info-label {
    color: var(--gray-basic);
    min-width: 120px;
    flex-shrink: 0;
    user-select: none;
}

.ciceksepeti-info-section .info-value {
    color: var(--ana-renk);
    font-weight: 500;
    text-align: right;
    flex: 1;
    word-break: break-word;
}

.ciceksepeti-info-section .info-row.full-width .info-value {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
}

.ciceksepeti-info-section .info-value.siparis-notu {
   text-align: left;
    color: var(--ana-renk);
    font-weight: 400;
    font-size: 14px;
}

.ciceksepeti-modal-footer {
    background-color: var(--cckspt-modal-bottom);
    padding: 20px 24px;
    border-top: 1px solid var(--border-renk);
    display: flex
;
    align-items: center;
    justify-content: space-between;
}

.ciceksepeti-modal-warning {
display: flex
;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ana-renk);
    width: 50%;
}

.ciceksepeti-modal-warning i {
    color: #f39c12;
    font-size: 20px;
    /* margin-top: 1px; */
}

.ciceksepeti-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* .ciceksepeti-modal-actions button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
} */

.ciceksepeti-modal-actions button {
    padding: 10px 24px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.ciceksepeti-modal-actions .ciceksepeti-btn-reject {
    background: #dc3545;
    color: var(--white-only);
}

.ciceksepeti-modal-actions .ciceksepeti-btn-reject:hover {
    background: #c82333;
}

.ciceksepeti-modal-actions .ciceksepeti-btn-approve {
    background: #28a745;
    color: var(--white-only);
}

.ciceksepeti-modal-actions .ciceksepeti-btn-approve:hover {
    background: #218838;
}

/* #endregion */

/* #region Manuel Kontrol Toast Stilleri */

.ciceksepeti-checking-toast .ciceksepeti-checking-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.ciceksepeti-checking-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top: 3px solid var(--white-only);
    border-radius: 50%;
    animation: ciceksepetiCheckingSpin 1s linear infinite;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

@keyframes ciceksepetiCheckingSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.ciceksepeti-checking-text .checking-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--white-only);
}

.ciceksepeti-checking-text .checking-subtitle {
    font-size: 12px;
    opacity: 0.9;
    color: var(--white-only);
}

.ciceksepeti-no-orders-toast .ciceksepeti-no-orders-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.ciceksepeti-no-orders-toast .no-orders-icon {
    color: var(--white-only);
    font-size: 24px;
}

.ciceksepeti-no-orders-toast .no-orders-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--white-only);
}

.ciceksepeti-no-orders-toast .no-orders-subtitle {
    font-size: 12px;
    color: var(--white-only);
}

/* #endregion */

/* #endregion Çiçek Sepeti Siparişleri Popup Toast ve Modal Stilleri */


/* #endregion Desktop — 1920px ve üzeri */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Large Laptop — 1366px ~ 1440px */
@media (min-width: 1366px) and (max-width: 1440px) {

    .main--content .header {
        height: auto;
    }

    .main--content .header .title {
        font-size: 24px;
        font-weight: 500;
    }

    .header .h-sag {
        min-width: 306px;
        max-width: 306px;
        padding-right: 16px;
    }



    .header .ikonlar {
        gap: 4px;
    }

    .header .orta .web-search .search-box-title #search-box {
        width: 400px;
    }

    input {
        font-size: 13px !important;
    }

    .custom-date-wrapper input[type="date"] {
        font-size: 13px !important;
    }

    select {
        font-size: 13px !important;
    }

    .sidebar {
        padding: 24px 20px 40px 20px;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }

    .main {
        padding-left: 12px;
    }

    .grid-container {
        height: calc(100% - 100px);
    }

    .dashboard-container {
        border-radius: 10px 10px 0 0;
    }

    .dashboard-header .baslik-alan .baslik-tarih-aciklama {
        display: none;
    }

    .dashboard-container .dashboard-header .butonlar {
        font-size: 12px;
    }

    .dashboard-header .baslik-alan {
        padding: 0px 6px 0 12px;
        height: 50px;
    }

    .main--content .header {
        padding-left: 12px;
    }

    .dashboard-container .dashboard-header .kart-filtreler {
        font-size: 11px;
        padding: 10px 12px;
    }

    .dashboard-container .dashboard-header .kart-filtreler ul {
        gap: 10px;
    }

    .dashboard-container .dashboard-header .butonlar .buton-sirala {
        padding: 12px 16px;
        height: 36px;
    }

    .btn-sicak-satis-button {
        height: 36px;
    }

    .dashboard-container .dashboard-header .butonlar .buton-disa-aktar {
        padding: 0 6px 0 11px;
        height: 36px;
        width: auto;
    }

    .buton-disa-aktar .btn-baslik {
        font-size: 12px;
    }

    .buton-disa-aktar .dosya-tur {
        font-size: 12px;
    }

    .sag-panel {
        padding: 0 16px 16px 16px;
        max-width: 305px;
        min-width: 305px;
    }
    
    /* Tablet görünümünde panel başlangıçta gizli olmalı */
    .sag-panel:not(.tablet-open) {
        transform: translateX(100%);
    }

    .sag-panel .sag-panel-icerik {
        gap: 8px !important;
        justify-content: space-between;

    }

    .sag-panel-icerik .panel-merged {
        gap: 8px !important;
    }

    .sag-panel-icerik .panel-wrapper {
        gap: 10px;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta .year-month-label {
        font-size: 13px;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta input[type="week"] {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik span {
        font-size: 11px;
        padding-top: 2px;
    }

    /* .sag-panel .multi-arac-wrapper {
        max-height: 230px;
        min-height: 230px;
    } */

    .takvim-imaj {
        height: 130px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart {
        gap: 10px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan .toplam-organizasyon-sayisi {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-teslim-edilen-siparisler-kapsayici {
        font-size: 12px;
        margin-top: 3px;
    }

}

/* #endregion Large Laptop — 1366px ~ 1440px */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Large Laptop — 1441 ~ 1600px */
@media (min-width: 1441px) and (max-width: 1600px) {
    .baslik-tarih-aciklama {
        display: none;
    }

}

/* #endregion Large Laptop — 1441 ~ 1600px */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Medium Laptop — 1200px ~ 1365px */
@media (min-width: 1200px) and (max-width: 1365px) {

    .main--content .header {
        height: auto;
    }

    .header .h-sag {
        min-width: 306px;
        max-width: 306px;
    }

    .header .ikonlar {
        gap: 4px;
    }

    .header .orta .web-search .search-box-title #search-box {
        width: 350px;
    }

    .sidebar {
        padding: 24px 20px 40px 20px;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }

    .main {
        padding-left: 12px;
    }

    .dashboard-container {
        border-radius: 10px 10px 0 0;
    }

    .dashboard-header .baslik-alan .baslik-tarih-aciklama {
        display: none;
    }

    .dashboard-container .dashboard-header .butonlar {
        font-size: 12px;
    }

    .dashboard-header .baslik-alan {
        padding: 0px 6px 0 12px;
        height: 50px;
    }

    .dashboard-header .baslik-alan .baslik-tarih {
        padding: 8px 10px;
        font-size: 14px;
    }

    .dashboard-header .baslik-alan .baslik-tarih-aciklama {
        font-size: 14px;
    }

    .dashboard-container .dashboard-header .kart-filtreler {
        display: none;
    }

    .dashboard-container .dashboard-header .butonlar .buton-sirala {
        padding: 12px 16px;
        height: 36px;
    }

    .btn-sicak-satis-button {
        height: 36px;
    }

    .dashboard-container .dashboard-header .butonlar .buton-disa-aktar {
        padding: 0 6px 0 11px;
        height: 36px;
        width: auto;
    }

    .buton-disa-aktar .btn-baslik {
        font-size: 12px;
    }

    .buton-disa-aktar .dosya-tur {
        font-size: 12px;
    }

    .grid-container {
        height: calc(100% - 60px);
    }

    .items {
        padding-top: 10px;
    }

    .sag-panel {
        padding: 0 16px 16px 16px;

    }

    .sag-panel .sag-panel-icerik {
        gap: 8px !important;
        justify-content: space-between;
    }

    .sag-panel-icerik .panel-merged {
        gap: 8px !important;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta .year-month-label {
        font-size: 13px;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta input[type="week"] {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik span {
        font-size: 11px;
        padding-top: 2px;
    }

    .sag-panel .multi-arac-wrapper {
        /* max-height: 230px; */
        /* min-height: 230px; */
        padding: 12px;
    }

    .takvim-imaj {
        height: 130px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart {
        display: none;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart {
        gap: 10px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan .toplam-organizasyon-sayisi {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-teslim-edilen-siparisler-kapsayici {
        font-size: 12px;
        margin-top: 3px;
    }

}

/* #endregion Medium Laptop — 1200px ~ 1365px */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Tablet (Landscape) — 1024px ~ 1199px */
@media (min-width: 1024px) and (max-width: 1199px) {

    .header .olustur-butonlar {
        gap: 6px;
    }


    .header .olustur-butonlar button::after {
        content: "";
    }

    .header .orta {
        gap: 6px;
    }

    .main--content .header {
        height: auto;
        padding: 10px 0;
        padding-left: 16px;
    }

    .main--content .header .title {
        font-size: 20px;
        font-weight: 500;
    }


    .header .h-sag {
        width: fit-content;
        max-width: fit-content;
        min-width: fit-content;
        gap: 20px;
        padding-right: 20px;
        padding-left: 8px;
    }

    .header .olustur-butonlar button {
        gap: 5px;
    }

    .header .ikonlar {
        gap: 6px;
    }

    .header .orta .web-search .search-box-title #search-box {
        width: 350px;
    }

    .sidebar {
        padding: 24px 16px 40px 16px;
        width: 64px;
        min-width: 64px;
        max-width: 64px;
    }

    .bg-alan {
        display: flex;
        height: calc(100% - 54px);
        background: var(--white);
    }

    .yeni-kart-container {
        padding: 20px;
    }

    .header-alan {
        padding-bottom: 10px;
    }

    .header .h-sag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: fit-content;
        max-width: fit-content;
        width: 100%;
        padding-left: 6px;
        padding-right: 16px;
        gap: 16px;
        width: fit-content;
    }

    /* .mobile-navbar-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0 20px 24px;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .mobile-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--border-renk);
        height: 64px;
        padding: 0 20px;
        font-size: 24px;
        border-radius: 14px;
        pointer-events: auto;
        color: var(--white);
        width: 100%;
    }

    .mobile-navbar .menu-ikon {
        color: var(--ana-renk);
    }

    .mobile-navbar .menu-ikon::before {
        color: var(--ana-renk);
    } */

    .main {
        padding-left: 12px;
    }

    .dashboard-container {
        border-radius: 10px 10px 0 0;
        /* margin-right: 16px; */
    }

    .dashboard-header .baslik-alan .baslik-tarih-aciklama {
        display: none;
    }

    .dashboard-container .dashboard-header .butonlar {
        font-size: 12px;
    }



    .dashboard-header .baslik-alan {
        padding: 0px 6px 0 12px;
        height: 60px;
    }

    .dashboard-header .baslik-alan .baslik-tarih {
        padding: 8px 10px;
        font-size: 14px;
    }

    .dashboard-header .baslik-alan .baslik-tarih-aciklama {
        font-size: 14px;
    }

    .dashboard-container .dashboard-header .kart-filtreler {
        display: none;
    }

    .dashboard-container .dashboard-header .butonlar .buton-sirala {
        padding: 12px 16px;
        height: 40px;
    }

    .header .olustur-butonlar {
        display: none;
    }


    .btn-yeni-kart-ekle::after {
        content: attr(data-value);
        color: inherit;
        width: 100%;
        white-space: nowrap;
    }

    .btn-yeni-musteri-ekle::after {
        content: attr(data-value);
        color: inherit;
        width: 100%;
        white-space: nowrap;
    }

    .dashboard-container .dashboard-header .butonlar .buton-disa-aktar {
        padding: 0 6px 0 11px;
        height: 40px;
        width: auto;
    }

    .buton-disa-aktar .btn-baslik {
        font-size: 12px;
    }

    .buton-disa-aktar .dosya-tur {
        font-size: 12px;
    }

    .grid-container {
        height: calc(100% - 72px);
    }

    .items {
        padding-top: 10px;
    }


    /* /// Sağ Panel Toggle */

    /* Bu satırı kaldırın! Panel JavaScript ile kontrol edilecek */
    /* .sag-panel {
    display: none; 
} */

    .sag-panel-icerik .panel-wrapper {
        gap: 10px;
    }

    .sag-panel .sag-panel-icerik {
        gap: 10px !important;
        justify-content: space-between;
        padding: 10px 0;
    }

    .sag-panel-icerik .panel-merged {
        gap: 8px !important;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta .year-month-label {
        font-size: 13px;
    }

    .sag-panel .sag-panel-icerik .takvim-hafta input[type="week"] {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik {
        font-size: 16px;
    }

    .sag-panel .sag-panel-icerik .gorsel-baslik span {
        font-size: 11px;
        padding-top: 2px;
    }

    .sag-panel .multi-arac-wrapper {
        padding: 12px;
    }

    .takvim-imaj {
        height: 130px;
    }

    /* .sag-panel-icerik .toplam-siparis-bilgi-kart {
    display: none;
} */

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart {
        gap: 10px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-siparis-adet-alan {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-organizasyon-adet-alan .toplam-organizasyon-sayisi {
        font-size: 36px;
    }

    .sag-panel-icerik .toplam-siparis-bilgi-kart .siparis-toplamlar-kart .toplam-teslim-edilen-siparisler-kapsayici {
        font-size: 12px;
        margin-top: 3px;
    }

    /* Yarım Daire Toggle Butonu - Tablet görünümünde göster */
    .sag-panel-toggle-btn {
        display: flex;
        position: fixed;
        right: 0;
        /* Sağa tam yapışık */
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
        background: var(--mavi-renk);
        /* Mavi renk */
        color: var(--white);
        border: none;
        border-radius: 12px 0 0 12px;
        width: 24px;
        height: 72px;
        /* Daha uzun */
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        align-items: center;
        justify-content: center;
        /* padding-left: 8px; */
    }





    .sag-panel-toggle-btn:hover {
        width: 32px;
        /* Hover'da biraz genişle */
    }

    .sag-panel-toggle-btn i {
        transition: transform 0.3s ease;
        font-size: 12px;
        margin: 0;
        /* Margin'i sıfırla */
        line-height: 1;
        /* Line-height'ı sıfırla */
        display: block;
        /* Block yap */
        pointer-events: auto;
        cursor: pointer;
    }


    .sag-panel.tablet-open+.sag-panel-toggle-btn {
        right: 300px;
        border-radius: 12px 0 0 12px;
        /* padding-left: 0; */
        background: var(--mavi-renk);
        color: var(--white);
        width: 24px;
        height: 72px;
    }

    /* Sağ Panel Overlay */
    .sag-panel-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .sag-panel-overlay.active {
        display: block;
    }

    /* Tablet görünümünde sağ panel - Başlangıçta gizli */
    .sag-panel {
        position: fixed;
        right: 0;
        top: 0;
        width: 300px;
        max-width: 300px;
        min-width: 300px;
        height: 100vh;
        padding: 0 16px;
        z-index: 1000;
        transition: transform 0.3s ease-in-out;
        transform: translateX(100%);
        /* Başlangıçta sağa gizli */
    }
    
    /* Tablet görünümünde sağ panel davranışı */
    .sag-panel.tablet-hidden {
        display: block;
        /* Görünür yap */
        transform: translateX(100%);
        /* Sağa gizle */
    }

    .sag-panel.tablet-open {
        transform: translateX(0) !important;
        /* Görünür konuma getir - !important ile override et */
    }

    /* /// Sağ Panel Toggle */




}

/* #endregion Tablet (Landscape) — 1024px ~ 1199px */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Large Tablet/Medium Laptop — 1024px ~ 1365px */
@media (min-width: 1024px) and (max-width: 1365px) {
    .main {
        padding: 12px 0 12px 12px;
    }

    .dashboard-container .dashboard-header .butonlar .buton-sirala {
        padding: 12px;
        width: fit-content;
        white-space: nowrap;
    }

    .dashboard-header .baslik-alan {
        padding: 0px 6px 0 5px;
    }

    .dashboard-header .baslik-alan .baslik-tarih {
        padding: 12px 10px;
    }

    .dashboard-container .dashboard-header .butonlar {
        gap: 6px;
    }

    .buton-disa-aktar .dosya-tur {
        padding: 7px 5px;
        height: 30px
    }

    .buton-disa-aktar {
        gap: 6px;
    }

    .main--content .header {
        padding-left: 5px;
    }

    .items {
        padding-top: 0;
    }

    /* .empty-message {
    margin-right: 16px;
} */

    .sag-panel {
        padding: 0 14px;
        max-width: 305px;
        min-width: 305px;
    }

    .btn-sicak-satis-button .btn-text {
        display: none;
    }
















}

/* #endregion 1024px Ekrandan Küçük Ekranda Uyarı Göster */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Mobile — 600px ve altı */
@media only screen and (max-width: 600px) {

    /* #region Root and Body /// Fixed Styles /// Customize CSS  */
    body {
        display: flex;
        flex-direction: column;
    }

    html,
    body {
        height: 100% !important;
    }

    ::-webkit-scrollbar-track {
        padding: 0;
        margin: 0;
    }

    input {
        font-size: 13px !important;
    }

    .custom-date-wrapper input[type="date"] {
        font-size: 13px !important;
    }

    select {
        font-size: 13px !important;
    }

    .backend-connection-message {
  
        margin-left: 24px;
    }

    .backend-connection-message .message {

        width: 80%;
    }

    .sidebar {
        display: none !important;
    }

    .bg-alan {
        border-radius: 8px;
        margin: 0 20px;
        height: calc(100% - 275px);
        transition: height 0.4s ease;
    }

    .dashboard-container {
        overflow-y: auto;
        box-sizing: border-box;
        border-radius: 8px;
    }

    .main {
        padding: 0;
        overflow-y: hidden;
        padding: 0 10px;
    }

    .main--content {
        background-color: var(--white);
    }

    .main--content .header {
        height: auto;
        padding: 5px 0;
    }

    .main--content .header .title {
        font-size: 20px;
    }

    .sag-panel-toggle-btn {
        display: none !important;
    }

    .mobile-header-logo-band {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px 0 10px;
        font-size: 9px;
        width: 100%;
        gap: 10px;
    }

    .mobile-header-logo-band img {
        height: 30px;
    }

    .mobile-arac-takip-btn {
        background: #f5f5f5;
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        color: #666;
        font-size: 18px;
    }

    .mobile-arac-takip-btn:hover {
        background: #e0e0e0;
        transform: scale(1.05);
    }

    .mobile-arac-takip-btn.active {
        background: #4CAF50;
        color: white;
        border-color: #4CAF50;
    }

    .mobile-arac-takip-btn.active i {
        color: white;
    }

    /* Araç Takip Modal */
    .arac-takip-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--overlay-bg-black);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
    }

    .arac-takip-modal {
        background-color: var(--white);
        border-radius: 10px;
        max-width: 400px;
        width: 90%;
        max-height: 80vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .arac-takip-modal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid var(--gray-border);
    
    }

    .arac-takip-modal .modal-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--ana-renk);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .arac-takip-modal .modal-header .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--gray-text-base);
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.2s;
    }

    /* .arac-takip-modal .modal-header .close-btn:hover {
        background: #e0e0e0;
        color: var(--ana-renk);
    } */

    .arac-takip-modal .modal-content {
        padding: 20px;
        flex: 1;
        overflow-y: auto;
    }

    .arac-takip-modal .modal-label {
        font-size: 14px;
        font-weight: 400;
        color: var(--ana-renk);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 5px;
        /* justify-content: space-between; */
    }

    /* .arac-takip-modal select {
        margin-bottom: 32px !important;
    } */

    .arac-takip-modal .modal-select,
    .arac-takip-modal .modal-input {
        width: 100%;
        height: 48px;
        /* border: 1px solid #ddd; */
        border-radius: 6px;
        font-size: 14px !important;
        margin-bottom: 15px;
        box-sizing: border-box;
        /* background: white; */
        /* color: var(--ana-renk); */
    }

    .arac-takip-modal .modal-select:focus,
    .arac-takip-modal .modal-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

    .arac-takip-modal .modal-input:disabled {
        /* background: #f5f5f5; */
        background-color: var(--gray-overlay);
        color: var(--gray-text-base);
        /* color: #999; */
        cursor: not-allowed;
    }

    .arac-takip-modal .modal-footer {
        padding: 20px;
        border-top: 1px solid #e0e0e0;
        background: #f8f9fa;
    }

    .arac-takip-modal .modal-button {
        width: 100%;
        padding: 14px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s;
    }

    .arac-takip-modal .modal-button-start {
        background: #4CAF50;
        color: white;
    }

    .arac-takip-modal .modal-button-start:hover {
        background: #45a049;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
    }

    .arac-takip-modal .modal-button-stop {
        background: #f44336;
        color: white;
    }

    .arac-takip-modal .modal-button-stop:hover {
        background: #da190b;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(244, 67, 54, 0.3);
    }

    .arac-takip-modal .teslimat-aktif-bilgileri {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .arac-takip-modal .teslimat-aktif-bilgileri > div {
        display: flex;
        flex-direction: column;
    }

    .arac-takip-modal .teslimat-aktif-bilgileri #modalBaslangicZamani,
    .arac-takip-modal .teslimat-aktif-bilgileri #modalGecenSure,
    .arac-takip-modal .teslimat-aktif-bilgileri #modalGuncelKonum {
        font-size: 14px;
        color: #666;
        padding: 8px 0;
    }

    /* Dark Mode */
    [data-theme="dark"] .arac-takip-modal {
        background: var(--dark-panel-bg);
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-header {
        background: var(--dark-panel-bg);
        border-color: var(--dark-border-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-header h3 {
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-header .close-btn {
        color: var(--dark-text-color-light);
    }

    [data-theme="dark"] .arac-takip-modal .modal-header .close-btn:hover {
        background: var(--dark-border-color);
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-label {
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-select,
    [data-theme="dark"] .arac-takip-modal .modal-input {
        background: var(--dark-panel-bg);
        border-color: var(--dark-border-color);
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-input:disabled {
        background: var(--dark-panel-bg);
        color: var(--dark-text-color-light);
    }

    [data-theme="dark"] .arac-takip-modal .modal-footer {
        background: var(--dark-panel-bg);
        border-color: var(--dark-border-color);
    }

    [data-theme="dark"] .arac-takip-modal .teslimat-aktif-bilgileri #modalBaslangicZamani,
    [data-theme="dark"] .arac-takip-modal .teslimat-aktif-bilgileri #modalGecenSure,
    [data-theme="dark"] .arac-takip-modal .teslimat-aktif-bilgileri #modalGuncelKonum {
        color: var(--dark-text-color-light);
    }

    /* Modal İçerik Stilleri */
    .arac-takip-modal .modal-content-center {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;

    }

    /* .arac-takip-modal .modal-info-group {
        margin-bottom: 20px;
    } */

    .arac-takip-modal .modal-info-label {
        font-size: 14px;
        color: var(--ana-renk);
    }
    .arac-takip-modal .modal-info-group {
        /* display: flex;
        align-items: center;
        justify-content: space-between; */
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 6px;
        /* align-items: flex-start; */
    }
   

    .arac-takip-modal .modal-info-value {
        font-size: 16px;
        font-weight: 600;
        color: var(--ana-renk);
    }

    .arac-takip-modal .modal-info-value-small {
        font-size: 16px;
        font-weight: 600;
        color: var(--ana-renk);
    }

    .arac-takip-modal .modal-sure-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* margin: 20px 0; */
        padding: 8px 16px;
        background: var(--tur-tahsilat);
        border-radius: 8px;
        color: var(--ana-renk);
    }

    .arac-takip-modal .modal-sure-label {
        font-size: 14px;
        color: var(--ana-renk);
    }

    .arac-takip-modal .modal-sure-value {
        font-size: 24px;
        font-weight: 600;
        color: var(--yesil-destek);
    }

    .arac-takip-modal .modal-durum-badge {
        display: inline-block;
        padding: 6px 12px;
        background: #2f855a;
        color: white;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 500;
    }

    .arac-takip-modal .btn-teslimata-ciktim {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        /* margin-top: 20px; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s;
    
    }

    .arac-takip-modal .btn-teslimata-ciktim.btn-start {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: #2f855a;
        background-color: var(--accent-green-bold);
        color: var(--white);
    }

    .arac-takip-modal .btn-teslimata-ciktim.btn-start:hover {
        background: #2d7a4e;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(47, 133, 90, 0.3);
    }

    .arac-takip-modal .btn-teslimata-ciktim.btn-stop {
        background: var(--kirmizi-canli);
        color: var(--white);
    }

    .arac-takip-modal .btn-teslimata-ciktim.btn-stop:hover {
        background: #b02a2a;
        transform: translateY(-1px);
        /* box-shadow: 0 4px 8px rgba(197, 48, 48, 0.3); */
    }

    /* Dark Mode Modal İçerik */
    [data-theme="dark"] .arac-takip-modal .modal-info-label {
        color: var(--dark-text-color-light);
    }

    [data-theme="dark"] .arac-takip-modal .modal-info-value,
    [data-theme="dark"] .arac-takip-modal .modal-info-value-small {
        color: var(--dark-text-color);
    }

    [data-theme="dark"] .arac-takip-modal .modal-sure-box {
        background: var(--dark-panel-bg);
    }

    [data-theme="dark"] .arac-takip-modal .modal-sure-label {
        color: var(--dark-text-color-light);
    }

    [data-theme="dark"] .arac-takip-modal .modal-sure-value {
        color: #2f855a;
    }

    .tabloda-veri-yok-not {
        flex-direction: column;
        font-size: 12px;
    }

    .qr-btn {
        display: block;
    }

    /* ///// Mobile Header kullanici-adi-wrapper "Profil" clickdropdown ////// */


    .mobile-header-logo-band .profil {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        cursor: pointer;
        color: var(--ana-renk);
    }

    .mobile-header-logo-band .profil .kullanici-alan-wrapper {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .mobile-header-logo-band .profil .kullanici-alan-wrapper .profil-resmi {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
    }

    .mobile-header-logo-band .profil .kullanici-alan-wrapper .kullanici-alan {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        cursor: pointer;
        margin-top: -3px;
    }

    .mobile-header-logo-band .profil .kullanici-alan-wrapper .kullanici-alan .kullanici-adi {
        font-size: 11px;
    }

    .mobile-header-logo-band .profil .kullanici-alan-wrapper .kullanici-alan .kullanici-yetki {
        font-size: 8px;
    }

    /* ///// Mobile Header kullanici-adi-wrapper "Profil" clickdropdown ////// */


    .mobile-header-logo-band .clickdropdown-content {
        display: none;
        left: auto;
        right: 0;
        transform: none;
        box-shadow: none;
        border: 1px solid var(--gray-border);
        padding-bottom: 0;
        min-width: 220px !important;
        max-width: 220px !important;
        width: 220px !important;
    }

    .profil .menu-links-wrapper {
        padding: 5px 0 10px 0;
    }



    /* #endregion Root and Body /// Fixed Styles /// Customize CSS  */

    /* #region Araç Takip - Teslimata Çıktım Butonu (Profil Menüsü İçinde) */

    .btn-teslimata-ciktim {
        display: flex;
        /* flex-direction: column; */
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        padding-top: 15px;
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: 15px;
        border-top: 2px solid var(--arac-takip-teslimat-kenarlık);
    }

    .teslimat-durum {
        text-align: center;
        margin-bottom: 12px;
    }

    .durum-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .durum-beklemede {
        background: var(--arac-takip-beklemede-zemin);
        color: var(--arac-takip-beklemede-metin);
    }

    .durum-aktif {
        background: var(--arac-takip-aktif-zemin);
        color: var(--arac-takip-aktif-metin);
    }

    .durum-tamamlandi {
        background: var(--arac-takip-tamamlandi-zemin);
        color: var(--arac-takip-tamamlandi-metin);
    }

    .teslimat-btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: relative;
        overflow: hidden;
    }

    .btn-baslat {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        background-color: var(--accent-green-bold);
        border: none;
        outline: none;
        font-size: 13px;
        font-weight: 400;
        padding: 9px 20px;
        text-decoration: none;
        gap: 10px;
        cursor: pointer;
        /* margin: 0 12px 12px 12px; */
        border-radius: 5px;
        width: 100%;
    }


    .btn-tamamla {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-only);
        background-color: var(--action-blue);
        border: none;
        outline: none;
        font-size: 13px;
        font-weight: 400;
        padding: 9px 20px;
        text-decoration: none;
        gap: 10px;
        cursor: pointer;
        border-radius: 5px;
        width: 100%;
    }

    .btn-disabled {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white-only);
        background-color: var(--action-blue);
        border: none;
        outline: none;
        font-size: 13px;
        font-weight: 400;
        padding: 9px 20px;
        text-decoration: none;
        gap: 10px;
        cursor: pointer;
        border-radius: 5px;
        width: 100%;
        background: var(--mid-gray) !important;
        color: var(--gray-basic) !important;

    }

    .loading-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid var(--auto-color-26-c11b5c);
        border-top: 2px solid var(--border-renk);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .teslimat-info {
        padding: 10px 0 0 0;
        background: var(--white);
        border-radius: 6px;
        font-size: 12px;
        color: var(--gray-basic);
        line-height: 1.4;
        width: 100%;
    }

    .teslimat-info.hidden {
        display: none;
    }

    .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-label {
        font-size: 10px;
        color: var(--ana-renk);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .info-value {
        font-weight: 500;
        color: var(--ana-renk);
    }

    .pulse {
        animation: pulse-effect 2s infinite;
    }

    @keyframes pulse-effect {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    /* #endregion Araç Takip - Teslimata Çıktım Butonu (Profil Menüsü İçinde) */

    /* #region Tooltip Mobil /// Master Styles */
    .tooltip,
    .tooltip-icon .icon-tooltiptext,
    .tooltip-alt .tooltiptext-alt,
    .tooltip-floating {
        display: none !important;
    }

    /* #endregion Tooltip Mobil /// Master Styles */

    /* #region Index - Organizasyon ve Sipariş Kartlar - Filtreler, Takvim Alanı ve Genel Stiller */

    .baslik-tarih-aciklama {
        display: none;
    }

    .kart-filtreler {
        display: none !important;
    }

    .dashboard-header .baslik-alan {
        display: none;
    }

    .baslik-tarih {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        white-space: pre-line;
        padding: 0 16px 0 0;
        text-align: left;
        color: var(--ikincil-renk);
        white-space: normal !important;
        line-height: 1.4;
    }

    .sag-panel {
        display: none;
    }

    .baslik-ve-nav .nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .baslik-ve-nav .nav button {
        background-color: transparent;
        padding: 0;
    }

    .baslik-ve-nav .nav i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        border-radius: 50%;
        height: 24px;
        width: 24px;
        color: var(--gri70);
        cursor: pointer;
        padding: 22px;
        background-color: var(--white);
    }

    .header .olustur-butonlar {
        display: none;
    }

    .header-search-ve-butonlar-mobile {
        display: flex;
        flex-direction: column;
        padding: 0 20px;
        width: 100%;
        gap: 5px;
    }

    .search-and-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
        width: 100%;
    }

    .header-butonlar-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .header-butonlar-mobile .buton-alan {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 5px;
    }

    .header-butonlar-mobile .btn-yeni-kart-ekle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 8px;
        font-weight: 500;
        font-size: 12px;
        border-radius: 5px;
        background-color: var(--border-renk);
        color: var(--ikincil-renk);
        width: 100%;
        text-align: left;
        height: 40px;
    }

    .header-butonlar-mobile .btn-yeni-musteri-ekle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 8px 8px;
        font-weight: 500;
        font-size: 12px;
        border-radius: 5px;
        background-color: var(--border-renk);
        color: var(--ikincil-renk);
        width: 100%;
        text-align: left;
        height: 40px;
    }

    .header-butonlar-mobile i {
        font-size: 20px;
    }

    .header-butonlar-mobile .takvim-hafta-mobile .takvim-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 500;
        gap: 10px;
        width: 100%;
    }

    .header-butonlar-mobile .takvim-hafta-mobile .baslik-ve-nav .nav button {
        background-color: transparent;
        padding: 0;
    }

    .header-butonlar-mobile .takvim-hafta-mobile .baslik-ve-nav .nav i {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border-radius: 50%;
        height: 36px;
        width: 36px;
        color: var(--ana-renk);
        cursor: pointer;
        background-color: var(--white);
    }

    .takvim-hafta-mobile {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 6px 10px;
        border-radius: 5px;
        margin-bottom: 5px;
        gap: 8px;
        background-color: var(--border-renk);
        width: 100%;
        height: 72px;
    }

    .label-nav-container {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .takvim-header .takvim-ikon {
        padding-right: 12px;
    }

    .takvim-header .takvim-ikon i {
        color: var(--ana-renk);
        font-size: 16px;
        background-color: var(--white);
        padding: 12px;
        border-radius: 50%;
    }

    .custom-week-wrapper {
        position: relative;
        display: inline-block;
        display: none;
    }

    .custom-week-wrapper input[type="week"] {
        width: 100%;
        height: 40px;
        font-size: 14px;
        padding-right: 36px;
        padding-left: 12px;
        border: 1px solid var(--gray-light-cc);
        border-radius: 4px;
        background-color: var(--white);
        color: var(--ana-renk);
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        float: right;
    }

    /* .custom-week-wrapper input[type="week"]::-webkit-calendar-picker-indicator {
        display: none;
    } */

    .custom-week-wrapper .icon-button {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        font-size: 14px;
        padding: 0;
        color: var(--ana-renk);
        z-index: 2;
    }

    .custom-week-wrapper .icon-button i {
        font-family: 'bircan-dashboard';
        font-size: 16px;
        color: var(--ana-renk);
    }

    .web-search {
        display: none;
    }

    .mobile-search {
        display: block;
        width: 100%;
    }

    .mobile-search-input {
        display: block;
        background-color: var(--border-renk);
        padding: 12px;
        padding-left: 40px;
        color: var(--placeholder);
        font-size: 13px;
        border-radius: 5px;
        gap: 10px;
        outline: none;
        border: none;
        width: 100%;
        height: 40px;
    }

    .search-box-title i {
        color: var(--ana-renk);
    }

    .year-month-label {
        color: var(--ana-renk);
        font-weight: 600;
        font-size: 18px;
    }

    .header .profiller {
        display: none;
    }

    .header .ikonlar {
        display: none;
    }

    .header .h-sag {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: auto;
        min-width: auto;
        max-width: auto;
        margin: 0;
        width: fit-content;
    }

    .header .h-sag .ikonlar {
        display: none;
    }

    .header .h-sag .profil {
        display: none;
    }

    .profil .kullanici-adi .username {
        font-size: 11px;
        font-weight: 500;
        color: var(--ana-renk);
    }

    .header .h-sag .mobile-siparis-filtrele .buton-sirala {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--border-renk);
        height: 36px;
        width: 36px;
        border-radius: 5px;
        cursor: pointer;
    }

    .header .h-sag .mobile-siparis-filtrele .clickdropdown-content {
        left: -170%;
    }

    .header .orta {
        width: 100%;
        justify-content: flex-start;
    }

    .grid-container {
        padding: 10px 0;
        height: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow-y: auto;
    }

    .ana-kart {
        max-width: 300px;
        min-width: 300px;
    }

    .items {
        padding: 0;
    }

    .item {
        margin-bottom: 10px;
    }

    .header .h-sol .header-title {
        display: none
    }

    .mobile-navbar-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        padding: 0 20px 24px;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }



    .mobile-navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--border-renk);
        height: 64px;
        padding: 0 20px;
        font-size: 24px;
        border-radius: 14px;
        pointer-events: auto;
        color: var(--white);
        width: 100%;
    }

    .mobile-navbar .menu-ikon {
        color: var(--ana-renk);
    }

    .mobile-navbar .menu-ikon::before {
        color: var(--ana-renk);
    }


    .ana-kart .siparis-kart {
        padding: 12px 12px 8px 16px;
    }

    .kart-gorsel img:hover {
        scale: 1;
    }

    .sk-kart-alan .siparis-kart .alt-kart-alan .kart-butonlar {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        transform: translatey(0);
        transition: .2s ease-in-out;
    }

    .urunyazisi-alert {
        bottom: 110px;
    }

    .gecmis-siparis-uyari .uyari-not span {
        display: none;
    }

    .btn-close-form {
        background-color: var(--light-gray);
    }

    .musteri-listesi-ust-satir {
        display: flex !important;
        height: auto !important;
        padding: 5px 0 !important;
    }

    table .satir-bakiye {
        height: auto !important;
        padding: 5px 0;
    }

    table td::before {
        content: attr(data-label);
        text-transform: uppercase;
        min-width: 100px;
        max-width: 100px;
        flex-shrink: 0;
        font-size: 10px;
        font-weight: 500;
        color: var(--gray-soft-dark);
        text-align: left;
    }



    .empty-message {
        padding: 0 20px;
        margin: 0;
    }

    .empty-message .message {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 14px;
        gap: 10px;
        width: 100%;
    }

    .empty-message .message span {
        font-weight: 300;
        font-size: 13px;
        width: 60%;
    }

    .kart-menu-content #kart-siparis-kunyesi-yazdir {
        display: none;
    }

    .profil .theme-mode {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .profil .theme-mode button {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        background-color: var(--ana-renk);
        border: none;
        outline: none;
        font-size: 13px;
        font-weight: 400;
        padding: 9px 20px;
        text-decoration: none;
        gap: 10px;
        cursor: pointer;
        margin: 0 12px 12px 12px;
        border-radius: 5px;
        width: 100%;
    }

    .profil .theme-mode span {
        color: var(--white);
        font-size: 13px;
    }

    .profil .theme-mode button i {
        font-size: 16px;
    }

    .header-search-ve-butonlar-mobile,
    .mobile-navbar-wrapper {
        transition: transform 0.3s ease-in-out;
        will-change: transform;
        z-index: 999;
    }





    .islem-ikonlar .duzenle-ikon,
    .islem-ikonlar .sil-ikon,
    .islem-ikonlar .arsivle-ikon,
    .islem-ikonlar .teslimedildi-ikon,
    .islem-ikonlar .detay-ikon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--islem-ikon-bg);
        border-radius: 50%;
        height: 36px !important;
        width: 36px !important;
        cursor: pointer;
        color: var(--gri70);
        font-size: 13px !important;
    }


    /* #endregion Index - Organizasyon ve Sipariş Kartlar - Filtreler, Takvim Alanı ve Genel Stiller */



    /* #region Mobile Index sayfada bg-alan yükselik artırma ve header-search-ve-butonlar-mobile alanını gizleme - gizle-göster buton */
    .gizle-goster-buton {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        font-size: 14px;
        border: none;
        gap: 6px;
        cursor: pointer;
        padding: 10px;
        height: 34px;
        width: 34px;
        border-radius: 5px;
        background-color: var(--white);
        color: var(--ikincil-renk);
    }

    .header-search-ve-butonlar-mobile {
        max-height: 1000px;
        opacity: 1;
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
        overflow: hidden;
    }

    .grid-container {
        transition: height 0.4s ease;
    }

    .gizle-goster-buton .ikon {
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        pointer-events: none;
    }

    .header-search-ve-butonlar-mobile {
        overflow: hidden;
        max-height: 1000px;
        opacity: 1;
        transform: translateY(0);
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    body.header-hidden .header-search-ve-butonlar-mobile {
        max-height: 0;
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none;
        transition:
            max-height 0.4s ease,
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    /* #endregion Mobile Index sayfada bg-alan yükselik artırma ve header-search-ve-butonlar-mobile alanını gizleme - gizle-göster buton */



    /* #region Resim ve Görsel Alanlar Lightbox Mobil */
    #customLightbox img {
        max-width: 80vw;
        max-height: 90vh;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    #prevBtn,
    #nextBtn {
        opacity: .8;
    }

    #lightboxImage {
        max-width: 95vw;
        max-height: 95vh;
    }

    #closeLightbox {
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
        padding: 10px;
    }

    #prevBtn,
    #nextBtn {
        width: 50px;
        height: 50px;
        padding: 13px;
    }

    #prevBtn {
        left: 15px;
    }

    #nextBtn {
        right: 15px;
    }

    /* #endregion Resim ve Görsel Alanlar Lightbox Mobil */

    /* #region Index Sayfa En Alt - Bilgi Band */
    .bilgi-band {
        display: none;
    }

    /* #endregion Index Sayfa En Alt - Bilgi Band */

    /* #region Arşiv Sebep Popup */

    .arsiv-sebep-popup .arsiv-sebep-popup {
        width: 95%;
        max-width: none;
        margin: 20px;
        max-height: 90vh;
    }

    .arsiv-sebep-popup .btn-popup {
        padding: 16px 24px;

    }

    /* #endregion */


    /* #region Notification Card --- Yaklaşan Siparişler */

    .mobile-notification-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: var(--overlay-bg-black);
        backdrop-filter: blur(3px);
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .mobile-notification-overlay.show {
        opacity: 1;
    }


    .notification-yaklasan-siparisler::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
    }

    .notification-yaklasan-siparisler {
        bottom: 50% !important;
        right: 50% !important;
        transform: translate(50%, 50%) !important;
        width: 320px !important;
        max-width: 320px !important;
        z-index: 10001;
        color: yellow;
    }

    /* #endregion Notification Card --- Yaklaşan Siparişler */



    /* #region Çiçek Sepeti Siparişleri Popup Toast ve Modal Stilleri */
    
    .ciceksepeti-modal-main {
        grid-template-columns: 1fr;
    }


    .ciceksepeti-modal-header-content .ciceksepeti-modal-header-title {
        flex-direction: column;
        align-items: flex-start;
    }

    


  .ciceksepeti-toast-container {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
            max-width: 310px;
            min-width: 310px;
        width: 310px;
  }

  /* .ciceksepeti-modal-footer {
    flex-direction: column;
    gap: 24px;
  } */

  .ciceksepeti-modal-footer {
    flex-direction: column;
    gap: 16px;
  }

  .ciceksepeti-modal-warning {
    width: 100%;
  }

        /* #endregion Çiçek Sepeti Siparişleri Popup Toast ve Modal Stilleri */

}

/* #endregion Mobile — 600px ve altı */
/* ////////////////////////////////////////////////// */

/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */
/* -------------------------------------- */

/* ////////////////////////////////////////////////// */
/* #region 1024px Ekrandan Küçük Ekranda Uyarı Göster */
@media (min-width: 601px) and (max-width: 1023px) {
    .tablet-ekran-uyari {
        display: flex;
        font-size: 16px;
    }

    .tablet-ekran-uyari span {
        font-size: 20px;
    }

    /* Ana içeriği gizle */
    body>*:not(.tablet-ekran-uyari) {
        display: none !important;
    }
}

/* #endregion Large Mobile/Small Tablet — 601px ~ 1023px */
/* ////////////////////////////////////////////////// */

/* ////////////////////////////////////////////////// */
/* #region Mobile Yatay Ekranda Uyarı Göster */
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
    .landscape-overlay {
        display: flex;
        font-size: 16px;
    }

    .landscape-overlay span {
        font-size: 20px;
    }
}

/* #endregion Mobile Yatay Ekranda Uyarı Göster */
/* ////////////////////////////////////////////////// */


/* ////////////////////////////////////////////////// */
/* #region Mobile — 400px Altında Uyarı Göster */
@media screen and (max-width: 399px) {
    .mobil-ekran-uyari {
        display: flex;
        align-items: center;
        font-size: 14px;
        text-align: center;
        padding: 0 20px;
    }

    .mobil-ekran-uyari span {
        font-size: 16px;
    }

    /* Ana içeriği gizle */
    body>*:not(.mobil-ekran-uyari) {
        display: none !important;
    }
}

/* #endregion Mobile — 400px Altında Uyarı Göster */
/* ////////////////////////////////////////////////// */

/* #region Backend Entegrasyonu - Sipariş Kartları */
/* Backend'den gelen siparişler için ek stiller */


.urun-fiyat {
    margin-top: 10px;
    padding: 8px;
    background: rgba(33, 150, 243, 0.05);
    border-radius: 6px;
}

.fiyat-bilgisi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.miktar {
    color: #666;
    font-weight: 500;
}

.birim-fiyat {
    color: #2196f3;
    font-weight: 600;
}

.toplam-fiyat {
    color: #2e7d32;
    font-weight: 700;
    font-size: 16px;
}

.teslim-kisi {
    margin-top: 5px;
    font-size: 12px;
    color: var(--ana-renk);
    /* font-style: italic; */
}

.kart-notlar {
    margin-bottom: 10px;
}

.notlar {
    font-size: 12px;
    color: #666;
    background: rgba(255, 193, 7, 0.1);
    padding: 6px 8px;
    border-radius: 4px;
    border-left: 3px solid #ffc107;
}

/* Dark mode için backend sipariş kartları */
/* body.dark-mode .siparis-kart[data-order-id] {
    border-color: #37474f;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
} */

/* body.dark-mode .siparis-kart[data-order-id]:hover {
    border-color: #4299e1;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.15);
}

body.dark-mode .urun-fiyat {
    background: rgba(66, 153, 225, 0.1);
}

body.dark-mode .miktar {
    color: #a0aec0;
}

body.dark-mode .birim-fiyat {
    color: #4299e1;
}

body.dark-mode .toplam-fiyat {
    color: #68d391;
}

body.dark-mode .teslim-kisi {
    color: #a0aec0;
}

body.dark-mode .notlar {
    color: #a0aec0;
    background: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
} */

/* #endregion Backend Entegrasyonu - Sipariş Kartları */

/* #region Kukla Verileri Gizle */
/* HTML'deki statik ana kartları gizle - sadece backend'den gelen dinamik kartlar görünsün */
.ana-kart[id="dugun"],
.ana-kart[id="aracsusleme"],
.ana-kart[id="ozelsiparis2"],
.ana-kart[id="ozelgun1"] {
    display: none !important;
}

/* Backend'den gelen dinamik ana kartları görünür yap */
.ana-kart[id^="organizasyon-"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ana kartların içindeki siparis-kart alanlarını da görünür yap */
.sk-kart-alan {
    display: block;
}

/* Item container'ı da görünür yap */
.item {
    display: flex;
}

/* #endregion Kukla Verileri Gizle */

/* ////////////////////////////////////////////////// */
/* GENEL PROFİL RESMİ STİLLERİ */
/* ////////////////////////////////////////////////// */
.profil-resmi img {
    border-radius: 50%;
    object-fit: cover;
    /* Kırık resim ikonunu gizle */
    font-size: 0;
    text-indent: -9999px;
}

/* Header ve mobile header profil resimleri için ek stiller */
.header .profil-resmi,
.mobile-header .profil-resmi {
    border-radius: 50%;
    object-fit: cover;
    /* Kırık resim ikonunu gizle */
    font-size: 0;
    text-indent: -9999px;
}







/* ========================================
   FORM İÇİ ÜRÜN YAZISI DOSYA LİSTESİ
   ======================================== */

.urun-yazi-dosyalar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.musteri-urun-dosya-dropdown {
    border: 1px solid var(--border-renk);
    border-radius: 8px;
    background-color: var(--white);
    overflow: hidden;
}

.musteri-urun-dosya-dropdown .acilirliste {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    background-color: var(--white);
}

.musteri-urun-dosya-dropdown .acilirliste span {
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
}

.dropdown-dosya-sayisi {
    display: inline-block;
    background-color: var(--ana-renk);
    color: var(--white) !important;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.musteri-urun-dosya-dropdown .dropdown-arrow {
    font-size: 14px;
    color: var(--gray-classic);
    transition: transform 0.3s ease;
}

.musteri-urun-dosya-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    border-top: 1px solid transparent;
}

.musteri-urun-dosya-dropdown.open .dropdown-body {
    max-height: 130px !important;
    overflow-y: auto;
    border-top: 1px solid var(--border-renk);
}

.dropdown-dosya-item {
    padding: 12px 18px;
    border-bottom: 1px solid var(--border-renk);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-dosya-item:last-child {
    border-bottom: none;
}

.dropdown-dosya-item:hover {
    background-color: var(--extra-light-bg);
    color: var(--ana-renk);
}

.dropdown-dosya-item:hover .dropdown-dosya-meta {
    color: var(--ana-renk);
}

.dropdown-dosya-item.selected {
    /* Seçili dosya normal dosya gibi görünsün, sadece hafif vurgu */
    background-color: var(--extra-light-bg);
    border-left: 3px solid var(--mavi-renk);
    color: var(--mavi-renk);
    font-weight: 400;
}
.dropdown-dosya-item.selected:hover {
    background-color: var(--gray-overlay);
}

.dropdown-dosya-item.selected .dropdown-dosya-isim {
    /* Normal renk, sadece bold */
    color: var(--ana-renk);
    font-weight: 600;
}

.dropdown-dosya-item.selected .dropdown-dosya-meta {
    /* Normal renk */
    color: var(--text-color-light);
}

.dropdown-dosya-isim {
    font-size: 13px;
    font-weight: 500;
    color: var(--ana-renk);
    margin-bottom: 5px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-dosya-meta {
    font-size: 11px;
    color: var(--text-gray-muted);
    display: block;
    line-height: 1.4;
}

.secili-dosya-bilgi {
    padding: 10px 16px;
    background-color: #e8f5e9;
    border-top: 1px solid #4caf50;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    cursor: default;
}

.secili-dosya-bilgi i {
    color: #4caf50;
    font-size: 14px;
}

.secili-dosya-bilgi .secili-dosya-isim {
    font-size: 12px;
    color: #2e7d32;
    font-weight: 500;
}

/* ========================================
   ÜRÜN YAZISI MEVCUT POPUP SİSTEMİ
   ======================================== */

.urun-yazisi-files-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.urun-yazisi-files-popup.active {
    opacity: 1;
    visibility: visible;
}

.urun-yazisi-files-popup .popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.urun-yazisi-files-popup .popup-content {
    position: relative;
    background: var(--white);
    border-radius: 12px;
    /* box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); */
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.urun-yazisi-files-popup.active .popup-content {
    transform: scale(1);
}

.urun-yazisi-files-popup .popup-header {
    padding: 0 0 20px 0;
    border-bottom: 1px solid var(--border-renk);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.urun-yazisi-files-popup .popup-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--ana-renk);
    text-align: left;
}

.urun-yazisi-files-popup .popup-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--ana-renk);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.urun-yazisi-files-popup .popup-close:hover {
    background-color: var(--extra-light-bg);
    color: var(--ana-renk);
}

.urun-yazisi-files-popup .popup-body {
    padding: 20px 0;
    overflow-y: auto;
    max-height: calc(80vh - 80px);
}

.urun-yazisi-files-popup .files-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.urun-yazisi-files-popup .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: var(--extra-light-bg);
    border-radius: 8px;
    border: 1px solid var(--border-renk);
    transition: all 0.2s ease;
    cursor: default;
}

.urun-yazisi-files-popup .file-item:hover {
    /* background-color: var(--light-bg); */
    border-color: var(--mavi-canli);
}

.urun-yazisi-files-popup .file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.urun-yazisi-files-popup .file-info i {
    font-size: 24px;
    color: var(--ana-renk);
}

.urun-yazisi-files-popup .file-name {
    font-weight: 500;
    color: var(--ana-renk);
}

.urun-yazisi-files-popup .file-size {
    font-size: 12px;
    color: var(--placeholder);
}

.urun-yazisi-files-popup .btn-indir {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--action-blue);
    color: var(--white-only);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.urun-yazisi-files-popup .btn-indir:hover {
    opacity: .9;
}

.urun-yazisi-files-popup .btn-indir i {
    font-size: 15px;
}

.urun-yazisi-files-popup .no-files {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-classic);
}

.urun-yazisi-files-popup .no-files i {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.urun-yazisi-files-popup .no-files p {
    font-size: 16px;
    margin: 0;
}

/* Mobil Responsive */
@media (max-width: 768px) {
    .urun-yazisi-files-popup .popup-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .urun-yazisi-files-popup .file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .urun-yazisi-files-popup .btn-indir {
        width: 100%;
        justify-content: center;
    }
}

.urun-yazisi-files-popup .file-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.urun-yazisi-files-popup .file-name-full {
    font-weight: 500;
    font-size: 14px;
    color: var(--ana-renk);
    word-break: break-word;
    white-space: normal;
}


.urun-yazisi-files-popup .file-source {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
    font-weight: 500;
    background-color: var(--light-bg);
    color: var(--ana-renk);
    border: 1px solid var(--border-renk);
}
/* #region Saat Veri Sınıfları - Organizasyon vs Sipariş Ayrımı */

/* Organizasyon kartlarındaki saat verisi */
/* .organizasyon-saat-veri {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* Sipariş kartlarındaki saat verisi */
/* .siparis-saat-veri {
    font-weight: 500;
    color: var(--text-color);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* Araç süsleme siparişlerindeki özel saat verisi */
/* .arac-susleme-saat-veri {
    font-weight: 600;
    color: #ff8800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* Araç süsleme siparişlerindeki randevu saat verisi */
/* .randevu-saat-veri {
    font-weight: 600;
    color: #ff8800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* #endregion */