/* Stok girişleri için daha büyük input */
.stok-input-lg {
  height: 44px;
  font-size: 15px;
  padding: 10px 12px;
}
/* SMS Doğrulama (OTP) alanları - sadece .sms-verify altında geçerli */
.sms-verify .sms-verify__code-inputs {
	display: flex;
	gap: 12px;
	justify-content: center;
	align-items: center;
	margin-top: 8px;
	margin-bottom: 12px;
}

.sms-verify .sms-verify__input {
	width: 52px;
	height: 56px;
	text-align: center;
	font-size: 20px;
	line-height: 1;
	border: 1px solid #d9d9d9;
	background-color: #fff;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sms-verify .sms-verify__input:focus {
	border-color: #a3174a; /* Kurumsal renk */
	box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.15);
}

.sms-verify .sms-verify__input::-ms-reveal,
.sms-verify .sms-verify__input::-ms-clear {
	display: none;
}

/* Küçük ekran optimizasyonu */
@media (max-width: 480px) {
	.sms-verify .sms-verify__input {
		width: 44px;
		height: 50px;
		font-size: 18px;
	}
}

/* SMS Doğrulama Bilgi Notu */
.sms-info-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px auto 20px;
	padding: 12px 16px;
	background-color: #fff7fa;
	border: 1px solid #a3174a;
	border-left: 4px solid #a3174a;
	border-radius: 0;
	max-width: 600px;
	font-size: 13px;
	color: #6c757d;
	line-height: 1.5;
}

.sms-info-note i {
	color: #a3174a;
	font-size: 16px;
	flex-shrink: 0;
}

.sms-info-note span {
	flex: 1;
	text-align: center;
}

/* Mobil optimizasyonu */
@media (max-width: 480px) {
	.sms-info-note {
		margin: 10px 0 16px;
		padding: 10px 12px;
		font-size: 12px;
		flex-direction: row;
		align-items: flex-start;
	}
	
	.sms-info-note i {
		margin-top: 2px;
	}
	
	.sms-info-note span {
		text-align: left;
	}
}

/* SMS Yeniden Gönderme Geri Sayım */
.resend-countdown-text {
	color: #6c757d;
	font-size: 13px;
	font-weight: 500;
	margin-left: 8px;
	opacity: 0.8;
}

/* Mobil optimizasyonu */
@media (max-width: 480px) {
	.resend-countdown-text {
		font-size: 12px;
		margin-left: 4px;
	}
}

/* UyelikIslemleri/UyeOl - mobil 2 kolon grid */
.form-grid-two-mobile {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 480px) {
  .form-grid-two-mobile {
    grid-template-columns: 1fr 1fr;
  }
}

/* Grid içindeki uzun alanlar (select vs.) tam satır kaplasın diye gerekirse aşağıdaki sınıf kullanılabilir */
.form-grid-two-mobile .full-row {
  grid-column: 1 / -1;
}
/* ========================================
   LOADING OVERLAY STİLLERİ
   ======================================== */
.modern-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 1000000009 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-loading-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
  max-width: none;
  width: auto;
}

.modern-loading-spinner {
  margin: 0;
  color: #a3174a;
}

/* modern-loading-text artık gösterilecek */

/* Kopyalama butonu loading durumu */
.modern-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.modern-action-btn:disabled i {
  color: #999;
}

/* ========================================
   MUTFAK EKRANI STİLLERİ
   ======================================== */
.mutfak-header-section {
  margin-bottom: 30px;
}

.mutfak-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: #ffffff;
  padding: 16px 20px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.mutfak-btn-wrapper {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.mutfak-btn {
  padding: 10px 20px;
  border: 1px solid #a3174a;
  border-radius: 0;
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: #ffffff;
  color: #a3174a;
  min-width: 140px;
  height: 40px;
}

.mutfak-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.mutfak-btn-primary {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.mutfak-btn-primary:hover {
  background: #8a1340;
  color: #ffffff;
  border-color: #8a1340;
}

.mutfak-btn-secondary {
  background: #ffffff;
  color: #6d6868;
  border-color: #6d6868;
}

.mutfak-btn-secondary:hover {
  background: #6d6868;
  color: #ffffff;
  border-color: #6d6868;
}

.mutfak-btn-success {
  background: #28a745;
  color: #ffffff;
  border-color: #28a745;
}

.mutfak-btn-success:hover {
  background: #218838;
  color: #ffffff;
  border-color: #218838;
}

.mutfak-btn-success:disabled {
  background: #6c757d;
  color: #ffffff;
  border-color: #6c757d;
  opacity: 0.6;
  cursor: not-allowed;
}

.mutfak-fullscreen-wrapper {
  flex-shrink: 0;
  margin-left: auto;
}

.mutfak-btn-fullscreen {
  min-width: 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #6d6868;
  color: #ffffff;
  border-color: #6d6868;
}

.mutfak-btn-fullscreen:hover {
  background: #5a5656;
  color: #ffffff;
  border-color: #5a5656;
}

.mutfak-ekran-badge {
  background: #6d6868;
  color: #ffffff;
  border: 1px solid #303030;
  padding: 12px 24px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(48, 48, 48, 0.3);
  flex-shrink: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.mutfak-ekran-badge h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.mutfak-uyari-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f9fa;
  padding: 12px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  flex-shrink: 0;
}

.mutfak-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mutfak-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.mutfak-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #a3174a;
  cursor: pointer;
}

.mutfak-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mutfak-checkbox-label-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mutfak-checkbox-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mutfak-checkbox-label {
  font-size: 13px;
  color: #333;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  margin: 0;
}

.mutfak-status-badge {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mutfak-status-active {
  background-color: #28a745;
  color: #ffffff;
}

.mutfak-status-inactive {
  background-color: #6c757d;
  color: #ffffff;
}

.mutfak-checkbox-description {
  font-size: 11px;
  color: #666;
  line-height: 1.4;
  font-style: italic;
  margin: 0;
  font-weight: 500;
}

.mutfak-form-control {
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  font-size: 13px;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #333;
}

.mutfak-form-control:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
}

.mutfak-form-control:disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.mutfak-form-control-sm {
  width: 80px;
  font-size: 12px;
  padding: 6px 10px;
}

/* Modern Mutfak Container */
.modern-mutfak-container {
  background-color: #f5f6fa;
  min-height: 100vh;
  padding: 20px;
}

/* Ürün üst satırı: Hazırlanıyor + Ekran etiketi */
.modern-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.modern-item-status {
  color: #ffc107;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modern-item-ekran-tag {
  display: flex;
  justify-content: flex-end;
}



/* Modern Orders Grid */
.modern-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

/* Modern Order Card */
.modern-order-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.modern-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.modern-order-header {
  background: #f8f9fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modern-order-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modern-order-details {
  font-size: 14px;
  color: #333;
}

.modern-order-body {
  padding: 16px 20px;
}

/* Modern Order Item */
.modern-order-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f1f1;
}


.modern-order-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}


.modern-item-content {
  margin-bottom: 12px;
}

.modern-item-chef {
  color: #6c757d;
  font-size: 12px;
  margin-bottom: 4px;
}

.modern-item-details {
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.modern-item-note {
  color: #17A351;
  font-size: 12px;
  margin-bottom: 4px;
}

.modern-item-ekran {
  color: #6c757d;
  font-size: 11px;
}

.modern-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.modern-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Modern Badge */


.modern-badge-primary {
  background: rgba(163, 23, 74, 0.1);
  color: #a3174a;
}

.modern-badge-success {
  background: rgba(23, 163, 81, 0.1);
  color: #17A351;
}

.modern-badge-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.modern-badge-time {
  font-size: 14px;
  padding: 6px 12px;
}

/* Modern Buton Tasarımları */
.modern-btn {
  padding: 8px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  height: 36px;
  background: #ffffff;
  color: #a3174a;
}

.modern-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-btn-outline-secondary {
  background: #ffffff;
  color: #6c757d;
  border: 1px solid #6c757d;
}

.modern-btn-outline-secondary:hover {
  background: #6c757d;
  color: #ffffff;
  border-color: #6c757d;
}

.modern-btn-outline-success {
  background: #ffffff;
  color: #a3174a;
  border: 1px solid #a3174a;
}

.modern-btn-outline-success:hover {
  background: #17A351;
  color: #ffffff;
  border-color: #17A351;
}

/* Modern Empty State */
.modern-empty-state {
  text-align: center;
  margin-top: 60px;
}

.modern-empty-content {
  max-width: 600px;
  margin: 0 auto;
  background: #ffffff;
  padding: 40px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-empty-icon {
  font-size: 48px;
  color: #6c757d;
  margin-bottom: 16px;
}

.modern-empty-title {
  color: #333;
  margin-bottom: 12px;
  font-weight: 600;
}

.modern-empty-text {
  color: #6c757d;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* Modern Fade Transition */
.modern-fade-enter-active,
.modern-fade-leave-active {
  transition: all 0.3s ease;
}

.modern-fade-enter-from,
.modern-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Mutfak Ekranı Responsive Tasarım */
@media (max-width: 768px) {
  .mutfak-controls-row {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .mutfak-uyari-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .modern-orders-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .modern-order-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .modern-btn {
    width: 100%;
    min-width: 0;
  }
  
  .modern-item-footer {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .modern-item-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .modern-item-ekran-tag {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .modern-mutfak-container {
    padding: 12px;
  }
  
  .mutfak-ekran-badge h3 {
    font-size: 1.25rem;
  }
  
  .modern-order-header,
  .modern-order-body {
    padding: 12px 16px;
  }
  
  .modern-empty-content {
    padding: 24px;
  }
}

/* Focus States */
.mutfak-btn:focus,
.mutfak-form-control:focus,
.mutfak-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.2);
}

/* ========================================
   SAG BAR SATIS RAPOR (YAN PANEL) STİLLERİ
   Component CSS taşındı; mükerrer tanımlar eklenmedi
   ======================================== */
.right-bar-innerSagBar {
  width: 340px;
  max-width: 100vw;
  background: #fff;
  border-left: 1px solid #eee;
}

/* Garson performansı */
.modern-garson-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modern-garson-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  padding: 6px 8px;
  transition: all 0.2s ease;
  position: relative;
}

.modern-garson-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #303030;
}

.modern-garson-card:hover {
  background: #f8f9fa;
  border-color: #303030;
}

.garson-header {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}

.garson-avatar-modern {
  width: 28px;
  height: 28px;
  background: #303030;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.avatar-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.garson-info-modern {
  flex: 1;
  display: flex;
  align-items: center;
}

.garson-name-modern {
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  margin: 0;
}

.garson-metrics {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.modern-garson-list .metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #303030;
  line-height: 1;
}

.modern-garson-list .metric-label {
  font-size: 9px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

/* Kritik stok listesi */
.modern-stok-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modern-stok-card {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-left: 3px solid #A3174A;
  padding: 6px 8px;
  transition: all 0.2s ease;
  position: relative;
}

.modern-stok-card:hover {
  background: #f8f9fa;
  border-color: #A3174A;
}

.stok-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.stok-info-modern { flex: 1; }

.stok-name-modern {
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 4px;
}

.stok-desc-modern {
  font-size: 9px;
  color: #6c757d;
  margin-bottom: 0;
}

.stok-metrics { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.modern-stok-list .metric-value { font-size: 14px; font-weight: 600; color: #A3174A; line-height: 1; }
.modern-stok-list .metric-label { font-size: 9px; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }

/* Son işlemler */
.modern-islem-list { display: flex; flex-direction: column; gap: 6px; }
.modern-islem-card { background: #ffffff; border: 1px solid #e9ecef; padding: 6px 8px; transition: all 0.2s ease; position: relative; }
.modern-islem-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: #303030; }
.modern-islem-card:hover { background: #f8f9fa; border-color: #303030; }
.islem-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.islem-time-modern { background: #303030; padding: 3px 8px; color: white; font-size: 9px; font-weight: 600; }
.time-text { font-size: 9px; font-weight: 600; }
.islem-icon-modern { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 10px; background: rgba(48, 48, 48, 0.1); color: #303030; }
.islem-content-modern { padding-top: 4px; }
.islem-text-modern { font-size: 11px; color: #495057; line-height: 1.3; margin: 0; }

/* Hızlı eylemler liste sarmalayıcı (buton stilleri qodmenu.css içinde mevcut) */
.modern-action-list { display: flex; flex-direction: column; gap: 6px; }
/* Alt kategori başlığı - Uygulamalar sayfası */
.alt-kategori-title {
  font-size: 18px;
  margin: 10px 0 6px 0;
}
/* ========================================
   QODMENU PANEL CSS STYLES
   ======================================== */

/* ========================================
   GENEL KURUMSAL RENKLER VE DEĞİŞKENLER
   ======================================== */
:root {
  --primary-color: #17A351;
  --secondary-color: #45A317;
  --accent-color: #A3174A;
  --dark-color: #332127;
  --light-color: #213328;
  --primary-pastel: #e8f5e8;
  --secondary-pastel: #f0f8e8;
  --accent-pastel: #f8e8f0;
  --dark-pastel: #f5f0f0;
  --light-pastel: #f0f5f0;
}

/* ========================================
   AKTİF KATEGORİ STİLLERİ
   ======================================== */
.AktifKategori{
    border: 1px solid #a3174a  !important;
   background: #fefffd;
}

/* ========================================
   DASHBOARD RENKLERİ - PASTEL TONLAR
   ======================================== */
.bg-custom-green {
    background-color: #7FB069 !important;
}

.bg-custom-light-green {
    background-color: #A8D5BA !important;
}

.bg-custom-pink {
    background-color: #F4A6CD !important;
}

.bg-custom-dark-brown {
    background-color: #B8A9A9 !important;
}

.bg-custom-dark-green {
    background-color: #9DC183 !important;
}

.bg-custom-blue {
    background-color: #A8D8EA !important;
}

.bg-custom-purple {
    background-color: #C8A8E2 !important;
}

.bg-custom-orange {
    background-color: #F4C2A1 !important;
}

/* ========================================
   SAGBAR SATIŞ RAPOR RENKLERİ
   ======================================== */
.badge-custom-green {
    background-color: #17A351 !important;
    color: white !important;
}

.badge-custom-light-green {
    background-color: #45A317 !important;
    color: white !important;
}

.badge-custom-pink {
    background-color: #A3174A !important;
    color: white !important;
}

.badge-custom-dark-brown {
    background-color: #332127 !important;
    color: white !important;
}

.badge-custom-dark-green {
    background-color: #213328 !important;
    color: white !important;
}

.text-custom-green {
    color: #303030 !important;
}

.text-custom-light-green {
    color: #45A317 !important;
}

.text-custom-pink {
    color: #A3174A !important;
}

.text-custom-dark-brown {
    color: #332127 !important;
}

.text-custom-dark-green {
    color: #213328 !important;
}

/* ========================================
   ÜRÜN KARTI STİLLERİ
   ======================================== */
.UrunKartiSolIconTutucu{
    width: 100%;
    text-align: center;
}

.UrunIcon{
  font-size:100px;
  margin-bottom:20px;
}

.RenkSec{
    margin:0px auto 0px auto;
}

.ButtonPorsiyonEkleme{
margin-left: 15px;
}

/* ========================================
   MODERN KURUMSAL TASARIM STİLLERİ
   ======================================== */

/* ========================================
   MODERN CONTENT HEADER
   ======================================== */
.modern-content-header {
  background: #ffffff;
  border-bottom: 1px solid #e1e5e9;
  padding: 24px 32px;
  margin-bottom: 24px;
}

.modern-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modern-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modern-btn-large {
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.2);
  transition: all 0.3s ease;
}

.modern-btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(161, 23, 74, 0.3);
}

.modern-header-title {
  flex: 1;
}

.modern-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.modern-page-subtitle {
  color: #6c757d;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

/* ========================================
   MODERN BREADCRUMB
   ======================================== */
.modern-breadcrumb {
  margin: 0;
}

.modern-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.modern-breadcrumb-item {
  display: flex;
  align-items: center;
}

.modern-breadcrumb-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modern-breadcrumb-link:hover {
  color: #a3174a;
}

.modern-breadcrumb-link.active {
  color: #333;
  font-weight: 500;
}

/* ========================================
   MODERN CONTENT
   ======================================== */


/* ========================================
   MODERN KATEGORİ SECTION
   ======================================== */
.modern-kategori-section {
  margin-bottom: 40px;
}

.modern-kategori-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e1e5e9;
}

.modern-kategori-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-kategori-title i {
  color: #a3174a;
  font-size: 1.2rem;
}

.modern-kategori-count {
  font-size: 13px;
  color: #6c757d;
  background: #f8f9fa;
  padding: 4px 12px;
  border-radius: 0px;
  border: 1px solid #e1e5e9;
}

/* Uygulamalar sayfası alt kategori başlığı, üstte boşluk için */
.modern-kategori-section > div .modern-kategori-header {
  margin-top: 24px;
}

/* ========================================
   MODERN UYGULAMALAR GRID
   ======================================== */
.modern-uygulamalar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ========================================
   MODERN UYGULAMA CARD
   ======================================== */
.modern-uygulama-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.modern-uygulama-card:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 16px rgba(163, 23, 74, 0.15);
  transform: translateY(-2px);
}

.modern-uygulama-card-disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.modern-uygulama-card-disabled:hover {
  border-color: #e1e5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: none;
}

/* Pasif uygulamalar için stil */
.modern-uygulama-card-pasif {
  opacity: 0.8;
  border-color: #dee2e6;
}

.modern-uygulama-card-pasif:hover {
  opacity: 0.9;
}

/* Admin butonları her zaman tıklanabilir olmalı (disabled kartlarda bile) */
.modern-uygulama-admin-actions {
  pointer-events: auto !important;
  z-index: 10;
}

.modern-uygulama-card-disabled .modern-uygulama-admin-actions {
  pointer-events: auto !important;
  opacity: 1 !important;
}

.modern-uygulama-card-disabled .modern-uygulama-admin-actions button {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
}

.modern-uygulama-header {
  padding: 20px 20px 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f3f4;
}

.modern-uygulama-logo-wrapper {
  display: flex;
  align-items: center;
}

.modern-uygulama-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 0;
  padding: 16px;
  border: 3px solid;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.modern-uygulama-logo:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.modern-uygulama-logo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28px;
  border: 3px solid;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.modern-uygulama-logo-placeholder:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ========================================
   KURUMSAL LOGO STİLLERİ
   ======================================== */
.modern-uygulama-logo,
.modern-uygulama-logo-placeholder {
  background: #303030;
  border: 2px solid #e1e5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 0;
}

.modern-uygulama-logo:hover,
.modern-uygulama-logo-placeholder:hover {
  background: #404040;
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.15);
}

.modern-uygulama-logo-placeholder {
  color: #ffffff;
}

/* ========================================
   KATEGORİ BAZLI RENK STİLLERİ
   ======================================== */
.modern-uygulama-card[data-kategori="SİPARİŞ ENTEGRASYONLARI"] .modern-uygulama-logo,
.modern-uygulama-card[data-kategori="SİPARİŞ ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  background: #303030;
}

.modern-uygulama-card[data-kategori="SİPARİŞ ENTEGRASYONLARI"] .modern-uygulama-logo:hover,
.modern-uygulama-card[data-kategori="SİPARİŞ ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder:hover {
  background: #404040;
}

.modern-uygulama-card[data-kategori="POS CİHAZLARI"] .modern-uygulama-logo,
.modern-uygulama-card[data-kategori="POS CİHAZLARI"] .modern-uygulama-logo-placeholder {
  background: #e8f5e8;
}

.modern-uygulama-card[data-kategori="POS CİHAZLARI"] .modern-uygulama-logo:hover,
.modern-uygulama-card[data-kategori="POS CİHAZLARI"] .modern-uygulama-logo-placeholder:hover {
  background: #d4edda;
}

.modern-uygulama-card[data-kategori="HOTEL ENTEGRASYONLARI"] .modern-uygulama-logo,
.modern-uygulama-card[data-kategori="HOTEL ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  background: #fff3cd;
}

.modern-uygulama-card[data-kategori="HOTEL ENTEGRASYONLARI"] .modern-uygulama-logo:hover,
.modern-uygulama-card[data-kategori="HOTEL ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder:hover {
  background: #ffeaa7;
}

.modern-uygulama-card[data-kategori="KURYE ENTEGRASYONLARI"] .modern-uygulama-logo,
.modern-uygulama-card[data-kategori="KURYE ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  background: #f8d7da;
}

.modern-uygulama-card[data-kategori="KURYE ENTEGRASYONLARI"] .modern-uygulama-logo:hover,
.modern-uygulama-card[data-kategori="KURYE ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder:hover {
  background: #f5c6cb;
}

.modern-uygulama-card[data-kategori="E-DÖNÜŞÜM ENTEGRASYONLARI"] .modern-uygulama-logo,
.modern-uygulama-card[data-kategori="E-DÖNÜŞÜM ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  background: #d1ecf1;
}

.modern-uygulama-card[data-kategori="E-DÖNÜŞÜM ENTEGRASYONLARI"] .modern-uygulama-logo:hover,
.modern-uygulama-card[data-kategori="E-DÖNÜŞÜM ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder:hover {
  background: #bee5eb;
}

/* ========================================
   PLACEHOLDER RENKLERİ KATEGORİ BAZLI
   ======================================== */
.modern-uygulama-card[data-kategori="SİPARİŞ ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  color: #ffffff;
}

.modern-uygulama-card[data-kategori="POS CİHAZLARI"] .modern-uygulama-logo-placeholder {
  color: #155724;
}

.modern-uygulama-card[data-kategori="HOTEL ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  color: #856404;
}

.modern-uygulama-card[data-kategori="KURYE ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  color: #721c24;
}

.modern-uygulama-card[data-kategori="E-DÖNÜŞÜM ENTEGRASYONLARI"] .modern-uygulama-logo-placeholder {
  color: #0c5460;
}

/* ========================================
   UYGULAMA STATUS STİLLERİ
   ======================================== */
.modern-uygulama-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 0px;
}

.modern-status-active {
  color: #17A351;
  background: rgba(23, 163, 81, 0.1);
}

.modern-status-expired {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
}

.modern-status-inactive {
  color: #6c757d;
  background: rgba(108, 117, 125, 0.1);
}

.modern-uygulama-status i {
  font-size: 8px;
}

/* Çok Yakında Badge */
.modern-uygulama-cok-yakinda-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 0px;
  background: linear-gradient(135deg, rgba(163, 23, 74, 0.1), rgba(163, 23, 74, 0.05));
  color: #a3174a;
  border: 1px solid rgba(163, 23, 74, 0.2);
  font-family: "Rubik", sans-serif;
}

.modern-uygulama-cok-yakinda-badge i {
  font-size: 11px;
}

/* ========================================
   MODERN UYGULAMA CONTENT
   ======================================== */
.modern-uygulama-content {
  padding: 16px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.modern-uygulama-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.modern-uygulama-description {
  font-size: 13px;
  color: #6c757d;
  margin: 0;
  line-height: 1.5;
  flex: 1;
}

/* Fiyat Gösterimi - Kurumsal Tasarım */
.modern-uygulama-fiyat {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Rubik", sans-serif;
}

.modern-uygulama-fiyat-label {
  font-size: 13px;
  font-weight: 500;
  color: #6c757d;
}

.modern-uygulama-fiyat-tutar {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.3px;
}

/* Kurumsal İstatistik Gösterimi */
.modern-uygulama-stats {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f1f3f4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modern-uygulama-stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-family: "Rubik", sans-serif;
}

.modern-uygulama-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #6c757d;
}

.modern-uygulama-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.modern-uygulama-stat-single {
  padding: 8px 0;
  font-family: "Rubik", sans-serif;
}

.modern-uygulama-stat-text {
  font-size: 13px;
  color: #6c757d;
  line-height: 1.5;
}

.modern-uygulama-stat-text strong {
  color: #333;
  font-weight: 600;
  margin: 0 4px;
}

/* ========================================
   MODERN UYGULAMA FOOTER
   ======================================== */
.modern-uygulama-footer {
  padding: 16px 20px;
  border-top: 1px solid #f1f3f4;
  background: #f8f9fa;
}

.modern-uygulama-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.modern-uygulama-btn {
  flex: 1;
  font-size: 12px;
  padding: 8px 12px;
  height: 32px;
}

.modern-btn-outline {
  background: #ffffff;
  color: #6c757d;
  border: 1px solid #e1e5e9;
}

.modern-btn-outline:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.modern-uygulama-info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-uygulama-date {
  font-size: 11px;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 4px;
}

.modern-uygulama-date strong {
  color: #333;
}

/* ========================================
   MODERN BUTTONS
   ======================================== */
.modern-btn {
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #a3174a;
  height: 32px;
}

.modern-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-btn-primary {
  background: #a3174a;
  color: #ffffff;
  border: 1px solid #a3174a;
}

.modern-btn-primary:hover {
  background: #c41e3a;
  color: #ffffff;
  border-color: #c41e3a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-btn-secondary {
  background: #ffffff;
  color: #a3174a;
  border: 1px solid #e1e5e9;
}

.modern-btn-secondary:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

/* Ek: Modern buton varyantları (kurumsal ve sade) */

.modern-btn-danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: #ffffff;
  border: 1px solid #dc3545;
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.modern-btn-danger:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* ========================================
   Siparişler: Başlıktaki "Yeni Sipariş" butonu
   BolgelerMasalar → "Yeni Bölge Ekle" ile aynı kurumsal-modern stile getirildi
   ======================================== */
.siparisler-page .box-tools .btn.btn-success.btn-sm {
  background: #ffffff !important;
  color: var(--primary-color, #17A351) !important;
  border: 1px solid var(--primary-color, #17A351) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  padding: 0.5rem 1rem !important;
  box-shadow: 0 2px 8px rgba(23, 163, 81, 0.2) !important;
  transition: all 0.2s ease !important;
}

.siparisler-page .box-tools .btn.btn-success.btn-sm:hover,
.siparisler-page .box-tools .btn.btn-success.btn-sm:focus {
  background: linear-gradient(135deg, var(--primary-color, #17A351), var(--secondary-color, #45A317)) !important;
  color: #ffffff !important;
  border-color: var(--primary-color, #17A351) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(23, 163, 81, 0.3) !important;
}

/* ========================================
   RESPONSIVE TASARIM
   ======================================== */
@media (max-width: 1200px) {
  .modern-uygulamalar-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .modern-content-header {
    padding: 16px 20px;
  }
  /* Ana sayfa dashboard kartları: küçük ekranlarda 2 sütun */
  .content-wrapper .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .modern-content {
    padding: 0 20px 20px 20px;
  }
  
  .modern-page-title {
    font-size: 1.5rem;
  }
  
  .modern-header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .modern-kategori-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .modern-kategori-title {
    font-size: 1.3rem;
  }
  
  .modern-uygulamalar-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .modern-uygulama-card {
    min-height: 240px;
  }
  
  .modern-uygulama-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  /* Çok küçük ekranlarda 1 sütun */
  .content-wrapper .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* 1320x720 gibi orta ekranda boşlukları azaltmak için kartların dikey boşluklarını sıkılaştır */
@media (max-width: 1366px) {
  .box { margin-bottom: 16px; }
  .box-body { padding: 12px !important; }
  /* Masalar/Bölgeler başlık aksiyon grubu dar ekran iyileştirmesi */
  .header-flex-responsive {
    gap: 8px;
  }
  .header-flex-responsive .modern-header-actions .modern-button-group {
    gap: 6px;
  }
  .header-flex-responsive .modern-btn {
    min-width: 120px;
    height: 34px;
    padding: 6px 12px;
  }
}

@media (max-width: 576px) {
  .modern-uygulama-header {
    padding: 16px;
  }
  
  .modern-uygulama-content {
    padding: 12px 16px;
  }
  
  .modern-uygulama-footer {
    padding: 12px 16px;
  }
  
  .modern-uygulama-logo,
  .modern-uygulama-logo-placeholder {
    width: 72px;
    height: 72px;
    padding: 14px;
  }
  
  .modern-uygulama-title {
    font-size: 1rem;
  }
}

/* ========================================
   FOCUS STATES
   ======================================== */
.modern-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.2);
}

/* ========================================
   MODAL STİLLERİ
   ======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-container {
  display: flex;
  width: 90%;
  max-width: 1000px;
  height: 80vh;
  background: white;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ========================================
   MODAL SOL PANEL
   ======================================== */
.modal-left-panel {
  width: 40%;
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  position: relative;
  overflow: hidden;
}

.branding-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: white;
  gap: 30px;
}

.main-dish {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.app-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 15px;
}

.app-logo-placeholder {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
}

.brand-name h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.progress-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.progress-dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0;
  transition: all 0.3s ease;
}

.progress-dot.active {
  background: white;
}

/* ========================================
   MODAL SAĞ PANEL
   ======================================== */
.modal-right-panel {
  width: 60%;
  padding: 12px 15px 15px 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  max-height: 100%;
}

.modal-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #a3174a;
  cursor: pointer;
  padding: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.close-btn:hover {
  background: rgba(163, 23, 74, 0.1);
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.step-description {
  color: #666;
  margin: 0 0 12px 0;
  font-size: 12px;
}

/* ========================================
   PAKET SEÇİMİ
   ======================================== */
.package-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.package-option {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.package-option:hover {
  border-color: #a3174a;
}

.package-option.selected {
  border-color: #a3174a;
  background: rgba(163, 23, 74, 0.05);
}

.package-radio {
  margin-right: 15px;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.radio-circle.selected {
  border-color: #a3174a;
  background: #a3174a;
  color: white;
}

.package-info {
  flex: 1;
}

.package-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.package-price {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.price {
  color: #666;
  font-size: 14px;
}

.discount {
  color: #a3174a;
  font-size: 12px;
  font-weight: 600;
}

.package-total {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

/* ========================================
   FATURA BİLGİLERİ
   ======================================== */
.invoice-type {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.type-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid #e1e5e9;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.type-btn.active {
  background: #f8f9fa;
  color: #a3174a;
  border-color: #a3174a;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  font-size: 13px;
}

.form-group input,
.form-group textarea {
  padding: 8px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  font-size: 13px;
}

.form-group textarea {
  height: 60px;
  resize: vertical;
}

.selected-package-info {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 0;
  margin-bottom: 12px;
}

.selected-package-info h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.package-summary {
  font-weight: 600;
  color: #333;
  font-size: 18px;
}

.vat-info {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

/* ========================================
   ÖDEME
   ======================================== */
.credit-card-visual {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 0;
  margin-bottom: 20px;
  position: relative;
  height: 100px;
}

.card-chip {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 20px;
  color: #666;
}

.card-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #333;
  font-weight: 600;
}

.card-details {
  position: absolute;
  bottom: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.card-name {
  font-weight: 600;
  color: #333;
}

.payment-form {
  margin-bottom: 20px;
}

.form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.form-row .form-group {
  flex: 1;
}

.security-option {
  margin-top: 20px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #a3174a;
  font-weight: 600;
}

.checkbox-label input {
  margin-right: 10px;
}

/* ========================================
   MODAL BUTONLAR
   ======================================== */
.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e1e5e9;
  position: sticky;
  bottom: 0;
  background: white;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border: none;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #a3174a !important;
  color: white !important;
  border: 1px solid #a3174a !important;
}

.btn-primary:hover:not(:disabled) {
  background: #c41e3a !important;
  border-color: #c41e3a !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.btn-primary:disabled {
  background: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed;
}

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.2);
}

.btn-secondary {
  background: white;
  color: #a3174a;
  border: 1px solid #e1e5e9;
}

.btn-secondary:hover {
  background: #f8f9fa;
}

/* ========================================
   MODAL RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  .modal-container {
    flex-direction: column;
    width: 95%;
    height: 90vh;
  }
  
  .modal-left-panel {
    width: 100%;
    height: 200px;
  }
  
  .modal-right-panel {
    width: 100%;
    height: calc(100% - 200px);
  }
  
  .form-row {
    flex-direction: column;
  }
}

/* ========================================
   MODERN SECTION STİLLERİ
   ======================================== */
.modern-section {
  margin-bottom: 24px;
}

/* ========================================
   MODERN STATS SECTION
   ======================================== */
.modern-stats-section {
  margin-bottom: 24px;
}

.modern-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.modern-stat-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-stat-card:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.15);
  transform: translateY(-1px);
}

.modern-stat-card.modern-stat-total {
  background: rgba(163, 23, 74, 0.05);
  border-color: #a3174a;
}

.modern-stat-icon {
  width: 35px;
  height: 35px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
  flex-shrink: 0;
}

.modern-icon-success {
  background: #17A351;
}

.modern-icon-danger {
  background: #dc3545;
}

.modern-icon-info {
  background: #17a2b8;
}

.modern-icon-primary {
  background: #a3174a;
}

.modern-icon-warning {
  background: #ffc107;
  color: #333;
}

.modern-stat-content {
  flex: 1;
  min-width: 0;
}

.modern-stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
}

.modern-stat-label {
  display: block;
  font-size: 10px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

/* ========================================
   MODERN MAIN SECTION
   ======================================== */
.modern-main-section {
  min-width: 0;
}

/* ========================================
   MODERN CARD ACTIONS
   ======================================== */
.modern-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ========================================
   MODERN LAYOUT
   ======================================== */
.modern-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
}

.modern-main-content {
  min-width: 0;
}

.modern-sidebar {
  min-width: 0;
}

/* ========================================
   MODERN CARD
   ======================================== */


.modern-card-header {
  background: #f8f9fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modern-card-title {
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-card-body {
  padding: 20px;
}

/* ========================================
   MODERN FORM ELEMENTS
   ======================================== */
.modern-form-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  align-items: start;
}

.modern-form-col {
  min-width: 0;
}

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

.modern-form-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modern-form-control {
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 8px 12px;
  font-size: 13px;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #333;
  width: 100%;
}

.modern-form-control:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
  outline: none;
}

/* ========================================
   MODERN INFO TEXT
   ======================================== */
.modern-info-text {
  padding: 16px;
  background: rgba(163, 23, 74, 0.05);
  border-left: 4px solid #a3174a;
  border-radius: 0px;
}

.modern-info-paragraph {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.6;
}

.modern-info-paragraph strong {
  color: #a3174a;
  font-weight: 600;
}

/* ========================================
   MODERN EMPTY STATE
   ======================================== */
.modern-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.modern-empty-content {
  max-width: 500px;
  width: 100%;
}

.modern-empty-icon {
  font-size: 80px;
  color: #dee2e6;
  margin-bottom: 24px;
  display: block;
}

.modern-empty-title {
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  font-size: 20px;
}

.modern-empty-description {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.modern-empty-action-btn {
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.2);
  transition: all 0.3s ease;
  margin-top: 16px;
}

.modern-empty-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3);
}

.modern-empty-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ========================================
   MODERN USER LIST
   ======================================== */
.modern-user-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modern-user-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  transition: all 0.3s ease;
}

.modern-user-item:hover {
  background: rgba(163, 23, 74, 0.05);
  border-color: #a3174a;
}

.modern-user-avatar {
  position: relative;
  flex-shrink: 0;
}

.modern-user-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.modern-status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}

.modern-status-success {
  background: #17A351;
}

.modern-status-danger {
  background: #dc3545;
}

.modern-status-warning {
  background: #ffc107;
}

.modern-user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modern-user-name {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.modern-user-name .modern-link {
  font-weight: 600;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

.modern-user-name .modern-link:hover {
  color: #a3174a;
}

.modern-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}

.modern-user-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 16px;
  margin-top: 8px;
}

.modern-user-detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6c757d;
}

