:root {
  /* 🎨 Renkler */
  --color-primary: #6C8ED9;
  --color-primary-rgb: 108,142,217;
  --color-primary-bg: rgba(108,142,217,0.1);
  --color-surface: #fff;
  --color-text: #222;
  --color-muted: #777;
  --color-border: #ddd;
  --color-bg: #f9f9f9;
  --hover-bg: #f2f4f8;
  --danger: #dc3545;
  --light: #fff;
  --green: #28a745;
  --red: #dc3545;


  --border-color: rgba(0,0,0,.1);

  /* ✨ Font & Tipografi */
  --font-size-xs: .75rem;
  --font-size-sm: .875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* 📏 Border Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 📐 Spacing */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  /* 💡 Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.15);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.2);

  /* ⏳ Transition */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.3s ease;

  /* 🗂️ Z-index */
  --z-dropdown: 1000;
  --z-modal: 1050;
  --z-modal-dropdown: 1060;
  --z-toast: 2000;

  /* 📌 Layout / Component Boyutları */
  --aside-logo-max: 130px;
  --aside-logo-min: 50px;
  --map-height: 200px;
  --gorsel-size: 210px;
  --gorsel-size-banner: 350px;
  --input-radius: 6px;
}
.aside-logo{max-width:var(--aside-logo-max);}
.page-logo{padding-inline:20px;}
.page-logo-link{justify-content:space-between;}
#mapView{width:100%;height:var(--map-height);}
.nav-function-minify .aside-logo{max-width:var(--aside-logo-min)!important;}
body:has(.page-login) .page-header,
body:has(.page-login) .page-footer{display:none!important;}
.custom-password-input{position:relative;}
.panel-menu-item{border:1px solid var(--color-border);border-radius:8px;}
.address-suggestion-items{position:absolute;top:100%;left:0;right:0;margin-top:var(--space-xs);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);max-height:250px;overflow-y:auto;padding:0;list-style:none;display:none;}
.address-suggestion-items-modal{z-index:var(--z-modal-dropdown);}
.address-suggestion-items:has(.address-suggestion-item){display:block;}
.address-suggestion-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md) var(--space-sm);border-bottom:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text);margin:0;cursor:pointer;text-align:left;transition:background-color var(--transition-fast),color var(--transition-fast);}
.address-suggestion-itemi{font-size:var(--font-size-base);color:var(--color-muted);width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.address-suggestion-item:hover{background-color:var(--hover-bg);}
.address-suggestion-item:hover svg{fill:var(--color-primary);}
.address-suggestion-item--is-focus{background-color:var(--color-primary-bg);color:var(--color-primary);}
.address-suggestion-item--is-focus svg{fill:var(--color-primary);}
.adres-form-header{font-weight:var(--fw-semibold);font-size:var(--font-size-lg);}
.adres-items{max-height:50vh;overflow-y:auto;}
#haftalik-calisma-saatleri{margin:1rem 0;font-family:Arial,sans-serif;}
.gun-row{min-height:80px;border:1px solid var(--color-border);padding:12px 15px;margin-bottom:10px;border-radius:var(--input-radius);background:#f9f9f9;}
.gun-row label{font-weight:600;display:block;margin-bottom:6px;}
.saat-araligi{display:flex;gap:10px;margin-top:8px;}
.saat-araligi label{font-weight:400;flex:1;}
.gorsel-show-wrapper{max-width:var(--gorsel-size);height:var(--gorsel-size);display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:var(--input-radius);padding:10px;margin-bottom:20px;}
.gorsel-show-wrapper.button_sil{left:90%;bottom:90%;}
.gorsel-show-wrapper.gorsel-show-banner{max-width:var(--gorsel-size-banner);}
.gorsel-show-img{width:100%;max-height:100%;object-fit:contain;}
.end-0{right:0;}
.input-loader-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.1);border-radius:var(--input-radius);}
.secenek-form{border:none!important;box-shadow:0 0 4px 2px rgba(0,0,0,.1);padding:10px 12px!important;border-radius:var(--input-radius)!important;margin-bottom:25px;padding-right:50px!important;}
.secenek-gorsel-preview{width:60px;height:60px;min-width:60px;min-height:60px;border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--input-radius);}
.secenek-form-left{margin-right:12px;}
.top-0{top:0;}
.form-section-col{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding-block:30px;margin-bottom:30px;}
.form-section-col-title{font-size:1.15rem;margin-bottom:20px;margin-top:-10px;}
.custom-password-input .button__password__toggle{position:absolute;right:0;bottom:0;background:none;border:none;padding:10px;display:flex;align-items:center;justify-content:center;}
.custom-password-input:has(input[type="password"]) .fa-eye{display:none!important;}
.custom-password-input:has(input[type="text"]) .fa-eye-slash{display:none!important;}
.was-validated.form-group:has(.custom-password-input) .form-control:invalid{background-position:center right calc(2em + 0.25rem)!important;}
.was-validated.form-group:has(.custom-password-input) .form-control:valid{background-position:center right calc(2em + 0.25rem)!important;}
.dz-remove{background:var(--danger)!important;color:var(--light)!important;border-radius:4px!important;}
.dz-error-message{top:150px!important;}
.profile-img-wrapper{width:100px;height:100px;display:flex;align-items:center;position:relative;justify-content:center;border-radius:50%;overflow:hidden;border:1px solid var(--border-color);}
.profile-img-wrapper img+img{display:none!important;}
.profile-img.will-delete{opacity:0.2;}
.will-delete-layout{width:100%;height:100%;position:absolute;font-size:35px;display:flex;align-items:center;justify-content:center;opacity:0.7;background:#fd399530;color:var(--danger);display:none;}
.profile-img-container:has(.will-delete) .will-delete-layout{display:flex!important;}
#boosting_options.hidden{display:none;}
.urun-image-box{margin:8px 0;border:1px solid var(--border-color);padding:4px;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;gap:15px;white-space:nowrap;min-height:110px;}
.urun-image-wrapper{width:100px;min-width:100px;height:100px;min-height:100px;display:flex;align-items:center;border:1px solid var(--border-color);justify-content:center;position:relative;}
.urun-image-wrapper.will-delete{opacity:0.3;}
.urun-image{max-width:100%;max-height:100%;}
.button__delete__image{background:var(--danger);color:var(--light);width:25px;height:25px;border:none;border-radius:4px;position:absolute;right:4px;top:4px;}
.list-link{display:flex;justify-content:space-between;}
th{white-space:nowrap!important;}
.info-image-wrapper{width:100px;height:100px;display:flex;align-items:center;justify-content:center;}
.info-image-wrapper img{max-width:100%;max-height:100%;}
.loader-wrapper{display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s ease;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:10000;}
body.loading .loader-wrapper{opacity:1;visibility:visible;}
.page-loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite;}
.view-loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid var(--primary);border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite;}