.modern-user-detail-item i {
  color: #a3174a;
  width: 14px;
  text-align: center;
  font-size: 11px;
}

.modern-user-role {
  font-weight: 500;
  color: #a3174a;
  font-size: 12px;
}

.modern-user-email {
  color: #6c757d;
  font-size: 12px;
}

.modern-user-phone {
  color: #6c757d;
  font-size: 12px;
}

.modern-user-sube {
  color: #6c757d;
  font-size: 12px;
}

.modern-user-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

.modern-action-btn {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 12px;
  padding: 4px 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0px;
}

.modern-action-btn:hover {
  color: #a3174a;
  background: rgba(163, 23, 74, 0.1);
}

.modern-action-btn-danger {
  color: #dc3545;
}

.modern-action-btn-danger:hover {
  color: #ffffff;
  background: #dc3545;
}

/* ========================================
   MODERN BADGE
   ======================================== */
.modern-badge {
  padding: 4px 8px;
  border-radius: 0px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modern-badge-primary {
  background: rgba(163, 23, 74, 0.1);
  color: #a3174a;
}

.modern-badge-success {
  background: rgba(23, 163, 81, 0.1);
  color: #17A351;
}

.modern-badge-danger {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
}

.modern-badge-warning {
  background: rgba(255, 193, 7, 0.1);
  color: #6a5926;
}

.modern-badge-info {
  background: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
}

/* ========================================
   MODERN STATS
   ======================================== */
.modern-stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modern-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  transition: all 0.3s ease;
}

.modern-stat-item:hover {
  background: rgba(163, 23, 74, 0.05);
  border-color: #a3174a;
}

.modern-stat-item.modern-stat-total {
  background: rgba(163, 23, 74, 0.1);
  border-color: #a3174a;
}

/* ========================================
   MODERN LAYOUT RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
  .modern-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .modern-sidebar {
    order: -1;
  }
}

@media (max-width: 768px) {
  .modern-form-row {
    grid-template-columns: 1fr;
  }
  
  .modern-user-item {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  
  .modern-user-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    margin-top: 8px;
  }

  .modern-user-details-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 576px) {
  .modern-card-body {
    padding: 16px;
  }
  
  .modern-user-item {
    padding: 12px;
  }
}

/* SİPARİŞLER DURUM BİLGİSİ STİLLERİ */
.siparis-board-row {
  min-height: calc(100vh - 300px);
  gap: 1rem;
}

.siparis-board-col {
  min-width: 320px;
  max-width: 380px;
}

.siparis-board-header {
  padding: 1rem;
  border-radius: 0;
  color: white;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.siparis-board-list {
  min-height: 400px;
  background: #f8f9fa;
  border-radius: 0;
  padding: 1rem;
  border: 2px dashed #e9ecef;
  transition: all 0.3s ease;
}

.siparis-board-list:hover {
  border-color: #a3174a;
  background: #fff;
}

.siparis-board-list.sortable-ghost {
  opacity: 0.5;
  background: #e3f2fd;
}

.siparis-card {
  background: white;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: grab;
}

.siparis-card:hover {
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.15);
  transform: translateY(-2px);
  border-color: #a3174a;
}

.siparis-card:active {
  cursor: grabbing;
}

.siparis-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  color: white;
  border-radius: 0;
}

.siparis-card-header .badge {
  background: rgba(255,255,255,0.2) !important;
  color: white;
  font-size: 0.7rem;
}

.siparis-id {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 0.9rem;
}

.siparis-card-body {
  padding: 1rem;
}

.siparis-sure {
  font-size: 0.8rem;
  font-weight: 600;
  background: #e8f5e8;
  padding: 0.2rem 0.5rem;
  border-radius: 0;
  color: #2e7d32;
}

.siparis-card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 0;
}

.sube-secici {
  background: white;
  border-radius: 0;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border: 1px solid #e9ecef;
}

.sube-secici .form-label {
  color: #495057;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.sube-secici .form-control {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.sube-secici .form-control:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 0.2rem rgba(161, 23, 74, 0.25);
}

/* Modal stilleri */
.modal-content {
  border-radius: 0;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.modal-header {
 
  color: white;
  border-radius: 0;
  border-bottom: none;
}

.modal-title {
  font-weight: 600;
}

.btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 1rem 1.5rem;
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .siparis-board-row {
    flex-direction: column;
  }
  
  .siparis-board-col {
    min-width: 100%;
    max-width: 100%;
  }
  
  .siparis-board-list {
    min-height: 200px;
  }
}

/* Sürükle bırak animasyonları */
.sortable-ghost {
  opacity: 0.3;
  transform: rotate(5deg);
}

.sortable-chosen {
  box-shadow: 0 8px 25px rgba(161, 23, 74, 0.3) !important;
  transform: scale(1.02);
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(2deg);
}

/* Sipariş Board Header Stilleri - Kurumsal Tasarım */
.siparis-board-header {
  padding: 1rem 1.5rem;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.siparis-board-header:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.siparis-board-header i {
  font-size: 1.1rem;
}

/* Durum renkleri - Kurumsal renk tonları */
.siparis-board-header[style*="entegrasyon"] {
  background: linear-gradient(135deg, #a3174a, #c41e3a) !important;
  color: #ffffff !important;
}

.siparis-board-header[style*="hazirlaniyor"] {
  background: linear-gradient(135deg, #17A351, #45A317) !important;
  color: #ffffff !important;
}

.siparis-board-header[style*="bekleyen"] {
  background: linear-gradient(135deg, #332127, #213328) !important;
  color: #ffffff !important;
}

.siparis-board-header[style*="teslimat"] {
  background: linear-gradient(135deg, #F4A6CD, #A8D8EA) !important;
  color: #333333 !important;
}

/* ========================================
   FİYAT LİSTESİ SAYFASI STİLLERİ
   ======================================== */

/* Paket seçim radio butonları */
.paket-radio {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
  overflow: hidden;
  background: white;
  border: 2px solid #e9ecef;
  min-width: 200px;
  flex: 1;
  max-width: 300px;
}

.paket-radio:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.15);
  transform: translateY(-2px);
}

.paket-radio.selected {
  border-color: #a3174a;
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  color: white;
  box-shadow: 0 8px 25px rgba(161, 23, 74, 0.3);
}

.paket-radio.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.paket-radio-inner {
  padding: 1.5rem;
  text-align: center;
}

.paket-radio.selected .paket-radio-inner {
  color: white;
}

/* Seçili paketteki fiyat metninin rengini düzelt */
.paket-radio.selected .text-primary {
  color: white !important;
}

.paket-radio.selected .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Fiyat tablosu stilleri */
.fiyat-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.fiyat-table th {
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  color: white;
  font-weight: 600;
  border: none;
  padding: 1rem;
}

.fiyat-table td {
  padding: 1rem;
  border: 1px solid #e9ecef;
  vertical-align: middle;
}

.paket-vurgulu {
  background: rgba(161, 23, 74, 0.1) !important;
  font-weight: 600;
}

/* Özellik detay modalı */
.ozellik-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
}

.ozellik-modal-content {
  background: white;
  padding: 2rem;
  border-radius: 0;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #6c757d;
  transition: color 0.3s ease;
}

.btn-close:hover {
  color: #a3174a;
}

/* ========================================
   TOPLAM ÖDENEECEK TUTAR - KURUMSAL TASARIM
   ======================================== */
.fixed-toplam-tutar-box {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 2px solid #a3174a;
  padding: 2rem;
  box-shadow: 0 -8px 25px rgba(161, 23, 74, 0.15);
  z-index: 100;
}

.kurumsal-tutar-box {
  background: #ffffff;
  border: 2px solid #a3174a;
  border-radius: 0;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.1);
  position: relative;
}

.kurumsal-tutar-box .fw-bold.fs-5 {
  color: #a3174a !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.kurumsal-tutar-box .fw-bold.fs-5 i {
  color: #a3174a;
  font-size: 1.1em;
}

.kurumsal-tutar-box .d-flex.justify-content-between {
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.kurumsal-tutar-box .fw-semibold {
  color: #333333 !important;
  font-weight: 600;
  font-size: 0.95rem;
}

.kurumsal-tutar-box .fw-bold {
  color: #a3174a !important;
  font-weight: 700;
  font-size: 1.1rem;
}

.kurumsal-tutar-box .text-danger {
  color: #dc3545 !important;
  text-decoration: line-through;
  font-weight: 500;
}

.kurumsal-tutar-box .text-success {
  color: #17A351 !important;
  font-weight: 700;
}

.kurumsal-tutar-box .text-muted {
  color: #6c757d !important;
  font-size: 0.85rem;
  font-weight: 500;
}

.kurumsal-tutar-box .btn-primary {
  background: #a3174a !important;
  color: #ffffff !important;
  border: 2px solid #a3174a !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
  border-radius: 0;
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.2);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kurumsal-tutar-box .btn-primary:hover {
  background: #c41e3a !important;
  color: #ffffff !important;
  border-color: #c41e3a !important;
  box-shadow: 0 6px 20px rgba(161, 23, 74, 0.3);
  transform: translateY(-1px);
}

.kurumsal-tutar-box .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.2);
}

.toplam-tutar-box {
  background: white;
  border-radius: 0;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

/* ========================================
   ALERT STİLLERİ - KURUMSAL TASARIM
   ======================================== */
.custom-alert-warning {
  border-left: 4px solid #ffc107 !important;
}

.custom-alert-primary {
  border-left: 4px solid #a3174a !important;
}

/* KDV Bilgisi Alert - Kurumsal Tasarım */
.alert.alert-info {
  background: #ffffff !important;
  border: 2px solid #a3174a !important;
  border-radius: 0 !important;
  color: #333333 !important;
  box-shadow: 0 2px 8px rgba(161, 23, 74, 0.1);
}

.alert.alert-info .fa-info-circle {
  color: #a3174a !important;
}

.alert.alert-info:hover {
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.15);
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .paket-radio {
    min-width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
  }
  
  .fiyat-table {
    font-size: 0.9rem;
  }
  
  .fiyat-table th,
  .fiyat-table td {
    padding: 0.75rem 0.5rem;
  }
  
  .ozellik-modal-content {
    width: 95%;
    padding: 1.5rem;
  }
}

/* ========================================
   ÖDEME PERİYODU BUTONLARI - SEÇİLİ DURUM
   ======================================== */
.btn-group .btn {
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.btn-group .btn.btn-white.fw-semibold.shadow-sm.border-0 {
  background: linear-gradient(135deg, #a3174a, #c41e3a) !important;
  color: white !important;
  border-color: #a3174a !important;
  box-shadow: 0 4px 15px rgba(161, 23, 74, 0.3) !important;
  transform: translateY(-1px);
}

.btn-group .btn.btn-white.fw-semibold.shadow-sm.border-0:hover {
  background: linear-gradient(135deg, #c41e3a, #a3174a) !important;
  color: white !important;
  border-color: #c41e3a !important;
  box-shadow: 0 6px 20px rgba(161, 23, 74, 0.4) !important;
  transform: translateY(-2px);
}

.btn-group .btn.btn-outline-white {
  background-color: white !important;
  color: #a3174a !important;
  border-color: #e0e0e0 !important;
}

.btn-group .btn.btn-outline-white:hover {
  background-color: #f8f9fa !important;
  color: #a3174a !important;
  border-color: #a3174a !important;
}

/* ========================================
   PROFİL AYARLAR TAB MENÜ STİLLERİ
   ======================================== */
.modern-tab-navigation {
  background: #ffffff;
  border-radius: 0;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

/* Profil Ayarları: Tab menüsü ile içerik arasındaki boşluğu kaldır */
.profil-ayarlar-page .modern-tab-navigation {
  margin-bottom: 0;
}

.profil-ayarlar-page .modern-tab-content {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Restoran Ayarları: Tab menüsü ile içerik arasındaki boşluğu kaldır */
.restoran-ayarlar-page .modern-tab-navigation {
  margin-bottom: 0;
}

.restoran-ayarlar-page .modern-tab-content {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Sipariş İşlemleri: Tab menüsü ile içerik arasındaki boşluğu kaldır */
.siparis-islemleri-fullscreen .modern-tab-navigation {
  margin-bottom: 0;
}

/* Restoran Ayarları: Güncelle butonunu tab navigasyonunun alt-sağına sabitle */
.restoran-ayarlar-page .modern-tab-navigation {
  position: relative;
}

.restoran-ayarlar-page .modern-tab-navigation .modern-tab-bar-actions {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 12px 16px;
}

.modern-tab-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1rem;
}

.modern-tab-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border-bottom: 1px solid #e9ecef;
  overflow: visible;
}

.modern-tab-item {
  flex: 1;
  min-width: 140px;
  max-width: none;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #6c757d;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
  white-space: nowrap;
}

.modern-tab-item:hover {
  background: #f8f9fa;
  color: #a3174a;
  border-bottom-color: #a3174a;
}

.modern-tab-item.modern-tab-active {
  background: #ffffff;
  color: #a3174a;
  border-bottom-color: #a3174a;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(161, 23, 74, 0.1);
}

.modern-tab-item i {
  font-size: 1rem;
  transition: all 0.3s ease;
}

.modern-tab-item:hover i,
.modern-tab-item.modern-tab-active i {
  color: #a3174a;
  transform: scale(1.1);
}

.modern-tab-content {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;
}

.modern-tab-panel {
  padding: 2rem;
}

/* ========================================
   PROFİL AYARLAR KART STİLLERİ
   ======================================== */
.modern-card {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e9ecef;

}

.modern-card-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}

.modern-card-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modern-card-title i {
  font-size: 1.5rem;
  color: #a3174a;
}

.modern-card-title h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}

.modern-card-title p {
  margin: 0.25rem 0 0 0;
  color: #6c757d;
  font-size: 0.9rem;
}

.modern-card-body {
  padding: 2rem;
}

.modern-card-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
  display: flex;
  justify-content: flex-end;
}

.modern-card-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ========================================
   PROFİL AYARLAR FORM STİLLERİ
   ======================================== */
.modern-profile-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
}

.modern-profile-photo-section {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 0;
  border: 1px solid #e9ecef;
}

.modern-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 1rem;
}

.modern-photo-upload-area {
  margin-bottom: 1rem;
}

.modern-photo-info {
  margin-top: 1rem;
}

.modern-info-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modern-info-badge {
  background: #e9ecef;
  color: #6c757d;
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.modern-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.modern-form-group {
  margin-bottom: 1.5rem;
}

.modern-form-group.modern-form-full-width {
  grid-column: 1 / -1;
}

.modern-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

.modern-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.modern-input-icon {
  position: absolute;
  left: 1rem;
  color: #6c757d;
  font-size: 1rem;
  z-index: 2;
}

.modern-form-control {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid #e9ecef;
  border-radius: 0;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  background: #ffffff;
}

.modern-form-control:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(161, 23, 74, 0.1);
}