@keyframes rotation{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
.was-validated.form-control:valid~.select2.select2-selection,
.form-control.is-valid~.select2.select2-selection{border-color:var(--green)!important;}
.was-validated.form-control:invalid~.select2.select2-selection,
.form-control.is-invalid~.select2.select2-selection{border-color:var(--red)!important;}

.view-loader-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  height: 100%;
}

td:has(.td_adres) {
  min-width: 300px;
}

.form-input-search {
  padding-right: 30px;
}

.view-loader-wrapper.active {
  display: flex;
}

.input-clear-button {
  display: none;
  padding-inline: 0.7rem;
  position: absolute;
  right: 2px;
  cursor: pointer;
}

.need-active {
  display: none;
}

.need-active.active {
  display: block !important;
}

.form-input:focus ~ .input-clear-button,
.form-input:not(:placeholder-shown) ~ .input-clear-button {
  display: flex !important;
}

.form-input:focus ~ .input-focus-disable,
.form-input:not(:placeholder-shown) ~ .input-focus-disable {
  display: none !important;
}

.konumumu-bul {
  top: 0;
    height: 100%;
  right: 0;
  font-size: 13px;
  display: flex
;
  gap: 7px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.input-clear-button {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: none;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  color: var(--danger);
  transition: opacity 0.3s ease;
}

/* input-clear-button görünürken, konumumu bul gizlenir */
.form-input-search:focus ~ .konumumu-bul,
.form-input-search:not(:placeholder-shown) ~ .konumumu-bul {
  display: none !important;
}

.form-input-search:focus ~ .input-clear-button,
.form-input-search:not(:placeholder-shown) ~ .input-clear-button {
  display: flex !important;
}



/* Valid durumunda select2 single selection */
.was-validated .form-control.is-valid + .select2 .select2-selection,
.was-validated .form-control:valid + .select2 .select2-selection {
  border-color: #1dc9b7 !important;
}

/* Invalid durumunda select2 single selection */
.was-validated .form-control.is-invalid + .select2 .select2-selection,
.was-validated .form-control:invalid + .select2 .select2-selection {
  border-color: #fd3995 !important;
}
#map-center-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('https://cdn-icons-png.flaticon.com/512/684/684908.png');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 500;
}

.btn.loading {
  opacity: 0.7;
  pointer-events: none; /* Tıklamayı engelle */
  position: relative;
  color: transparent; /* Yazıyı gizle */
  user-select: none;
}

.btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Dönen yükleme animasyonu */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


#mapViewText {
  padding: 10px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.gorsel-show-wrapper .button_sil{
  top: 0;
  right: 0;
}

.responsive-img {
  max-width: 100% !important;
  width: auto !important;
}

#js-nav-menu li .badge {
  border: none !important;
}


.nav-function-minify .nav-menu .badge  {
  position: absolute !important;
  right: 0 !important;
  top: 8px!important;
}

body.nav-function-minify .page-logo-link {
  width: 100% !important;
}

body .page-logo-link .logo-mini {
  display: none;
}