.modern-input-disabled .modern-form-control {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.modern-form-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: #6c757d;
}

.modern-form-actions {
  margin: 0.75rem 0 0.5rem 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.modern-form-actions .modern-btn {
  min-width: 120px;
}

/* Modal form action alignment */
.modern-button-group {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.modern-form-group.mb-0 {
  margin-bottom: 0;
}

.modern-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

/* ========================================
   BİLDİRİM AYARLARI STİLLERİ
   ======================================== */
.modern-notification-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
}

.modern-notification-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  background: #f8f9fa;
  border-radius: 0;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: default;
}

.modern-notification-item:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  border-color: #a3174a;
}

.modern-notification-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.modern-notification-info i {
  font-size: 1.25rem;
  color: #a3174a;
  width: 2rem;
  text-align: center;
}

.modern-notification-info h4 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.modern-notification-info p {
  margin: 0;
  font-size: 0.85rem;
  color: #6c757d;
}

.modern-notification-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modern-notification-actions .modern-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: grab;
  color: #6c757d;
  transition: all 0.3s ease;
  border-radius: 0;
}

.modern-notification-actions .modern-drag-handle:hover {
  background: rgba(163, 23, 74, 0.1);
  color: #a3174a;
}

.modern-notification-actions .modern-drag-handle:active {
  cursor: grabbing;
  background: rgba(163, 23, 74, 0.2);
}

.modern-notification-actions .modern-drag-handle i {
  font-size: 14px;
  pointer-events: none;
}

/* ========================================
   UYGULAMALAR > UYGULAMA DETAY STİLLERİ
   ======================================== */
.modern-app-info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e9ecef;
}

.modern-app-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  background: #f8f9fa;
  border: 2px solid #a3174a;
  border-radius: 0;
  color: #a3174a;
  font-size: 42px;
}

.modern-app-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.modern-app-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modern-status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  padding: 10px 12px;
}

.modern-status-label {
  font-size: 0.9rem;
  color: #6c757d;
}

.modern-status-value {
  font-weight: 600;
  color: #333;
}

.modern-status-value.modern-status-warning {
  color: #f59e0b;
}

.modern-params-section {
  margin-top: 16px;
}

.modern-params-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modern-param-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
}

.modern-param-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-param-icon {
  color: #a3174a;
}

.modern-param-text {
  color: #333;
  font-size: 0.95rem;
}

.modern-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  padding: 12px;
  margin: 12px 0;
}

.modern-info-icon {
  color: #a3174a;
  font-size: 18px;
}

.modern-info-content {
  color: #333;
  font-size: 0.95rem;
}

/* Geri butonu */
.modern-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 2px solid #a3174a;
  background: transparent;
  color: #a3174a;
  border-radius: 0;
  font-weight: 500;
}

.modern-back-btn:hover {
  background: #a3174a;
  color: #ffffff;
}

/* Uyarı kutusu kurumsal revizyonu */
.modern-alert-warning {
  background: #fff7fa !important;
  border-color: #a3174a !important;
  border-left: 4px solid #a3174a !important;
}

.modern-alert-close {
  background: transparent;
  border: none;
  color: #6c757d;
}

.modern-alert-close:hover {
  color: #a3174a;
}

/* Özel parametre kartı için stiller */
.modern-notification-special {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2px solid #a3174a;
}

.modern-notification-special:hover {
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-color: #c41e3a;
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.15);
}

.modern-kasa-fis-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.modern-kasa-fis-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modern-kasa-fis-option:hover {
  background: #f8f9fa;
  border-color: #a3174a;
  transform: translateY(-1px);
}

.modern-kasa-fis-option span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
}

/* ========================================
   HEADER RESPONSIVE DÜZENLEMELERİ
   ======================================== */
/* Header'ın küçük ekranlarda düzgün davranması için */
@media (max-width: 991px) {
  .main-header {
    max-height: none !important;
    min-height: auto !important;
    height: auto !important;
  }
  
  .main-header .navbar {
    min-height: auto !important;
    flex-wrap: wrap;
  }
  
  .main-header .navbar-custom-menu {
    flex-wrap: wrap;
  }
  
  .main-header .navbar .nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 767px) {
  .main-header {
    margin-right: 0 !important;
  }
  
  .main-header .logo-box {
    width: auto !important;
  }
  
  .main-header .navbar {
    margin-left: 0 !important;
    padding: 0.5rem !important;
  }
  
  .content-wrapper {
    margin-top: 0 !important;
    padding-top: 1rem;
  }
}

/* ========================================
   SWITCH TOGGLE STİLLERİ
   ======================================== */
.modern-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.modern-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.modern-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.modern-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.modern-switch input:checked + .modern-slider {
  background-color: #a3174a;
}

.modern-switch input:checked + .modern-slider:before {
  transform: translateX(26px);
}

/* ========================================
   BUTTON STİLLERİ
   ======================================== */
.modern-btn {
  padding: 0.75rem 1.5rem;

  border-radius: 0;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.modern-btn-primary {
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  color: white;
  box-shadow: 0 2px 8px rgba(161, 23, 74, 0.2);
}

.modern-btn-primary:hover {
  background: linear-gradient(135deg, #c41e3a, #a3174a);
  box-shadow: 0 4px 12px rgba(161, 23, 74, 0.3);
  transform: translateY(-1px);
}

.modern-btn-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Buton varyantları */
.modern-btn-outline-brand {
  background: transparent;
  border: 2px solid #a3174a;
  color: #a3174a;
}

.modern-btn-outline-brand:hover {
  background: #a3174a;
  color: #fff;
}

.modern-btn-sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

/* ========================================
   RESTORAN AYARLAR ÖZEL STİLLERİ
   ======================================== */
/* ========================================
   KURUMSAL SÜRÜKLE BIRAK STİLLERİ
   ======================================== */

/* Sürükleme Handle'ı - Kurumsal Tasarım */
.modern-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  cursor: grab;
  transition: all 0.2s ease;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
}

.modern-drag-handle:hover {
  background: #a3174a;
  border-color: #a3174a;
  color: white;
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3);
}

.modern-drag-handle:active {
  cursor: grabbing;
  background: #8a1340;
  transform: scale(0.9);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.4);
}

.modern-drag-handle i {
  font-size: 14px;
  color: #6c757d;
  transition: color 0.2s ease;
  font-weight: bold;
}

.modern-drag-handle:hover i {
  color: white;
}

/* Handle'a tooltip benzeri gösterge */
.modern-drag-handle::after {
  content: "Sürükle";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: white;
  padding: 3px 5px;

  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 99000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.modern-drag-handle:hover::after {
  opacity: 1;
}

/* Responsive tooltip pozisyonları */
@media (max-width: 768px) {
  .modern-drag-handle::after {
    top: -35px;
    font-size: 10px;
    padding: 4px 8px;
  }
}

@media (max-width: 576px) {
  .modern-drag-handle::after {
    top: -30px;
    font-size: 9px;
    padding: 3px 6px;
  }
}

/* Sürüklenen Öğe (Ghost) */
.modern-drag-ghost {
  opacity: 0.4;
  background: #ffffff;
  border: 3px solid #a3174a !important;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(163, 23, 74, 0.25);
  transform: rotate(3deg) scale(0.95);
  transition: all 0.15s ease;
}

/* Seçili Öğe (Chosen) */
.modern-drag-chosen {
  background: #ffffff;
  border: 3px solid #a3174a !important;
  border-radius: 8px;
  box-shadow: 0 12px 35px rgba(163, 23, 74, 0.3);
  transform: scale(1.05) rotate(2deg);
  z-index: 1000;
  transition: all 0.15s ease;
}

/* Sürüklenen Öğe (Dragging) */
.modern-drag-dragging {
  opacity: 0.9;
  background: #ffffff;
  border: 3px solid #a3174a !important;
  border-radius: 8px;
  box-shadow: 0 15px 40px rgba(163, 23, 74, 0.4);
  transform: scale(1.1) rotate(3deg);
  z-index: 1001;
  transition: all 0.15s ease;
  cursor: grabbing !important;
}

/* Hedef Pozisyon Gösterimi */
.modern-urunler-container .sortable-ghost,
.modern-kategoriler-container .sortable-ghost {
  background: linear-gradient(135deg, rgba(163, 23, 74, 0.1), rgba(163, 23, 74, 0.05));
  border: 2px dashed #a3174a;
  border-radius: 8px;
  margin: 8px 0;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s ease;
}

.modern-urunler-container .sortable-ghost::before,
.modern-kategoriler-container .sortable-ghost::before {
  content: "📦 Buraya Bırakın";
  background: #a3174a;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3);
  z-index: 1002;
  white-space: nowrap;
}

/* Sürükleme Sırasında Container Efektleri */
.modern-urunler-container.sortable-chosen,
.modern-kategoriler-container.sortable-chosen {
  background: rgba(163, 23, 74, 0.02);
  border-radius: 12px;
  padding: 12px;
  transition: all 0.3s ease;
}

/* Ürün ve Kategori Kartları */
.modern-urun-card,
.modern-kategori-item {
  transition: all 0.15s ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Hover animasyonları kaldırıldı - sadece handle'dan sürükleme */

/* Sürükleme Sırasında Body Efektleri */
body.dragging-active {
  cursor: grabbing !important;
  user-select: none;
}

body.dragging-active * {
  cursor: grabbing !important;
}

body.dragging-active .modern-drag-handle {
  cursor: grabbing !important;
}

/* Sürükleme Sırasında Butonlar */
body.dragging-active .modern-action-btn {
  pointer-events: none;
  opacity: 0.5;
  transform: scale(0.95);
}

/* Sürükleme Sırasında Dropdown'lar */
body.dragging-active .modern-dropdown-menu {
  display: none !important;
}

/* Dropdown katman düzeltmeleri - kategori menüsü her zaman üstte görünmeli */
/* Türkçe açıklama: Kategori yanındaki menü (kopyala/düzenle) açıldığında
   alttaki kategorilerin altında kalmaması için z-index ve overflow düzenlendi. */
#Kategoriler .modern-dropdown-menu,
.modern-kategoriler-listesi .modern-dropdown-menu,
.modern-kategoriler-alani .modern-dropdown-menu,
.modern-kategori-item .modern-dropdown-menu,
.modern-kategori-actions .modern-dropdown-menu {
  z-index: 999999999 !important;
  position: absolute !important;
}

/* Türkçe açıklama: Kategori alanlarının taşma durumunda dropdown'ı kesmemesi için */
.modern-kategoriler-alani {
  overflow: visible;
}

/* Türkçe açıklama: Sol kategori ve sağ ürün alanlarında scroll düzgün çalışsın */
#Kategoriler,
.modern-kategoriler-listesi {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Türkçe açıklama: slimScroll plugin'i eklediği kapsayıcıda overflow: hidden veriyor.
   Bu nedenle kategori dropdown'ı kesiliyordu; görünür yapıyoruz. */
.slimScrollDiv {
  overflow: visible !important;
}

/* Türkçe açıklama: Sol taraftaki kategori kartının overflow'u dropdown'ı kesiyordu */
.modern-kategoriler-alani .modern-card {
  overflow: visible !important;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Türkçe açıklama: Ürün kartı alanı da tam yükseklik ve esnek yapıda olsun */
.modern-urunler-alani .modern-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Türkçe açıklama: Kart gövdeleri içerikleri taşımak için esnek yapı ve min-height:0 ile scroll'a izin ver */
.modern-kategoriler-alani .modern-card-body,
.modern-urunler-alani .modern-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Türkçe açıklama: Listeler ve grid'ler alt kısımda kırpılmasın diye min-height:0 ve alt boşluk eklendi */
.modern-kategoriler-listesi,
.modern-urunler-grid {
  min-height: 0;
  padding-bottom: 12px;
}

/* Türkçe açıklama: Kategori item'ı üst katmanda dursun ki menü üstte görünsün */
.modern-kategoriler-alani .modern-kategori-item {
  position: relative;
  z-index: 999999998;
}

/* Türkçe açıklama: Dropdown açık olan kategori item'ı en üstte olsun */
.modern-kategoriler-alani .modern-kategori-item:has(.modern-dropdown-menu.show) {
  z-index: 999999999;
}

/* Türkçe açıklama: Kategori listesinin kendisi de üst katmanda olsun */
.modern-kategoriler-listesi {
  position: relative;
  z-index: 999999997;
}

/* Türkçe açıklama: Dropdown container'ları */
.modern-kategori-actions .modern-dropdown {
  position: relative;
  z-index: 999999998;
}

/* Türkçe açıklama: En spesifik dropdown z-index ayarı */
.modern-kategoriler-alani .modern-kategori-item .modern-kategori-actions .modern-dropdown .modern-dropdown-menu {
  z-index: 999999999 !important;
  position: absolute !important;
  background: #ffffff !important;
  border: 1px solid #e1e5e9 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

/* Kategori Başlık Container'ı */
.modern-urun-baslik-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px;
  border-radius: 6px;
  width: 100%;
}

/* Hover efektleri kaldırıldı - sadece handle'dan sürükleme */

/* Responsive Tasarım */
@media (max-width: 768px) {
  .modern-drag-handle {
    width: 24px;
    height: 24px;
  }
  
  .modern-drag-handle i {
    font-size: 12px;
  }
  
  .modern-urunler-container .sortable-ghost::before,
  .modern-kategoriler-container .sortable-ghost::before {
    font-size: 11px;
    padding: 6px 12px;
  }
  
  .modern-drag-dragging {
    transform: scale(1.05) rotate(2deg);
  }
}

/* ========================================
   PARAMETRE STİLLERİ
   ======================================== */
.modern-parametre-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modern-parametre-item {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modern-parametre-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  border-color: #a3174a;
}

.modern-parametre-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  gap: 1rem;
}

.modern-parametre-info {
  flex: 1;
}

.modern-parametre-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.modern-parametre-info p {
  margin: 0;
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.4;
}

.modern-parametre-special {
  background: #f8f9fa;
}

.modern-kasa-fis-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.modern-kasa-fis-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: #ffffff;
  border-radius: 0;
}

.modern-kasa-fis-option span {
  font-size: 0.9rem;
  color: #333;
  font-weight: 500;
}

/* ========================================
   DÖVİZ AYARLARI STİLLERİ
   ======================================== */
.modern-doviz-settings {
  margin-bottom: 2rem;
}

.modern-doviz-setting-item {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.modern-doviz-setting-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-doviz-setting-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  gap: 1rem;
}

.modern-doviz-setting-info {
  flex: 1;
}

.modern-doviz-setting-info h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.modern-doviz-setting-info p {
  margin: 0;
  font-size: 0.9rem;
  color: #6c757d;
  line-height: 1.4;
}

.modern-doviz-setting-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.modern-doviz-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.modern-doviz-table-wrapper {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0;
  overflow: hidden;
}

.modern-doviz-table {
  width: 100%;
  border-collapse: collapse;
}

.modern-doviz-table th {
  background: #f8f9fa;
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e9ecef;
}

.modern-doviz-table td {
  padding: 1rem;
  border-bottom: 1px solid #e9ecef;
  vertical-align: middle;
}

.modern-doviz-table tr:hover {
  background: #f8f9fa;
}

.modern-doviz-name {
  min-width: 200px;
}

.modern-doviz-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.modern-doviz-title {
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.modern-doviz-code {
  font-size: 0.8rem;
  color: #6c757d;
}

.modern-doviz-rate {
  max-width: 150px;
}

/* ========================================
   COLOR PICKER STİLLERİ
   ======================================== */
.modern-color-picker-wrapper {
  display: flex;
  align-items: center;
}

.modern-color-picker-container {
  position: relative;
  display: inline-block;
}

.modern-color-picker {
  width: 100px;
  height: 70px;
  border: 2px solid #e9ecef;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
}

.modern-color-picker:hover {
  border-color: #a3174a;
  transform: scale(1.05);
}

.modern-color-picker:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(161, 23, 74, 0.1);
}

.modern-color-picker-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 20px;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* ========================================
   EMPTY STATE STİLLERİ
   ======================================== */
.modern-empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: #6c757d;
}

.modern-empty-state i {
  font-size: 3rem;
  color: #a3174a;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.modern-empty-state p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/* ========================================
   RESPONSIVE TASARIM
   ======================================== */
@media (max-width: 768px) {
  .modern-tab-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .modern-tab-list::-webkit-scrollbar {
    display: none;
  }
  
  .modern-tab-item {
    min-width: 120px;
    flex-shrink: 0;
    justify-content: center;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
  }
  
  .modern-tab-list {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .modern-tab-list::-webkit-scrollbar {
    display: none;
  }
  
  .modern-tab-item {
    min-width: 100px;
    font-size: 0.8rem;
    padding: 0.5rem 0.5rem;
  }
  
  .modern-profile-layout {
    grid-template-columns: 1fr;
  }
  
  .modern-form-grid {
    grid-template-columns: 1fr;
  }
  
  .modern-notification-grid {
    grid-template-columns: 1fr;
  }
  
  .modern-card-body {
    padding: 1.5rem;
  }
  
  .modern-card-header,
  .modern-card-footer {
    padding: 1rem 1.5rem;
  }
  
  .modern-parametre-content,
  .modern-doviz-setting-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .modern-doviz-setting-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .modern-doviz-table {
    font-size: 0.9rem;
  }
  
  .modern-doviz-table th,
  .modern-doviz-table td {
    padding: 0.75rem 0.5rem;
  }
}

/* ========================================
   ANA SAYFA: Saatlik Sipariş Yoğunluğu (Heatmap)
   Kurumsal standart: tüm köşeler kare (radius: 0)
   ======================================== */
.box:has(.apexcharts-heatmap) {
  border-radius: 0 !important;
  transition: none !important;
  box-shadow: none !important;
  background: #ffffff !important;
  border: 1px solid #E0E0E0 !important;
}

.box:has(.apexcharts-heatmap) .box-header,
.box:has(.apexcharts-heatmap) .box-body,
.box:has(.apexcharts-heatmap) .apexcharts-heatmap {
  border-radius: 0 !important;
}

.box:has(.apexcharts-heatmap) .box-tools .badge {
  border-radius: 0 !important;
}

/* Hover'da hareketi kaldır (diğer kutularla aynı davranış) */
.box:has(.apexcharts-heatmap):hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ========================================
   ANA SAYFA: Kategori Bazlı Satışlar (Donut)
   Header ve hover davranışını heatmap ile aynı yap
   ======================================== */
.box:has(.apexcharts-donut) {
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  background: #ffffff !important;
  border: 1px solid #E0E0E0 !important;
}

.box:has(.apexcharts-donut):hover {
  transform: none !important;
  box-shadow: none !important;
}

.box:has(.apexcharts-heatmap) .box-header,
.box:has(.apexcharts-donut) .box-header {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-bottom: 1px solid #E0E0E0 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
}

.box:has(.apexcharts-donut) .box-body {
  background: #ffffff !important;
}

.box:has(.apexcharts-donut) .box-tools .badge,
.box:has(.apexcharts-heatmap) .box-tools .badge {
  border-radius: 0 !important;
}

/* ========================================
   SİPARİŞLER TABLO BUTONLARI - PASTEL KURUMSAL
   Sadece /Siparisler sayfasındaki #example1 tablosunu hedefler
   ======================================== */
#example1 .btn-group.btn-group-sm .btn {
  border-width: 2px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

/* Düzenle: Kurumsal accent renginin pastel tonu */
#example1 .btn-outline-primary {
  background: #ffffff !important;
  color: var(--accent-color, #a3174a) !important;
  border-color: var(--accent-color, #a3174a) !important;
}

#example1 .btn-outline-primary:hover,
#example1 .btn-outline-primary:focus {
  background: var(--accent-color, #a3174a) !important;
  color: #ffffff !important;
  border-color: var(--accent-color, #a3174a) !important;
}

/* Sil: Yumuşak (pastel) tehlike rengi, net aksiyon için kırmızı korunur */
#example1 .btn-outline-danger {
  background: #ffffff !important;
  color: #dc3545 !important;
  border-color: #dc3545 !important;
}

#example1 .btn-outline-danger:hover,
#example1 .btn-outline-danger:focus {
  background: #dc3545 !important;
  color: #ffffff !important;
  border-color: #dc3545 !important;
}

#example1 .btn i { opacity: 0.9; }
#example1 .btn:hover i { opacity: 1; }

/* ========================================
   GİRİŞ SAYFASI STİLLERİ
   ======================================== */

.login-container {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.left-section {
  flex: 1;
  position: relative;
  background: url('/assets/images/auth-bg/bg-1.jpg') center/cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  overflow: hidden;
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.testimonial-container {
  position: relative;
  z-index: 2;
  max-width: 600px;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

.testimonial-carousel {
  position: relative;
  height: 350px;
  overflow: hidden;
  width: 100%;
}

.testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%); /* Inactive slides are off-screen right */
  transition: all 0.4s ease-in-out;
}

.testimonial-slide.active {
  opacity: 1;
  transform: translateX(0); /* Active slide is in center */
  z-index: 2;
}

.testimonial-slide.sliding-out {
  transform: translateX(-100%); /* Slides going out move to the left */
  opacity: 0;
}

.testimonial-slide:not(.active) {
  z-index: 1;
}

.testimonial-box {

  padding: 2rem;


}

.quote-mark {
  font-size: 4rem;
  color: #a3174a;
  line-height: 1;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 1.3rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  font-style: italic;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.author-avatar {
  width: 50px;
  height: 50px;
  background: #a3174a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
}

.author-info {
  text-align: left;
}

.author-name {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.author-title {
  font-size: 0.9rem;
  opacity: 0.9;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.carousel-indicators-container {
  position: relative;
  z-index: 2;
  margin-top: 2rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

.carousel-indicators {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin: 0 3px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.indicator::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.indicator:hover::before {
  transform: translate(-50%, -50%) scale(1);
}

.indicator.active {
  background: linear-gradient(135deg, #a3174a, #c41e5a);
  border-color: #a3174a;
  transform: scale(1.4);
  box-shadow: 0 6px 16px rgba(163, 23, 74, 0.5);
}

.indicator.active::before {
  background: rgba(255, 255, 255, 0.95);
  transform: translate(-50%, -50%) scale(1);
}

.right-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: white;
}

.form-container {
  width: 100%;
  max-width: 450px;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.form-logo {
  height: 40px;
  width: auto;
}

.support-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.support-btn:hover {
  background: #e9ecef;
  color: #495057;
}

.form-content {
  text-align: center;
}

.welcome-title {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 0.5rem;
}

.welcome-subtitle {
  color: #6c757d;
  margin-bottom: 2rem;
}

.login-form {
  text-align: left;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #e9ecef;

  font-size: 1rem;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: #a3174a;
}

.password-input-wrapper {
  position: relative;
}

.password-toggle {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6c757d;
  cursor: pointer;
  padding: 0.25rem;
}

.password-toggle:hover {
  color: #a3174a;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.checkbox-input {
  display: none;
}

.checkbox-custom {
  width: 18px;
  height: 18px;
  border: 2px solid #dee2e6;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.checkbox-input:checked + .checkbox-custom {
  background: #a3174a;
  border-color: #a3174a;
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-label {
  font-size: 0.9rem;
  color: #6c757d;
}

.forgot-link {
  color: #a3174a;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.forgot-link:hover {
  color: #8a1340;
}

.login-button {
  width: 100%;
  padding: 1rem;
  background: #a3174a;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 2rem;
}

.login-button:hover:not(:disabled) {
  background: #8a1340;
}

.login-button:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.login-button.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.register-section {
  text-align: center;
  padding-top: 1rem;
  border-top: 1px solid #e9ecef;
}

.register-text {
  color: #6c757d;
  font-size: 0.9rem;
}

.register-link {
  color: #a3174a;
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.5rem;
  transition: color 0.3s ease;
}

.register-link:hover {
  color: #8a1340;
}

/* Responsive Tasarım */
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
  }
  
  /* Küçük ekranlarda önce form (sağ panel), sonra müşteri yorumları (sol panel) gelsin */
  .right-section {
    order: 1;
    padding: 1.5rem;
  }
  
  .left-section {
    order: 2;
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .form-container {
    max-width: 100%;
  }
  
  .welcome-title {
    font-size: 1.5rem;
  }
  
  .testimonial-container {
    padding: 1rem;
  }
  
  .testimonial-box {
    padding: 1.5rem;
  }
  
  .testimonial-text {
    font-size: 1rem;
  }
  
  .form-header {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .login-container {
    background: white;
  }
  
  /* Mobilde de form üstte, müşteri yorumları altta görünmeye devam etsin */
  .right-section {
    padding: 1rem;
  }
  
  .form-options {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
}

/* ========================================
   STEP INDICATOR (2 ADIMLI KAYIT)
   ======================================== */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  gap: 20px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 2px solid #e1e5e9;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: #a3174a;
  border-color: #a3174a;
  color: white;
}

.step.completed .step-number {
  background: #28a745;
  border-color: #28a745;
  color: white;
}

.step-text {
  font-size: 14px;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
}

.step.active .step-text {
  color: #a3174a;
  font-weight: 600;
}

.step.completed .step-text {
  color: #28a745;
  font-weight: 600;
}

.step-line {
  flex: 1;
  height: 2px;
  background: #e1e5e9;
  position: relative;
  max-width: 60px;
  transition: all 0.3s ease;
}

.step-line.active {
  background: #a3174a;
}

/* Responsive tasarım için */
@media (max-width: 480px) {
  .step-indicator {
    gap: 15px;
  }
  
  .step-number {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .step-text {
    font-size: 12px;
  }
  
  .step-line {
    max-width: 40px;
  }
}

/* ========================================
   ARKA PLAN DÜZELTMELERİ - ŞEFFAF SORUNU ÇÖZÜMÜ
   ======================================== */

/* Modern Card Arka Plan Düzeltmeleri */

.modern-card-header {
  background: #f8f9fa !important;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modern-card-body {
  padding: 20px;
  background: #ffffff !important;
}

/* Modern Modal Arka Plan Düzeltmeleri */
.modern-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 20px;
}

.modern-modal {
  background: #ffffff !important;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.modern-modal-lg {
  max-width: 900px;
}

.modern-modal-header {
  background: #f8f9fa !important;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modern-modal-title {
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-modal-close {
  background: none;
  border: none;
  color: #6c757d;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  transition: all 0.3s ease;
}

.modern-modal-close:hover {
  color: #dc3545;
}

.modern-modal-body {
  padding: 20px;
  background: #ffffff !important;
}

/* Modern Table Arka Plan Düzeltmeleri */
.modern-table-responsive {
  overflow-x: auto;
  background: #ffffff !important;
}

.modern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #ffffff !important;
}

.modern-table-header {
  background: #f8f9fa !important;
}

.modern-table-header th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e1e5e9;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #f8f9fa !important;
}

.modern-table-body {
  background: #ffffff !important;
}

.modern-table-body tr {
  border-bottom: 1px solid #f1f1f1;
  transition: all 0.3s ease;
  background: #ffffff !important;
}

.modern-table-body tr:hover {
  background: rgba(163, 23, 74, 0.05) !important;
}

.modern-table-body td {
  padding: 12px 16px;
  vertical-align: middle;
  background: #ffffff !important;
}

/* Dashboard Box Arka Plan Düzeltmeleri */
.box {
  background: #ffffff !important;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.box-body {

  background: #ffffff !important;
}

/* Modern Content Header Arka Plan Düzeltmeleri */
.modern-content-header {
  background: #ffffff !important;
  border: 1px solid #e1e5e9;
  border-radius: 0px;

  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-content {

  margin-top: 20px;
 
  border-radius: 0px;
}

/* Modern Form Arka Plan Düzeltmeleri */
.modern-form-section {
  margin-bottom: 24px;
  background: #ffffff !important;
  padding: 20px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
}

.modern-form-section-title {
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e1e5e9;
}

.modern-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.modern-form-col {
  flex: 1;
}

.modern-form-group {
  margin-bottom: 16px;
}

.modern-form-label {
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
  font-size: 13px;
  display: block;
}

.modern-form-control {
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 8px 12px;
  font-size: 13px;
  transition: all 0.3s ease;
  background: #ffffff !important;
  color: #333;
  width: 100%;
  padding-left: 34px;
}

.modern-form-control:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
  outline: none;
}

.modern-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #e1e5e9;
  background: #ffffff !important;
}

/* Modern Stats Grid Arka Plan Düzeltmeleri */
.modern-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.modern-stat-card {
  background: #ffffff !important;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.modern-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.modern-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  flex-shrink: 0;
}

.modern-stat-content {
  flex: 1;
}

.modern-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
  line-height: 1;
}

.modern-stat-label {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
  font-weight: 500;
}

/* Modern Empty State Arka Plan Düzeltmeleri */
.modern-empty-state {
  text-align: center;
  padding: 40px 20px;
  background: #ffffff !important;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
}

.modern-empty-icon {
  font-size: 48px;
  color: #6c757d;
  margin-bottom: 16px;
}

.modern-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.modern-empty-description {
  color: #6c757d;
  margin: 0;
  font-size: 14px;
}

/* Modern Alert Arka Plan Düzeltmeleri */
.modern-alert {
  padding: 16px 20px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.modern-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.modern-detail-item {
  background: #ffffff;
  border: 1px solid #e9ecef;
  padding: 12px;
}

.modern-detail-item-wide {
  grid-column: span 2;
}

.modern-detail-label {
  font-size: 12px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modern-detail-value {
  font-size: 1rem;
  color: #333;
  font-weight: 600;
}

.modern-chat-area {
  min-height: 300px;
  max-height: 400px;
  overflow-y: auto;
  background: #f8f9fa;
  padding: 16px;
}

.modern-chat-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 0;
  background: #e9ecef;
  margin-bottom: 4px;
  font-size: 1rem;
  word-break: break-word;
  border: 1px solid #e1e5e9;
}

.modern-chat-user {
  background: #ffffff;
  border-color: #e1e5e9;
  align-self: flex-start;
}

.modern-chat-support {
  background: #fff7fa;
  border-color: #a3174a;
  align-self: flex-end;
}

.modern-textarea {
  min-height: 90px;
  resize: vertical;
}

.modern-alert-info {
  background: #e3f2fd !important;
  border-color: #2196f3;
  color: #1976d2;
}

.modern-alert-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.modern-alert-content {
  flex: 1;
}

/* Modern Action Buttons Arka Plan Düzeltmeleri */
.modern-action-buttons {
  display: flex;
  gap: 4px;
}

.modern-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff !important;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.modern-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.modern-action-btn-primary:hover {
  background: #a3174a !important;
  color: #ffffff;
  border-color: #a3174a;
}

.modern-action-btn-secondary:hover {
  background: #17A351 !important;
  color: #ffffff;
  border-color: #17A351;
}

.modern-action-btn-danger:hover {
  background: #dc3545 !important;
  color: #ffffff;
  border-color: #dc3545;
}



.modern-badge-info {
  background: rgba(23, 163, 163, 0.1) !important;
  color: #17A3A3;
}

.modern-badge-success {
  background: rgba(23, 163, 81, 0.1) !important;
  color: #17A351;
}

.modern-badge-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545;
}

.modern-badge-primary {
  background: rgba(163, 23, 74, 0.1) !important;
  color: #a3174a;
}

/* ========================================
   BAYİ DASHBOARD STİLLERİ
   ======================================== */

/* Dashboard Icon Styles */
.bayi-dashboard-icon {
  width: 60px;
  height: 60px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.bayi-dashboard-iconh {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
}

/* Modern Charts Grid */
.bayi-modern-charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.bayi-modern-chart-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bayi-modern-chart-large {
  grid-column: 1;
}

.bayi-modern-chart-small {
  grid-column: 2;
}

/* Modern Bottom Cards */
.bayi-modern-bottom-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Modern Leaderboard */
.bayi-modern-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bayi-modern-leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  transition: all 0.3s ease;
}

.bayi-modern-leaderboard-item:hover {
  background: rgba(127, 176, 105, 0.05);
  border-color: rgba(127, 176, 105, 0.2);
}

.bayi-modern-leaderboard-rank {
  width: 32px;
  height: 32px;
  background: #7FB069;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bayi-modern-rank-number {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
}

.bayi-modern-leaderboard-info {
  flex: 1;
}

.bayi-modern-leaderboard-name {
  font-weight: 600;
  color: #333;
  margin: 0 0 2px 0;
  font-size: 14px;
}

.bayi-modern-leaderboard-detail {
  color: #6c757d;
  margin: 0;
  font-size: 12px;
}

.bayi-modern-leaderboard-status {
  flex-shrink: 0;
}

/* Modern Activity List */
.bayi-modern-activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bayi-modern-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  transition: all 0.3s ease;
}

.bayi-modern-activity-item:hover {
  background: rgba(127, 176, 105, 0.05);
  border-color: rgba(127, 176, 105, 0.2);
}

.bayi-modern-activity-icon {
  width: 32px;
  height: 32px;
  background: #7FB069;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  flex-shrink: 0;
}

.bayi-modern-activity-content {
  flex: 1;
}

.bayi-modern-activity-text {
  color: #333;
  margin: 0 0 4px 0;
  font-size: 14px;
}

.bayi-modern-activity-time {
  color: #6c757d;
  font-size: 12px;
}

/* Bayi Dashboard Responsive */
@media (max-width: 1200px) {
  .bayi-modern-charts-grid {
    grid-template-columns: 1fr;
  }
  
  .bayi-modern-chart-large,
  .bayi-modern-chart-small {
    grid-column: 1;
  }
}

@media (max-width: 768px) {
  .bayi-modern-bottom-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ========================================
   BAYİ LİSTESİ STİLLERİ
   ======================================== */

/* Modern Stats Grid */
.bayi-modern-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.bayi-modern-stat-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bayi-modern-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(127, 176, 105, 0.15);
  border-color: rgba(127, 176, 105, 0.2);
}

.bayi-modern-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #ffffff;
  flex-shrink: 0;
}

.bayi-modern-stat-primary {
  background: #7FB069;
}

.bayi-modern-stat-success {
  background: #A8D5BA;
}

.bayi-modern-stat-warning {
  background: #F4C2A1;
}

.bayi-modern-stat-info {
  background: #A8D8EA;
}

.bayi-modern-stat-content {
  flex: 1;
}

.bayi-modern-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px 0;
}

.bayi-modern-stat-label {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Modern Alert */
.bayi-modern-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  margin-bottom: 20px;
  background: #ffffff;
}

.bayi-modern-alert-info {
  border-left: 4px solid #A8D8EA;
  background: rgba(168, 216, 234, 0.05);
}

.bayi-modern-alert-icon {
  color: #A8D8EA;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bayi-modern-alert-content {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

/* Ana Bayi ve Alt Bayi Stilleri */
.bayi-ana-bayi-row {
  background: rgba(127, 176, 105, 0.02);
  border-left: 3px solid #7FB069;
}

.bayi-alt-bayi-row {
  background: rgba(168, 216, 234, 0.02);
  border-left: 3px solid #A8D8EA;
}

/* Modern Link */
.bayi-modern-link {
  color: #a3174a;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.bayi-modern-link:hover {
  color: #7FB069;
  text-decoration: underline;
}

/* Modern Bayi Info */
.bayi-modern-bayi-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bayi-alt-bayi {
  padding-left: 16px;
}

.bayi-alt-bayi-dot {
  width: 6px;
  height: 6px;
  background: #A8D8EA;
  border-radius: 0px;
  flex-shrink: 0;
}

/* Modern Bayi Stats */
.bayi-modern-bayi-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bayi-modern-stat-main {
  font-weight: 600;
  color: #333;
}

.bayi-modern-stat-sub {
  font-size: 11px;
  color: #7FB069;
  font-weight: 500;
}

/* Modern Badge */
.bayi-modern-badge-primary {
  background: rgba(127, 176, 105, 0.1);
  color: #7FB069;
}

.bayi-modern-badge-info {
  background: rgba(168, 216, 234, 0.1);
  color: #A8D8EA;
}

.bayi-modern-badge-success {
  background: rgba(168, 213, 186, 0.1);
  color: #A8D5BA;
}

.bayi-modern-badge-warning {
  background: rgba(244, 194, 161, 0.1);
  color: #F4C2A1;
}

.bayi-modern-badge-secondary {
  background: rgba(108, 117, 125, 0.1);
  color: #6c757d;
}

/* Modern Action Buttons */
.bayi-modern-action-buttons {
  display: flex;
  gap: 4px;
}

.bayi-modern-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.bayi-modern-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #7FB069;
  color: #ffffff;
  border-color: #7FB069;
}

.bayi-modern-action-btn-danger:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

/* Modern Buton Tasarımları */
.bayi-modern-btn {
  padding: 8px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  height: 36px;
  background: #ffffff;
  color: #a3174a;
}

.bayi-modern-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(127, 176, 105, 0.3);
}

.bayi-modern-btn-primary {
  background: #ffffff;
  color: #a3174a;
  border: 1px solid #e1e5e9;
}



/* Alt Bayi Row Styling */
.bayi-alt-bayi-row {
  background: rgba(127, 176, 105, 0.02);
}

.bayi-alt-bayi-row:hover {
  background: rgba(127, 176, 105, 0.08);
}

/* Bayi Listesi Responsive */
@media (max-width: 1200px) {
  .bayi-modern-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .bayi-modern-stats-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .bayi-modern-stat-card {
    padding: 16px;
  }
  
  .bayi-modern-stat-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .bayi-modern-stat-number {
    font-size: 1.5rem;
  }
  
  .bayi-modern-action-buttons {
    flex-direction: column;
    gap: 2px;
  }
  
  .bayi-modern-action-btn {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }
  
  .bayi-modern-btn {
    width: 100%;
    min-width: 0;
  }
}

/* Ürün üst satırı: Şef solda, Ekran sağda */
.modern-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.modern-item-chef {
  color: #6c757d;
  font-size: 12px;
}

.modern-item-ekran-tag {
  display: flex;
  justify-content: flex-end;
}

.modern-badge-ekran {
  background: #6d6868;
  color: #ffffff;
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid #303030;
}


.swal2-popup{
  z-index: 999999 !important;
}

/* ========================================
   MENU URUN EKLE SAYFASI STİLLERİ
   ======================================== */

/* Color Picker Stilleri */
.color-preview {
  width: 50px;
  height: 50px;
  border: 3px solid #e1e5e9;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.color-preview:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.2);
  transform: translateY(-1px);
}

.color-preview i {
  font-size: 22px;
  color: #333;
  transition: color 0.3s ease;
}

.color-preview:hover i {
  color: #a3174a;
}

.color-input {
  width: 80px !important;
  height: 50px;
  border: 2px solid #e1e5e9;
  border-radius: 0;
  cursor: pointer;
  background: none;
  padding: 0;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-input:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 8px rgba(163, 23, 74, 0.15);
  transform: translateY(-1px);
}

.color-input:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

/* Ürün rengi seçme alanı container */
.urun-renk-container {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e1e5e9;
  border-radius: 0;
  margin-bottom: 20px;
}

.urun-renk-container:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.1);
}

.urun-renk-label {
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
  min-width: 120px;
}

/* Section Divider */
.section-divider {
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e1e5e9;
}

.section-title {
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Checkbox Group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================
   ÜRÜN KARTI SAYFASI RESPONSIVE TASARIMI
   (Desktop tasarımı koruyarak mobil iyileştirme)
   ======================================== */

/* Genel kart aralıkları - sadece ürün kartı sayfasında */
.urun-karti-page .card {
  margin-bottom: 16px;
}

@media (max-width: 992px) {
  /* İç container paddinglerini mobilde biraz daralt */
  .urun-karti-page .modern-content .container-fluid {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 768px) {
  /* Başlık ve alt başlıkları mobilde biraz küçült */
  .urun-karti-page .modern-page-title {
    font-size: 1.15rem;
  }

  .urun-karti-page .modern-page-subtitle {
    font-size: 0.9rem;
  }

  /* Bölüm ayraçları arasında daha kompakt boşluklar */
  .urun-karti-page .section-divider {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  /* Porsiyon ve stok alanlarının kart içindeki nefes almasını artır */
  .urun-karti-page .porsiyon-item {
    margin-bottom: 10px;
  }

  /* Şube bazlı stok grid'i zaten tek kolona düşüyor, iç padding'i biraz azalt */
  .urun-karti-page .stok-grid .stok-item {
    padding: 6px 4px;
  }

  /* Mobilde form kontrolleri arasında dikey boşluğu hafif azalt */
  .urun-karti-page .form-group {
    margin-bottom: 12px;
  }
}

@media (max-width: 576px) {
  /* En dar ekranlarda başlığı biraz daha küçült */
  .urun-karti-page .modern-page-title {
    font-size: 1.05rem;
  }

  .urun-karti-page .modern-page-subtitle {
    font-size: 0.85rem;
  }

  /* Kart içi paddingleri sıkıştır */
  .urun-karti-page .card-body {
    padding: 12px;
  }
}

.checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
}

.checkbox-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #a3174a;
}

.checkbox-item input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.checkbox-item label {
  font-size: 13px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  margin: 0;
}

.checkbox-item .form-text {
  margin-left: 24px;
  margin-top: 4px;
}

/* Form Control Stilleri - Tüm input ve select alanları için tutarlı tasarım */
.form-control {
  height: 42px;

  border: 1px solid #e1e5e9;
  border-radius: 0;
  transition: all 0.3s ease;
  font-weight: 500;
  color: #333;
  background-color: #ffffff;

  padding: 12px 12px;
  font-size: 14px;
  line-height: 1.5;
}




.form-control:disabled {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Select Box Stilleri - Daha belirgin ve şık görünüm */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
  padding-right: 40px;
  cursor: pointer;
}

/* Select box için özel placeholder stili */
select.form-control option[value=""] {
  color: #6c757d;
  font-style: italic;
}

select.form-control option {
  padding: 8px 12px;
  font-weight: 500;
  color: #333;
  background-color: #ffffff;
}

select.form-control option:hover {
  background-color: #a3174a;
  color: #ffffff;
}

/* Number input'lar için özel stil */
input[type="number"].form-control {
  -moz-appearance: textfield;
}

input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Placeholder stilleri */
.form-control::placeholder {
  color: #6c757d;
  opacity: 0.7;
  font-style: italic;
}

/* Info Box */
.info-box {
  padding: 12px;
  background: rgba(163, 23, 74, 0.05);
  border-left: 4px solid #a3174a;
  border-radius: 0;
  margin-bottom: 15px;
}

.info-box p {
  margin: 0;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
}

.info-box p strong {
  color: #a3174a;
  font-weight: 600;
}

/* Porsiyon Item - Kompakt tasarım */
.porsiyon-item {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  padding: 12px;
  margin-bottom: 8px;
  position: relative;
}

.porsiyon-item:last-child {
  margin-bottom: 0;
}

/* Porsiyon başlık alanı */
.porsiyon-header {
  width: 100%;
}

.porsiyon-basic-info {
  width: 100%;
}

.porsiyon-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.porsiyon-col {
  flex: 1;
  min-width: 120px;
}

.porsiyon-label {
  font-size: 12px;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
  display: block;
}

.porsiyon-col .form-control-sm {
  height: 32px;
  font-size: 13px;
  padding: 6px 10px;
}

/* Porsiyon kontrolleri */
.porsiyon-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.porsiyon-controls .btn {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 0;
  transition: all 0.2s ease;
}

.porsiyon-controls .btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
  background: transparent;
}

.porsiyon-controls .btn-outline-secondary:hover {
  background: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

/* Porsiyon dropdown menü */
.porsiyon-controls .dropdown-menu {
  border-radius: 0;
  border: 1px solid #e1e5e9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.porsiyon-controls .dropdown-item {
  font-size: 12px;
  padding: 8px 12px;
  color: #495057;
}

.porsiyon-controls .dropdown-item:hover {
  background: #f8f9fa;
  color: #a3174a;
}

.porsiyon-controls .dropdown-item.text-danger:hover {
  background: #dc3545;
  color: #fff;
}

/* Varsayılan porsiyon seçici */
.porsiyon-controls .form-check {
  margin: 0;
  padding-left: 0;
}

.porsiyon-controls .form-check-input {
  margin-right: 6px;
  border-radius: 0;
  border: 1px solid #d9d9d9;
}

.porsiyon-controls .form-check-input:checked {
  background-color: #a3174a;
  border-color: #a3174a;
}

.porsiyon-controls .form-check-label {
  font-size: 12px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.porsiyon-controls .form-check-label i {
  color: #a3174a;
  font-size: 11px;
}

/* Varsayılan porsiyon seçici - kompakt ve hizalı görünüm */
.porsiyon-default {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.porsiyon-default input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: #a3174a;
}

.porsiyon-default label {
  margin: 0;
  font-size: 12px;
  color: #333;
}

/* Button Placeholder */
.btn-placeholder {
  width: 36px;
  height: 36px;
}

/* Sub Section */
.sub-section {
  margin-left: 20px;
  margin-top: 6px;
}

/* Stok Takibi Stilleri */
.stok-subeler {
  margin-top: 12px;
}

.subtitle {
  font-size: 0.8rem;
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e1e5e9;
}

.stok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.stok-item {
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stok-sube-info {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #495057;
}

.stok-sube-name {
  margin-left: 3px;
}

.stok-input {
  flex: 1;
}

.stok-input .form-control {
  width: 100%;
  font-size: 0.8rem;
  padding: 4px 6px;
  height: 28px;
}

.stok-input .form-control:disabled {
  background-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.stok-item.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.stok-item.disabled .stok-sube-info {
  color: #6c757d;
}

/* Responsive Stok Grid */
@media (max-width: 768px) {
  .stok-grid {
    grid-template-columns: 1fr;
  }
  
  .stok-item {
    padding: 6px;
  }
}

/* Genel kompakt ayarlar */
.card-body {
  padding: 15px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
  height: 28px;
}

/* Gap Utility */
.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

/* ========================================
   MODERN LOADING OVERLAY STİLLERİ
   ======================================== */
.modern-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1000000010 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modern-loading-content {
  background: transparent;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
  max-width: none;
  width: auto;
  border: none;
}

.modern-loading-spinner {
  margin: 0;
}

.modern-loading-spinner i {
  font-size: 48px;
  color: #ffffff;
  animation: spin 1s linear infinite;
}

.modern-loading-text {
  margin-top: 20px;
  color: #ffffff;
}

.modern-loading-text h5 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #ffffff;
}

.modern-loading-text p {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

/* Loading blur efekti */
.loading-blur {
  filter: blur(2px);
  pointer-events: none;
  transition: filter 0.3s ease;
}

/* Spinner animasyonu */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive loading */
@media (max-width: 480px) {
  .modern-loading-content {
    padding: 30px 20px;
    margin: 20px;
  }
  
  .modern-loading-spinner i {
    font-size: 36px;
  }
  
  .modern-loading-text h5 {
    font-size: 16px;
  }
  
  .modern-loading-text p {
    font-size: 13px;
  }
}

/* ========================================
   MENU URUNLER SAYFASI MODERN STİLLERİ
   ======================================== */

/* Modern Content Area */
.modern-content-area {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  height: calc(100vh - 200px);
  min-height: 600px;
}

/* Modern Kategoriler Alanı */
.modern-kategoriler-alani {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modern Kategoriler Listesi */
.modern-kategoriler-listesi {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #ffffff;
}

/* Modern Kategori Item */
.modern-kategori-item {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.modern-kategori-item:hover {
  border-color: #a3174a;
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.15);
  transform: translateY(-1px);
}

.modern-kategori-item.modern-kategori-aktif {
  background: rgba(163, 23, 74, 0.05);
  border-color: #a3174a;
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.2);
}

/* Modern Drag Handle */
.modern-drag-handle {
  width: 28px;
  height: 28px;
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.modern-drag-handle:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.modern-drag-handle i {
  font-size: 12px;
  color: #6c757d;
  transition: color 0.3s ease;
}

.modern-drag-handle:hover i {
  color: #ffffff;
}

/* Modern Kategori Content */
.modern-kategori-content {
  flex: 1;
  min-width: 0;
}

.modern-kategori-baslik {
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
  font-size: 14px;
  line-height: 1.3;
}

.modern-kategori-aciklama {
  color: #6c757d;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

/* Modern Kategori Actions */
.modern-kategori-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Modern Action Button */
.modern-action-btn {
  width: 32px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #6c757d;
  font-size: 12px;
}

.modern-action-btn:hover {
  background: #a3174a;
  color: #303030;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

/* Modern Ürünler Alanı */
.modern-urunler-alani {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Modern Ürünler Grid */
.modern-urunler-grid {
  flex: 1;
  overflow-y: auto;

  background: #ffffff;
}

/* Modern Ürünler Container */
.modern-urunler-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 8px;
}

/* Mobil ekranlarda 1 kolon */
@media (max-width: 575px) {
  .modern-urunler-container {
    grid-template-columns: 1fr;
  }
}

/* Tablet ve orta boy ekranlarda 2 kolon */
@media (min-width: 576px) and (max-width: 1399px) {
  .modern-urunler-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Çok geniş ekranlarda 3 sütun */
@media (min-width: 1400px) {
  .modern-urunler-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Modern Ürün Card */
.modern-urun-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  /* Ürün kartı içinde footer'ı alta sabitlemek için kartı esnek yap */
  display: flex;
  height: 100%;
}

/* Modern Ürün Content - Badge konumlandırması için */
.modern-urun-content {
  position: relative;
  width: 100%;
  height: 100%;
  /* İçeriği dikeyde esnek düzenle, footer en alta yapışsın */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ======================================== MODAL Z-INDEX DÜZENLEMELERİ ======================================== */
/* Silme onay modalının kesinlikle en üstte görünmesi için */
.delete-confirmation-modal {
  z-index: 999999999 !important;
}

.delete-confirmation-modal .modal-content {
  z-index: 999999999 !important;
}

/* Tüm modalların yüksek z-index değerine sahip olması için */
.modal,
.modal-backdrop,
.modal-dialog {
  z-index: 999999999 !important;
}

/* MenuUrunler sayfasındaki tüm modallar için z-index düzenlemesi */
.modern-modal-overlay,
.birim-tipleri-modal,
.mutfak-grubu-tipleri-modal,
.kategori-tipleri-modal {
  z-index: 999999999 !important;
}

/* Modal content'ler için de yüksek z-index */
.modern-modal,
.modern-modal-content {
  position: relative;
  z-index: 999999999 !important;
}

.modern-urun-card:hover {

  box-shadow: 0 4px 16px rgba(163, 23, 74, 0.15);
  transform: translateY(-2px);
}

/* Modern Ürün Header */
.modern-urun-header {
  padding: 16px;
  background: #ffffff;
  border-bottom: 1px solid #f8f9fa;
  /* Header alanı kalan yüksekliği kapsasın */
  flex: 1 1 auto;
}

.modern-urun-baslik {
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  font-size: 16px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 1;
  min-width: 0;
}

.modern-urun-baslik-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px;
  border-radius: 6px;
  width: 100%;
}

.modern-urun-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #e1e5e9;
}

/* Modern Ürün Badge - Sağ üst köşe konumlandırma */
.modern-urun-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  padding: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.modern-urun-aciklama {
  color: #6c757d;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Modern Ürün Footer */
.modern-urun-footer {
  padding: 12px 16px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* Footer kartın en altında sabit dursun */
  margin-top: auto;
  border-top: 1px solid #f1f3f5;
  flex-wrap: nowrap;
}

.modern-urun-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.modern-urun-fiyat {
  text-align: right;
  flex-shrink: 0;
  min-width: 80px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.modern-fiyat-text {
  font-weight: 700;
  color: #a3174a;
  font-size: 15px;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  white-space: nowrap;
}

/* Modern Buton Tasarımları */
.modern-btn {
  padding: 8px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  height: 36px;
  background: #ffffff;
  color: #a3174a;
}

.modern-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-btn-primary {
  background: #ffffff;
  color: #a3174a;
  border: 1px solid #e1e5e9;
}

.modern-btn-primary:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.modern-btn-outline-primary {
  background: transparent;
  color: #a3174a;
  border: 1px solid #a3174a;
}

.modern-btn-outline-primary:hover {
  background: #a3174a;
  color: #ffffff;
}

.modern-btn-outline-warning {
  background: transparent;
  color: #a3174a;
  border: 1px solid #a3174a;
}

.modern-btn-outline-warning:hover {
  background: #a3174a;
  color: #ffffff;
}

.modern-btn-outline-secondary {
  background: transparent;
  color: #6c757d;
  border: 1px solid #6c757d;
}

.modern-btn-outline-secondary:hover {
  background: #6c757d;
  color: #ffffff;
}

/* Modern Card Actions */
.modern-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Modern Search Box */
.modern-search-box {
  position: relative;
  min-width: 200px;
}

.modern-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-size: 13px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.modern-search-input:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
  outline: none;
}

.modern-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 12px;
}

/* Modern Dropdown */
.modern-dropdown {
  position: relative;
}

.modern-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  min-width: 160px;
  z-index: 999999999 !important;
  display: none;
  margin-top: 4px;
}

.modern-dropdown-menu.show {
  display: block;
  z-index: 999999999 !important;
  animation: fadeInDown 0.2s ease-out;
}

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

.modern-dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modern-dropdown-item:hover {
  background: rgba(163, 23, 74, 0.1);
  color: #a3174a;
  text-decoration: none;
}

.modern-dropdown-divider {
  height: 1px;
  background: #e1e5e9;
  margin: 4px 0;
}

/* Modern Aktif Kategori */
.modern-aktif-kategori {
  color: #a3174a;
  font-weight: 500;
}

/* Responsive Tasarım */
@media (max-width: 1200px) {
  .modern-content-area {
    grid-template-columns: 250px 1fr;
  }
}

@media (max-width: 992px) {
  .modern-content-area {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .modern-kategoriler-alani,
  .modern-urunler-alani {
    height: auto;
  }
  
  .modern-kategoriler-listesi,
  .modern-urunler-grid {
    height: 400px;
  }
  
  .modern-card-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .modern-search-box {
    min-width: 150px;
  }
}

@media (max-width: 768px) {
  .modern-box-body {
    padding: 16px;
  }
  
  .modern-card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .modern-card-actions {
    flex-direction: column;
    width: 100%;
    gap: 8px;
  }
  
  .modern-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  
  .modern-search-box {
    width: 100%;
    min-width: 0;
  }
  
  .modern-search-input {
    width: 100%;
  }
  
  .modern-urunler-container {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  
  .modern-urun-card {
    margin-bottom: 12px;
  }
  
  .modern-urun-baslik {
    font-size: 15px;
  }
  
  .modern-urun-aciklama {
    font-size: 12px;
  }
  
  .modern-kategoriler-listesi {
    height: 300px;
  }
  
  .modern-urunler-grid {
    height: 350px;
  }
}

@media (max-width: 576px) {
  .modern-box-body {
    padding: 12px;
  }
  
  .modern-card-header {
    padding: 12px 16px;
  }
  
  .modern-card-body {
    padding: 16px;
  }
  
  .modern-card-actions {
    gap: 6px;
  }
  
  .modern-btn {
    height: 40px;
    font-size: 13px;
    padding: 10px 16px;
  }
  
  .modern-search-box {
    order: -1;
  }
  
  .modern-search-input {
    height: 40px;
    font-size: 14px;
  }
  
  .modern-search-icon {
    font-size: 14px;
  }
  
  .modern-urunler-container {
    gap: 12px;
    padding: 12px;
  }
  
  .modern-urun-card {
    margin-bottom: 8px;
  }
  
  .modern-urun-header {
    padding: 12px;
  }
  
  .modern-urun-baslik {
    font-size: 13px;
  }
  
  .modern-urun-aciklama {
    font-size: 11px;
  }
  
  .modern-urun-footer {
    padding: 10px 12px;
  }
  
  .modern-fiyat-text {
    font-size: 13px;
  }
  
  .modern-action-btn {
    padding: 6px 8px;
    font-size: 11px;
  }
  
  .modern-kategoriler-listesi {
    height: 250px;
  }
  
  .modern-urunler-grid {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .modern-box-body {
    padding: 8px;
  }
  
  .modern-card-header {
    padding: 10px 12px;
  }
  
  .modern-card-body {
    padding: 12px;
  }
  
  .modern-btn {
    height: 44px;
    font-size: 14px;
    padding: 12px 16px;
  }
  
  .modern-search-input {
    height: 44px;
    font-size: 15px;
  }
  
  .modern-urunler-container {
    gap: 8px;
    padding: 8px;
  }
  
  .modern-urun-card {
    margin-bottom: 6px;
  }
  
  .modern-urun-header {
    padding: 12px 10px;
  }
  
  .modern-urun-baslik {
    font-size: 14px;
    line-height: 1.3;
  }
  
  .modern-urun-baslik-container {
    gap: 8px;
  }
  
  .modern-urun-color-dot {
    width: 10px;
    height: 10px;
  }
  
  .modern-urun-aciklama {
    font-size: 10px;
  }
  
  .modern-urun-footer {
    padding: 8px 10px;
  }
  
  .modern-fiyat-text {
    font-size: 12px;
  }
  
  .modern-action-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
  
  .modern-kategoriler-listesi {
    height: 200px;
  }
  
  .modern-urunler-grid {
    height: 250px;
  }
  
  .modern-kategori-item {
    padding: 8px 10px;
    margin-bottom: 4px;
  }
  
  .modern-kategori-baslik {
    font-size: 12px;
  }
  
  .modern-kategori-aciklama {
    font-size: 10px;
  }
}

/* Focus States */
.modern-btn:focus,
.modern-action-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.2);
}

.modern-form-control:focus,
.modern-search-input:focus {
  outline: none;
}

/* Scrollbar Styling */
.modern-kategoriler-listesi::-webkit-scrollbar,
.modern-urunler-grid::-webkit-scrollbar {
  width: 6px;
}

.modern-kategoriler-listesi::-webkit-scrollbar-track,
.modern-urunler-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modern-kategoriler-listesi::-webkit-scrollbar-thumb,
.modern-urunler-grid::-webkit-scrollbar-thumb {
  background: #a3174a;
  border-radius: 0px;
}

.modern-kategoriler-listesi::-webkit-scrollbar-thumb:hover,
.modern-urunler-grid::-webkit-scrollbar-thumb:hover {
  background: #8a1450;
}

/* Kategori İşlemleri Dropdown */
.GosterKetegoriIslemleri {
  z-index: 999999999 !important;
}

/* Modern Empty State Tasarımı */
.modern-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 40px 20px;
}

.modern-empty-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.modern-empty-icon {
  font-size: 48px;
  color: #a3174a;
  margin-bottom: 20px;
  opacity: 0.7;
}

.modern-empty-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.modern-empty-description {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.modern-empty-description strong {
  color: #a3174a;
  font-weight: 600;
}

/* Kurumsal Boş Durum Butonu */
.modern-empty-state .modern-btn {
  background: linear-gradient(135deg, #a3174a 0%, #8a1450 100%);
  color: #ffffff;
  border: none;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0px;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3);
  transition: all 0.3s ease;
  min-width: 180px;
  height: 44px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modern-empty-state .modern-btn:hover {
  background: linear-gradient(135deg, #8a1450 0%, #a3174a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 23, 74, 0.4);
}

.modern-empty-state .modern-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-empty-state .modern-btn i {
  font-size: 14px;
  margin-right: 8px;
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .modern-empty-state {
    min-height: 250px;
    padding: 30px 16px;
  }
  
  .modern-empty-icon {
    font-size: 40px;
    margin-bottom: 16px;
  }
  
  .modern-empty-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
  }
  
  .modern-empty-description {
    font-size: 13px;
    margin-bottom: 20px;
  }
  
  .modern-empty-state .modern-btn {
    padding: 10px 20px;
    font-size: 13px;
    min-width: 160px;
    height: 40px;
  }
}

@media (max-width: 576px) {
  .modern-empty-state {
    min-height: 200px;
    padding: 24px 12px;
  }
  
  .modern-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
  }
  
  .modern-empty-title {
    font-size: 1rem;
  }
  
  .modern-empty-description {
    font-size: 12px;
  }
  
  .modern-empty-state .modern-btn {
    padding: 8px 16px;
    font-size: 12px;
    min-width: 140px;
    height: 36px;
  }
}

/* Responsive porsiyon yönetimi */
@media (max-width: 768px) {
  .porsiyon-item {
    padding: 10px;
    margin-bottom: 8px;
  }
  
  .porsiyon-row {
    flex-direction: column;
    gap: 8px;
  }
  
  .porsiyon-col {
    min-width: auto;
    width: 100%;
  }
  
  .porsiyon-controls {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
  }
  
  .porsiyon-controls .btn {
    padding: 3px 6px;
    font-size: 11px;
  }
  
  .porsiyon-controls .form-check-label {
    font-size: 11px;
  }
}

@media (max-width: 576px) {
  .porsiyon-item {
    padding: 8px;
  }
  
  .porsiyon-col .form-control-sm {
    height: 28px;
    font-size: 12px;
    padding: 4px 8px;
  }
  
  .porsiyon-label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  
  .porsiyon-controls .btn {
    padding: 2px 4px;
    font-size: 10px;
  }
  
  .porsiyon-controls .form-check-label {
    font-size: 10px;
  }
}

/* ========================================
   MODERN MODAL STİLLERİ
   ======================================== */

.modern-modal {
  z-index: 9999 !important;
}

.modern-modal .modal-dialog {
  max-width: 800px;
}

.modern-modal .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.modern-modal-header {
  background: linear-gradient(135deg, #a3174a 0%, #8a1450 100%);
  color: #ffffff;
  border-bottom: none;
  padding: 20px 24px;
}

.modern-modal-header .modal-title {
  font-weight: 600;
  font-size: 18px;
}

.modern-modal-header .btn-close {
  filter: invert(1);
  opacity: 0.8;
}

.modern-modal-header .btn-close:hover {
  opacity: 1;
}

.modern-modal-body {
  padding: 24px;
  background: #ffffff;
}

.modern-modal-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 16px 24px;
  border-radius: 0;
}

.modern-modal-footer .btn {
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
}

.modern-modal-footer .btn-primary {
  background: linear-gradient(135deg, #a3174a 0%, #8a1450 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3);
}

.modern-modal-footer .btn-primary:hover {
  background: linear-gradient(135deg, #8a1450 0%, #a3174a 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(163, 23, 74, 0.4);
}

.modern-modal-footer .btn-secondary {
  background: #6c757d;
  border: none;
  color: #ffffff;
}

.modern-modal-footer .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

/* Modal backdrop */
.modern-modal + .modal-backdrop {
  z-index: 9998 !important;
}

/* Porsiyon detay form stilleri */
.porsiyon-detay-form .form-group {
  margin-bottom: 20px;
}

.porsiyon-detay-form label {
  font-weight: 600;
  color: #495057;
  margin-bottom: 8px;
  font-size: 14px;
}

.porsiyon-detay-form .form-control {
  border-radius: 0;
  border: 1px solid #d9d9d9;
  padding: 12px 16px;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.porsiyon-detay-form .form-control:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.15);
}

/* Responsive modal */
@media (max-width: 768px) {
  .modern-modal .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
  }
  
  .modern-modal-header {
    padding: 16px 20px;
  }
  
  .modern-modal-header .modal-title {
    font-size: 16px;
  }
  
  .modern-modal-body {
    padding: 20px;
  }
  
  .modern-modal-footer {
    padding: 12px 20px;
  }
  
  .modern-modal-footer .btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .modern-modal .modal-dialog {
    margin: 5px;
    max-width: calc(100% - 10px);
  }
  
  .modern-modal-header {
    padding: 12px 16px;
  }
  
  .modern-modal-header .modal-title {
    font-size: 14px;
  }
  
  .modern-modal-body {
    padding: 16px;
  }
  
  .modern-modal-footer {
    padding: 10px 16px;
  }
  
  .modern-modal-footer .btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Kullanıcı ID Bilgi Notları - ProfilAyarlar */
.modern-user-info-notes {
  margin-top: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.modern-info-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6c757d;
  white-space: nowrap;
}

.modern-info-note:not(:last-child)::after {
  content: '|';
  margin-left: 8px;
  color: #dee2e6;
  font-weight: 300;
}

.modern-info-icon {
  color: #a3174a;
  font-size: 14px;
  width: 16px;
  text-align: center;
}

.modern-info-label {
  font-weight: 500;
  color: #495057;
  min-width: 80px;
}

.modern-info-value {
  font-weight: 600;
  color: #a3174a;
  background-color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

/* Responsive tasarım */
@media (max-width: 768px) {
  .modern-user-info-notes {
    padding: 10px;
    gap: 12px;
    flex-direction: row;
  }
  
  .modern-info-note {
    font-size: 12px;
    gap: 6px;
  }
  
  .modern-info-note:not(:last-child)::after {
    margin-left: 6px;
  }
  
  .modern-info-label {
    min-width: auto;
    font-size: 12px;
  }
  
  .modern-info-value {
    font-size: 11px;
    padding: 1px 6px;
  }
}

/* Kullanıcı Lisans Link Stilleri */
.kullanici-lisans-link {
  text-decoration: underline;
  color: #a3174a;
  transition: color 0.3s ease;
}

.kullanici-lisans-link:hover {
  color: #7d0f38;
  text-decoration: underline;
}

/* ======================================== SİPARİŞ ALMA SAYFASI STİLLERİ ======================================== */

/* Sipariş Alma Container */
.siparis-alma-container {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 20px;
  margin-top: 0;
  height: 100%;
  padding: 20px;
  overflow: hidden !important;
  flex: 1;
  min-height: 0;
}

/* Sol Panel - Sipariş Bilgileri */
.siparis-bilgileri-panel {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.siparis-bilgileri-panel .modern-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.siparis-bilgileri-panel .modern-card-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Sipariş Header Bilgisi */
.siparis-header-info {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;
  margin-bottom: 16px;
}

.siparis-masa-bilgisi {
  margin-bottom: 8px;
}

.siparis-masa-text {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.siparis-garson-bilgisi {
  margin-top: 4px;
}

.siparis-garson-text {
  color: #6c757d;
  font-size: 13px;
}

/* Sipariş Ürünleri Listesi */
.siparis-urunler-listesi {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 16px;
}

.siparis-bos-liste {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #6c757d;
  text-align: center;
}

.siparis-bos-liste i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.siparis-bos-liste p {
  margin: 0;
  font-size: 14px;
}

.siparis-urun-item {
  padding: 12px;
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.2s ease;
}

.siparis-urun-item:hover {
  background-color: #f8f9fa;
}

.siparis-urun-item:last-child {
  border-bottom: none;
}

.siparis-urun-baslik {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 4px;
}

.siparis-urun-kod {
  color: #6c757d;
  font-size: 12px;
  margin-bottom: 8px;
}

.siparis-urun-fiyat-kdv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.siparis-fiyat-bilgileri {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.siparis-birim-fiyat {
  font-weight: 500;
  color: #6c757d;
  font-size: 12px;
}

.siparis-toplam-fiyat {
  font-weight: 700;
  color: #a3174a;
  font-size: 14px;
}

.siparis-fiyat {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.siparis-kdv {
  color: #6c757d;
  font-size: 12px;
}

.siparis-urun-miktar {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

.siparis-miktar-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  color: #a3174a;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.siparis-miktar-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.siparis-miktar-text {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}

/* Sipariş Özeti */
.siparis-ozet {
  border-top: 2px solid #e1e5e9;
  padding-top: 16px;
  margin-top: auto;
}

.siparis-ozet-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.siparis-ozet-item:not(:last-child) {
  border-bottom: 1px solid #f1f3f5;
}

.siparis-ozet-label {
  color: #6c757d;
  font-size: 13px;
}

.siparis-ozet-value {
  font-weight: 600;
  color: #333;
  font-size: 13px;
}

.siparis-ozet-toplam {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid #e1e5e9;
}

.siparis-ozet-toplam .siparis-ozet-label {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.siparis-ozet-toplam .siparis-ozet-value {
  font-weight: 700;
  color: #a3174a;
  font-size: 20px;
}

/* Sağ Panel - Kategoriler ve Ürünler */
.kategoriler-urunler-panel {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.kategoriler-urunler-panel .modern-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
}

.kategoriler-urunler-panel .modern-card-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* Kategori Tabları */
.siparis-kategori-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e1e5e9;
  padding-bottom: 12px;
}

.siparis-kategori-tab {
  padding: 10px 20px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  color: #6c757d;
  border-radius: 0px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.siparis-kategori-tab:hover {
  border-color: #a3174a;
  color: #a3174a;
  background: #ffffff;
}

.siparis-kategori-tab.active {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

/* Responsive Tasarım */
@media (max-width: 1200px) {
  .siparis-alma-container {
    grid-template-columns: 350px 1fr;
  }
}

@media (max-width: 992px) {
  .siparis-alma-container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  
  .siparis-bilgileri-panel,
  .kategoriler-urunler-panel {
    height: 100%;
    min-height: 0;
  }
  
  .siparis-bilgileri-panel .modern-card-body,
  .kategoriler-urunler-panel .modern-card-body {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .siparis-alma-container {
    gap: 12px;
  }
  
  .siparis-kategori-tabs {
    gap: 6px;
  }
  
  .siparis-kategori-tab {
    padding: 8px 16px;
    font-size: 12px;
  }
  
  .siparis-urun-item {
    padding: 10px;
  }
  
  .siparis-ozet-toplam .siparis-ozet-value {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .siparis-kategori-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 8px;
  }
  
  .siparis-kategori-tab {
    padding: 8px 12px;
    font-size: 11px;
    flex-shrink: 0;
  }
  
  .siparis-urun-baslik {
    font-size: 13px;
  }
  
  .siparis-fiyat {
    font-size: 12px;
  }
  
  .siparis-miktar-btn {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  
  .siparis-miktar-text {
    font-size: 13px;
  }
}

/* ======================================== PORSİYON VE ÖZELLİK SEÇİMİ MODAL STİLLERİ ======================================== */

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999999;
  padding: 20px;
}

/* Modal Container */
.modal-container {
  background: #ffffff;
  border-radius: 0px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal Header */
.modal-header {
  padding: 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

.modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.modal-close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.modal-close-btn:hover {
  color: #a3174a;
  background: rgba(163, 23, 74, 0.1);
}

/* Modal Body */
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* Ürün Bilgisi */
.urun-bilgisi {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e5e9;
}

.urun-bilgisi h6 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.urun-kodu {
  font-size: 12px;
  color: #6c757d;
}

/* Seçim Bölümü */
.secim-bolumu {
  margin-bottom: 24px;
}

.secim-baslik-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.secim-baslik {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
}

.secim-kaldir-btn {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  color: #dc3545;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.secim-kaldir-btn:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

.secim-kaldir-btn:active {
  transform: translateY(0);
}

.secim-kaldir-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
}

.zorunlu-isaret {
  color: #a3174a;
  margin-left: 4px;
}

/* Radio Group */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #ffffff;
}

.radio-label:hover {
  border-color: #a3174a;
  background: rgba(163, 23, 74, 0.05);
}

.radio-label.selected {
  border-color: #a3174a;
  background: rgba(163, 23, 74, 0.1);
}

.radio-label input[type="radio"],
.radio-label input[type="checkbox"] {
  margin-right: 12px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: #a3174a;
}

.radio-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.varsayilan-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: #a3174a;
  color: #ffffff;
  border-radius: 0px;
  font-weight: 600;
}

.radio-fiyat {
  font-size: 14px;
  font-weight: 600;
  color: #a3174a;
  min-width: 80px;
  text-align: right;
}

/* Adet Seçimi */
.adet-secimi {
  margin-bottom: 24px;
}

.adet-kontrol {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-start;
}

.adet-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  color: #a3174a;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.adet-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.adet-input {
  width: 80px;
  height: 36px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.adet-input:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
}

/* Toplam Bölümü */
.toplam-bolumu {
  padding: 16px;
  background: #f8f9fa;
  border-top: 2px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.toplam-label {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.toplam-tutar {
  font-size: 20px;
  font-weight: 700;
  color: #a3174a;
}

/* Modal Footer */
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e1e5e9;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #f8f9fa;
}

.modal-footer .btn {
  padding: 10px 24px;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
}

.modal-footer .btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #e1e5e9;
}

.modal-footer .btn-secondary:hover {
  background: #f8f9fa;
  border-color: #6c757d;
}

.modal-footer .btn-primary {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.modal-footer .btn-primary:hover {
  background: #7d0f38;
  border-color: #7d0f38;
}

.modal-footer .btn-primary:disabled {
  background: #cccccc;
  border-color: #cccccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.modern-btn:disabled {
  background: #cccccc !important;
  color: #666666 !important;
  border-color: #cccccc !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
  .modal-container {
    max-width: 100%;
    max-height: 95vh;
  }
  
  .modal-header {
    padding: 16px;
  }
  
  .modal-body {
    padding: 16px;
  }
  
  .radio-label {
    padding: 10px 12px;
  }
  
  .toplam-bolumu {
    padding: 12px 16px;
  }
  
  .modal-footer {
    padding: 12px 16px;
    flex-direction: column;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
}

/* ======================================== SİPARİŞ GRUPLARI STİLLERİ ======================================== */

/* Sipariş Grupları Listesi */
.siparis-gruplari-listesi {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 0;
  min-height: 0;
}

.siparis-grup-item {
  margin-bottom: 20px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  overflow: hidden;
}

.siparis-grup-header {
  padding: 12px 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.siparis-grup-header:hover {
  background: #e9ecef;
}

.siparis-grup-item.aktif-grup .siparis-grup-header {
  background: rgba(163, 23, 74, 0.1);
  border-bottom-color: #a3174a;
  border-left: 3px solid #a3174a;
}

.siparis-grup-baslik-wrapper {
  flex: 1;
  min-width: 0;
}

.siparis-grup-baslik {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: text;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.siparis-grup-baslik:hover {
  background: rgba(163, 23, 74, 0.1);
}

.siparis-grup-baslik-input {
  width: 100%;
  padding: 4px 8px;
  border: 2px solid #a3174a;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  background: #ffffff;
  outline: none;
  min-width: 150px;
}

.siparis-grup-baslik-input:focus {
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.siparis-grup-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.aktif-grup-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: #a3174a;
  color: #ffffff;
  border-radius: 0px;
  font-weight: 600;
  margin-left: 8px;
}

.siparis-grup-baslik {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.siparis-grup-sil-btn {
  width: 28px;
  height: 28px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  color: #dc3545;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 12px;
}

.siparis-grup-sil-btn:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

/* Sipariş Grup Ürünleri Wrapper */
.siparis-grup-urunler-wrapper {
  position: relative;
  min-height: 120px;
}

/* Sipariş Grup Ürünleri */
.siparis-grup-urunler {
  padding: 8px;
  min-height: 50px;
}

.siparis-grup-urunler-bos {
  min-height: 120px;
}

.siparis-grup-bos-mesaj {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #6c757d;
  pointer-events: none;
  z-index: 1;
}

.siparis-grup-bos-hint {
  font-size: 12px;
  color: #a3174a;
  margin-top: 8px;
  font-style: italic;
  opacity: 0.8;
}

.siparis-grup-bos-mesaj i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
  color: #a3174a;
}

.siparis-grup-bos-mesaj p {
  margin: 0;
  font-size: 14px;
  color: #6c757d;
}

.siparis-urun-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #f1f3f5;
  transition: background-color 0.2s ease;
}

.siparis-urun-item:hover {
  background-color: #f8f9fa;
}

.siparis-urun-item:last-child {
  border-bottom: none;
}

.siparis-urun-drag-handle {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
  color: #6c757d;
  transition: color 0.3s ease;
  flex-shrink: 0;
  margin-top: 2px;
}

.siparis-urun-drag-handle:hover {
  color: #a3174a;
}

.siparis-urun-content-wrapper {
  flex: 1;
  min-width: 0;
}

.siparis-porsiyon-badge {
  font-size: 11px;
  color: #6c757d;
  font-weight: normal;
}

.siparis-urun-ozellikler {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.siparis-ozellik-badge {
  font-size: 10px;
  padding: 2px 6px;
  background: #e9ecef;
  color: #495057;
  border-radius: 0px;
  border: 1px solid #dee2e6;
}

/* Drag and Drop Styles */
.siparis-grup-urunler .sortable-ghost {
  opacity: 0.4;
  background: #f8f9fa;
}

.siparis-grup-urunler .sortable-drag {
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .siparis-grup-header {
    padding: 10px 12px;
  }
  
  .siparis-grup-urunler {
    padding: 6px;
  }
  
  .siparis-urun-item {
    padding: 10px;
    gap: 8px;
  }
  
  .siparis-urun-drag-handle {
    width: 20px;
    height: 20px;
  }
}

/* ======================================== SİPARİŞ AYARLAR MODAL STİLLERİ ======================================== */

.siparis-ayarlar-modal {
  max-width: 500px;
}

/* Ayar Bölümü */
.ayar-bolumu {
  margin-bottom: 20px;
}

.ayar-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

/* Misafir Sayısı Kontrolü */
.misafir-sayisi-kontrol {
  display: flex;
  align-items: center;
  gap: 12px;
}

.misafir-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  color: #a3174a;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.misafir-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.misafir-input {
  width: 80px;
  height: 36px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.misafir-input:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
}

/* Sipariş Notu Textarea */
.siparis-notu-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-size: 14px;
  color: #333;
  resize: vertical;
  font-family: inherit;
}

.siparis-notu-textarea:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
}

.siparis-notu-textarea::placeholder {
  color: #6c757d;
}

/* Ayar Butonları */
.ayar-butonlar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid #e1e5e9;
}

.ayar-btn {
  flex: 1;
  padding: 12px 24px;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid;
}

.ayar-btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #e1e5e9;
}

.ayar-btn-secondary:hover {
  background: #f8f9fa;
  border-color: #6c757d;
}

.ayar-btn-primary {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.ayar-btn-primary:hover {
  background: #7d0f38;
  border-color: #7d0f38;
}

/* Masa İşlemleri Bölümü */
.masa-islemleri-bolumu {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 2px solid #e1e5e9;
}

.masa-islemleri-baslik {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.masa-islemleri-listesi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.masa-islem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.masa-islem-item:hover {
  background: #f8f9fa;
  border-color: #a3174a;
  transform: translateX(2px);
}

.masa-islem-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  flex-shrink: 0;
}

.masa-islem-icon i {
  color: #ffffff;
  font-size: 18px;
}

.masa-islem-content {
  flex: 1;
  min-width: 0;
}

.masa-islem-baslik {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.masa-islem-aciklama {
  font-size: 12px;
  color: #6c757d;
}

.masa-islem-arrow {
  color: #6c757d;
  font-size: 14px;
  flex-shrink: 0;
}

.masa-islem-item:hover .masa-islem-arrow {
  color: #a3174a;
}

/* Sipariş Gönder Butonu */
.siparis-gonder-butonu {
  padding-top: 16px;
  border-top: 2px solid #e1e5e9;
  margin-top: 16px;
}

.btn-block {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .siparis-ayarlar-modal {
    max-width: 100%;
  }
  
  .ayar-butonlar {
    flex-direction: column;
  }
  
  .ayar-btn {
    width: 100%;
  }
  
  .masa-islem-item {
    padding: 10px;
  }
  
  .masa-islem-icon {
    width: 36px;
    height: 36px;
  }
  
  .masa-islem-icon i {
    font-size: 16px;
  }
}

/* ======================================== SİPARİŞ İŞLEMLERİ MENÜ ÖZEL STİLİ ======================================== */

/* Sipariş İşlemleri menüsü artık diğer menülerle aynı tasarımı kullanıyor - özel stiller kaldırıldı */

.siparis-islemleri-badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #a3174a 0%, #7d0f38 100%);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 10px;
  margin-left: 8px;
  box-shadow: 0 2px 4px rgba(163, 23, 74, 0.3);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 4px rgba(163, 23, 74, 0.3);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(163, 23, 74, 0.5);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar-menu > li.siparis-islemleri-menu-item {
    margin: 6px 10px;
  }
  
  .sidebar-menu > li.siparis-islemleri-menu-item > a {
    padding: 8px 12px;
  }
  
  .sidebar-menu > li.siparis-islemleri-menu-item > a > i {
    width: 36px;
    height: 36px;
    line-height: 34px;
    font-size: 1.2rem;
    margin-right: 12px;
  }
  
  .siparis-islemleri-badge {
    font-size: 8px;
    padding: 1px 6px;
  }
}

/* ======================================== MASA HOVER ANİMASYONU VE MENÜ BUTONU ======================================== */

.masa-hover-animation {
  transition: transform 0.3s ease, z-index 0.3s ease;
}

.masa-hover-animation:hover {
  transform: scale(1.05);
  z-index: 10;
  box-shadow: none;
}

/* Yuvarlak masalar hover durumunda da yuvarlak kalmalı - TÜM DURUMLAR İÇİN */
.yuvarlak-masa .modern-masa-content,
.yuvarlak-masa.masa-hover-animation .modern-masa-content,
.yuvarlak-masa.masa-hover-animation:hover .modern-masa-content,
.yuvarlak-masa:hover .modern-masa-content,
.masa-hover-animation.yuvarlak-masa:hover .modern-masa-content,
.masa-hover-animation.yuvarlak-masa .modern-masa-content:hover,
.yuvarlak-masa.masa-hover-animation:hover .modern-masa-content[style*="border-radius"],
.yuvarlak-masa .modern-masa-content[style*="border-radius"] {
  border-radius: 50% !important;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  overflow: hidden !important;
  /* Transform'u içeriğe uygulama, sadece container'a uygula */
  transform: none !important;
}

/* Yuvarlak masalar için hover shadow kaldırıldı */
.yuvarlak-masa.masa-hover-animation:hover {
  box-shadow: none;
}

.yuvarlak-masa.masa-hover-animation:hover .modern-masa-content {
  box-shadow: none;
}

.masa-menu-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s ease;

  z-index: 5;
}

/* Yuvarlak masada buton da yuvarlak olmalı ve biraz daha sola kaymalı */
.yuvarlak-masa .masa-menu-btn {
  border-radius: 50%;
  right: 14px;
}

.masa-hover-animation:hover .masa-menu-btn {
  opacity: 1;
}

.masa-menu-btn:hover {
  background: #ffffff;
  transform: scale(1.5);

}

.masa-menu-btn i {
  color: #333;
  font-size: 14px;
}

/* Masa Seçim Butonu (Masa değiştirme modunda) */
.masa-secim-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 2px solid #28a745;
  background: #28a745;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.yuvarlak-masa .masa-secim-btn {
  border-radius: 50%;
  right: 14px;
}

.masa-secim-btn:hover {
  background: #218838;
  border-color: #218838;
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(40, 167, 69, 0.4);
}

.masa-secim-btn i {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

/* Adisyon Aktar Seçim Butonu (Dolu masalar için) */
.masa-adisyon-aktar-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 2px solid #17a2b8;
  background: #17a2b8;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.yuvarlak-masa .masa-adisyon-aktar-btn {
  border-radius: 50%;
  right: 14px;
}

.masa-adisyon-aktar-btn:hover {
  background: #138496;
  border-color: #138496;
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(23, 162, 184, 0.4);
}

.masa-adisyon-aktar-btn i {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

/* Masa Ayırma Butonu (Birleştirilmiş masalar için) */
.masa-ayir-btn {
  position: absolute !important;
  top: 8px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: 2px solid #dc3545;
  background: #dc3545;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  transition: all 0.3s ease;
  z-index: 99999 !important;
  opacity: 0.9;
  pointer-events: auto !important;
}

.yuvarlak-masa .masa-ayir-btn {
  border-radius: 50%;
  left: 14px;
}

.masa-ayir-btn:hover:not(:disabled) {
  background: #c82333;
  border-color: #c82333;
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(220, 53, 69, 0.4);
  opacity: 1;
}

.masa-ayir-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.masa-ayir-btn i {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

/* Masa Birleştirme Checkbox Butonu */
.masa-birlestirme-checkbox-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 2px solid #6f42c1;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.2);
}

.yuvarlak-masa .masa-birlestirme-checkbox-btn {
  border-radius: 50%;
  right: 14px;
}

.masa-birlestirme-checkbox-btn:hover {
  background: #f8f9fa;
  border-color: #6f42c1;
  transform: scale(1.1);
  box-shadow: 0 3px 6px rgba(111, 66, 193, 0.3);
}

.masa-birlestirme-checkbox-btn.masa-birlestirme-checkbox-selected {
  background: #6f42c1;
  border-color: #6f42c1;
}

.masa-birlestirme-checkbox-btn.masa-birlestirme-checkbox-selected:hover {
  background: #5a32a3;
  border-color: #5a32a3;
}

.masa-birlestirme-checkbox-btn i {
  color: #6f42c1;
  font-size: 16px;
  font-weight: bold;
}

.masa-birlestirme-checkbox-btn.masa-birlestirme-checkbox-selected i {
  color: #ffffff;
}

/* Masa Birleştirme Tamamla/İptal Butonları */
.masa-birlestirme-tamamla-wrapper {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.masa-birlestirme-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.masa-birlestirme-iptal-btn {
  padding: 16px 32px;
  background: #ffffff;
  color: #6c757d;
  border: 2px solid #6c757d;
  border-radius: 0px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
}

.masa-birlestirme-iptal-btn:hover:not(:disabled) {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.masa-birlestirme-iptal-btn:active:not(:disabled) {
  transform: translateY(0);
}

.masa-birlestirme-iptal-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.masa-birlestirme-iptal-btn i {
  font-size: 18px;
}

.masa-birlestirme-tamamla-btn {
  padding: 16px 32px;
  background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
  color: #ffffff;
  border: 2px solid #6f42c1;
  border-radius: 0px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(111, 66, 193, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Rubik", sans-serif;
}

.masa-birlestirme-tamamla-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a32a3 0%, #4a2a8a 100%);
  border-color: #5a32a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(111, 66, 193, 0.5);
}

.masa-birlestirme-tamamla-btn:active:not(:disabled) {
  transform: translateY(0);
}

.masa-birlestirme-tamamla-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.masa-birlestirme-tamamla-btn i {
  font-size: 18px;
}

@media (max-width: 768px) {
  .masa-birlestirme-tamamla-wrapper {
    bottom: 20px;
    left: 10px;
    right: 10px;
    transform: none;
  }

  .masa-birlestirme-buttons {
    flex-direction: column;
    width: 100%;
  }

  .masa-birlestirme-iptal-btn,
  .masa-birlestirme-tamamla-btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 14px;
  }
}

/* Birleştirilmiş Masa Stilleri */
.birlestirilmis-masa .modern-masa-content {
  border: 3px solid var(--birlestirme-rengi, #6f42c1) !important;
  position: relative;
}

.birlestirilmis-masa .modern-masa-content::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--birlestirme-rengi-shadow, rgba(111, 66, 193, 0.3)), 0 4px 12px var(--birlestirme-rengi-shadow, rgba(111, 66, 193, 0.4));
  pointer-events: none;
  z-index: -1;
}

.birlestirilmis-masa .modern-masa-content::before {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  border: 2px dashed var(--birlestirme-rengi, #6f42c1);
  border-radius: inherit;
  opacity: 0.5;
  pointer-events: none;
}

/* Birleştirilmiş Masa Badge */
.masa-birlestirme-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 0px;
  font-size: 0.5em;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.5);
  border: 2px solid #ffffff;
  white-space: nowrap;
}

.masa-birlestirme-badge i {
  font-size: 10px;
}

.yuvarlak-masa .masa-birlestirme-badge {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  justify-content: center;
  top: -6px;
  right: -6px;
}

.yuvarlak-masa .masa-birlestirme-badge span {
  display: none;
}

/* Birleştirilmiş Masa Tutar Stili */
.birlestirilmis-masa-tutar {
  border: 2px solid #6f42c1 !important;
  box-shadow: 0 2px 8px rgba(111, 66, 193, 0.5) !important;
}

/* Birleştirilmiş Masa Pasif Stili (Fiyat yoksa) */
.birlestirilmis-masa-pasif {
  opacity: 0.6;
  pointer-events: none;
  cursor: not-allowed !important;
}

.birlestirilmis-masa-pasif .modern-masa-content {
  cursor: not-allowed !important;
}

.birlestirilmis-masa-pasif:hover {
  transform: none !important;
}

/* Birleştirilmiş pasif masalarda ayırma butonu tıklanabilir olmalı */
.birlestirilmis-masa-pasif .masa-ayir-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  z-index: 99999 !important;
  position: absolute !important;
}

/* Modern masa content içinde de buton tıklanabilir olmalı */
.birlestirilmis-masa-pasif .modern-masa-content .masa-ayir-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  position: absolute !important;
}

/* Masa box'un kendisi disabled olsa bile buton tıklanabilir */
.modern-masa-box.birlestirilmis-masa-pasif .masa-ayir-btn {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  position: absolute !important;
}

/* Masa Sipariş Toplam Tutar */
.masa-siparis-tutar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  /* background dinamik olarak inline style ile verilecek */
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.55em;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 5;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.yuvarlak-masa .masa-siparis-tutar {
  border-radius: 12px;
}

.kare-masa .masa-siparis-tutar {
  border-radius: 4px;
}

.masa-siparis-tutar::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  /* border-bottom rengi dinamik olarak inline style ile verilecek */
}

@media (max-width: 768px) {
  .masa-siparis-tutar {
    font-size: 0.55em;
    padding: 3px 8px;
    bottom: 6px;
  }
}

/* ======================================== MASA SEÇENEKLERİ MODAL STİLLERİ ======================================== */

.masa-secenekleri-modal {
  max-width: 450px;
  width: 90%;
  position: relative;
  z-index: 1000000000;
}

/* Masa seçenekleri modal overlay için yüksek z-index */
.masa-secenekleri-modal-overlay {
  z-index: 999999999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
}

.masa-secenekleri-listesi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.masa-secenek-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.masa-secenek-item:hover {
  background: #f8f9fa;
  border-color: #a3174a;
  transform: translateX(2px);
}

.masa-secenek-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  flex-shrink: 0;
  position: relative;
}

.masa-secenek-icon i {
  color: #ffffff !important;
  font-size: 18px !important;
  display: inline-block !important;
  font-family: FontAwesome !important;
  font-style: normal !important;
  font-weight: normal !important;
  line-height: 1 !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.masa-secenek-content {
  flex: 1;
  min-width: 0;
}

.masa-secenek-baslik {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.masa-secenek-aciklama {
  font-size: 12px;
  color: #6c757d;
}

.masa-secenek-arrow {
  color: #6c757d;
  font-size: 14px;
  flex-shrink: 0;
}

.masa-secenek-item:hover .masa-secenek-arrow {
  color: #a3174a;
}

/* Pasif Masa Seçeneği */
.masa-secenek-item-pasif {
  opacity: 0.6;
  cursor: not-allowed !important;
  background: #f8f9fa !important;
}

.masa-secenek-item-pasif:hover {
  background: #f8f9fa !important;
  border-color: #e1e5e9 !important;
  transform: none !important;
}

.masa-secenek-item-pasif .masa-secenek-icon {
  opacity: 0.5;
}

.masa-secenek-item-pasif .masa-secenek-baslik {
  opacity: 0.6;
}

/* Uyarılı Masa Seçeneği */
.masa-secenek-item-uyari {
  border-left: 3px solid #ffc107;
}

.masa-secenek-uyari {
  color: #856404 !important;
  font-weight: 500;
}

.masa-secenek-uyari-icon {
  color: #ffc107;
  font-size: 16px;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 8px;
}

/* ======================================== ÖDEME MODAL STİLLERİ ======================================== */

.odeme-modal-overlay {
  z-index: 10000;
}

.odeme-modal {
  max-width: 1200px;
  width: 95%;
  max-height: 90vh;
}

.odeme-modal-body {
  padding: 0;
  max-height: calc(90vh - 120px);
  overflow-y: auto;
}

.odeme-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  min-height: 500px;
}

.odeme-sol-bolum,
.odeme-orta-bolum,
.odeme-sag-bolum {
  padding: 24px;
  border-right: 1px solid #e1e5e9;
}

.odeme-sag-bolum {
  border-right: none;
}

.odeme-bolum-baslik {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.odeme-alt-baslik {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 16px;
}

/* Sol Bölüm - Parçalı Öde */
.odeme-urun-listesi {
  margin-bottom: 20px;
}

.odeme-urun-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.odeme-urun-item:last-child {
  border-bottom: none;
}

.odeme-urun-bilgi {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.odeme-urun-adet {
  font-weight: 600;
}

.odeme-urun-fiyat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.odeme-kopyala-btn {
  width: 20px;
  height: 20px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.odeme-kopyala-btn:hover {
  border-color: #a3174a;
  background: #f8f9fa;
}

.odeme-kopyala-btn i {
  font-size: 10px;
  color: #6c757d;
}

.odeme-btn-parcali {
  width: 100%;
  padding: 14px;
  background: #a3174a;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-btn-parcali:hover {
  background: #7d0f38;
}

/* Orta Bölüm - Toplam ve Numpad */
.odeme-toplam-bilgiler {
  margin-bottom: 24px;
}

.odeme-indirim-satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #856404;
}

.odeme-sil-btn {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: #dc3545;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.odeme-sil-btn:hover {
  color: #c82333;
}

.odeme-odenecek-tutar {
  font-size: 18px;
  color: #333;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 4px;
}

.odeme-odenecek-tutar strong {
  color: #a3174a;
  font-size: 20px;
}

.odeme-numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.odeme-numpad-btn {
  padding: 16px;
  border: 1px solid #e1e5e9;
  background: #ffffff;
  border-radius: 0px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.odeme-numpad-btn:hover {
  background: #f8f9fa;
  border-color: #a3174a;
  color: #a3174a;
}

.odeme-numpad-clear {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

.odeme-numpad-clear:hover {
  background: #c82333;
  border-color: #c82333;
}

/* Sağ Bölüm - Ödeme Yöntemleri */
.odeme-yontem-listesi {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.odeme-yontem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-yontem-item:hover {
  border-color: #a3174a;
  background: #f8f9fa;
}

.odeme-yontem-item.active {
  border-color: #a3174a;
  background: rgba(163, 23, 74, 0.1);
}

.odeme-yontem-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  flex-shrink: 0;
}

.odeme-yontem-icon i {
  color: #ffffff;
  font-size: 18px;
}

.odeme-yontem-adi {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.odeme-yontem-item.active .odeme-yontem-adi {
  color: #a3174a;
}

/* Modal Footer */
.odeme-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e1e5e9;
}

.odeme-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-btn-iptal {
  background: #6c757d;
  color: #ffffff;
}

.odeme-btn-iptal:hover {
  background: #5a6268;
}

.odeme-btn-tamamla {
  background: #a3174a;
  color: #ffffff;
}

.odeme-btn-tamamla:hover {
  background: #7d0f38;
}

/* Responsive */
@media (max-width: 992px) {
  .odeme-container {
    grid-template-columns: 1fr;
  }
  
  .odeme-sol-bolum,
  .odeme-orta-bolum,
  .odeme-sag-bolum {
    border-right: none;
    border-bottom: 1px solid #e1e5e9;
  }
  
  .odeme-sag-bolum {
    border-bottom: none;
  }
}

/* ======================================== SİPARİŞ OLUŞTUR FULLSCREEN STİLLERİ ======================================== */

.siparis-olustur-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  z-index: 9999;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}

/* Sipariş Oluştur sayfasında modern-card margin-bottom'u kaldır */
.siparis-olustur-fullscreen .modern-card {
  margin-bottom: 0 !important;
}

/* Body scroll'unu kapat */
body.siparis-olustur-page-active {
  overflow: hidden !important;
  height: 100vh !important;
  position: fixed;
  width: 100%;
}

body.siparis-olustur-page-active html {
  overflow: hidden !important;
  height: 100% !important;
}

.siparis-olustur-header {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 2px solid #e1e5e9;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.siparis-olustur-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  max-width: 100%;
}

.siparis-olustur-title h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
}

.siparis-olustur-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.siparis-olustur-geri-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8f9fa;
  color: #6c757d;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
}

.siparis-olustur-geri-btn:hover {
  background: #a3174a;
  color: #ffffff;
}

.siparis-olustur-fullscreen-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8f9fa;
  color: #6c757d;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
}

.siparis-olustur-fullscreen-btn:hover {
  background: #17a351;
  color: #ffffff;
}

.siparis-olustur-kapat-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f8f9fa;
  color: #6c757d;
  border-radius: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 18px;
}

.siparis-olustur-kapat-btn:hover {
  background: #dc3545;
  color: #ffffff;
}

/* Sipariş İşlemleri Header Butonu - Sayac Fab Stili ile Glow Animasyonu */
.siparis-islemleri-header-btn {
  position: relative;
  background: #ffffff !important;
  border: 0px !important;
  border-radius: 0px;
  box-shadow: 0 4px 24px rgba(163, 23, 74, 0.2), 0 1.5px 6px rgba(0, 0, 0, 0.05);
  transition: background 0.2s, box-shadow 0.2s, border 0.2s;
  animation: siparis-islemleri-glow-pulse 2s ease-in-out infinite;
}

.siparis-islemleri-header-btn .siparis-islemleri-icon {
  display: inline-block;
  position: relative;
  z-index: 2;
  color: #a3174a;
  transition: color 0.2s;
}

/* Glow animasyonu - çevresindeki glow artıp azalıyor */
@keyframes siparis-islemleri-glow-pulse {
  0% {
    box-shadow: 0 4px 24px rgba(163, 23, 74, 0.2), 0 1.5px 6px rgba(0, 0, 0, 0.05);
  }
  50% {
    box-shadow: 0 8px 32px rgba(163, 23, 74, 0.4), 0 4px 12px rgba(163, 23, 74, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 4px 24px rgba(163, 23, 74, 0.2), 0 1.5px 6px rgba(0, 0, 0, 0.05);
  }
}

/* Sipariş İşlemleri Header Butonu - Hover ve Active Durumları (Beyaz Arka Plan) */
.siparis-islemleri-header-btn:hover,
.siparis-islemleri-header-btn:active,
.siparis-islemleri-header-btn:focus,
.siparis-islemleri-header-btn.active,
.siparis-islemleri-header-btn.btn-info-light:hover,
.siparis-islemleri-header-btn.btn-info-light:active,
.siparis-islemleri-header-btn.btn-info-light:focus,
.siparis-islemleri-header-btn.btn-info-light.active,
.siparis-islemleri-header-btn.full-screen:hover,
.siparis-islemleri-header-btn.full-screen:active,
.siparis-islemleri-header-btn.full-screen:focus,
.siparis-islemleri-header-btn.full-screen.active,
.theme-info .siparis-islemleri-header-btn.btn-info-light:hover,
.theme-info .siparis-islemleri-header-btn.btn-info-light:active,
.theme-info .siparis-islemleri-header-btn.btn-info-light:focus,
.theme-info .siparis-islemleri-header-btn.btn-info-light.active {
  animation: none !important;
  background: #e3bcca !important;
  background-color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 32px rgba(163, 23, 74, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  color: #a3174a !important;
}

.siparis-islemleri-header-btn:hover .siparis-islemleri-icon,
.siparis-islemleri-header-btn:active .siparis-islemleri-icon,
.siparis-islemleri-header-btn:focus .siparis-islemleri-icon,
.siparis-islemleri-header-btn.active .siparis-islemleri-icon,
.siparis-islemleri-header-btn.btn-info-light:hover .siparis-islemleri-icon,
.siparis-islemleri-header-btn.btn-info-light:active .siparis-islemleri-icon,
.siparis-islemleri-header-btn.btn-info-light:focus .siparis-islemleri-icon,
.siparis-islemleri-header-btn.btn-info-light.active .siparis-islemleri-icon,
.theme-info .siparis-islemleri-header-btn.btn-info-light:hover .siparis-islemleri-icon,
.theme-info .siparis-islemleri-header-btn.btn-info-light:active .siparis-islemleri-icon,
.theme-info .siparis-islemleri-header-btn.btn-info-light:focus .siparis-islemleri-icon,
.theme-info .siparis-islemleri-header-btn.btn-info-light.active .siparis-islemleri-icon {
  color: #a3174a !important;
}

.siparis-olustur-content {
  padding: 0;
  max-width: 100%;
  height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  flex: 1;
  min-height: 0;
}

/* Sipariş İşlemleri tam ekran için */
.siparis-islemleri-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.siparis-islemleri-fullscreen .container-full {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ========================================
   UYGULAMALAR SAYFASI ÖDEME MODALI - BENZERSİZ STİLLER
   ======================================== */
.odeme-modal-overlay-uygulama {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.odeme-modal-container-uygulama {
  display: flex;
  width: 90%;
  max-width: 1000px;
  height: 80vh;
  background: white;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Sol Panel - Branding */
.odeme-modal-left-panel-uygulama {
  width: 40%;
  background: linear-gradient(135deg, #a3174a, #c41e3a);
  position: relative;
  overflow: hidden;
}

.odeme-branding-content-uygulama {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  color: white;
  gap: 30px;
}

.odeme-main-dish-uygulama {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.odeme-app-logo-uygulama {
  width: 120px;
  height: 120px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  padding: 15px;
}

.odeme-app-logo-placeholder-uygulama {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
}

.odeme-brand-name-uygulama h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.odeme-progress-indicator-uygulama {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.odeme-progress-dot-uygulama {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0;
  transition: all 0.3s ease;
}

.odeme-progress-dot-active-uygulama {
  background: white;
}

/* Sağ Panel - İçerik */
.odeme-modal-right-panel-uygulama {
  width: 60%;
  padding: 12px 15px 15px 15px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  max-height: 100%;
}

.odeme-modal-header-uygulama {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.odeme-close-btn-uygulama {
  background: none;
  border: none;
  font-size: 16px;
  color: #a3174a;
  cursor: pointer;
  padding: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.odeme-close-btn-uygulama:hover {
  background: rgba(163, 23, 74, 0.1);
}

.odeme-step-content-uygulama {
  flex: 1;
}

.odeme-step-title-uygulama {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0 0 4px 0;
}

.odeme-step-description-uygulama {
  color: #666;
  margin: 0 0 12px 0;
  font-size: 12px;
}

/* Paket Seçimi */
.odeme-package-options-uygulama {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.odeme-package-option-uygulama {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-package-option-uygulama:hover {
  border-color: #a3174a;
}

.odeme-package-option-selected-uygulama {
  border-color: #a3174a;
  background: rgba(163, 23, 74, 0.05);
}

.odeme-package-radio-uygulama {
  margin-right: 15px;
}

.odeme-radio-circle-uygulama {
  width: 20px;
  height: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.odeme-radio-circle-selected-uygulama {
  border-color: #a3174a;
  background: #a3174a;
  color: white;
}

.odeme-package-info-uygulama {
  flex: 1;
}

.odeme-package-name-uygulama {
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.odeme-package-price-uygulama {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.odeme-price-uygulama {
  color: #666;
  font-size: 14px;
}

.odeme-discount-uygulama {
  color: #a3174a;
  font-size: 12px;
  font-weight: 600;
}

.odeme-package-total-uygulama {
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

/* Fatura Bilgileri */
.odeme-invoice-type-uygulama {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.odeme-type-btn-uygulama {
  flex: 1;
  padding: 10px;
  border: 1px solid #e1e5e9;
  background: white;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
}

.odeme-type-btn-active-uygulama {
  background: #f8f9fa;
  color: #a3174a;
  border-color: #a3174a;
}

.odeme-form-fields-uygulama {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 15px;
}

.odeme-form-row-uygulama {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.odeme-form-group-uygulama {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.odeme-form-group-uygulama label {
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  font-size: 13px;
}

.odeme-form-group-uygulama input,
.odeme-form-group-uygulama textarea {
  padding: 8px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  font-size: 13px;
}

.odeme-form-group-uygulama textarea {
  height: 60px;
  resize: vertical;
}

.odeme-selected-package-info-uygulama {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 0;
  margin-bottom: 12px;
}

.odeme-selected-package-info-uygulama h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.odeme-package-summary-uygulama {
  font-weight: 600;
  color: #333;
  font-size: 18px;
}

.odeme-vat-info-uygulama {
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

/* Ödeme */
/* Modern Kredi Kartı Görseli */
.odeme-credit-card-visual-uygulama {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 30px;
  border-radius: 16px;
  margin-bottom: 30px;
  position: relative;
  height: 200px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.odeme-credit-card-visual-uygulama.card-type-visa {
  background: linear-gradient(135deg, #1a1f71 0%, #192f6d 100%);
}

.odeme-credit-card-visual-uygulama.card-type-mastercard {
  background: linear-gradient(135deg, #eb001b 0%, #f79e1b 100%);
}

.odeme-credit-card-visual-uygulama.card-type-amex {
  background: linear-gradient(135deg, #006fcf 0%, #012169 100%);
}

.odeme-credit-card-visual-uygulama.card-type-discover {
  background: linear-gradient(135deg, #ff6000 0%, #ffa500 100%);
}

.odeme-card-background-uygulama {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
}

.odeme-card-content-uygulama {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.odeme-card-header-uygulama {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.odeme-card-chip-uygulama {
  width: 50px;
  height: 40px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
}

.chip-line {
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  margin: 2px 0;
  border-radius: 1px;
}

.odeme-card-brand-uygulama {
  font-size: 32px;
  opacity: 0.9;
}

.card-brand-img {
  width: 60px;
  height: auto;
  filter: brightness(0) invert(1);
}

.odeme-card-number-uygulama {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 3px;
  font-family: 'Courier New', monospace;
  margin: 20px 0;
}

.odeme-card-footer-uygulama {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.odeme-card-name-uygulama {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1;
}

.odeme-card-expiry-uygulama {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* Modern Form Stilleri */
.odeme-payment-form-modern-uygulama {
  margin-bottom: 20px;
}

.odeme-form-group-modern-uygulama {
  margin-bottom: 20px;
}

.odeme-form-label-modern-uygulama {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.odeme-input-wrapper-modern-uygulama {
  position: relative;
}

.odeme-input-modern-uygulama {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #fff;
}

.odeme-input-modern-uygulama:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.odeme-card-icon-uygulama {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.odeme-card-icon-uygulama img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.odeme-card-icon-uygulama i {
  font-size: 20px;
  color: #999;
}

.odeme-form-row-modern-uygulama {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.odeme-security-options-modern-uygulama {
  margin: 20px 0;
}

.odeme-checkbox-label-modern-uygulama {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  user-select: none;
}

.odeme-checkbox-label-modern-uygulama input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin-right: 12px;
  margin-top: 2px;
  cursor: pointer;
  accent-color: #a3174a;
  flex-shrink: 0;
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  position: relative;
  z-index: 1;
  opacity: 1;
}

.odeme-checkbox-label-modern-uygulama input[type="checkbox"]:checked {
  accent-color: #a3174a;
}

.odeme-checkbox-label-modern-uygulama span {
  flex: 1;
  pointer-events: auto;
}

.odeme-contract-approvals-uygulama {
  margin: 20px 0;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.odeme-contract-link-uygulama {
  color: #a3174a;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}

.odeme-contract-link-uygulama:hover {
  color: #8b1238;
}

/* Sözleşme Modal */
.contract-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10001;
  animation: fadeIn 0.3s ease;
}

.contract-modal-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.contract-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #a3174a, #8b1238);
  border-radius: 12px 12px 0 0;
}

.contract-modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.contract-modal-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.contract-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.contract-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 140px);
}

.contract-content {
  line-height: 1.8;
  color: #333;
}

.contract-content h2 {
  color: #a3174a;
  margin-bottom: 20px;
  font-size: 24px;
}

.contract-content p {
  margin-bottom: 12px;
}

.contract-content ul {
  margin-left: 20px;
  margin-bottom: 12px;
}

.contract-content li {
  margin-bottom: 8px;
}

.contract-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

.contract-modal-btn {
  padding: 10px 24px;
  background: #a3174a;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.contract-modal-btn:hover {
  background: #8b1238;
}

/* Eski stiller kaldırıldı - yeni modern stiller yukarıda */

/* Modal Butonlar */
.odeme-modal-actions-uygulama {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #e1e5e9;
  position: sticky;
  bottom: 0;
  background: white;
}

.odeme-btn-primary-uygulama,
.odeme-btn-secondary-uygulama {
  padding: 12px 24px;
  border: none;
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.odeme-btn-primary-uygulama {
  background: #a3174a !important;
  color: white !important;
  border: 1px solid #a3174a !important;
}

.odeme-btn-primary-uygulama:hover:not(:disabled) {
  background: #c41e3a !important;
  border-color: #c41e3a !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.odeme-btn-primary-uygulama:disabled {
  background: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed;
}

.odeme-btn-primary-uygulama:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.2);
}

.odeme-btn-secondary-uygulama {
  background: white;
  color: #a3174a;
  border: 1px solid #e1e5e9;
}

.odeme-btn-secondary-uygulama:hover {
  background: #f8f9fa;
}

/* Responsive */
@media (max-width: 768px) {
  .odeme-modal-container-uygulama {
    flex-direction: column;
    width: 95%;
    height: 90vh;
  }
  
  .odeme-modal-left-panel-uygulama {
    width: 100%;
    height: 200px;
  }
  
  .odeme-modal-right-panel-uygulama {
    width: 100%;
    height: calc(100% - 200px);
  }
  
  .odeme-form-row-uygulama {
    flex-direction: column;
  }
  
  .odeme-form-row-modern-uygulama {
    grid-template-columns: 1fr;
  }
  
  .odeme-credit-card-visual-uygulama {
    height: 160px;
    padding: 20px;
  }
  
  .odeme-card-number-uygulama {
    font-size: 18px;
    letter-spacing: 2px;
  }
  
  .contract-modal-container {
    width: 95%;
    max-height: 95vh;
  }
  
  .contract-modal-body {
    max-height: calc(95vh - 140px);
  }
}

/* ========================================
   UYGULAMA ADMIN İŞLEMLERİ STİLLERİ
   ======================================== */
.modern-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

.modern-uygulama-admin-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.modern-uygulama-admin-actions .modern-btn {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 6px 10px;
  font-size: 12px;
}

.modern-btn-warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

.modern-btn-warning:hover {
  background-color: #e0a800;
  border-color: #d39e00;
  color: #000;
}

.modern-btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.modern-btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
  color: #fff;
}

.modern-btn.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
  height: 28px;
}

/* ========================================
   UYGULAMA EKLE/DÜZENLE MODAL STİLLERİ
   ======================================== */
.modal-overlay-uygulama-admin {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-content-uygulama-admin {
  background: #fff;
  border-radius: 0px;
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.modal-header-uygulama-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}

.modal-title-uygulama-admin {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
  font-family: "Rubik", sans-serif;
}

.modal-close-btn-uygulama-admin {
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  transition: all 0.2s;
}

.modal-close-btn-uygulama-admin:hover {
  background: rgba(163, 23, 74, 0.1);
  color: #a3174a;
}

.modal-body-uygulama-admin {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
}

.modal-footer-uygulama-admin {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px;
  border-top: 1px solid #e9ecef;
  background: #f8f9fa;
}

.form-group-uygulama-admin {
  margin-bottom: 20px;
}

.form-label-uygulama-admin {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #212529;
  font-size: 14px;
  font-family: "Rubik", sans-serif;
}

.form-control-uygulama-admin {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 0px;
  font-size: 14px;
  font-family: "Rubik", sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control-uygulama-admin:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.form-row-uygulama-admin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.form-row-uygulama-admin .form-group-uygulama-admin {
  margin-bottom: 0;
}

.form-row-uygulama-admin-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.form-row-uygulama-admin-2col .form-group-uygulama-admin {
  margin-bottom: 0;
}

/* Form Bölümleri */
.form-section-uygulama-admin {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 0px;
  padding: 20px;
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

.form-section-uygulama-admin:hover {
  border-color: #dee2e6;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.form-section-header-uygulama-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f3f4;
}

.form-section-header-uygulama-admin i {
  color: #a3174a;
  font-size: 18px;
}

.form-section-header-uygulama-admin h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #212529;
  font-family: "Rubik", sans-serif;
}

.form-label-uygulama-admin i {
  margin-right: 6px;
  color: #6c757d;
  font-size: 13px;
}

/* Fiyat Kartları */
.fiyat-grid-uygulama-admin {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 16px;
}

.fiyat-card-uygulama-admin {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.fiyat-card-uygulama-admin::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a3174a, #c41e3a);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fiyat-card-uygulama-admin:hover {
  border-color: #a3174a;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.15);
  transform: translateY(-2px);
}

.fiyat-card-uygulama-admin:hover::before {
  opacity: 1;
}

.fiyat-card-header-uygulama-admin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  color: #333;
  font-size: 13px;
  font-family: "Rubik", sans-serif;
}

.fiyat-card-header-uygulama-admin i {
  color: #a3174a;
  font-size: 14px;
}

.fiyat-card-body-uygulama-admin {
  position: relative;
  display: flex;
  align-items: center;
}

.fiyat-input-uygulama-admin {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border: 1px solid #ced4da;
  border-radius: 0px;
  font-size: 15px;
  font-weight: 600;
  font-family: "Rubik", sans-serif;
  color: #212529;
  transition: all 0.2s ease;
  background: #ffffff;
}

.fiyat-input-uygulama-admin:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.fiyat-input-uygulama-admin::placeholder {
  color: #adb5bd;
  font-weight: 400;
}

.fiyat-currency-uygulama-admin {
  position: absolute;
  right: 12px;
  color: #a3174a;
  font-weight: 700;
  font-size: 16px;
  font-family: "Rubik", sans-serif;
  pointer-events: none;
}

.form-checkbox-label-uygulama-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  color: #333;
  padding: 8px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  background: #ffffff;
  transition: all 0.2s ease;
  user-select: none;
}

.form-checkbox-label-uygulama-admin:hover {
  background: #f8f9fa;
  border-color: #a3174a;
}

.form-checkbox-label-uygulama-admin:has(input:checked) {
  background: rgba(163, 23, 74, 0.05);
  border-color: #a3174a;
  color: #a3174a;
  font-weight: 600;
}

.form-checkbox-uygulama-admin {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #a3174a;
  border: 2px solid #dee2e6;
  border-radius: 0px;
  margin: 0;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.form-checkbox-uygulama-admin:checked {
  background-color: #a3174a;
  border-color: #a3174a;
}

.form-checkbox-uygulama-admin:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
  border-color: #a3174a;
}

.form-checkbox-label-uygulama-admin span {
  flex: 1;
  line-height: 1.4;
}

/* Gradient Renk Seçici */
.gradient-color-picker-wrapper-uygulama-admin {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gradient-color-pickers-uygulama-admin {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.color-picker-item-uygulama-admin {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-picker-label-uygulama-admin {
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  font-family: "Rubik", sans-serif;
}

.color-picker-input-wrapper-uygulama-admin {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-picker-input-uygulama-admin {
  width: 60px;
  height: 40px;
  border: 2px solid #ced4da;
  border-radius: 0px;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: all 0.2s ease;
}

.color-picker-input-uygulama-admin:hover {
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.color-picker-input-uygulama-admin::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker-input-uygulama-admin::-webkit-color-swatch {
  border: none;
  border-radius: 0px;
}

.color-text-input-uygulama-admin {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ced4da;
  border-radius: 0px;
  font-size: 14px;
  font-family: "Rubik", sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  font-weight: 500;
}

.color-text-input-uygulama-admin:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

.gradient-preview-uygulama-admin {
  width: 100%;
  height: 60px;
  border: 2px solid #ced4da;
  border-radius: 0px;
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  transition: all 0.2s ease;
}

.gradient-preview-uygulama-admin:hover {
  border-color: #a3174a;
}

.gradient-text-input-uygulama-admin {
  margin-top: 0;
}

/* Logo Yükleme */
.logo-upload-wrapper-uygulama-admin {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logo-path-input-uygulama-admin {
  margin-bottom: 0;
}

.logo-upload-actions-uygulama-admin {
  display: flex;
  gap: 8px;
  align-items: center;
}

.logo-upload-btn-uygulama-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #a3174a;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logo-upload-btn-uygulama-admin:hover:not(.logo-upload-btn-disabled-uygulama-admin) {
  background-color: #8b1340;
}

.logo-upload-btn-disabled-uygulama-admin {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.logo-remove-btn-uygulama-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: #dc3545;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  font-size: 13px;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.logo-remove-btn-uygulama-admin:hover:not(:disabled) {
  background-color: #c82333;
}

.logo-remove-btn-uygulama-admin:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.logo-upload-info-uygulama-admin {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 0px;
  color: #856404;
  font-size: 12px;
  font-family: "Rubik", sans-serif;
}

.logo-upload-info-uygulama-admin i {
  color: #ffc107;
}

.logo-preview-uygulama-admin {
  margin-top: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

.logo-preview-uygulama-admin img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
}

.btn-primary-uygulama-admin {
  background-color: #a3174a;
  border-color: #a3174a;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0px;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}

.btn-primary-uygulama-admin:hover:not(:disabled) {
  background-color: #8b1340;
  border-color: #8b1340;
}

.btn-primary-uygulama-admin:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary-uygulama-admin {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
  padding: 10px 20px;
  border-radius: 0px;
  font-weight: 500;
  font-family: "Rubik", sans-serif;
  transition: all 0.2s;
}

.btn-secondary-uygulama-admin:hover {
  background-color: #5a6268;
  border-color: #545b62;
}

@media (max-width: 768px) {
  .form-row-uygulama-admin {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .form-row-uygulama-admin-2col {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .fiyat-grid-uygulama-admin {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .gradient-color-pickers-uygulama-admin {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .form-checkbox-label-uygulama-admin {
    padding: 10px;
    font-size: 13px;
  }
  
  .form-section-uygulama-admin {
    padding: 16px;
  }
  
  .modal-content-uygulama-admin {
    max-width: 100%;
    margin: 10px;
  }
  
  .modal-header-uygulama-admin,
  .modal-body-uygulama-admin,
  .modal-footer-uygulama-admin {
    padding: 16px;
  }
  
  .modern-header-actions {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
  }
  
  .modern-header-actions .modern-btn {
    flex: 1;
  }
}

@media (max-width: 480px) {
  .fiyat-grid-uygulama-admin {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   TAM EKRAN ONAY MODAL
   ======================================== */
.tam-ekran-onay-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

.tam-ekran-onay-modal {
  max-width: 550px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  background: #ffffff;
  border: 2px solid #a3174a;
  box-shadow: 0 15px 50px rgba(163, 23, 74, 0.3);
}

.tam-ekran-modal-header {
  background: linear-gradient(135deg, #a3174a 0%, #c41e3a 100%);
  color: #ffffff;
  padding: 20px 25px;
  border-bottom: 3px solid #8b1340;
}

.tam-ekran-modal-header .modal-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.tam-ekran-modal-header .modal-title i {
  font-size: 22px;
}

.tam-ekran-modal-header .modal-close-btn {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.tam-ekran-modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.tam-ekran-modal-body {
  padding: 40px 30px;
  text-align: center;
}

.tam-ekran-onay-icerik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.tam-ekran-onay-icon-wrapper {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.tam-ekran-onay-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #a3174a 0%, #c41e3a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 45px;
  box-shadow: 0 8px 25px rgba(163, 23, 74, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 25px rgba(163, 23, 74, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 35px rgba(163, 23, 74, 0.6);
  }
}

.tam-ekran-onay-baslik {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  letter-spacing: -0.5px;
}

.tam-ekran-onay-text {
  font-size: 16px;
  color: #5a6c7d;
  line-height: 1.6;
  margin: 0;
  max-width: 450px;
}

.tam-ekran-onay-avantajlar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  margin-top: 10px;
  padding: 20px;
  background: #f8f9fa;
  border-left: 4px solid #a3174a;
}

.avantaj-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-size: 14px;
  color: #495057;
}

.avantaj-item i {
  color: #28a745;
  font-size: 18px;
  flex-shrink: 0;
}

.avantaj-item span {
  flex: 1;
}

.tam-ekran-modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-top: 2px solid #e9ecef;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.tam-ekran-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  font-family: "Rubik", sans-serif;
}

.tam-ekran-btn i {
  font-size: 16px;
}

.tam-ekran-btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #6c757d;
}

.tam-ekran-btn-secondary:hover {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.tam-ekran-btn-primary {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.tam-ekran-btn-primary:hover {
  background: #8b1340;
  border-color: #8b1340;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(163, 23, 74, 0.4);
}

.tam-ekran-btn-primary:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .tam-ekran-onay-modal {
    max-width: 95%;
    width: 95%;
  }

  .tam-ekran-modal-body {
    padding: 30px 20px;
  }

  .tam-ekran-onay-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .tam-ekran-onay-icon {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }

  .tam-ekran-onay-baslik {
    font-size: 20px;
  }

  .tam-ekran-onay-text {
    font-size: 14px;
  }

  .tam-ekran-modal-footer {
    flex-direction: column;
    gap: 10px;
  }

  .tam-ekran-btn {
    width: 100%;
    min-width: auto;
  }

  .tam-ekran-onay-avantajlar {
    padding: 15px;
  }
}

/* ========================================
   GRUP SİLME ONAY MODAL
   ======================================== */
.grup-silme-onay-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

.grup-silme-onay-modal {
  max-width: 550px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  background: #ffffff;
  border: 2px solid #dc3545;
  box-shadow: 0 15px 50px rgba(220, 53, 69, 0.3);
}

.grup-silme-modal-header {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  padding: 20px 25px;
  border-bottom: 3px solid #bd2130;
}

.grup-silme-modal-header .modal-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.grup-silme-modal-header .modal-title i {
  font-size: 22px;
}

.grup-silme-modal-header .modal-close-btn {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.grup-silme-modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.grup-silme-modal-body {
  padding: 40px 30px;
  text-align: center;
}

.grup-silme-onay-icerik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.grup-silme-onay-icon-wrapper {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.grup-silme-onay-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 45px;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
  animation: shake 0.5s ease-in-out;
}

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

.grup-silme-onay-baslik {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.4;
}

.grup-silme-grup-bilgisi {
  width: 100%;
  max-width: 450px;
  margin: 10px 0;
}

.grup-silme-grup-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #a3174a 0%, #c41e3a 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 0;
  box-shadow: 0 4px 15px rgba(163, 23, 74, 0.3);
}

.grup-silme-grup-badge i {
  font-size: 18px;
}

.grup-silme-uyari-kutusu {
  width: 100%;
  max-width: 450px;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-left: 5px solid #ffc107;
  padding: 20px;
  margin-top: 15px;
  text-align: left;
}

.grup-silme-uyari-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #856404;
}

.grup-silme-uyari-header i {
  font-size: 20px;
  color: #ffc107;
}

.grup-silme-uyari-text {
  margin: 0;
  color: #856404;
  font-size: 14px;
  line-height: 1.6;
}

.grup-silme-uyari-text strong {
  color: #a3174a;
  font-weight: 700;
}

.grup-silme-bilgi-kutusu {
  width: 100%;
  max-width: 450px;
  background: #d1ecf1;
  border: 2px solid #17a2b8;
  border-left: 5px solid #17a2b8;
  padding: 20px;
  margin-top: 15px;
  text-align: left;
}

.grup-silme-bilgi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #0c5460;
}

.grup-silme-bilgi-header i {
  font-size: 20px;
  color: #17a2b8;
}

.grup-silme-bilgi-text {
  margin: 0;
  color: #0c5460;
  font-size: 14px;
  line-height: 1.6;
}

.grup-silme-modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-top: 2px solid #e9ecef;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.grup-silme-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  font-family: "Rubik", sans-serif;
}

.grup-silme-btn i {
  font-size: 16px;
}

.grup-silme-btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #6c757d;
}

.grup-silme-btn-secondary:hover {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.grup-silme-btn-danger {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

.grup-silme-btn-danger:hover {
  background: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.grup-silme-btn-danger:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .grup-silme-onay-modal {
    max-width: 95%;
    width: 95%;
  }

  .grup-silme-modal-body {
    padding: 30px 20px;
  }

  .grup-silme-onay-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .grup-silme-onay-icon {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }

  .grup-silme-onay-baslik {
    font-size: 18px;
  }

  .grup-silme-modal-footer {
    flex-direction: column;
    gap: 10px;
  }

  .grup-silme-btn {
    width: 100%;
    min-width: auto;
  }

  .grup-silme-uyari-kutusu,
  .grup-silme-bilgi-kutusu {
    padding: 15px;
  }

  .grup-silme-grup-badge {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ========================================
   MASAYI BOŞALT ONAY MODAL
   ======================================== */
.masayi-bosalt-onay-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 999999999 !important;
}

.masayi-bosalt-onay-modal {
  max-width: 550px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  background: #ffffff;
  border: 2px solid #dc3545;
  box-shadow: 0 15px 50px rgba(220, 53, 69, 0.3);
  z-index: 999999999 !important;
}

.masayi-bosalt-modal-header {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #ffffff;
  padding: 20px 25px;
  border-bottom: 3px solid #bd2130;
}

.masayi-bosalt-modal-header .modal-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.masayi-bosalt-modal-header .modal-title i {
  font-size: 22px;
}

.masayi-bosalt-modal-header .modal-close-btn {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.masayi-bosalt-modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.masayi-bosalt-modal-body {
  padding: 40px 30px;
  text-align: center;
}

.masayi-bosalt-onay-icerik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.masayi-bosalt-onay-icon-wrapper {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.masayi-bosalt-onay-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 45px;
  box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
  animation: shake 0.5s ease-in-out;
}

.masayi-bosalt-onay-baslik {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
}

.masayi-bosalt-masa-bilgisi {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.masayi-bosalt-masa-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 2px solid #dc3545;
  border-radius: 0px;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2);
}

.masayi-bosalt-masa-badge i {
  color: #dc3545;
  font-size: 18px;
}

.masayi-bosalt-uyari-kutusu {
  width: 100%;
  padding: 20px;
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 0px;
  text-align: left;
  margin-top: 10px;
}

.masayi-bosalt-uyari-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  color: #856404;
}

.masayi-bosalt-uyari-header i {
  font-size: 20px;
  color: #ffc107;
}

.masayi-bosalt-uyari-text {
  font-size: 15px;
  color: #856404;
  margin: 0;
  line-height: 1.6;
}

.masayi-bosalt-uyari-text strong {
  color: #dc3545;
  font-weight: 700;
}

.masayi-bosalt-modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-top: 2px solid #e9ecef;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.masayi-bosalt-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  font-family: "Rubik", sans-serif;
  border-radius: 0px;
}

.masayi-bosalt-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.masayi-bosalt-btn i {
  font-size: 16px;
}

.masayi-bosalt-btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #6c757d;
}

.masayi-bosalt-btn-secondary:hover:not(:disabled) {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.masayi-bosalt-btn-primary {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

.masayi-bosalt-btn-primary:hover:not(:disabled) {
  background: #c82333;
  border-color: #bd2130;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}

.masayi-bosalt-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .masayi-bosalt-onay-modal {
    max-width: 95%;
    width: 95%;
  }

  .masayi-bosalt-modal-body {
    padding: 30px 20px;
  }

  .masayi-bosalt-onay-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .masayi-bosalt-onay-icon {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }

  .masayi-bosalt-onay-baslik {
    font-size: 18px;
  }

  .masayi-bosalt-modal-footer {
    flex-direction: column;
    gap: 10px;
  }

  .masayi-bosalt-btn {
    width: 100%;
    min-width: auto;
  }

  .masayi-bosalt-uyari-kutusu {
    padding: 15px;
  }

  .masayi-bosalt-masa-badge {
    padding: 10px 16px;
    font-size: 14px;
  }
}

/* ========================================
   SİPARİŞ GÖNDERME ONAY MODAL
   ======================================== */
.siparis-gonder-onay-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

.siparis-gonder-onay-modal {
  max-width: 550px;
  width: 90%;
  height: auto;
  max-height: 90vh;
  background: #ffffff;
  border: 2px solid #a3174a;
  box-shadow: 0 15px 50px rgba(163, 23, 74, 0.3);
}

.siparis-gonder-modal-header {
  background: linear-gradient(135deg, #a3174a 0%, #c41e3a 100%);
  color: #ffffff;
  padding: 20px 25px;
  border-bottom: 3px solid #8b1340;
}

.siparis-gonder-modal-header .modal-title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
}

.siparis-gonder-modal-header .modal-title i {
  font-size: 22px;
}

.siparis-gonder-modal-header .modal-close-btn {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.siparis-gonder-modal-header .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.siparis-gonder-modal-body {
  padding: 40px 30px;
  text-align: center;
}

.siparis-gonder-onay-icerik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.siparis-gonder-onay-icon-wrapper {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.siparis-gonder-onay-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #a3174a 0%, #c41e3a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 45px;
  box-shadow: 0 8px 25px rgba(163, 23, 74, 0.4);
}

.siparis-gonder-onay-baslik {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0;
  letter-spacing: -0.5px;
}

.siparis-gonder-bilgi-kutusu {
  width: 100%;
  max-width: 450px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-left: 5px solid #a3174a;
  padding: 25px;
  margin-top: 10px;
}

.siparis-gonder-toplam {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #dee2e6;
  margin-bottom: 20px;
}

.siparis-gonder-toplam-label {
  font-size: 16px;
  font-weight: 600;
  color: #495057;
}

.siparis-gonder-toplam-tutar {
  font-size: 24px;
  font-weight: 700;
  color: #a3174a;
}

.siparis-gonder-detaylar {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

.siparis-gonder-detay-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #6c757d;
}

.siparis-gonder-detay-item i {
  color: #a3174a;
  font-size: 18px;
}

.siparis-gonder-modal-footer {
  padding: 20px 25px;
  background: #f8f9fa;
  border-top: 2px solid #e9ecef;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
}

.siparis-gonder-btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  font-family: "Rubik", sans-serif;
}

.siparis-gonder-btn i {
  font-size: 16px;
}

.siparis-gonder-btn-secondary {
  background: #ffffff;
  color: #6c757d;
  border-color: #6c757d;
}

.siparis-gonder-btn-secondary:hover {
  background: #6c757d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.siparis-gonder-btn-primary {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
}

.siparis-gonder-btn-primary:hover {
  background: #8b1340;
  border-color: #8b1340;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(163, 23, 74, 0.4);
}

.siparis-gonder-btn-primary:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .siparis-gonder-onay-modal {
    max-width: 95%;
    width: 95%;
  }

  .siparis-gonder-modal-body {
    padding: 30px 20px;
  }

  .siparis-gonder-onay-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .siparis-gonder-onay-icon {
    width: 80px;
    height: 80px;
    font-size: 35px;
  }

  .siparis-gonder-onay-baslik {
    font-size: 20px;
  }

  .siparis-gonder-modal-footer {
    flex-direction: column;
    gap: 10px;
  }

  .siparis-gonder-btn {
    width: 100%;
    min-width: auto;
  }

  .siparis-gonder-detaylar {
    flex-direction: column;
    gap: 15px;
  }
}

/* ========================================
   SİPARİŞ GÖNDERME BAŞARI MODAL
   ======================================== */
.siparis-gonder-basari-modal-overlay {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
}

.siparis-gonder-basari-modal {
  max-width: 400px;
  width: 90%;
  height: auto;
  background: #ffffff;
  border: 2px solid #28a745;
  box-shadow: 0 15px 50px rgba(40, 167, 69, 0.3);
}

.siparis-gonder-basari-modal-body {
  padding: 50px 30px;
  text-align: center;
}

.siparis-gonder-basari-icerik {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.siparis-gonder-basari-icon-wrapper {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.siparis-gonder-basari-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 50px;
  box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.siparis-gonder-basari-baslik {
  font-size: 28px;
  font-weight: 700;
  color: #28a745;
  margin: 0;
}

.siparis-gonder-basari-text {
  font-size: 16px;
  color: #6c757d;
  margin: 0;
}

@media (max-width: 768px) {
  .siparis-gonder-basari-modal {
    max-width: 95%;
    width: 95%;
  }

  .siparis-gonder-basari-modal-body {
    padding: 40px 20px;
  }

  .siparis-gonder-basari-icon-wrapper {
    width: 80px;
    height: 80px;
  }

  .siparis-gonder-basari-icon {
    width: 80px;
    height: 80px;
    font-size: 40px;
  }

  .siparis-gonder-basari-baslik {
    font-size: 24px;
  }
}

/* ========================================
   SİPARİŞ DETAY SAYFASI STİLLERİ
   ======================================== */
.siparis-detay-page .sticky-card {
  position: sticky;
  top: 100px;
}

.siparis-detay-page .ozet-satiri {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.siparis-detay-page .ozet-satiri .label {
  color: #333;
  font-weight: 500;
}

.siparis-detay-page .ozet-satiri .value {
  font-weight: 600;
  color: #333;
}

.siparis-detay-page .modern-ek-bilgiler {
  list-style: none;
  padding: 0;
  margin: 0;
}

.siparis-detay-page .modern-ek-bilgiler li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e1e5e9;
  padding: 10px 0;
  font-size: 13px;
}

.siparis-detay-page .modern-ek-bilgiler li .label {
  color: #333;
  font-weight: 500;
}

.siparis-detay-page .modern-ek-bilgiler li .value {
  color: #333;
  font-weight: 400;
}

.siparis-detay-page .modern-ek-bilgiler li:last-child {
  border-bottom: none;
}

@media (max-width: 992px) {
  .siparis-detay-page .sticky-card {
    position: static;
  }
}

/* ========================================
   YENİ ÜRÜN EKLEME MODAL STİLLERİ
   ======================================== */
.yeni-urun-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.yeni-urun-modal {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.yeni-urun-modal .modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

.yeni-urun-modal .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.yeni-urun-modal .modal-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #6c757d;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.yeni-urun-modal .modal-close-btn:hover {
  background: #e9ecef;
  color: #333;
}

.yeni-urun-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.yeni-urun-modal-body .siparis-kategori-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid #e1e5e9;
  padding-bottom: 12px;
}

.yeni-urun-modal-body .siparis-kategori-tab {
  padding: 8px 16px;
  border: none;
  background: #f8f9fa;
  color: #6c757d;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.yeni-urun-modal-body .siparis-kategori-tab:hover {
  background: #e9ecef;
  color: #333;
}

.yeni-urun-modal-body .siparis-kategori-tab.active {
  background: #a3174a;
  color: #ffffff;
}

.yeni-urun-modal-body .modern-urunler-grid {
  margin-top: 20px;
}

.yeni-urun-modal-body .modern-urunler-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

@media (max-width: 768px) {
  .yeni-urun-modal {
    max-width: 95%;
    width: 95%;
    max-height: 95vh;
  }
  
  .yeni-urun-modal-body .modern-urunler-container {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }
}

/* ========================================
   MÜŞTERİ YORUMLARI CAROUSEL
   ======================================== */
.review-carousel-wrapper {
  position: relative;
  width: 100%;
}

.review-carousel-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.review-carousel-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
  width: 100%;
}

.review-carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.review-slide-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 10px;
}

@media (min-width: 768px) {
  .review-slide-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .review-slide-content {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1600px) {
  .review-slide-content {
    grid-template-columns: repeat(4, 1fr);
  }
}

.review-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  overflow: hidden;
}

.review-card-body {
  padding: 20px;
  position: relative;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.review-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

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

.review-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.review-date {
  margin: 0;
  font-size: 12px;
  color: #6c757d;
}

.review-comment {
  margin: 0 0 15px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  min-height: 60px;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
}

.review-rating i {
  color: #ffc107;
  font-size: 14px;
}

.rating-value {
  margin-left: 5px;
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

.review-dish-image {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
}

.review-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
  padding: 15px 0;
}

.review-carousel-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #a3174a;
  background: #ffffff;
  color: #a3174a;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 16px;
}

.review-carousel-btn:hover:not(:disabled) {
  background: #a3174a;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(163, 23, 74, 0.3);
}

.review-carousel-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.review-carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.review-dot {
  width: 10px;
  height: 10px;
  border: none;
  background: #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.review-dot:hover {
  background: #a3174a;
  transform: scale(1.2);
}

.review-dot.active {
  background: #a3174a;
  width: 24px;
  border-radius: 5px;
}

/* Mobil optimizasyonu */
@media (max-width: 767px) {
  .review-carousel-controls {
    gap: 15px;
    margin-top: 20px;
  }
  
  .review-carousel-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .review-dish-image {
    width: 60px;
    height: 60px;
  }
  
  .review-card-body {
    padding: 15px;
  }
}

/* Toast Bildirimleri - Her Zaman En Üstte */
.v-toast,
.v-toast__item,
.v-toast-container {
  z-index: 999999 !important;
}

.v-toast__item {
  position: relative;
  z-index: 999999 !important;
}

/* Toast animasyonları için */
.v-toast--fade-enter-active,
.v-toast--fade-leave-active {
  transition: opacity 0.3s ease;
}

.v-toast--fade-enter-from,
.v-toast--fade-leave-to {
  opacity: 0;
}

/* ============================================
   MODAL Z-INDEX DÜZENLEMELERİ - TÜM MODALLAR HER ZAMAN EN ÜSTTE
   ============================================ */

/* SweetAlert2 modalları - En yüksek öncelik (tüm modalların üzerinde) */
.swal2-container {
  z-index: 99999999 !important;
}

.swal2-popup {
  z-index: 99999999 !important;
}

.swal-high-z-index,
.swal2-popup.swal-high-z-index {
  z-index: 99999999 !important;
}

/* SweetAlert backdrop/overlay */
.swal2-backdrop-show {
  z-index: 99999998 !important;
}

/* Tüm modern modal overlay'ler - SweetAlert'ten bir seviye aşağı */
.modern-modal-overlay {
  z-index: 9999998 !important;
}

/* Modal içindeki tüm SweetAlert modalları en üstte olmalı */
.modern-modal-overlay ~ .swal2-container,
.modern-modal ~ .swal2-container {
  z-index: 99999999 !important;
}

/* QR Kod ve diğer bilgilendirme modalları */
.limit-uyari-bilgisi,
.silme-onay-bilgisi,
.islem-basari-bilgisi {
  z-index: 9999997 !important;
  position: relative;
}

/* Vue Toast bildirimleri - Modallardan daha yüksek */
.v-toast {
  z-index: 99999999 !important;
}

/* Modern Info Banner (Pin Authorize & Sipariş Kanalları) */
.modern-info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.modern-info-banner:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #a3174a;
}

.modern-info-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
}

.modern-info-banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #a3174a 0%, #8a1240 100%);
  color: #ffffff;
  border-radius: 8px;
  font-size: 20px;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(163, 23, 74, 0.2);
}

.modern-info-banner-title {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.modern-info-banner-text {
  font-size: 13px;
  line-height: 1.6;
  color: #6c757d;
  margin: 0;
}

.modern-info-banner-text strong {
  color: #a3174a;
  font-weight: 600;
}

/* Pin Authorize Banner özel stilleri */
.pin-authorize-banner .modern-btn {
  min-width: 200px;
  flex-shrink: 0;
}

/* Sipariş Kanalları Banner özel stilleri */
.siparis-kanal-banner {
  align-items: flex-start;
}

.modern-siparis-kanal-switches {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
  flex-shrink: 0;
}

.modern-siparis-kanal-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modern-siparis-kanal-option:hover {
  background: #f8f9fa;
  border-color: #a3174a;
  transform: translateX(-2px);
}

.modern-siparis-kanal-option span {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
  user-select: none;
}

/* Responsive düzenlemeler */
@media (max-width: 992px) {
  .modern-info-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .modern-siparis-kanal-switches {
    min-width: auto;
    width: 100%;
  }

  .pin-authorize-banner .modern-btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .modern-info-banner {
    padding: 16px;
    gap: 16px;
  }

  .modern-info-banner-content {
    flex-direction: column;
    gap: 12px;
  }

  .modern-info-banner-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .modern-info-banner-title {
    font-size: 15px;
  }

  .modern-info-banner-text {
    font-size: 12px;
  }

  .modern-siparis-kanal-option {
    padding: 12px 14px;
  }

  .modern-siparis-kanal-option span {
    font-size: 13px;
  }
}

/* ========================================
   Kuver/Garsoniye Sayfası Stilleri
   ======================================== */

/* Modern Content Header */
.modern-content-header {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

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

.modern-header-title {
  flex: 1;
}

.modern-page-title {
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-page-subtitle {
  color: #6c757d;
  font-size: 13px;
  margin: 0;
}

/* Modern Breadcrumb */
.modern-breadcrumb {
  margin: 0;
}

.modern-breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.modern-breadcrumb-item {
  display: flex;
  align-items: center;
}

.modern-breadcrumb-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 13px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.modern-breadcrumb-link:hover {
  color: #a3174a;
  text-decoration: none;
}

.modern-breadcrumb-item.active .modern-breadcrumb-link {
  color: #a3174a;
  font-weight: 600;
}

.modern-breadcrumb-item:not(:last-child)::after {
  content: '/';
  color: #6c757d;
  margin-left: 8px;
}

/* Modern Content */
.modern-content {
  margin-top: 20px;
}

/* Modern Card Tasarımı */
.modern-card {
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.modern-card-header {
  background: #f8f9fa;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modern-card-title {
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-card-body {
  padding: 20px;
}

/* Modern Switch Container */
.modern-switch-container {
  display: flex;
  align-items: center;
}

/* Modern Settings Grid */
.modern-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Modern Setting Section */
.modern-setting-section {
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  padding: 20px;
}

.modern-setting-header {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e5e9;
}

.modern-setting-title {
  font-weight: 600;
  color: #333;
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-setting-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Modern Form Elements */
.modern-form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modern-form-label {
  font-weight: 500;
  color: #333;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modern-required {
  color: #dc3545;
  font-weight: 600;
}

.modern-form-control {
  padding: 10px 12px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-size: 13px;
  transition: all 0.3s ease;
  background: #ffffff;
  color: #333;
}

.modern-form-control:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.1);
}

.modern-form-control:disabled {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

/* Modern Checkbox */
.modern-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modern-checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modern-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #a3174a;
  cursor: pointer;
}

.modern-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modern-checkbox-label {
  font-size: 13px;
  color: #333;
  cursor: pointer;
  user-select: none;
}

/* Modern Buton Tasarımları */
.modern-btn {
  padding: 10px 16px;
  border: 1px solid #e1e5e9;
  border-radius: 0px;
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  height: 40px;
  background: #ffffff;
  color: #a3174a;
}

.modern-btn:hover {
  background: #a3174a;
  color: #ffffff;
  border-color: #a3174a;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3);
}

.modern-btn-danger {
  background: #ffffff;
  color: #dc3545;
  border: 1px solid #dc3545;
}

.modern-btn-danger:hover {
  background: #dc3545;
  color: #ffffff;
  border-color: #dc3545;
}

.modern-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Responsive Tasarım - Kuver/Garsoniye */
@media (max-width: 992px) {
  .modern-settings-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .modern-content-header {
    padding: 16px;
  }
  
  .modern-page-title {
    font-size: 1.25rem;
  }
  
  .modern-card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .modern-switch-container {
    align-self: flex-start;
  }
  
  .modern-setting-section {
    padding: 16px;
  }
  
  .modern-action-footer .modern-btn {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 576px) {
  .modern-content-header {
    padding: 12px;
  }
  
  .modern-card-body {
    padding: 16px;
  }
  
  .modern-setting-section {
    padding: 12px;
  }
  
  .modern-form-control {
    font-size: 14px;
    padding: 12px;
  }
  
  .modern-btn {
    height: 44px;
    font-size: 14px;
  }
}

/* Action Footer - Kaydet Butonu için */
.modern-action-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid #e1e5e9;
}

/* Focus States */
.modern-btn:focus,
.modern-form-control:focus,
.modern-checkbox:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(163, 23, 74, 0.2);
}

/* SweetAlert2 - Genis Modal (uzun hata mesajlari icin) */
.swal-wide {
  width: 600px !important;
  max-width: 90vw !important;
}

.swal-wide .swal2-html-container {
  text-align: left !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
}

/* Bildirim Stilleri */
.notifications-menu .menu li.unread {
  background-color: #f8f9fa;
}

.notifications-menu .menu li.unread a {
  font-weight: 600;
  color: #333;
}

.notifications-menu .menu li.unread a:hover {
  background-color: #e9ecef;
}

.notifications-menu .menu .text-bold {
  font-weight: 600 !important;
}

.notifications-menu .menu li a {
  padding: 12px 15px;
  display: block;
}

.notifications-menu .menu .bildirim-baslik {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 4px;
}

.notifications-menu .menu .bildirim-zaman {
  font-size: 11px;
  color: #6c757d;
  display: flex;
  align-items: center;
  margin-top: 4px;
  font-weight: 500;
}

.notifications-menu .menu .bildirim-zaman i {
  font-size: 10px;
  margin-right: 4px;
}

.notifications-menu .menu li.unread .bildirim-zaman {
  color: #a3174a;
  font-weight: 600;
}

.notifications-menu .footer {
  border-top: 1px solid #e9ecef;
  padding: 0;
}

.notifications-menu .footer a {
  display: block;
  padding: 12px 20px;
  text-align: center;
  color: #a3174a;
  font-weight: 500;
  transition: background-color 0.2s;
}

.notifications-menu .footer a:hover {
  background-color: #f8f9fa;
  color: #8b1238;
}

/* Sipariş Oluştur - Barkod Input */
.modern-card-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.barkod-input-wrapper {
  flex: 0 0 auto;
}

.barkod-input-wrapper .barkod-input {
  width: 200px;
  height: 36px;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #e1e5e9;
  border-radius: 0;
  background: #ffffff;
  transition: border-color 0.2s ease;
}

.barkod-input-wrapper .barkod-input:focus {
  outline: none;
  border-color: #a3174a;
  box-shadow: 0 0 0 3px rgba(163, 23, 74, 0.1);
}

@media (max-width: 768px) {
  .modern-card-title-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .barkod-input-wrapper .barkod-input {
    width: 100%;
  }
}

/* Müşteri Arama Dropdown */
.musteri-arama-wrapper {
  position: relative;
}

.musteri-listesi-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e1e5e9;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: -1px;
}

.musteri-listesi-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f0f0f0;
}

.musteri-listesi-item:last-child {
  border-bottom: none;
}

.musteri-listesi-item:hover {
  background-color: #f8f9fa;
  color: #a3174a;
}

.musteri-listesi-item.text-center {
  padding: 16px;
  color: #6c757d;
  font-size: 14px;
}

.musteri-listesi-dropdown::-webkit-scrollbar {
  width: 6px;
}

.musteri-listesi-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.musteri-listesi-dropdown::-webkit-scrollbar-thumb {
  background: #a3174a;
  border-radius: 3px;
}

.musteri-listesi-dropdown::-webkit-scrollbar-thumb:hover {
  background: #8b1238;
}

/* Müşteri Bilgileri Bilgilendirme Kartı - Kompakt Tasarım */
.modern-info-card-compact {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e1e5e9;
  border-left: 4px solid #a3174a;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.modern-info-card-compact:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.modern-info-card-compact-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
}

.modern-info-card-compact-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(163, 23, 74, 0.1);
  border-radius: 50%;
  color: #a3174a;
  font-size: 14px;
}

.modern-info-card-compact-content {
  flex: 1;
  min-width: 0;
}

.modern-info-card-compact-text {
  color: #495057;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.modern-info-card-compact-text strong {
  color: #a3174a;
  font-weight: 600;
}

.modern-info-card-compact-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #6c757d;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.modern-info-card-compact-close:hover {
  background: #f0f0f0;
  color: #a3174a;
}

.modern-info-card-compact-progress {
  height: 3px;
  background: #e9ecef;
  position: relative;
  overflow: hidden;
}

.modern-info-card-compact-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #a3174a 0%, #8b1238 100%);
  transition: width 0.1s linear;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .modern-info-card-compact-header {
    padding: 10px 12px;
    gap: 10px;
  }
  
  .modern-info-card-compact-icon {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .modern-info-card-compact-text {
    font-size: 12px;
  }
  
  .modern-info-card-compact-close {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }
}

/* Siparişi Oluştur Ana Butonu - Daha Belirgin */
.siparis-olustur-ana-btn {
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  min-width: 200px;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3) !important;
  transition: all 0.3s ease !important;
  border: 2px solid #a3174a !important;
  background: linear-gradient(135deg, #a3174a 0%, #8b1238 100%) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.siparis-olustur-ana-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(163, 23, 74, 0.4) !important;
  background: linear-gradient(135deg, #8b1238 0%, #a3174a 100%) !important;
  color: #ffffff !important;
  border-color: #8b1238 !important;
}

.siparis-olustur-ana-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(163, 23, 74, 0.3) !important;
  color: #ffffff !important;
}

.siparis-olustur-ana-btn:focus {
  color: #ffffff !important;
  outline: none;
  box-shadow: 0 4px 12px rgba(163, 23, 74, 0.3), 0 0 0 3px rgba(163, 23, 74, 0.2) !important;
}

.siparis-olustur-ana-btn i {
  font-size: 18px;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .siparis-olustur-ana-btn {
    width: 100%;
    min-width: auto;
    padding: 12px 24px !important;
    font-size: 15px !important;
  }
}

/* Sipariş Kanalı Bildirimi Stilleri */
.siparis-kanal-bildirim-popup {
  border-left: 4px solid #a3174a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.siparis-kanal-bildirim-popup .swal2-title {
  color: #a3174a;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 12px;
}

.siparis-kanal-bildirim-popup .swal2-html-container {
  font-size: 14px;
  line-height: 1.6;
  color: #495057;
}

.siparis-kanal-bildirim-popup .swal2-html-container strong {
  color: #a3174a;
  font-weight: 600;
}

/* 3D Secure Modal Stilleri */
.threeds-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.threeds-modal-container {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
}

.threeds-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #a3174a, #8b1238);
  border-radius: 12px 12px 0 0;
}

.threeds-modal-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.threeds-modal-close {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.threeds-modal-close:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.threeds-modal-body {
  padding: 0;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.threeds-iframe {
  width: 100%;
  height: 500px;
  border: none;
  min-height: 400px;
}

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

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

@media (max-width: 768px) {
  .threeds-modal-container {
    width: 95%;
    max-height: 95vh;
  }
  
  .threeds-iframe {
    height: 400px;
    min-height: 300px;
  }
  
  .threeds-modal-header {
    padding: 16px 20px;
  }
  
  .threeds-modal-header h3 {
    font-size: 16px;
  }
}