body.nav-function-minify .page-logo-link .logo-mini {
  display: block;
}
body.nav-function-minify .page-logo-link .logo-big {
  display: none;
}
body.nav-function-minify .page-logo-link {
  padding: 12px;
}
.iti {
  width: 100% !important;
}
.page-logo-link .logo-mini {
  background: white;
  border-radius: 50%;
  padding: 1px 2px 0px 0;
}
.badge-count {
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  z-index: 1999;
  pointer-events: none;
}
.nav-function-minify #js-nav-menu .badge-count {

}
/* ============================================
   VARYANT YÖNETİMİ - MODERN STILLER
   ============================================ */

/* Ana Container */
#urun_varyantlari {
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 12px;
}

/* Varyant Kartları */
.varyant-form {
  background: white;
  border: 2px solid #e9ecef !important;
  border-radius: 16px !important;
  padding: 2rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  position: relative;
}

.varyant-form:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: #dee2e6 !important;
}

/* Varyant Başlık */
.varyant-form > h6 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.varyant-form > h6:before {
  content: "📦";
  font-size: 1.2rem;
}

/* Sil Butonu - Modern */
.varyant-remove,
.secenek-remove {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  background: #fee;
  border: 1px solid #fdd;
  color: #dc3545;
  transition: all 0.2s ease;
  z-index: 10;
}

.varyant-remove:hover,
.secenek-remove:hover {
  background: #dc3545;
  color: white;
  transform: scale(1.05);
}

.button_sil {
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.button_sil:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* Form Elemanları */
.varyant-form .form-label {
  font-weight: 600;
  color: #495057;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.varyant-form .form-control,
.varyant-form .select2-container {
  border-radius: 8px;
  border: 1.5px solid #e0e0e0;
  padding: 0.625rem 0.875rem;
  transition: all 0.2s ease;
}

.varyant-form .form-control:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Switch Stilleri - Modern */
.custom-control-label {
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  user-select: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background-color: #28a745;
  border-color: #28a745;
}

/* Seçenek Container */
.secenekler-listesi {
  background: #f8f9fa;
  padding: 1.25rem;
  border-radius: 12px;
  margin-top: 1.5rem;
}

.secenekler-listesi > h6 {
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.secenekler-listesi > h6:before {
  content: "⚙️";
}

/* Seçenek Kartı */
.secenek-form {
  background: white;
  padding: 1.25rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1.5px solid #e9ecef;
  transition: all 0.2s ease;
  position: relative;
}

.secenek-form:hover {
  border-color: #dee2e6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Görsel Önizleme Alanı */
.secenek-gorsel-preview {
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fa;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secenek-gorsel-preview:hover {
  border-color: #4a90e2;
  background: #f0f7ff;
}

.secenek-gorsel-preview .no-image {
  font-size: 0.75rem;
  color: #adb5bd;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.secenek-gorsel-preview .no-image i {
  font-size: 1.5rem;
}

.gorsel-onizleme {
  border-radius: 8px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.btn-gorsel-sil {
  font-size: 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
}

/* Butonlar */
.btn-success, .secenek-ekle {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  border-radius: 10px;
  padding: 0.625rem 1.25rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.2);
  transition: all 0.3s ease;
}

.btn-success:hover, .secenek-ekle:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-outline-primary {
  border: 2px solid #4a90e2;
  color: #4a90e2;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-outline-primary:hover {
  background: #4a90e2;
  color: white;
  transform: translateY(-1px);
}

/* Input Maskesi için */
.ucret-inputmask {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #28a745;
}

/* Responsive Grid İyileştirmeleri */
@media (max-width: 768px) {
  .varyant-form {
    padding: 1.25rem !important;
  }

  .secenek-form {
    flex-direction: column;
  }

  .secenek-form-left {
    margin-bottom: 1rem;
    width: 100%;
  }

  .secenek-gorsel-preview {
    width: 100% !important;
    height: 120px !important;
  }
}

/* Loading Spinner */
.input-loader-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.input-loader {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* Tooltip benzeri bilgi ikonları */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  font-size: 0.75rem;
  cursor: help;
  margin-left: 0.25rem;
}

/* Secim Araligi Alani */
.js-secim-araligi {
  background: #fff3cd;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #ffc107;
}

/* Animasyonlar */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.varyant-form, .secenek-form {
  animation: fadeIn 0.3s ease;
}

/* Drag & Drop hazırlığı (ileride eklenebilir) */
.varyant-form {
  cursor: move;
}

.varyant-form.dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

/* Select2 Özelleştirme */
.select2-container--default .select2-selection--single {
  border-radius: 8px !important;
  border: 1.5px solid #e0e0e0 !important;
  height: auto !important;
  padding: 0.375rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 0.5rem !important;
  line-height: 1.5 !important;
}
#varyant_listesi {
  gap: 20px;
}
/* Boş state */
#varyant_listesi:empty::before {
  display: block;
  text-align: center;
  padding: 3rem;
  color: #adb5bd;
  font-style: italic;
  background: white;
  border-radius: 12px;
  border: 2px dashed #dee2e6;
}