/* ============================================================
   FUARIX CRM - TEMİZLENMİŞ VE OPTİMİZE EDİLMİŞ CSS
   Düzeltilen Sorunlar:
   ✅ Z-index hiyerarşisi yeniden yapılandırıldı
   ✅ !important kullanımı minimize edildi
   ✅ Tekrar eden tanımlar birleştirildi
   ✅ Transition çakışmaları giderildi
   ✅ Dark mode tanımları birleştirildi
   ============================================================ */

/* ============================================================
   1. Z-INDEX HIYERARŞİSİ (CSS Değişkenleri)
   ============================================================ */
:root {
  /* Z-Index Katmanları */
  --z-content: 1;
  --z-bottom-nav: 100;
  --z-fab: 150;
  --z-form: 999;
  --z-header: 5000;
  /* Form üstünde olmalı */
  --z-search: 5001;
  --z-login: 5500;
  --z-theme-toggle: 6000;
  --z-overlay: 7000;
  --z-modal: 7500;
  --z-drawer-overlay: 15999;
  --z-drawer: 16000;
  --z-toast: 20000;
  --transition-theme: 0.35s cubic-bezier(0.4, 0, 0.6, 1);

  /* Renk Değişkenleri */
  --fuarix-red: #FF114D;
  --fuarix-black: #1A1A1A;
  --bg: #F8F9FA;
  --card-bg: #FFFFFF;
  --border-color: #F1F1F1;
  --input-bg: #F9F9F9;
  --text-secondary: #888;
  --input-text: #1A1A1A;
  --glass-bg: rgba(255, 255, 255, 0.85);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.04);
  --bg-app: #FFFFFF;
  /* Form Arkaplanı */

  /* Logolar */
  --logo-siyah: url('Fuarix_Logo3_siyah.png');
  --logo-beyaz: url('Fuarix_Logo3_beyaz.png');
  --fuarix-logo: var(--logo-siyah);

  /* Animasyon Eğrileri */
  --ease-premium: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* FSign Indigo Teması */
  --fsign-primary: #4F46E5;
  /* Ana Indigo */
  --fsign-primary-light: #EEF2FF;
  /* Seçili alan fonu (Açık Indigo) */
  --fsign-primary-border: #C7D2FE;
  /* İnce çerçeve rengi */
  --fsign-primary-shadow: rgba(79, 70, 229, 0.2);

  /* Yardımcı Renkler (İptal/Geri) */
  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-text: #475569;


}

/* ============================================================
   2. DARK MODE DEĞIŞKENLERI (Birleştirilmiş)
   ============================================================ */
body.dark-mode {
  --bg: #0F0F0F;
  --fuarix-black: #F5F5F5;
  --card-bg: #1A1A1A;
  --border-color: #2D2D2D;
  --input-bg: #1c1c1e;
  --text-secondary: #AAAAAA;
  --input-text: #FFFFFF;
  --glass-bg: rgba(26, 26, 26, 0.85);
  --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.2);
  --fuarix-logo: var(--logo-beyaz);
  --bg-app: #0F0F0F;

  /* Koyu modda Indigo daha derin ve kontrastlı */
  --fsign-primary-light: rgba(79, 70, 229, 0.15);
  --fsign-primary-border: #4338CA;

  /* Koyu modda ikincil butonlar */
  --btn-secondary-bg: #1e293b;
  --btn-secondary-text: #94a3b8;
}

:root {
  /* Light Mode Renkleri (600 serisi) */
  --status-draft: #6B7280;
  /* Gri */
  --status-success: #059669;
  /* Emerald 600 */
  --status-pending: #D97706;
  /* Amber 600 */
  --status-error: #DC2626;
  /* Red 600 */
  --fsign-primary: #4F46E5;
  /* Indigo 600 */
  --status-operation: #0284c7;
}

/* Dark Mode (Body'deki class ismine göre ayarla, örn: .dark-mode) */
.dark-mode {
  /* Dark Mode Renkleri (500 serisi - daha parlak) */
  --status-draft: #9CA3AF;
  /* Daha açık gri */
  --status-success: #10B981;
  /* Emerald 500 */
  --status-pending: #F59E0B;
  /* Amber 500 */
  --status-error: #EF4444;
  /* Red 500 */
  --fsign-primary: #6366F1;
  /* Indigo 500 */
  --status-operation: #0ea5e9;
}

/* Veya daha spesifik bir çözüm: */
input,
button,
select,
textarea,
h1,
h2,
h3 {
  font-family: 'Inter', sans-serif;
}

/* Sadece bu forma özel (ID kullanarak) placeholder ayarları */
#view-fcrm-form input::placeholder,
#view-fcrm-form textarea::placeholder {
  font-size: 12px;
  /* Biraz daha küçülttüm */
  opacity: 0.5;
  /* 0.3 çok silik olabilir, 0.4 idealdir */
}

/* Tarayıcı uyumlulukları için de ID'yi başa koyuyoruz */
#view-fcrm-form ::-webkit-input-placeholder {
  font-size: 11px;
}

#view-fcrm-form ::-moz-placeholder {
  font-size: 11px;
}

#view-fcrm-form :-ms-input-placeholder {
  font-size: 11px;
}

/* IE */

/* ======================================================
   1. HTML VE BODY (TEMEL AYARLAR)
   ====================================================== */
html {
  height: 100%;
  overscroll-behavior-y: contain;
  /* Tarayıcı yaylanmasını kapat */
}

body {
  /* Tasarım */
  background-color: var(--bg);
  font-family: 'Inter', sans-serif;
  color: var(--fuarix-black);

  /* Düzen */
  min-height: 100%;
  margin: 0;
  padding: 60px 0 80px 0;

  /* Scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Form alanı veya modal açıkken body'nin yaylanmasını durdurur */
body.app-logged-in,
.fcrm-form-container {
  overscroll-behavior-y: none;
  /* 🎯 İşte o haptiği bitiren sihirli satır */
}

/* ======================================================
   2. PULL-TO-REFRESH (INSTAGRAM TARZI / ELASTIC)
   ====================================================== */

#ptr-loader {
  /* KONUM: Header'ın hemen altında, arkada sabit duracak */
  position: fixed;
  top: 70px;
  /* Header boyun (yaklaşık 60px) + biraz boşluk */
  left: 0;
  width: 100%;
  height: 60px;

  /* ORTALAMA */
  display: flex;
  align-items: center;
  justify-content: center;

  /* KATMAN (LAYER): En arkada durmalı */
  z-index: 1;

  /* ETKİLEŞİM: Tıklamaları engellemesin */
  pointer-events: none;

  /* GÖRÜNÜRLÜK: Başta gizli, çekince JS ile açacağız */
  opacity: 0;
  transform: scale(0.8);
  /* Ufak başlasın, çekince büyüsün */
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* JS 'visible' sınıfı ekleyince görünür ol */
#ptr-loader.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- SENİN TASARIMIN (BEYAZ YUVARLAK) --- */
.ptr-icon {
  width: 40px;
  height: 40px;
  background: white;
  /* Tema koyu olsa bile ikon beyaz kalsın istiyorsan */
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  /* Hafif gölge */

  display: flex;
  align-items: center;
  justify-content: center;
}

/* İçindeki Ok/İkon */
.ptr-icon i {
  font-size: 24px;
  color: var(--fuarix-red);
  /* Senin kırmızın */
  transition: transform 0.2s;
  /* Dönüş animasyonu */
}

/* Yükleniyor Animasyonu (Dönme Efekti) */
.ptr-loading .ptr-icon i {
  animation: ptr-spin 0.8s linear infinite;
}

@keyframes ptr-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ======================================================
   3. SAHNE KATMANLARI (KRİTİK!)
   ====================================================== */
/* Sayfaların (Dashboard, FCRM Listesi vb.) Loader'ın 
   ÜSTÜNDE olması lazım ki çekince altı görünsün.
*/
.module-scene {
  position: fixed;
  /* Mevcut yapın */

  /* KATMAN: Loader(1)'den yüksek olmalı */
  z-index: 10;

  /* RENK: Arkadaki loader'ı kapatması için şeffaf OLMAMALI */
  background: var(--bg);
  /* Senin tema arka plan rengin */

  /* PERFORMANS: Telefondaki kasmaları engeller */
  will-change: transform;
}

/* ============================================================
    4. HEADER (Z-Index: 1000) - YENİLENMİŞ VERSİYON
   ============================================================ */
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: var(--z-header, 1000);
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 15px;
  /* Sağdan bir tık daralttık ikonlar için */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Geçişi */
body.dark-mode .top-header {
  background: rgba(20, 20, 20, 0.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Header Grupları */
.header-left-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 4px;
  /* İkonlar arası mesafe */
  margin-left: auto;
}

/* --- 1. DURAK: Ortak Header Buton Standartı --- */
.header-icon-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--fuarix-black);
  cursor: pointer;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  /* Arama kutusu açıldığında ikonun büzülmesini engeller */
}

/* İkon Aile Disiplini (Standart 26px) */
.header-icon-btn i,
.header-icon-btn .theme-icon {
  font-size: 26px;
  display: inline-block;
  line-height: 1;
}

/* Koyu Mod Uyumu */
body.dark-mode .header-icon-btn i {
  color: #FFFFFF;
}

/* Tıklama Hissi */
.header-icon-btn:active {
  transform: scale(0.9);
}

/* Cılız olduğu için 26 */
#themeIcon {
  font-size: 22px !important;
}

/* --- 2. DURAK: Header Logo (Favicon Modu) --- */
.header-logo {
  height: 26px;
  /* İkonların font-size (26px) değeri ile tam eşitledik */
  width: 26px;
  /* Kare formunu koruyoruz */
  object-fit: contain;
  cursor: pointer;
  border-radius: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-left: 4px;
  /* Menü butonu ile arasında çok hafif bir boşluk */
}

.header-logo:active {
  opacity: 0.7;
  transform: scale(0.95);
}

/* Header Orta Başlık (Eğer Kullanıyorsan) */
.header-center-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  max-width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  font-size: 14px;
  color: var(--fuarix-black);
}

.greeting-prefix {
  font-size: 10px;
  text-transform: capitalize;
  letter-spacing: 1px;
  opacity: 0.7;
}

.greeting-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fuarix-black);
}

body.dark-mode .greeting-name {
  color: #FFFFFF;
}

body.dark-mode .greeting-prefix {
  color: rgba(255, 255, 255, 0.6);
}

#formTitleText {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-left: 10px;
  white-space: nowrap;
  animation: slideInLeft 0.4s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }

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

body.dark-mode .top-header button,
body.dark-mode .top-header i,
body.dark-mode #formTitleText {
  color: #ffffff;
}

/* ============================================================
   3. DURAK: ARAMA GRUBU (GÜNCELLENMİŞ VE GARANTİYE ALINMIŞ)
   ============================================================ */

/* Arama Kutusu Taşıyıcısı */
#searchGroup {
  position: absolute;
  right: 85px;
  /* 60px'i 65px yaparak butonla araya "Güvenlik Mesafesi" koyduk */
  display: flex;
  align-items: center;
  height: 38px;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--card-bg, #ffffff);
  border-radius: 20px;
  border: 1px solid var(--border-color, #e0e0e0);
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  z-index: 1001;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0.4s;
  box-sizing: border-box;
  /* Padding'in genişliği bozmasını engeller (KRİTİK) */
}

#searchGroup.active {
  width: 220px;
  opacity: 1;
  visibility: visible;
  padding: 0 15px;
  pointer-events: auto;
}

/* Giriş Alanı (Input) */
#fcrmSearchInput {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--fuarix-black);
  padding: 5px 0;
  box-sizing: border-box;
}

/* Mercek İkonu Butonu (WRAPPER) */
/* İkonun içindeki <i> değil, onu saran butonun z-index'i önemli! */
.header-right-group .header-icon-btn:has(#searchTriggerIcon) {
  position: relative;
  z-index: 1005;
  /* Kutudan (1001) çok daha yukarıya çektik */
}

/* Mercek İkonu (Dokunulmaz Yapı) */
#searchTriggerIcon {
  cursor: pointer;
  font-size: 26px !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
  pointer-events: auto;
  /* Tıklanabilirliği garanti et */
}

/* Senin Çok Sevdiğin: İkon Aktifken (Kırmızı ve Dönme) */
#searchTriggerIcon.active {
  transform: rotate(90deg) scale(1.1);
  color: var(--fuarix-red, #e31e24) !important;
}

/* Dark Mode Ayarları */
body.dark-mode #searchGroup {
  background-color: rgba(45, 45, 45, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode #fcrmSearchInput {
  color: #FFFFFF;
}

body.dark-mode #fcrmSearchInput::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* Senin Çok Sevdiğin: Dark Mode Aktif Kırmızı Koruması */
body.dark-mode #searchTriggerIcon.active {
  color: var(--fuarix-red, #e31e24) !important;
  transform: rotate(90deg) scale(1.15);
  text-shadow: 0 0 8px rgba(227, 30, 36, 0.4);
  /* O meşhur parlama */
}

/* Sahne Yönetimi: Login varken bunları gizle */
body:has(#loginSection:not([style*="display: none"])) .header-left-group,
body:has(#loginSection:not([style*="display: none"])) #searchTriggerIcon,
body:has(#loginSection:not([style*="display: none"])) #floatingActions {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* 1. TEMA İKONUNUN KENDİSİ (Görsel Ruh) */
.theme-icon {
  font-size: 28px !important;
  display: inline-block !important;
  /* Dönme efekti için şart */
  pointer-events: none;
  transition: color 0.4s ease, transform 0.6s var(--ease-bounce, cubic-bezier(0.175, 0.885, 0.32, 1.275));
  vertical-align: middle;
}

/* Dark Mode Durumu (Global) */
body.dark-mode .theme-icon {
  color: #FFD700 !important;
  transform: rotate(360deg) scale(1.15) !important;
}

body:not(.dark-mode) .theme-icon {
  color: var(--fuarix-black) !important;
  transform: rotate(0deg) scale(1) !important;
}

/* A- Login Ekranındaki Buton (Sabit duran) */
#themeToggleBtnLogin {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 6000;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS kısmını şu şekilde güncelle */
body.logged-in #themeToggleBtnLogin {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ============================================================
   7. LOGIN SECTION (Z-Index: 5000)
   ============================================================ */
#loginSection {
  position: fixed !important;
  inset: 0 !important;
  z-index: var(--z-login) !important;
  background-color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
}

body:has(#loginSection:not([style*="display: none"])) .top-header {
  background: transparent;
  border-bottom: none;
  box-shadow: none;
}

body:has(#loginSection:not([style*="display: none"])) #themeToggleBtn {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Login kartı */
#loginSection .card,
.login-card-container {
  position: relative;
  z-index: calc(var(--z-login) + 10);
}

/* ============================================================
   8. YARDIM BUTONU
   ============================================================ */
#loginHelpBtn {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 6000;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fuarix-black);
  transition: transform 0.2s;
}

#loginHelpBtn:active {
  transform: scale(0.9);
}

body.logged-in #loginHelpBtn {
  display: none;
}

body.dark-mode #loginHelpBtn {
  color: #FFF;
}

/* ============================================================
   9. MODAL OVERLAY (Z-Index: 7000)
   ============================================================ */
#helpModalOverlay,
#overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: opacity 0.4s ease,
    visibility 0.4s ease,
    backdrop-filter 0.4s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  /* İçindeki kartı esnek bir kutuya koyar */
  justify-content: center;
  /* Yatayda (sağ-sol) tam ortalar */
  align-items: center;
  /* Dikeyde (yukarı-aşağı) tam ortalar */

}

#helpModalOverlay.active,
#overlay.active,
#helpModalOverlay[style*="display: block"],
#helpModalOverlay[style*="display: flex"],
#overlay[style*="display: block"],
#overlay[style*="display: flex"] {
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  transform: none;
  top: 0;
}

body.logged-in #helpModalOverlay {
  display: none;
}

/* Yardım Modal Kartı */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  /* Ortala */
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.2s, opacity 0.2s linear;
}

.help-card {
  background: var(--card-bg);
  width: 85%;
  max-width: 320px;
  padding: 30px 25px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  position: relative;
  animation: zoomIn 0.3s var(--ease-bounce);
}

body.dark-mode .help-card {
  background: #1A1A1A;
  border-color: #333;
}

.help-icon-circle {
  width: 60px;
  height: 60px;
  background: rgba(255, 17, 77, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px auto;
}

.help-icon-circle i {
  font-size: 32px;
  color: var(--fuarix-red);
}

.email-copy-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 10px 15px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s;
}

.email-copy-box:active {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(0.98);
}

body.dark-mode .email-copy-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.copy-hint {
  font-size: 10px;
  font-weight: 800;
  background: var(--fuarix-black);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
}

body.dark-mode .copy-hint {
  color: #000000;
  background-color: #ECECEC;
}

.send-badge {
  background: var(--fuarix-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.send-badge:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.btn-close-modal {
  margin-top: 20px;
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 1px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   10. KARTLAR (App Card)
   ============================================================ */
.app-card {
  will-change: transform, background-color, box-shadow;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
  width: 92%;
  max-width: 400px;
  border-radius: 24px;
  text-align: center;
  position: relative;
  padding: 40px 25px 30px 25px;
  max-height: 85vh;
  overflow-y: auto;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.6, 1),
    color 0.35s cubic-bezier(0.4, 0, 0.6, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.6, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.6, 1);
}

.app-card .input-field,
.app-card .question-row {
  margin-bottom: 20px;
  text-align: left;
}

.app-card label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 8px;
}

.data-loaded {
  animation: pulse-green 1.5s ease-in-out;
  border-color: #22c55e;
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

body.dark-mode .app-card {
  background: rgba(30, 30, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
    0 15px 30px rgba(220, 38, 38, 0.2);
}

/* ============================================================
   📱 MOBİL TAM EKRAN DÜZENLEMESİ (Responsive)
   ============================================================ */
@media (max-width: 600px) {
  #loginSection {
    padding: 0;
    /* Kenar boşluklarını kaldır */
  }

  .app-card {
    width: 100%;
    /* Tam genişlik */
    height: 100vh;
    /* Tam yükseklik */
    max-width: none;
    /* Kısıtlamayı kaldır */
    max-height: none;
    /* Kısıtlamayı kaldır */
    border-radius: 0;
    /* Köşeleri düzleştir */
    border: none;
    /* Kenarlığı kaldır */

    /* İçeriği dikeyde ortalamak için flex ekleyelim */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 30px;
  }

  /* Mobil tam ekranda yardım ve tema butonları üste binsin */
  #loginHelpBtn {
    top: 24px;
    left: 24px;
  }

  #themeToggleBtnLogin {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 6000;
  }

  /* Logoyu yukarı çekmek için mevcut brand-container'ı kullandık */
  .brand-container {
    margin-top: -50px;
    /* Logoyu yukarı taşıdık */
    margin-bottom: 20px;
  }

  /* Fuarix Hub yazısının olduğu div için ek boşluk gerekirse */
  .brand-container+div {
    margin-top: 50px;
  }

  /* Alt yazıyı (Stamp) en alta sabitleme */
  /* Not: Bu div'in HTML'deki son grup olduğunu varsayıyoruz */
  .app-card>div:last-child {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    margin-top: 0;
  }
}

/* ============================================================
   11. SLOGAN ALANI
   ============================================================ */
.main-layout-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.auth-center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
}

.login-card {
  width: 100%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/*
body.dark-mode .slogan-text {
  color: #F5F5F5;
  text-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}*/

#preLoginMessage {
  margin-top: 30px;
  margin-bottom: 2px;
  text-align: center;
  position: relative;
  height: 30px;
  /* Metinlerin zıplamasını önler */
}

.slogan-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slogan-text {
  position: absolute;
  opacity: 0;
  white-space: nowrap;
  font-size: 13px;
  font-style: italic;
  font-weight: 600;
  color: #FF114D;
  /* Varsayılan siyah tonun */
  /* 11 slogan için toplam döngü 44 saniye (11 x 4s) */
  animation: smartBreathe 44s ease-in-out infinite;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 10px rgba(255, 17, 77, 0.2);
}

/* Kırmızı Vurgu */
.color-red {
  color: #FF114D;
  text-shadow: 0 2px 10px rgba(255, 17, 77, 0.2);
}

/* --- SIRALAMA (DELAY) AYARLARI (9 Slogan İçin) --- */
.slogan-text:nth-child(1) {
  animation-delay: 0s;
}

.slogan-text:nth-child(2) {
  animation-delay: 4s;
}

.slogan-text:nth-child(3) {
  animation-delay: 8s;
}

.slogan-text:nth-child(4) {
  animation-delay: 12s;
}

.slogan-text:nth-child(5) {
  animation-delay: 16s;
}

.slogan-text:nth-child(6) {
  animation-delay: 20s;
}

.slogan-text:nth-child(7) {
  animation-delay: 24s;
}

.slogan-text:nth-child(8) {
  animation-delay: 28s;
}

.slogan-text:nth-child(9) {
  animation-delay: 32s;
}

.slogan-text:nth-child(10) {
  animation-delay: 36s;
}

.slogan-text:nth-child(11) {
  animation-delay: 40s;
}

@keyframes smartBreathe {
  0% {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
  }

  /* Giriş: %1'de tam görünür olur (yaklaşık 0.4s) */
  1.5% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }

  /* Bekleme: %7.5'e kadar ekranda kalır (yaklaşık 3s) */
  7.5% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }

  /* Çıkış: %9'da tamamen kaybolur ve sonraki slogana yer açar */
  9% {
    opacity: 0;
    transform: scale(0.95);
    filter: blur(2px);
  }

  /* Döngü sonuna kadar gizli bekler */
  100% {
    opacity: 0;
  }
}

/* ============================================================
   12. FORM ELEMANLARI
   ============================================================ */
.form-control,
.input-wrapper input,
.input-wrapper select,
.input-wrapper textarea {
  background-color: var(--input-bg);
  color: var(--input-text);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  margin-bottom: 12px;
  font-weight: 500;
  font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.form-control:focus,
.input-wrapper input:focus,
.input-wrapper select:focus,
.input-wrapper textarea:focus {
  border-color: var(--fuarix-red);
  box-shadow: 0 0 0 3px rgba(255, 17, 77, 0.1),
    inset 0 1px 3px rgba(0, 0, 0, 0.04);
  outline: none;
}

body.dark-mode .form-control,
body.dark-mode .input-wrapper input,
body.dark-mode .input-wrapper select,
body.dark-mode .input-wrapper textarea,
body.dark-mode select,
body.dark-mode input,
body.dark-mode .field-container {
  background-color: #1c1c1e;
  color: #ffffff;
  border-color: #2c2c2e;
}

body.dark-mode .form-control:focus,
body.dark-mode .input-wrapper input:focus,
body.dark-mode .input-wrapper select:focus,
body.dark-mode .input-wrapper textarea:focus {
  border-color: var(--fuarix-red);
  background-color: #2c2c2e;
}

body.dark-mode option {
  background-color: #2c2c2e;
  color: #ffffff;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
  opacity: 1;
}

/* ============================================================
   AUTOFILL (OTOMATİK DOLDURMA) RENK YÖNETİMİ
   ============================================================ */

/* 1. IŞIK MODU (Varsayılan - Beyaz Arka Plan) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #1a1a1a !important;
  /* Yazı siyah/füme */
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  /* Arka plan beyaz */
  transition: background-color 5000s ease-in-out 0s;
}

/* 2. KARANLIK MOD (Body'de dark-mode sınıfı varken) */
body.dark-mode input:-webkit-autofill,
body.dark-mode input:-webkit-autofill:hover,
body.dark-mode input:-webkit-autofill:focus,
body.dark-mode input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff !important;
  /* Yazı beyaz */
  -webkit-box-shadow: 0 0 0px 1000px #1c1c1e inset !important;
  /* Arka plan koyu (senin input rengin) */
  transition: background-color 5000s ease-in-out 0s;
}

.input-wrapper label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: block;
}

/* Mobil tarayıcıların şifre göster ikonunu kapatır */
input::-ms-reveal,
input::-ms-clear,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  display: none;
}

/* ============================================================
   13. BUTONLAR
   ============================================================ */
.btn-f {
  background: var(--fuarix-red);
  color: white;
  font-weight: 700;
  font-size: 15px;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1),
    0 4px 15px rgba(255, 17, 77, 0.3),
    0 0 25px rgba(255, 17, 77, 0.15);
  position: relative;
  overflow: visible;
  transition: transform 0.3s var(--ease-premium),
    box-shadow 0.3s var(--ease-premium);
}

.btn-f:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
    0 0 30px rgba(255, 17, 77, 0.5);
}

.btn-f:active {
  transform: scale(0.98);
}

/* Alt Butonlar (Form) */
.footer-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  height: 45px;
  border-radius: 16px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: #f2f2f7;
  color: #1d1d1f;
}

.btn-primary {
  background: #0071e3;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 113, 227, 0.3);
}

.btn-primary:active {
  transform: scale(0.96);
}


/* ============================================================
   14. FCRM DASHBOARD PREMIUM STYLES (REVIZE: V2.1 - 5'li İkon & Nav)
   ============================================================ */

/* 1. MASTER KART (GENEL) */
.fcrm-card {
  background: var(--card-bg);
  border-radius: 24px;
  /* Yuvarlak hatlar */
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  /* Hafif gölge */
  border: 1px solid var(--border-color);
  transition: all 0.25s var(--ease-premium);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.fcrm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
}

/* 2. KART HEADER (Geniş Yapı) */
.fcrm-card-header {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: var(--card-bg);
  position: relative;
}

/* Üst Kısım: Kimlik ve Aksiyonlar */
.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  /* Elemanlar arası boşluk */
  overflow: hidden;
  /* Taşmaları engelle */
}

.card-identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  /* Flexbox text-overflow fix */
}

/* Durum Halkaları (3'lü Çubuk) */
.status-bars {
  display: flex;
  gap: 6px;
  /* Bitişik gibi ama ince boşluk */
  margin-bottom: 6px;
}

/* Firma Adı */
.fcrm-company-name {
  font-size: 17px;
  /* Biraz küçültüldü */
  font-weight: 700;
  color: var(--fuarix-black);
  line-height: 1.3;
  margin-top: 4px;
  white-space: nowrap;
  /* Tek satır */
  overflow: hidden;
  /* Taşanı gizle */
  text-overflow: ellipsis;
  /* ... koy */
  max-width: 100%;
}

.fcrm-id-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  white-space: nowrap;
  /* Satır kayması yok */
}

/* Sağ Üst: Aksiyonlar & Yetkili */
.card-right-section {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Sağa yaslı */
  gap: 6px;
}

.card-actions {
  display: flex;
  gap: 2px;
  /* Butonlar arasındaki boşluğu iyice daralttık (Sıkı görünüm) */
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  /* Kapsayıcı içinde en sağa yapışmasını garanti eder */
  padding-right: 2px;
  /* Kenara çok sıfırlanmasın diye minik bir nefes payı */
}

.action-btn-new {
  width: 28px;
  /* Daha küçük - kompakt */
  height: 28px;
  border-radius: 6px;
  /* Hafif yuvarlak kare ama border yok */
  border: none;
  /* Çerçeve yok */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  /* İkon boyutu - küçültüldü */
  cursor: pointer;
  background: transparent;
  /* Arka plan yok */
  color: var(--text-secondary);
  /* Hafif koyu gri (Hepsi aynı renk) */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}

.action-btn-new:hover {
  transform: translateY(-2px);
  color: #333;
  /* Hover'da biraz daha koyu */
}

.action-btn-new:active {
  transform: scale(0.95);
}

.action-btn-new i {
  font-size: 20px;
}

/* Renk sınıflarını eziyoruz - Hepsi tek renk */
.btn-nav,
.btn-add,
.btn-mail,
.btn-call,
.btn-wa {
  background: transparent !important;
  border: none !important;
  color: #666 !important;
}

.btn-nav:hover,
.btn-add:hover,
.btn-mail:hover,
.btn-call:hover,
.btn-wa:hover {
  color: #222 !important;
}


/* Yetkili İsmi (İkonların Altında) */
.fcrm-auth-name {
  font-size: 11px;
  /* ID badge ile aynı boyutta olsun */
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  margin-top: 4px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
}

/* MOBİL HİZALAMA DÜZELTMELERİ */
@media (max-width: 480px) {
  .card-actions {
    gap: 8px;
  }

  .action-btn-new {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }

  .action-btn-new i {
    font-size: 18px;
  }
}

/* YENİ: Premium görüşme bölümü */
.premium-meetings-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .premium-meetings-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

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

.meetings-title {
  font-size: 12px;
  font-weight: 600;
  color: #007AFF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meetings-count {
  font-size: 10px;
  color: #8E8E93;
  background: rgba(0, 122, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

/* Eski card-bottom-summary'yi düzenle (transparent yap) */
.card-bottom-summary {
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  margin-top: 0;
}

.summary-title {
  display: none;
  /* Başlığı gizle - artık meetings-title var */
}

.summary-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Biraz daha fazla boşluk */
}

/* ✅ YENİ NESİL STATÜ ÇUBUKLARI */
.status-bar-item {
  width: 4px;
  height: 18px;
  /* Biraz kısalttık, daha dengeli durur */
  border-radius: 10px;
  /* 2px yerine tam yuvarlak yaparak "Hap" (Pill) formuna soktuk */
  margin-right: 3px;
  display: inline-block;
  transition: all 0.3s ease;
}

/* Karanlık Mod Renkleri ve Parlama (Glow) Efekti */
.status-bar-item.green {
  background-color: #34C759 !important;
  /* Daha canlı bir yeşil */
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.3);
}

.status-bar-item.red {
  background-color: #FF3B30 !important;
  /* Daha canlı bir kırmızı */
  box-shadow: 0 0 8px rgba(255, 59, 48, 0.3);
}

.status-bar-item.yellow {
  background-color: #FFCC00 !important;
  /* Daha canlı bir sarı */
  box-shadow: 0 0 8px rgba(255, 204, 0, 0.3);
}

.status-bar-item.blue {
  background-color: #007AFF !important;
  /* Daha kurumsal bir mavi */
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.3);
}

.status-bar-item.gray {
  background-color: rgba(255, 255, 255, 0.15) !important;
  /* Koyu modda daha soft bir gri */
}

/* Kompaktta tekil durum halkası (İsim yanında sol tarafta) */
.status-circle-single {
  min-width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 0;
  /* Renkler JS'den gelecek class'larla */
}

.status-circle-single.green {
  background: #34C759;
  box-shadow: 0 0 5px rgba(52, 199, 89, 0.4);
}

.status-circle-single.red {
  background: #FF3B30;
  box-shadow: 0 0 5px rgba(255, 59, 48, 0.4);
}

.status-circle-single.yellow {
  background: #FFCC00;
  box-shadow: 0 0 5px rgba(255, 204, 0, 0.4);
}

.status-circle-single.gray {
  background: #8E8E93;
}

/* Dark Mode: Full Screen Card Headers Beyaz */
body.dark-mode .premium-card h3 {
  color: #fff !important;
}

/* KOMPAKT MOD STİLLERİ (Aynı kalabilir veya revize edilebilir) */
.fcrm-card.compact {
  border-radius: 12px;
  margin-bottom: 8px;
}

.fcrm-card.compact .fcrm-card-header {
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.fcrm-card.compact .card-bottom-summary,
.fcrm-card.compact .status-bars,
.fcrm-card.compact .fcrm-id-badge {
  display: none;
}

.fcrm-card.compact .fcrm-company-name {
  font-size: 15px;
  margin: 0;
  display: flex;
  align-items: center;
}

.fcrm-card.compact .card-summary,
.fcrm-card.compact .fcrm-id-badge {
  display: none;
  /* Özet ve ID gizle */
}

.fcrm-card.compact .card-actions {
  gap: 5px;
}

.fcrm-card.compact .action-btn-new {
  width: 32px;
  height: 32px;
  font-size: 16px;
  border-radius: 8px;
}

/* 5. FULL SCREEN OVERLAY (Detay) */
.fcrm-fullscreen-overlay {
  position: fixed;
  top: 0;
  /* Header'sız tam ekran */
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg);
  z-index: 10000;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 20px;
  /* Üstten biraz boşluk çünkü header yok */
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  /* Üst gölge */
}

/* Not: Z-Index Header'ın(5000) üstünde, Modal'ın altında olmalı */

.fcrm-fullscreen-overlay.active {
  display: flex;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.overlay-header {
  padding: 15px 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* KOMPAKT MOD STİLLERİ (Aynı kalabilir veya revize edilebilir) */
.fcrm-card.compact {
  border-radius: 12px;
  margin-bottom: 8px;
}

.fcrm-card.compact .fcrm-card-header {
  padding: 12px 16px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.fcrm-card.compact .card-bottom-summary,
.fcrm-card.compact .status-bars,
.fcrm-card.compact .fcrm-id-badge {
  display: none;
}

.fcrm-card.compact .fcrm-company-name {
  font-size: 15px;
  margin: 0;
}

.fcrm-card.compact .compact-status-badge {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

/* MODAL & SEÇİM LİSTELERİ */
.selection-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card-bg);
  border-radius: 20px 20px 0 0;
  padding: 25px 20px 40px;
  z-index: 12000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

.selection-modal.active {
  transform: translateY(0);
}

.selection-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.selection-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.selection-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid var(--border-color);
  gap: 15px;
  cursor: pointer;
}

.selection-item:last-child {
  border: none;
}

.selection-item:hover {
  background: var(--bg);
}

.selection-icon {
  font-size: 24px;
  color: #555;
}

.selection-text {
  flex: 1;
  font-weight: 500;
}

.selection-sub {
  font-size: 12px;
  color: #888;
}

/* GEÇMİŞ LİSTESİ (HISTORY) */
.fcrm-history-container {
  border-top: 1px solid var(--border-color);
  background: #fafafa;
  max-height: 400px;
  overflow-y: auto;
  animation: slideDown 0.3s ease-out;
}

body.dark-mode .fcrm-history-container {
  background: #222;
}

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

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

.history-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
}

.history-item:last-child {
  border-bottom: none;
}

.history-status-kutu {
  width: 4px;
  border-radius: 2px;
  margin-right: 12px;
  flex-shrink: 0;
}

.history-status-kutu.green {
  background: #4caf50;
}

.history-status-kutu.red {
  background: #ef5350;
}

.history-status-kutu.orange {
  background: #ffa726;
}

.history-status-kutu.blue {
  background: #42a5f5;
}

.history-status-kutu.gray {
  background: #bdbdbd;
}

.history-content {
  flex: 1;
}

.history-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.history-result {
  font-size: 13px;
  font-weight: 700;
  color: var(--fuarix-black);
}

.history-date {
  font-size: 11px;
  color: var(--text-secondary);
}

.history-detail {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

.history-note {
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin-top: 4px;
}

/* Boş Durum Kapsayıcısı */
.empty-state-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  margin: 8px 0;
  border: 1px dashed var(--border-color);
  /* Premium kesik çizgili çerçeve */
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  /* Çok hafif derinlik */
  color: var(--text-secondary);
  transition: all 0.3s ease;
}

/* Boş Durum İkonu */
.empty-state-card i {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.4;
  color: var(--text-secondary);
}

/* Boş Durum Metni */
.empty-state-card span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* MODAL & OVERLAY İÇİN EK STİLLER (Quick Meeting) */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
}

.slide-up {
  animation: slideUpModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalSlideIn {
  from {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
  }

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

.modal-content {
  background: white;
  width: 100%;
  max-width: 400px;
  /* Biraz daha geniş olabilir */
  border-radius: 16px;
  position: relative;
  /* Animasyon güncellendi */
  animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}


.footer-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.footer-btn:active {
  transform: translateY(0);
}

/* Buton Yükleme Animasyonu */
.dot {
  display: inline-flex;
  will-change: transform, opacity;
  animation: smoothWave 1.4s infinite ease-in-out;
  margin-left: 2px;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.15s;
}

.dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes smoothWave {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ============================================================
   14. TOAST NOTIFICATION (Z-Index: 20000)
   ============================================================ */
/* --- YENİ PREMIUM TOAST TASARIMI --- */

.toast-container {
  /* Konum aynı, senin sevdiğin yer */
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  /* Biraz daha aşağıda, adadan uzak */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Toastlar arası boşluk arttı */
  width: auto;
  pointer-events: none;
  align-items: center;
}

.toast-box {
  /* CAM EFEKTİ (Glassmorphism 2.0) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Şekil & Boyut (Daha kalın/tombul) */
  border-radius: 16px;
  /* Tam yuvarlak köşeler (Hap şeklinde) */
  padding: 12px 20px;
  /* İÇ BOŞLUK ARTTIRILDI */
  min-width: 200px;
  min-width: 250px;

  /* Tipografi */
  color: #ffffff;
  font-size: 12px;
  /* Yazı büyüdü */
  font-weight: 600;
  /* Daha okunaklı */
  letter-spacing: -0.2px;

  /* Kenarlık: Çok ince ve zarif */
  border: 1px solid rgba(255, 255, 255, 0.1);

  /* Gölge: Buton gölgesine benzer (Soft Shadow) */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Animasyon */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(-20px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* "Yaylanarak" gelir */
  pointer-events: auto;
}

.toast-box i {
  font-size: 18px;
}

/* --- CANLI RENKLER & GLOW EFEKTLERİ (Yenilenmiş Palette) --- */

/* ERROR: Kendi Marka Kırmızın (Daha canlı ve elektrikli) */
/* ============================================================
   APPLE HIG STANDARTLARINDA TOAST RENKLERİ
   ============================================================ */

/* 1. LIGHT MODE (Varsayılan) */
.toast-box.error {
  background-color: #FF3B30;
  /* Apple System Red (Light) */
  box-shadow: 0 8px 24px rgba(255, 59, 48, 0.2);
}

.toast-box.success {
  background-color: #34C759;
  /* Apple System Green (Light) */
  box-shadow: 0 8px 24px rgba(52, 199, 89, 0.2);
}

.toast-box.info {
  background-color: #007AFF;
  /* Apple System Blue (Light) */
  box-shadow: 0 8px 24px rgba(0, 122, 255, 0.2);
}

.toast-box.warning {
  background-color: #FF9500;
  /* Apple System Orange (Light) */
  box-shadow: 0 8px 24px rgba(255, 149, 0, 0.2);
}

/* 2. DARK MODE (Vibrant) */
body.dark-mode .toast-box.error {
  background-color: #FF453A;
  /* Apple System Red (Dark) */
  box-shadow: 0 8px 24px rgba(255, 69, 58, 0.35);
}

body.dark-mode .toast-box.success {
  background-color: #30D158;
  /* Apple System Green (Dark) */
  box-shadow: 0 8px 24px rgba(48, 209, 88, 0.35);
}

body.dark-mode .toast-box.info {
  background-color: #0A84FF;
  /* Apple System Blue (Dark) */
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.35);
}

body.dark-mode .toast-box.warning {
  background-color: #FF9F0A;
  /* Apple System Orange (Dark) */
  box-shadow: 0 8px 24px rgba(255, 159, 10, 0.35);
}

.toast-box.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ============================================================
    15. BOTTOM NAVIGATION (MODERN & THEME SYNC)
    ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Kendi sistem değişkenlerini kullanır, temanla asla çakışmaz */
  background-color: var(--bg, #FFFFFF);
  border-top: 1px solid var(--border-color);

  display: flex !important;
  justify-content: space-around;
  /* İkonları dikeyde tam ortalar (flex-end'deki sıkışmayı çözer) */
  align-items: center;
  padding: 0;
  /* iPhone Home Bar ve modern cihazlar için hayati güvenli alan */
  padding-bottom: env(safe-area-inset-bottom);

  /* Yükseklik safe-area ile birlikte kendini dengeler */
  height: auto;
  min-height: 70px;
  z-index: var(--z-bottom-nav);

  /* Işığı kapattığında (dark mode) geçiş hızı sistemle aynı olur */
  transition: background-color var(--transition-theme), border-color var(--transition-theme);
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03);
}

/* Koyu Mod Uyumu: Sistemin kendi renklerini çeker */
body.dark-mode .bottom-nav {
  background-color: var(--bg) !important;
  border-top: 1px solid var(--border-color) !important;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 500;
  width: 100%;
  /* Tıklama alanını geniş tutar */
  height: 60px;
  transition: color 0.3s ease, transform 0.3s ease;
  /* Eski border-top temizlendi */
  border-top: none;
}

.nav-item i {
  font-size: 24px;
  margin-bottom: 4px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================================
    AKTİF SEKME: Premium Görünüm
    ============================================================ */
.nav-item.active {
  color: var(--fuarix-red) !important;
  font-weight: 700;
  background: transparent;
  border-top: none;
  /* Üstteki eski çizgiyi tamamen iptal ettik */
}

.nav-item.active i {
  /* Aktif ikonu hafifçe yukarı zıplatır ve parlatır */
  transform: translateY(-3px) scale(1.05);
  text-shadow: 0 4px 10px rgba(255, 17, 77, 0.2);
}

/* Koyu Modda İkon ve Metin Renkleri */
body.dark-mode .nav-item {
  color: var(--text-secondary);
}

body.dark-mode .nav-item.active {
  color: var(--fuarix-red) !important;
}

/* ============================================================
   NAVIGASYON RENK EKOSİSTEMİ (FCrm, FSign, FPay, FMap, FStaff)
   ============================================================ */

/* 1. GENEL AKTİF DURUM KURALLARI (Zıplama ve Kalınlık) */
.nav-item.active i {
  transform: translateY(-4px) scale(1.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-item.active span {
  font-weight: 800;
}

/* 2. FSIGN - INDIGO (Sözleşme/İmza) */
#nav-fsign.active,
#nav-fsign.active i,
#nav-fsign.active span {
  color: #4f46e5 !important;
}

#nav-fsign.active i {
  text-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

body.dark-mode #nav-fsign.active,
body.dark-mode #nav-fsign.active i,
body.dark-mode #nav-fsign.active span {
  color: #818cf8 !important;
}

/* 3. FPAY - EMERALD (Ödeme/Finans) */
#nav-fpay.active,
#nav-fpay.active i,
#nav-fpay.active span {
  color: #10b981 !important;
}

#nav-fpay.active i {
  text-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

body.dark-mode #nav-fpay.active,
body.dark-mode #nav-fpay.active i,
body.dark-mode #nav-fpay.active span {
  color: #34d399 !important;
}

/* 4. FMAP - AMBER (Yerleşim/Harita) */
#nav-fmap.active,
#nav-fmap.active i,
#nav-fmap.active span {
  color: #f59e0b !important;
}

#nav-fmap.active i {
  text-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

body.dark-mode #nav-fmap.active,
body.dark-mode #nav-fmap.active i,
body.dark-mode #nav-fmap.active span {
  color: #fbbf24 !important;
}

/* 5. FSTAFF - CYAN (Ekip/Personel) */
#nav-fstaff.active,
#nav-fstaff.active i,
#nav-fstaff.active span {
  color: #06b6d4 !important;
}

#nav-fstaff.active i {
  text-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

body.dark-mode #nav-fstaff.active,
body.dark-mode #nav-fstaff.active i,
body.dark-mode #nav-fstaff.active span {
  color: #22d3ee !important;
}

/* 6. FCRM - DEFAULT RED (Mevcut Kırmızı) */
.nav-item.active:not(#nav-fsign):not(#nav-fpay):not(#nav-fmap):not(#nav-fstaff) {
  color: var(--fuarix-red) !important;
}

/* 7. EK GÖRSELLER VE RENKLER */
.btn-save {
  background-color: var(--fuarix-red, #FF114D) !important;
  color: white !important;
}

.btn-save i {
  color: white !important;
}

.btn-cancel {
  background-color: #f2f2f7;
  color: #333;
}

body.dark-mode .btn-cancel {
  background-color: #3a3a3c;
  color: #dedede;
}

/* ============================================================
   17. FCRM FORM (Z-Index: 999)
   ============================================================ */
#view-fcrm-form {
  position: fixed !important;
  top: 60px !important;
  /* Header'ın bittiği yer */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Ekranın en altına kadar uzan */

  background: var(--bg);
  z-index: var(--z-form);

  /* Flexbox ayarları */
  display: none;
  /* JS açtığında flex olacak */
  flex-direction: column;
  /* İçindekileri dikey diz */
  overflow: hidden;
  /* Ana ekranın taşmasını engelle */
}

#view-fcrm-form.active {
  display: flex;
}

.info-container {
  display: flex;
  align-items: center;
  gap: 5px;
  /* Input'un hemen altına yapışık ama ferah dursun */
  margin-top: 5px;
  padding-left: 2px;
  opacity: 0.6;
}

.info-container i.material-icons {
  /* İkon fontunu zorla ve boyutu küçült */
  font-family: 'Material Icons' !important;
  font-size: 12px !important;
  color: var(--text-secondary);
  /* İkonun metinle dikeyde milimetrik hizalanması için */
  display: inline-flex;
  align-items: center;
}

.info-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  /* 11px Inter fontunda çok asil durur */
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.2;
  letter-spacing: 0.1px;
}

#fcrmFormScrollArea {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px 15px;
  padding-bottom: 80px;
  text-align: left;
}

#fcrmFormScrollArea::-webkit-scrollbar {
  display: none;
}

/* 1. Kapsayıcı ve Başlıklar */
.premium-upload-section {
  width: 100%;
  margin: 15px 0;
}

.upload-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fuarix-black);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.sirkuler-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

/* 2. Dropzone Alanı (FCrm Red Vurgulu) */
.premium-dropzone {
  position: relative;
  width: 100%;
  min-height: 130px;
  background-color: var(--input-bg);
  border: 2px dashed var(--border-color);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-theme);
  /* Senin değişkenin */
  overflow: hidden;
  cursor: pointer;
}

.premium-dropzone:hover {
  border-color: var(--fuarix-red);
  background-color: rgba(255, 17, 77, 0.04);
  /* Çok hafif kırmızı fon */
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* Dark Mode İnce Ayar */
body.dark-mode .premium-dropzone:hover {
  background-color: rgba(255, 17, 77, 0.08);
}

/* 3. Input ve İçerik */
#fileUploadInput {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

.dropzone-content {
  text-align: center;
  pointer-events: none;
  /* Tıklamayı inputa geçirir */
  padding: 15px;
  z-index: 5;
}

#uploadIcon {
  font-size: 40px;
  color: var(--fuarix-red);
  /* FCrm Rengi */
  margin-bottom: 10px;
  transition: 0.3s var(--ease-premium);
}

.premium-dropzone:hover #uploadIcon {
  transform: scale(1.1);
}

.upload-status-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--input-text);
  margin-bottom: 4px;
}

.upload-subtext {
  font-size: 11px;
  color: var(--text-secondary);
}

/* 4. Bilgi Kutusu (Premium Görünüm) */
.premium-info-box {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--fuarix-red);
  /* Kırmızı vurgu */
  border-radius: 10px;
  color: var(--input-text);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: var(--shadow-soft);
}

.premium-info-box i {
  font-size: 18px;
  color: var(--fuarix-red);
}

/* 5. Yükleme Animasyonu (JS için) */
.spinner-border {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: text-bottom;
  border: 0.2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
  margin-right: 8px;
}

@keyframes spinner-border {
  to {
    transform: rotate(360deg);
  }
}

/* Form Sekmeler */
.form-tabs {
  display: flex;
  justify-content: space-between;
  background: rgba(242, 242, 247, 0.8);
  padding: 5px;
  border-radius: 15px;
  margin-bottom: 25px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

body.dark-mode .form-tabs {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s var(--ease-premium);
}

.tab-item.active {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tab-item.active .tab-icon {
  transform: scale(1.1);
}

.tab-text {
  font-size: 10px;
  font-weight: 600;
  color: #86868b;
  margin-top: 4px;
}

.tab-item.active .tab-text {
  color: #0071e3;
}

.tab-btn {
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: var(--card-bg);
  color: var(--fuarix-black);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tab-btn:not(.active) {
  background: transparent;
  color: var(--text-secondary);
}

.tab-btn:not(.active):hover {
  background: rgba(0, 0, 0, 0.03);
}

/* Form Steps */
.form-step {
  display: none;
  flex-direction: column;
  gap: 15px;
}

.form-step.active {
  display: flex;
  animation: fadeIn 0.4s ease;
}

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

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

/* Input Wrapper */
.input-wrapper {
  width: 100%;
  margin-bottom: 15px;
}

.input-wrapper textarea {
  min-height: 80px;
  resize: vertical;
}

.group-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 15px;
  text-align: left;
}

#view-fcrm-form label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  text-align: left;
}

/* Koyu Mod Form Özel */
body.dark-mode #view-fcrm-form input,
body.dark-mode #view-fcrm-form select,
body.dark-mode #view-fcrm-form textarea {
  background-color: #1a1a1a;
  color: #ffffff;
  border: 1px solid #333333;
  border-radius: 12px;
  padding: 12px;
  width: 100%;
}

body.dark-mode #view-fcrm-form input:focus {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
  outline: none;
}

body.dark-mode #view-fcrm-form .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 16px 12px;
}

/* Premium Accordion */
.premium-accordion {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: all 0.2s ease;
}

.premium-accordion:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.premium-accordion summary {
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 14px;
  transition: background 0.2s ease;
}

.premium-accordion summary:hover {
  background: rgba(0, 0, 0, 0.02);
}

.premium-accordion summary::after {
  content: '→';
  transition: 0.3s;
  color: #86868b;
}

.premium-accordion[open] summary::after {
  transform: rotate(90deg);
}

.premium-accordion[open] {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.premium-accordion[open] summary {
  background: var(--input-bg);
  border-bottom: 1px solid var(--border-color);
}

.acc-content {
  padding: 15px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acc-content input,
.acc-content select {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
}

/* Alt Buton Barı */
.fixed-bottom-buttons,
.form-sticky-footer {
  box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 25px;
  padding: 15px;
  border-top: 1px solid #f2f2f7;
}

.form-sticky-footer .footer-btn {
  flex: 1;
  height: 45px;
  border-radius: 12px;
  font-weight: 600;
}

/* Premium Form Modal */
.premium-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  z-index: var(--z-modal);
  display: none;
}

.premium-form-container {
  background: #ffffff;
  border-radius: 28px;
  padding: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-height: 90vh;
  overflow-y: auto;
}

#premiumFormModal.premium-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  max-width: 500px;
  z-index: 10001;
  margin: 0;
  padding: 0;
}

#premiumFormModal .premium-form-container {
  background: #ffffff;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-height: 85vh;
  overflow-y: auto;
  border: 1px solid #e5e5ea;
}

#premiumFormModal .input-wrapper input,
#premiumFormModal .input-wrapper select,
#premiumFormModal .input-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Finans Grid */
.finance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* 1. ANA GÖVDE KİLİDİ (Yenilemeyi ve Kaydırmayı Önler) */
/* 1. ANA GÖVDE KİLİDİ (Sayfayı Çivileyen Versiyon) */
body.drawer-open {
  /* Mevcut Kurallar */
  overflow: hidden !important;
  touch-action: none;
  overscroll-behavior-y: none !important;

  /* --- YENİ: OYNAMAYI DURDURAN KURALLAR --- */
  position: fixed;
  /* Sayfayı olduğu yere mıhlar */
  width: 100%;
  /* Fixed yapınca sayfa daralmasın diye */
  height: 100%;
  /* Ekran boyuna hapseder */
  left: 0;
  top: 0;
}

/* 2. OVERLAY (KARARTMA) */
#drawerOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 15000;
  /* Drawer'ın hemen altında */
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px);

  touch-action: none;
  /* 🎯 KRİTİK: Parmak hareketlerini burada imha eder */
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Başlangıçta Kapalı */
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. DURAK: Overlay Aktif Durumu (Geliştirilmiş) --- */
#drawerOverlay.open,
#drawerOverlay.active,
body.drawer-open #drawerOverlay {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* 🎯 KRİTİK DOKUNUŞLAR */
  pointer-events: auto !important;
  /* Tıklamaları yakalar, arkaya geçirmez */
  touch-action: none !important;
  /* Arka planın parmakla kaydırılmasını (scroll) engeller */
  cursor: pointer;
  /* Kullanıcıya "buraya basarsan kapanır" mesajı verir */
}

/* 3. DRAWER (YAN MENÜ) */
#sideDrawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100dvh;
  z-index: 16000;
  /* En üstte */
  background: var(--card-bg, #ffffff);
  box-shadow: 5px 0 25px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  /* 🎯 KRİTİK AYARLAR */
  display: flex;
  flex-direction: column;
  /* Elemanları üstten aşağı diz */
  overflow: hidden;
  /* ANA KASA KAYMASIN (Logo sabit kalsın diye) */

  /* Başlangıçta Solda Gizli */
  transform: translateX(-100%) !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Drawer Açık Durumu */
#sideDrawer.open,
#sideDrawer.active {
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* 4. LOGO VE İÇERİK HİZALAMA */
.drawer-logo {
  padding: 50px 25px 30px 20px;
  display: flex;
  align-items: center;
}

#drawerLogo {
  height: 50px;
  width: auto;
}

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

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

/* ============================================================
   5. MENÜ ELEMANLARI (AİLE DİSİPLİNİ & DARK MODE UYUMU)
   ============================================================ */

/* 🚀 SADECE LİSTE KAYACAK ALAN */
.list-group {
  flex: 1;
  /* Logo ve Footer'dan kalan tüm boşluğu kapla */
  overflow-y: auto;
  /* İÇERİK SIĞMAZSA SADECE BURAYI KAYDIR */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Mobilde yağ gibi akması için */

  /* Modern ve ince kaydırma çubuğu */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* Chrome/Safari için ince scrollbar (Dokunmayın, bu çok şık durur) */
.list-group::-webkit-scrollbar {
  width: 4px;
}

.list-group::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* 5.1 Ortak Yapı (Tüm Elemanlar İçin Aynı İskelet) */
.list-group-item,
.btn-safe-logout {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 14px 22px !important;
  /* Hizalama için padding sabitlendi */
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color, #eee) !important;
  font-size: 14px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Yumuşak kayma efekti */
}

/* İkonların Ortak Yerleşimi */
.list-group-item i,
.btn-safe-logout i {
  margin-right: 15px;
  font-size: 22px;
  width: 24px;
  /* İkonların dikey hizada sapmaması için sabit genişlik */
  text-align: center;
  transition: color 0.3s ease;
}

/* 5.2 Renk Karakterleri (Işık Modu) */

/* Standart Menü - Siyah Tonları */
.list-group-item {
  color: #1A1A1A !important;
}

.list-group-item i {
  color: #555555 !important;
}

/* Güvenli Çıkış - Fuarix Kırmızısı */
.btn-safe-logout {
  color: var(--fuarix-red, #FF114D) !important;
  margin-top: auto;
  /* Flexbox kullanılıyorsa en alta iter */
  margin-bottom: 10px;
  border-bottom: none !important;
  /* Çıkış butonunun altında çizgi olmaz */
}

.btn-safe-logout i {
  color: var(--fuarix-red, #FF114D) !important;
}

/* 5.3 Hover Efektleri (Ortak Kayma Disiplini) */
.list-group-item:hover,
.btn-safe-logout:hover {
  padding-left: 30px !important;
  /* Sola doğru şık kayma */
  background-color: rgba(0, 0, 0, 0.03) !important;
}

/* 5.4 DARK MODE (Koyu Tema) DÜZENLEMELERİ */

/* Standart Elemanlar Koyu Modda Beyazlaşır */
body.dark-mode .list-group-item {
  color: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .list-group-item i {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Çıkış Butonu Koyu Modda KIRMIZI KALIR */
body.dark-mode .btn-safe-logout,
body.dark-mode .btn-safe-logout i {
  color: var(--fuarix-red, #FF114D) !important;
}

/* Koyu Mod Hover Rengi (Siyah yerine hafif beyaz parlar) */
body.dark-mode .list-group-item:hover,
body.dark-mode .btn-safe-logout:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
}

/* Aktif Eleman Belirginleştirme */
body.dark-mode .list-group-item.active {
  background-color: rgba(227, 30, 36, 0.15) !important;
  /* Hafif kırmızımsı arka plan */
  color: var(--fuarix-red) !important;
  border-left: 3px solid var(--fuarix-red);
}

/* Tıklama Hissi */
.list-group-item:active,
.btn-safe-logout:active {
  opacity: 0.6;
  transform: scale(0.98);
}

/* ============================================================
    PREMIUM NOT ALANI - YENİ NESİL (BAŞLIK DIŞARIDA)
   ============================================================ */

/* 1. Genel Kapsayıcı (Dış Alan) */
.note-container {
  margin: 25px 15px;
  /* Form elemanları arasındaki denge */
  display: flex;
  flex-direction: column;
}

/* 2. Başlık Alanı (Kutunun Üstündeki Bağımsız Etiket) */
.note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  margin-left: 5px;
  /* Kutunun başlangıç çizgisiyle jilet gibi hiza */
  color: #d4c15e;
  /* Fuarix Altın Sarısı */
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.9;
}

.note-title i {
  font-size: 16px;
}

/* 3. Yazım Alanı (Ana Kutu Artık Bu) */
.note-textarea {
  width: 100%;
  height: 260px;
  background: var(--input-bg, #1e1e1e) !important;
  color: var(--input-text, #fff) !important;
  border: 1px solid var(--border-color, #333) !important;
  border-radius: 12px;
  /* Köşeler yumuşatıldı */
  padding: 15px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  outline: none;
  resize: none;
  box-sizing: border-box;
  /* Padding taşmasını önler */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 4. Fokus (Tıklanma) Anı - Premium Işıltı */
.note-textarea:focus {
  border-color: #d4c15e !important;
  /* Kenarlık altına döner */
  box-shadow: 0 0 0 4px rgba(212, 193, 94, 0.1) !important;
  /* Altın hare */
  transform: translateY(-2px);
  /* Hafif yükselme efekti */
  background: var(--input-bg, #1e1e1e) !important;
}

/* 5. Placeholder (Yer Tutucu) */
.note-textarea::placeholder {
  color: var(--text-secondary, #888);
  opacity: 0.6;
  font-style: italic;
}

/* 6. Scrollbar (Kaydırma Çubuğu) Özelleştirme */
.note-textarea::-webkit-scrollbar {
  width: 5px;
}

.note-textarea::-webkit-scrollbar-track {
  background: transparent;
}

.note-textarea::-webkit-scrollbar-thumb {
  background: rgba(212, 193, 94, 0.2);
  /* Altın sarısı transparan scroll */
  border-radius: 10px;
}

/* Drawer Footer */
.drawer-footer {
  padding: 30px 20px;
  margin-top: auto;
  opacity: 0.8;
  color: var(--fuarix-black);
}

.fdg-stamp {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 25px;
  opacity: 0.7;
  letter-spacing: 0.3px;
  text-transform: none;
}

/* Responsive */
@media (min-width: 1025px) {

  .drawer,
  #sideDrawer {
    width: 300px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

  .drawer,
  #sideDrawer {
    width: 40%;
  }
}

@media (max-width: 768px) {

  .drawer,
  #sideDrawer {
    width: 70%;
  }
}

/* ============================================================
   19. DASHBOARD VE MODÜLLER (Z-Index: 10)
   ============================================================ */
#view-dashboard,
#view-fmap,
#view-fsign,
#view-fpay,
#view-fstaff {
  z-index: var(--z-content);
  position: fixed;
}

#view-dashboard {
  position: fixed;
  top: 60px;
  bottom: 80px;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  padding: 15px;
  padding-bottom: 120px;
}

#view-dashboard::-webkit-scrollbar {
  width: 6px;
}

#view-dashboard::-webkit-scrollbar-track {
  background: transparent;
}

#view-dashboard::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

#view-dashboard::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

body.dark-mode #view-dashboard::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode #view-dashboard::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Modül Sahneleri */
.module-scene {
  width: 100%;
  min-height: calc(100vh - 140px);
}

.module-scene.active {
  animation: fadeInUp 0.3s ease-out;
}

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

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

.view-container {
  display: none;
  height: 100vh;
  overflow: hidden;
}

.cards-container {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* CRM Kartları */
.swipe-container {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 15px 5px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.swipe-container::-webkit-scrollbar {
  display: none;
}

.crm-card {
  flex: 0 0 80%;
  background: white;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 130px;
  border-top: 4px solid #dc3545;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-crm-card {
  background: var(--card-bg);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  min-height: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modern-crm-card:hover,
.crm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.modern-crm-card:active,
.crm-card:active {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

body.dark-mode .modern-crm-card {
  background: #1c1c1e;
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .modern-crm-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* Kart Elemanları */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.customer-id,
.id-badge {
  font-size: 11px;
  color: #aaa;
  font-weight: bold;
  padding: 3px 8px;
}

.customer-name,
.company-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 10px 0;
  min-height: 40px;
}

.card-info {
  margin: 8px 0;
  color: #666;
  font-size: 13px;
}

.card-footer,
.card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
  margin-top: 10px;
  border-top: 1px solid #eee;
  padding-top: 10px;
  align-items: center;
}

.last-note {
  font-size: 12px;
  color: #86868b;
  margin: 4px 0 0 0;
}

.price-tag {
  font-weight: 700;
  font-size: 14px;
  margin-right: 15px;
  color: #1d1d1f;
}

/* Durum Badge */
.status-badge,
.status-pill {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.status-hot {
  background: #ffebeb;
  color: #dc3545;
  background-color: #ff3b30;
  color: white;
}

.status-wait {
  background: #fff4e6;
  color: #fd7e14;
  background-color: #ffcc00;
  color: black;
}

.status-success {
  background-color: #34c759;
  color: white;
}

.status-danger {
  background-color: #8e8e93;
  color: white;
}

.status-default {
  background: #f1f3f5;
  color: #495057;
  background-color: #f2f2f7;
  color: #1c1c1e;
}

.status-beklemede {
  background: #f2f2f7;
  color: #8e8e93;
}

.status-olumlu {
  background: #e6fcf5;
  color: #087f5b;
  box-shadow: 0 0 8px rgba(8, 127, 91, 0.3);
}

.status-sicak {
  background: #fff9db;
  color: #f08c00;
  box-shadow: 0 0 8px rgba(240, 140, 0, 0.3);
}

.status-satis {
  background: #e8f5e9;
  color: #2e7d32;
}

/* İletişim Bölümü */
.contact-section {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0;
  max-height: 120px;
  overflow-y: auto;
}

.contact-list {
  padding: 10px;
  margin-bottom: 10px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid #eee;
}

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

.contact-label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.contact-name {
  font-size: 13px;
}

.contact-title,
.u-name {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
}

.p-name {
  font-size: 12px;
  color: #333;
  font-weight: 600;
}

/* Aksiyon Butonları */
.action-btns,
.quick-actions {
  display: flex;
  gap: 6px;
}

.action-btns a,
.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  transition: 0.2s;
  background: #0071e3;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.btn-call {
  background: #007bff;
  color: white;
}

.btn-whatsapp {
  background: #25d366;
  color: white;
}

.btn-email {
  background: #ffc107;
  color: #333;
}

.action-btns a:hover,
.action-btn:hover {
  transform: scale(1.15);
  filter: brightness(1.1);
}

.locked-info {
  background: #f8f9fa;
  color: #adb5bd;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dee2e6;
  cursor: help;
}

.crm-card.card-restricted,
.restricted-card {
  border-left: 3px solid #dee2e6;
  opacity: 0.8;
}

.restricted-card .contact-actions {
  background: #f5f5f7;
  border-radius: 8px;
}

/* Durum Işığı */
.status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  right: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.status-dot {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-success {
  background-color: #2ecc71;
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
}

.status-danger {
  background-color: #e74c3c;
  box-shadow: 0 0 6px rgba(231, 76, 60, 0.6);
}

.status-warning {
  background-color: #f1c40f;
  box-shadow: 0 0 6px rgba(241, 196, 15, 0.6);
}

.status-neutral {
  background-color: #95a5a6;
}

/* Dashboard Liste */
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}

.summary-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 20px;
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  overflow: hidden;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.summary-card.compact-view {
  padding: 10px 16px;
  min-height: auto;
  margin-bottom: 6px;
}

.summary-card.compact-view .last-note,
.summary-card.compact-view .quick-actions,
.summary-card.compact-view .customer-id-text {
  display: none;
}

.summary-card.compact-view .company-name {
  font-size: 14px;
}

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

.company-name {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  color: #1d1d1f;
}

/* Görünüm Switch */
.view-switch-btn {
  border: none;
  background: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #86868b;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.active-mode {
  background: #ffffff;
  color: var(--fuarix-red);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Boş Durum */
.no-data-view {
  animation: fadeInUp 0.5s ease-out;
}

.no-data-view button {
  transition: all 0.2s ease;
}

.no-data-view button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.no-data-view button:active {
  transform: scale(0.98);
}

/* ============================================================
   20. ANİMASYONLAR VE EFEKTLER
   ============================================================ */
.shake {
  will-change: transform;
  animation: liquidShake 0.6s cubic-bezier(.36, .07, .19, .97) both;
  backface-visibility: hidden;
  perspective: 1000px;
  position: relative;
  transform: translate3d(0, 0, 0);
}

@keyframes liquidShake {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  15% {
    transform: translate3d(-10px, 0, 0);
  }

  30% {
    transform: translate3d(8px, 0, 0);
  }

  45% {
    transform: translate3d(-5px, 0, 0);
  }

  60% {
    transform: translate3d(3px, 0, 0);
  }

  75% {
    transform: translate3d(-1px, 0, 0);
  }
}

.spin-loader {
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

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

.loading-dots::after {
  content: '.';
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    content: '.';
  }

  33% {
    content: '..';
  }

  66% {
    content: '...';
  }
}

.page-transition {
  animation: slideUp 0.6s var(--ease-premium) forwards;
}

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

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

.skeleton-card {
  background: linear-gradient(90deg,
      var(--card-bg) 0%,
      #f0f0f0 50%,
      var(--card-bg) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 16px;
  height: 150px;
  margin-bottom: 12px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.spinner-border {
  animation: spin 1s linear infinite;
}

/* ============================================================
   21. DİĞER YARDIMCI SINIFLAR
   ============================================================ */
.brand-container {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 60px;
  margin-bottom: 20px;
}

body.dark-mode .brand-container {
  background-image: url('Fuarix_Logo3_beyaz.png');
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

.custom-upload-container {
  background-color: var(--bg-primary);
  border-color: var(--border-color);
}

.upload-notice {
  font-size: 10px;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

.upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-area:hover {
  border-color: var(--fuarix-red);
  background-color: rgba(255, 17, 77, 0.05);
}

body.dark-mode .upload-area {
  background-color: var(--input-bg);
}

.upload-icon {
  font-size: 48px;
  color: var(--fuarix-red);
  margin-bottom: 10px;
}

.upload-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Form Section (Apple Style) */
.form-section-group {
  background: var(--card-bg);
  margin-top: 20px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.form-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 15px 15px 5px 15px;
  margin-bottom: 0;
}

.form-section-item {
  border-bottom: 0.5px solid var(--border-color);
  padding: 12px 15px;
}

.form-section-item:last-child {
  border-bottom: none;
}

.form-section-group .form-control {
  border: none;
  background: transparent;
  padding: 0;
  height: auto;
  box-shadow: none;
}

.form-section-group .form-control:focus {
  box-shadow: none;
}

.tab-switcher-container {
  margin-top: 0;
  z-index: 100;
  background: var(--bg-card);
}

/* ============================================================
   22. KOYU MOD EK AYARLARI
   ============================================================ */
body.dark-mode .top-header button i {
  color: #F5F5F5;
}

body.dark-mode .nav-item {
  color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .nav-item.active {
  color: var(--fuarix-red);
}

body.dark-mode .fab-button {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .tab-switcher-container {
  background: rgba(26, 26, 26, 0.85) !important;
}

body.dark-mode .tab-btn {
  color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .tab-btn.active {
  background: #2c2c2e !important;
  color: #ffffff !important;
}

/* Dark Mode - Form Alt Bar */
body.dark-mode .tab-switcher-container,
body.dark-mode #view-fcrm-form>div:first-child,
body.dark-mode #view-fcrm-form .form-sticky-footer,
body.dark-mode #view-fcrm-form button[type="submit"]+div {
  background: #1c1c1e !important;
  border-color: #3a3a3c !important;
}

/* ============================================================
   SON - MEDYA SORULARI VE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .header-center-title {
    width: 60%;
  }

  #searchGroup.active {
    width: 200px;
  }
}

@media (min-width: 769px) {
  .app-card {
    max-width: 450px;
  }
}

/* ============================================================
   24. LOGIN SONRASI OVERLAY KAPATMA (YENİ)
   ============================================================ */

/* Login başarılı olduktan sonra overlay gizli kalmalı */
body.logged-in #overlay,
body:not(:has(#loginSection:not([style*="display: none"]))) #overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ============================================================
   25. FORM TASARIMI - APPLE SETTINGS TARZI (MOBİL UYUMLU)
   ============================================================ */

/* Grid'i tek sütun yap (önceki 2 sütun iptal edildi) */
.premium-card>div[style*="display: grid"],
.premium-card>div[style*="display:grid"] {
  grid-template-columns: 1fr !important;
  /* TEK SÜTUN */
  gap: 0 !important;
}

/* Input Wrapper - Dikey düzen */
#view-fcrm-form .premium-card>div>div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

/* Label - Üstte, küçük ve zarif */
#view-fcrm-form .premium-card label,
#view-fcrm-form label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Input - Beyaz, temiz, şık */
#view-fcrm-form input,
#view-fcrm-form select,
#view-fcrm-form textarea {
  background: white !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #1d1d1f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Input Focus - Kırmızı vurgu */
#view-fcrm-form input:focus,
#view-fcrm-form select:focus,
#view-fcrm-form textarea:focus {
  border-color: var(--fuarix-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 17, 77, 0.08) !important;
  outline: none !important;
}

/* Grup Başlıkları - Sade ve büyük */
#view-fcrm-form .group-header {
  background: transparent !important;
  color: #1d1d1f !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin: 30px 0 20px 0 !important;
  border: none !important;
  box-shadow: none !important;
}

/* Premium Card - Görünmez arka plan */
#view-fcrm-form .premium-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
  box-shadow: none !important;
}

/* ============================================================
    KAYDET BUTONU KONTEYNIR (Container)
   ============================================================ */
#view-fcrm-form .form-sticky-footer,
#view-fcrm-form .fixed-bottom-buttons {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 75px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 20px !important;

  /* Arka Plan ve Efektler (JS'deki mantık buraya taşındı) */
  background: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;

  /* Hiyerarşi: Header(5000) altında, Form(999) üstünde */
  z-index: 4950 !important;
}

/* Form açıkken body padding'i kaldır (mobil için) */
body:has(#view-fcrm-form.active) {
  padding-bottom: 0 !important;
}

#view-fcrm-form button[type="submit"],
#view-fcrm-form .btn-primary {
  /* JS ve CSS'deki ortak premium değerler */
  background: var(--fuarix-red, #FF114D) !important;
  color: white !important;
  width: 100% !important;
  max-width: 480px !important;
  /* JS'deki kısıtlama */
  padding: 16px !important;
  border-radius: 14px !important;
  /* Premium kavis */
  font-weight: 700 !important;
  font-size: 16px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(255, 17, 77, 0.35) !important;

  /* Geçiş ve Efektler */
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  position: relative !important;
  /* Mobildeki fixed çakışmasını önler */
  bottom: auto !important;
}

/* Basma Efekti (JS'deki mousedown/mouseup yerine) */
#view-fcrm-form button[type="submit"]:active {
  transform: scale(0.98) !important;
}

/* Mobil optimizasyon - iOS zoom engelleme */
@media (max-width: 768px) {

  #view-fcrm-form input,
  #view-fcrm-form select,
  #view-fcrm-form textarea {
    font-size: 16px !important;
    /* 16px iOS zoom'u engeller */
    padding: 14px 16px !important;
  }
}


/* ============================================================
   26. KOYU MOD - FORM ÖZEL AYARLARI
   ============================================================ */

/* Koyu modda input'lar */
body.dark-mode #view-fcrm-form input,
body.dark-mode #view-fcrm-form select,
body.dark-mode #view-fcrm-form textarea {
  background: #1c1c1e !important;
  color: #ffffff !important;
  border-color: #3a3a3c !important;
}

body.dark-mode #view-fcrm-form input:focus,
body.dark-mode #view-fcrm-form select:focus,
body.dark-mode #view-fcrm-form textarea:focus {
  border-color: var(--fuarix-red) !important;
  box-shadow: 0 0 0 3px rgba(255, 17, 77, 0.15) !important;
}

/* Koyu modda başlıklar */
body.dark-mode #view-fcrm-form .group-header {
  color: #f5f5f7 !important;
}

/* Dark Mode Kontrolü (JS kullanmadan otomatik) */
body.dark-mode #view-fcrm-form .form-sticky-footer,
body.dark-mode #view-fcrm-form .fixed-bottom-buttons {
  background: #1c1c1e !important;
  border-top: 1px solid #3a3a3c !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3) !important;
}

/* Form açıkken body ve html padding sıfırlansın */
body:has(#view-fcrm-form[style*="display: flex"]) {
  padding-bottom: 0 !important;
}

/* ================================================= */
/* AL MENUBAR PREMIUM GEÇİŞ ANİMASYONU (iOS Tarzı)   */
/* ================================================= */

/* 1. Sahnelerin Temel Ayarı */
.module-scene {
  /* Animasyonun pürüzsüz olması için donanım hızlandırma */
  will-change: transform, opacity;
}

/* 2. Sahne Aktif Olduğunda Çalışacak Animasyon */
.module-scene.active {
  display: block;
  /* Görünür yap */
  animation: slideUpFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. Animasyonun Kendisi (Keyframes) */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    /* Biraz aşağıda ve küçük başla */
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    /* Yerine otur ve normal boyuta gel */
  }
}

/* ============================================================
   FAB BUTONLARI - ANA KONTEYNER VE YAPI
   ============================================================ */

#fabButtonsContainer {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 12000;
  pointer-events: none;
  /* Kapsayıcı tıklanamaz, butonlar tıklanabilir */
}

/* Genel Buton Yapısı */
.fab-btn {
  position: fixed;
  right: 20px;
  /* Masaüstünde sabit 20px boşluk */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  display: none;
  /* JS ile görünür yapılır */
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s, bottom 0.3s, background-color 0.3s;
  z-index: 11000;
  pointer-events: auto;
  /* Tıklamayı zorla aç */
}

.fab-btn i {
  font-size: 24px;
  color: #FFFFFF;
}

/* Geri Butonu Özel Stili (Bunu koruduk) */
.fab-btn.active-back-btn {
  background: #000;
  color: #fff;
  transform: rotate(0deg);
}

body.dark-mode .fab-btn.active-back-btn {
  background: #fff;
  color: #000;
}

/* ============================================================
   POZİSYONLAMA SİSTEMİ (NİHAİ MERDİVEN - LİSTE GÖRÜNÜMÜ)
   ============================================================ */

/* 1. SEVİYE: EN ALT (90px) */
#btnView,
#btnSignView,
#btnPayView {
  bottom: 90px;
}

/* 2. SEVİYE: ORTA-ALT (150px) */
#btnNewRecord,
#btnSignNew,
#btnPayNew,
#btnStaff,
#btnMapView {
  bottom: 150px;
}

/* 3. SEVİYE: ÜST (210px) */
#btnStaffFilter {
  bottom: 210px;
}

/* ============================================================
   FCRM FORM ÖZEL KONUMLANDIRMA (Body Class ile)
   Form butonları FAB basamak sistemini kullanır.
   showBtn/hideBtn mekanizması görünürlüğü yönetir.
   ============================================================
*/

/* ============================================================
   RENKLER VE ÖZEL MODÜL AYARLARI (KORUNAN BÖLÜM)
   ============================================================ */

/* 1. FCRM (Standart Fuarix Kırmızısı) */
.fcrm-list-btn#btnNewRecord,
.form-btn#btnSave {
  background-color: var(--fuarix-red, #FF114D);
}

/* 2. FSIGN (Indigo Teması - KORUNDU) */
#btnSignNew {
  background-color: #4f46e5 !important;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important;
}

/* 3. FPAY (Emerald Teması - KORUNDU) */
#btnPayNew {
  background-color: #10b981 !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* 4. FMAP (Amber Teması - KORUNDU) */
.fmap-btn {
  background-color: #f59e0b !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
}

/* 5. FSTAFF (Cyan Teması - KORUNDU) */
.fstaff-btn {
  background-color: #06b6d4 !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4) !important;
}

/* İkincil FAB Butonlar (Gri/Siyah) */
#btnView,
#btnSignView,
#btnPayView,
#btnStaffFilter {
  background-color: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   DARK MODE ÖZEL EFEKTLER (KORUNAN BÖLÜM)
   ============================================================ */

/* Neon Glow Efektleri */
body.dark-mode #btnSignNew {
  background-color: #6366f1 !important;
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5) !important;
}

body.dark-mode #btnPayNew {
  background-color: #34d399 !important;
  box-shadow: 0 0 20px rgba(52, 211, 153, 0.5) !important;
}

body.dark-mode .fmap-btn {
  background-color: #fbbf24 !important;
  box-shadow: 0 0 20px rgba(251, 191, 36, 0.5) !important;
}

body.dark-mode .fstaff-btn {
  background-color: #22d3ee !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.5) !important;
}

/* İkincil Butonlar için Dark Mode */
body.dark-mode #btnView,
body.dark-mode #btnSignView,
body.dark-mode #btnStaffFilter,
body.dark-mode #btnPayView {
  background-color: rgba(255, 255, 255, 0.15);
}

/* Genel Hover Efekti */
body.dark-mode .fab-btn:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.8);
}

/* Basma Efekti (FAB butonlar için) */
.fab-btn:active {
  transform: scale(0.90) !important;
  transition: transform 0.05s ease;
}

/* ============================================================
   FCRM FORM KONTROL BUTONLARI (Glassmorphism)
   fabButtonsContainer DIŞINDA bağımsız çalışır.
   ============================================================ */

/* Tüm form kontrolleri varsayılan gizli */
/* Alt barı ve diğer kontrolleri gizlemek için (Noktayı ekledim) */
.fcrm-form-ctrl,
.fcrm-form-bottom-bar {
  display: none;
}

/* ✕ Kapat Butonu - Özel Stil */
#btnCancel {
  position: fixed;
  top: 60px;
  right: 16px;
  z-index: 10002;

  /* Görünürlük: Yukarıdaki display:none'ı ezmek için flex yapıyoruz */
  display: none;
  align-items: center;
  justify-content: center;

  background: var(--glass-bg, rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--fuarix-black, #1a1a2e);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));

  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  cursor: pointer;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#btnCancel:active {
  transform: scale(0.92);
}

/* ============================================================
   FCRM FORM ALT BAR — fsign-sticky-action-bar ile aynı tarz
   ============================================================ */

/* Bar: fsign-sticky-action-bar klonu */
.fcrm-form-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10001;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* İç wrapper — max-width ile tablet koruması */
.fcrm-form-bottom-bar .fcrm-bar-inner {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

/* Butonlar — btn-fsign klonu */
.fcrm-tab-btn,
.fcrm-save-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 2px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
}

.fcrm-tab-btn i,
.fcrm-save-btn i {
  font-size: 16px;
}

.fcrm-tab-btn:active,
.fcrm-save-btn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* Firma & Süreç — pasif: hafif siyah zemin, sönük yazı */
.fcrm-tab-btn {
  background-color: rgba(0, 0, 0, 0.05);
  /* Çok hafif siyah/gri zemin */
  color: var(--fuarix-black);
  /* Yazı senin siyahın */
  opacity: 0.5;
  /* Seçili olmadığını hissettiren düşük opaklık */
}

.fcrm-tab-btn.active-tab {
  background-color: var(--fuarix-black);
  color: #FFFFFF;
  /* Gölgeyi kırmızıdan siyaha/griye çektik */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* Kaydet — tam kırmızı, işle işlem sırasında nabız efekti */
.fcrm-save-btn {
  flex: 1.2;
  background-color: var(--fuarix-red, #FF114D);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 2px;
  box-shadow: 0 4px 12px rgba(255, 17, 77, 0.2);
  transition: all 0.3s ease;
}

/* Buton "disabled" (işlem yaparken) olduğunda bu devreye girer */
.fcrm-save-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  /* Kırmızı bir parlama efekti butonu canlı gösterir */
  animation: fcrm-pulse 1.5s infinite;
}

/* Nabız Efekti - Butonun boyutunu bozmadan parlamasını sağlar */
@keyframes fcrm-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 17, 77, 0.7);
  }

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

  100% {
    box-shadow: 0 0 0 0 rgba(255, 17, 77, 0);
  }
}

/* FCRM Kaydet Butonu İkon Dönme Efekti */
.fcrm-spin {
  display: inline-block !important;
  animation: fcrm-rotate-loading 1s linear infinite !important;
}

@keyframes fcrm-rotate-loading {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Label gizle — artık buton içinde ikon+yazı inline */
.fcrm-ctrl-label {
  font-size: 12px;
  font-weight: 600;
}

/* ---- FORM AÇIKKEN GÖRÜNÜRLÜK ---- */
.fcrm-form-open #btnCancel {
  display: flex;
}

.fcrm-form-open .fcrm-form-bottom-bar {
  display: flex;
}

.fcrm-form-open .fcrm-form-bottom-bar .fcrm-form-ctrl {
  display: flex;
}

/* Dark Mode */
body.dark-mode #btnCancel {
  background: var(--glass-bg);
  color: var(--fuarix-black);
  border-color: var(--border-color);
}

body.dark-mode .fcrm-form-bottom-bar {
  background: var(--glass-bg);
  border-top: 1px solid var(--border-color);
}

/* ============================================================
   MOBİL UYUMLULUK (SIKIŞTIRILMIŞ VE SIRALI HİYERARŞİ)
   ============================================================ */

@media (max-width: 768px) {
  .fab-btn {
    right: 16px;
    width: 52px;
    height: 52px;
  }

  .fab-btn i {
    font-size: 22px;
  }

  /* --- BASAMAK SİSTEMİ (0 !IMPORTANT - ID ÖNCELİKLİ) --- */

  /* 1. Basamak (En Alt - 90px): Liste Görünümleri */
  #btnView,
  #btnSignView,
  #btnPayView {
    bottom: 90px;
  }

  /* 2. Basamak (Orta-Alt - 150px): Yeni Kayıt + Diğer İşlem Butonları */
  #btnNewRecord,
  #btnSignNew,
  #btnPayNew,
  #btnStaff,
  #btnMapView {
    bottom: 150px;
  }
}

/* --- 2026 Modern Form Yapısı --- */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
  /* Mobil ferahlığı */
}

/* FCRM FORM AÇIKKEN: FAB liste butonlarını gizle */
.fcrm-form-open .fcrm-list-btn {
  display: none !important;
}


/* --- ReadOnly Alanlar (Formun Estetiğini Bozmayan Zarif Tasarım) --- */
#view-fcrm-form input[readonly],
#view-fcrm-form select[readonly],
#view-fcrm-form textarea[readonly] {
  background-color: #f2f2f7 !important;
  /* iOS sistem grisi - temiz ve modern */
  color: #8e8e93 !important;
  /* Okunabilir ama pasif gri */
  border: 1px solid #d1d1d6 !important;
  cursor: not-allowed;
  box-shadow: none !important;
  /* Derinliği kaldırarak düzleştirir */
  -webkit-text-fill-color: #8e8e93;
  /* Safari/iOS fix */
}

/* Koyu Modda ReadOnly (Dark Mode uyumu) */
body.dark-mode #view-fcrm-form input[readonly],
body.dark-mode #view-fcrm-form select[readonly] {
  background-color: #1c1c1e !important;
  /* Arka plandan bir tık açık/koyu gri */
  border-color: #3a3a3c !important;
  color: #636366 !important;
  -webkit-text-fill-color: #636366;
}

/* --- Bilgi Notu (Premium Card ile Uyumlu) --- */
.info-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  /* Arkaplan: Açık modda çok hafif indigo, koyu modda şeffaf indigo */
  background-color: var(--fsign-primary-light);

  /* Kenarlık: premium-card ile aynı değişkeni kullanıyoruz (Bütünlük için) */
  border: 1px solid var(--border-color);

  padding: 12px 16px;
  border-radius: 12px;
  margin: 15px 0;
  transition: all 0.3s var(--ease-premium);
  /* Hafif bir derinlik (Grid kadar ağır değil) */
  box-shadow: 0 2px 8px -2px var(--fsign-primary-shadow);
}

/* Koyu Mod: scc-details-grid ile tam eşleşme */
body.dark-mode .info-note {
  background-color: rgba(99, 102, 241, 0.1);
  /* Indigo %10 */
  border-color: rgba(99, 102, 241, 0.2);
  /* Indigo %20 */
}

/* İkonun Yazı Olarak Çıkmasını Engelleyen Kısım */
.info-note i.material-icons {
  /* Burası çok kritik: Fontun ikon olarak görünmesini garanti eder */
  font-family: 'Material Icons' !important;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  font-size: 16px;
  color: var(--fsign-primary);
  /* Senin Indigo rengin */
  flex-shrink: 0;
}

/* Metin Stili */
.info-note span {
  font-size: 12px;
  font-weight: 400;
  color: var(--fsign-primary);
  /* Yazı da indigo kalsın (Vurgu için) */
  line-height: 1.5;
}

/* ============================================================
   QUICK MEETING MODAL STYLES
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 12000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.modal-overlay.active {
  display: flex;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.modal-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

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

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

.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s;
}

.modal-close-btn:hover {
  background: #f0f0f0;
}

.modal-body {
  padding: 20px;
}

/* Dark Mode Support */
body.dark-mode .modal-content {
  background: #1c1c1e;
  color: #fff;
}

body.dark-mode .modal-header {
  border-bottom-color: #38383a;
}

body.dark-mode .modal-close-btn:hover {
  background: #38383a;
}

/* Kartların üzerine gelince oluşacak "Havalanma" efekti */
.stat-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  /* Tıklanabilir hissi verir */
}

.stat-card:hover {
  transform: translateY(-5px);
  /* 5px yukarı kalkar */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
  /* Gölgesi derinleşir */
  border-color: var(--fuarix-black);
  /* Kenarlık hafif koyulaşır */
}

/* Buton Hover Efekti */
.action-btn:hover {
  transform: scale(1.02);
  opacity: 0.9;
}

/* --- SÖZLEŞME ÖNİZLEME (A4 PAPER) --- */

/* ============================================================
   FUARIX KURUMSAL SÖZLEŞME & TEKLİF ÖNİZLEME STİLLERİ
   ============================================================ */

/* --- TOOLBAR (Üst Kontrol Paneli) --- */
.preview-toolbar {
  position: sticky;
  top: 0;
  background: #1A1A1A;
  /* Fuarix Siyahı */
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  height: 65px;
  box-sizing: border-box;
}

.toolbar-btn {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  transition: all 0.3s ease;
}

/* --- EKLENECEK KISIM --- */
/* Sol ve Sağ grupların içindeki butonları yan yana dizer */
.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Butonlar arası boşluk */
}

/* Sağdaki grubu en sağa yaslar */
.toolbar-right {
  justify-content: flex-end;
}

/* Ortadaki başlığı dengeler */
.toolbar-center {
  flex: 1;
  text-align: center;
  color: white;
  font-weight: 700;
  white-space: nowrap;
}

.toolbar-btn i {
  font-size: 18px;
}

/* Yazdır ve Paylaş Butonları - Fuarix Kırmızısı */
.btn-print,
.btn-share {
  background: #FF114D !important;
  /* Fuarix Kırmızısı */
  border-color: #FF114D !important;
  color: white !important;
}

.toolbar-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-close:hover {
  background: #ef4444;
}

/* --- A4 KAĞIT YAPISI --- */

/* Başlangıçta mutlaka gizli olsun */
#view-contract-preview {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  /* Arka plan karartma */
  z-index: 10000;
  /* Login'in üzerinde ama gizli */
  overflow-y: auto;
}

/* JavaScript ile 'active' class'ı eklenirse görünür yap (Opsiyonel) */
#view-contract-preview.show {
  display: block !important;
}

.a4-page {
  width: 210mm;
  min-height: 296mm;
  background: white;
  margin: 40px auto;
  padding: 10mm 25mm 5mm 25mm;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
  position: relative;
  font-family: 'Inter', sans-serif;
  color: #1A1A1A;
  box-sizing: border-box;
  overflow: hidden;
}

/* --- İÇERİK MİZANPAJI --- */
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.company-logo h1 {
  margin: 0;
  color: #1A1A1A;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -1.5px;
}

.company-logo small {
  color: #FF114D;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.invoice-meta table td {
  padding: 3px 8px;
  font-size: 13px;
  text-align: right;
}

.invoice-meta table td strong {
  color: #555;
}

.divider {
  margin: 20px 0;
  border: 0;
  border-top: 2px solid #F1F1F1;
}

/* Bilgi Alanları (Firma & Fuar) */
.info-grid {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.info-box {
  flex: 1;
  background: #F8F9FA;
  padding: 15px;
  border-radius: 4px;
  border: 1px solid #E9ECEF;
}

.info-box h3 {
  margin: -15px -15px 15px -15px;
  font-size: 11px;
  background: #1A1A1A;
  color: white;
  padding: 8px;
  text-align: center;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
  letter-spacing: 1px;
}

.big-text {
  font-weight: 800;
  font-size: 17px;
  color: #1A1A1A;
  margin-bottom: 8px;
}

.small-text {
  font-size: 13px;
  line-height: 1.6;
  color: #444;
}

/* Tablo Tasarımı (Hizmet Detayları) */
.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  font-size: 13px;
}

.detail-table th {
  background: #1A1A1A;
  color: white;
  padding: 12px 10px;
  text-align: left;
  font-weight: 600;
  border: 1px solid #1A1A1A;
}

.detail-table td {
  border: 1px solid #E9ECEF;
  padding: 12px 10px;
}

.detail-table tr:nth-child(even) {
  background: #FCFCFC;
}

.text-right {
  text-align: right;
}

/* Finansal Özet Alanı */
.financial-summary {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 20px;
  background: #F8F9FA;
  border-radius: 8px;
}

.payment-plan {
  width: 45%;
}

.payment-plan h3 {
  font-size: 14px;
  border-bottom: 2px solid #FF114D;
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.totals {
  width: 45%;
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: #555;
}

.grand-total {
  font-weight: 900;
  font-size: 20px;
  border-top: 2px solid #1A1A1A;
  color: #FF114D;
  /* Toplam Tutar Kırmızı */
  margin-top: 10px;
  padding: 15px 0;
}

.text-amount {
  margin-top: 20px;
  font-size: 12px;
  color: #666;
  font-style: italic;
  border-left: 3px solid #FF114D;
  padding-left: 10px;
}

/* İmza Alanları */
.signature-section {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}

.sig-box {
  width: 42%;
  text-align: center;
}

.sig-title {
  font-weight: 800;
  margin-bottom: 45px;
  font-size: 13px;
  color: #1A1A1A;
  text-transform: uppercase;
}

.sig-line {
  border-top: 2px solid #1A1A1A;
  padding-top: 8px;
  font-size: 13px;
  font-weight: 700;
}

/* --- MOBİL UYUMLULUK (Sabitlenmiş Versiyon) --- */
@media screen and (max-width: 800px) {

  /* Senin istediğin ana iskelet ayarları */
  .a4-page {
    width: 100%;
    padding: 10mm 5mm;
    margin: 0px auto;
    min-height: auto;
    box-sizing: border-box;
    /* Padding'in genişliği bozmasını engeller */
    overflow-x: hidden;
    /* Sağdan taşmaları kesin olarak bitirir */
  }

  /* 🎯 1. LOGOLAR VE BAŞLIK (İç içe girmeyi bitirir) */
  .proposal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .header-left,
  .header-right {
    flex: 0 0 65px;
    /* Logolara ayrılan alanı sabitledik */
    display: flex;
    justify-content: center;
  }

  .header-center {
    flex: 1;
    /* Başlık yazısına kalan tüm alanı verir */
    text-align: center;
  }

  .main-logo,
  .event-logo {
    max-height: 45px;
    /* Logoları kibarlaştırır */
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  .doc-title {
    font-size: 13px;
    /* Mobilde daha okunaklı boyut */
    margin: 0;
  }

  /* 🎯 2. KATILIMCI BİLGİLERİ (Sağa taşmayı engeller) */
  .customer-grid {
    display: block;
    /* Grid sistemini kapatıp alt alta dizer */
    width: 100%;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    padding: 2px 0;
  }

  .info-row .label {
    font-size: 12px;
    flex: 0 0 25%;
    /* Başlık kısmını sabitler */
    color: #1A1A1A;
  }

  .info-row .val {
    font-size: 11px;
    flex: 1;
    text-align: left;
    word-break: break-word;
    /* Çok uzun firma isimlerini alt satıra kırar */
    line-height: 1.2;
  }

  /* 🎯 3. FİNANSAL TABLO (Sağdaki rakamların görünmesini sağlar) */
  .proposal-table {
    width: 100%;
    table-layout: fixed;
    /* Tabloyu 98% içine hapseder */
  }

  .proposal-table th,
  .proposal-table td {
    font-size: 11px;
    padding: 8px 0px;
  }

  /* Tablonun sağındaki rakam sütunu */
  .proposal-table td.text-right {
    width: 85px;
    /* Rakamların sığacağı kadar alanı garantiler */
  }

  /* 🎯 4. DİĞER GRUPLAR (Ödeme ve İmza Zaten İyi Dediklerin) */
  .info-grid,
  .financial-summary,
  .signature-section {
    flex-direction: column;
    gap: 15px;
  }

  .payment-plan,
  .totals,
  .sig-box {
    width: 100%;
  }

  /* 🎯 2. YAZI İLE ALANI (2 SATIR DÜZENİ) */
  .text-amount-box td {
    padding: 10px 8px;
  }

  .text-amount-wrapper {
    display: block;
    /* Flex'i bozup alt alta dizilmesini sağlıyoruz */
    width: 100%;
  }

  .label-left {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
  }

  .value-right {
    display: block;
    white-space: normal;
    /* Metnin satır sonuna gelince alta geçmesini sağlar */
    text-align: left;
    /* 2 satırda sola yaslı daha okunaklı durur */
    font-size: 9px;
    line-height: 1.4;
    /* Satır aralığını açarak 2 satırı netleştirir */
    color: #1A1A1A;
    font-weight: 400;
  }
}

/* --- YAZDIRMA AYARLARI --- */
@media print {
  body * {
    visibility: hidden;
  }

  #printable-area,
  #printable-area * {
    visibility: visible;
  }

  #printable-area {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    box-shadow: none;
    width: 100%;
    border-top: none;
  }

  .preview-toolbar {
    display: none !important;
  }
}

/* Tablo Hizalamaları */
.summary-table {
  width: 100%;
  font-size: 13px;
}

.summary-table td {
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
}

/* Sol kolon (Başlıklar) sola, Sağ kolon (Rakamlar) sağa */
.label-col {
  text-align: left;
  color: #555;
  font-weight: 500;
}

.value-col {
  text-align: right;
  color: #000;
  font-weight: 700;
}

/* Ara Toplamlar için Hizalama */
.total-row {
  display: flex;
  justify-content: space-between;
  /* İki uca yaslar */
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px solid #f1f1f1;
}

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

/* Genel Toplam Özel Vurgu */
.grand-total {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid #000;
  color: #FF114D;
  /* Fuarix Kırmızısı */
  font-weight: 900;
  font-size: 18px;
}

/* ============================================================
   1. ANA KAPSAYICI (HEADER ALTI TAM EKRAN)
   ============================================================ */
#view-fsign-form {
  /* KONUMLANDIRMA */
  position: fixed;
  top: 60px;
  /* Header boyu */
  left: 0;
  width: 100%;

  /* KRİTİK DÜZELTME: 'bottom: 0' yerine Dinamik Yükseklik (dvh) kullanıyoruz. 
     Böylece mobilde adres çubuğu sorunu yaşanmaz. */
  height: calc(100dvh - 60px);

  /* GÖRÜNÜM & KATMAN */
  background: var(--bg-app, #ffffff);
  z-index: 999;
  /* Kırmızı butonları ezmek için yeterli */

  /* YAPI */
  display: none;
  /* JS ile 'flex' yapılacak */
  flex-direction: column;
  overflow: hidden;
  /* Dış kutu asla kaymasın */
}

#fsignForm {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Bu butonları en alta iter */
}

/* ============================================================
   2. SCROLL EDİLEBİLİR İÇERİK ALANI
   ============================================================ */
#fsignFormScrollArea {
  flex: 1;
  /* Boş kalan tüm alanı burası kaplasın */
  overflow-y: auto;
  /* İçerik taşarsa kaydır */

  padding: 20px;
  /* İçerik bittiğinde butonlara yapışmasın diye alt boşluk */
  padding-bottom: 20px;

  /* Mobilde yağ gibi kayması için */
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   3. SABİT ALT KUMANDA (ACTION BAR) - OPTİMİZE EDİLDİ
   ============================================================ */
/* --- FSign Aksiyon Barı (FPay ile Kardeş Yapı) --- */
.fsign-action-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  gap: 12px;

  /* Cam Efekti ve Arkaplan */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: sticky;
  bottom: 0;
  width: 100%;
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  z-index: 950;
  box-sizing: border-box;

  /* iPhone Güvenli Alan */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* Koyu Mod Uyumu */
body.dark-mode .fsign-action-bar {
  background: rgba(15, 15, 15, 0.95);
  border-top-color: var(--border-color);
}

/* --- BUTONLAR (Asimetrik Yapı) --- */

/* Ortak Buton Stili */
.action-btn {
  height: 52px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

/* 1. İPTAL BUTONU (Küçük - FPay Tarzı) */
.btn-secondary {
  flex: 0 1 auto;
  /* Esnemez, sadece içeriği kadar yer kaplar */
  min-width: 100px;
  /* Çok daralmaması için emniyet */
  padding: 0 24px;
  background: var(--card-bg, #fff) !important;
  color: #475569 !important;
  border: 1.5px solid var(--border-color) !important;
}

/* 2. DEVAM ET BUTONU (Büyük ve Baskın) */
.btn-primary {
  flex: 1;
  /* Kalan tüm boşluğu kaplar */
  background: #4F46E5;
  /* Indigo */
  color: white;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

/* --- ETKİLEŞİM VE DARK MODE --- */

.action-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

body.dark-mode .btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary, #94a3b8) !important;
}

/* ============================================================
   4. ADIM GÖSTERGESİ (STEPPER)
   ============================================================ */
.step-indicator-container {
  text-align: center;
  margin-bottom: 25px;
}

/* --- Sayfa Başlığı --- */
.fsign-page-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  /* Senin tercihin olan 20px'i koruduk */
  font-weight: 800;
  text-align: center;
  margin: 0 0 12px 0;
  padding: 0;
  /* Değişken sayesinde koyu modda otomatik beyazlaşır */
  color: var(--fuarix-black) !important;
  transition: color 0.3s var(--ease-premium);
}

/* --- Kapsayıcı --- */
.step-indicator-container {
  text-align: center;
  margin-bottom: 25px;
}

/* --- Adım Noktaları (Görsel Tasarımın Korundu) --- */
.step-dots-wrapper {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}

.step-dot {
  width: 10px;
  height: 10px;
  /* Pasif nokta: Koyu modda görünmesi için border rengine bağladık */
  background: #cbd5e1;
  border-radius: 50%;
  transition: all 0.3s var(--ease-premium);
}

.step-dot.active {
  /* Aktif nokta: Senin Indigo rengin */
  background: var(--fsign-primary);
  width: 25px;
  /* Sevdiğin geniş form */
  border-radius: 10px;
  /* Hafif bir derinlik için gölge değişkenini ekledik */
  box-shadow: 0 0 8px var(--fsign-primary-shadow);
}

.step-dot.completed {
  background: #10B981;
  /* Başarı yeşili standart kalabilir */
}

/* --- Adım Etiketi --- */
.step-label {
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-top: 4px;
  transition: color 0.3s var(--ease-premium);
}

.step-label.active {
  color: var(--fsign-primary) !important;
  font-weight: 700;
}

/* ============================================================
   5. KARTLAR VE INPUTLAR
   ============================================================ */
/* --- Premium Kart Yapısı --- */
/* --- Premium Kart (Senin Kodun + Küçük Bir Rötuş) --- */
.premium-card {
  background-color: var(--card-bg);
  color: var(--fuarix-black);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px -1px rgba(0, 0, 0, 0.05);
  transition: all 0.3s var(--ease-premium);
}

/* Koyu Modda Kartın Altına Hafif Indigo Parıltısı */
body.dark-mode .premium-card {
  /* Indigo parıltısı burada siyah zemin üzerinde 'premium' bir derinlik sağlar */
  box-shadow: 0 8px 20px -4px var(--fsign-primary-shadow);
  border-color: rgba(79, 70, 229, 0.2);
}

/* --- Giriş Alanları (Değişkenlere Bağlandı) --- */
.fsign-input {
  width: 100%;
  padding: 12px 15px;

  /* RENKLER: Sabit renkler yerine değişkenlerini yerleştirdik */
  border: 2px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--input-text);

  border-radius: 10px;
  font-size: 14px;
  transition: all 0.3s var(--ease-premium);
  box-sizing: border-box;
  outline: none;
}

/* --- Odaklanma (Focus) Hali --- */
.fsign-input:focus {
  /* İşte burada Indigo parlıyor */
  border-color: var(--fsign-primary);
  background-color: var(--card-bg);
  /* Odaklanınca fonu netleştirir */

  /* Senin sorduğun o şık Indigo gölgeyi burada kullanıyoruz */
  box-shadow: 0 0 0 4px var(--fsign-primary-shadow);
}

/* Koyu modda tarih seçim ikonunu görünür yap */
body.dark-mode .fsign-input::-webkit-calendar-picker-indicator {
  /* İkonun rengini tersine çevirerek beyaz yapar */
  filter: invert(1) brightness(1.5);

  /* Tıklanabilir olduğunu belli etmek için */
  cursor: pointer;

  /* İsteğe bağlı: Biraz daha yumuşak bir görünüm için */
  opacity: 0.8;
  transition: opacity 0.2s;
}

/* Üzerine gelince tam parlak olsun */
body.dark-mode .fsign-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

/* ============================================================
   6. ÖZEL BİLEŞENLER (Arama, Seçilen Kart vb.)
   ============================================================ */

/* Müşteri Arama Grubu */
.fsign-customer-group {
  margin-bottom: 20px;
}

/* Arama Satırı (Input + Liste Butonu) */
.fsign-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.fsign-search-row .search-wrapper {
  position: relative;
  flex: 1;
  /* Inputun genişlemesini sağlar */
}

/* Arama İkonu ve Input */
.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  /* Mevcut gri tonun */
  pointer-events: none;
}

.fsign-search-input {
  width: 100%;
  padding-left: 40px !important;
  /* İkon için boşluk */
  height: 48px;
  border-radius: 10px;
  /* Diğer kartlarınla uyumlu */
}

/* Liste Butonu (Tüm Kayıtlar) */
.btn-list-view {
  /* Arka planı değişkene bağladık; açıkta hafif gri, koyuda koyu gri olur */
  background: var(--input-bg);

  /* Kenarlık ekleyerek premium-card ve inputlarla bütünlük sağlıyoruz */
  border: 1px solid var(--border-color);

  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* İkon rengini değişkene bağladık */
  color: var(--text-secondary);

  transition: all 0.3s var(--ease-premium);
}

/* Hover (Üzerine Gelince) Indigo Dokunuşu */
.btn-list-view:hover {
  background: var(--fsign-primary-light);
  color: var(--fsign-primary);
  border-color: var(--fsign-primary-border);
}

/* Seçilen Müşteri Kartı - Temizlenmiş ve Optimize Edilmiş Versiyon */
.selected-company-card {
  display: none;
  align-items: center;
  /* İçeriği (metin ve butonu) dikeyde tam ortalar */
  justify-content: space-between;
  background: var(--fsign-primary-light);
  border: 1px solid var(--fsign-primary-border);
  color: var(--fsign-primary);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 4px 12px -1px var(--fsign-primary-shadow);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s var(--ease-premium);
  margin-bottom: 10px;
}

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

.scc-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}

.scc-detail {
  font-size: 10px;
  opacity: 0.9;
  margin-top: 2px;
}

/* Sağ Taraf - Sadece Düzenleme Butonu */
.scc-actions {
  display: flex;
  align-items: center;
  margin-left: 16px;
  flex-shrink: 0;
}

/* Bilgi Kutusu Tasarımı (Firma Detayları) */
.scc-details-grid {
  display: flex;
  flex-direction: column;
  /* Her şeyi alt alta diz */
  gap: 10px;
  margin-top: 12px;
  padding: 15px;
  background: var(--fsign-primary-light);
  border: 1px solid var(--fsign-primary-border);
  border-radius: 10px;
  box-shadow: 0 4px 12px -1px var(--fsign-primary-shadow);
}

.scc-info-row {
  display: flex;
  align-items: flex-start;
  /* Uzun adreslerde yukarıdan hizalar */
  justify-content: flex-start;
  gap: 12px;
}

.scc-info-row .info-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  min-width: 100px;
  /* Etiketlerin aynı hizada bitmesini sağlar */
  flex-shrink: 0;
}

.scc-info-row .info-value {
  font-size: 10px;
  font-weight: 500;
  color: var(--fsign-primary);
  word-break: break-word;
  /* Uzun adres veya maillerin taşmasını önler */
}

/* Readonly Input Görünümü (Fuar Tarihi İçin) */
.readonly-style {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px dashed var(--border-color) !important;
  color: var(--text-secondary) !important;
  cursor: not-allowed;
}

/* Sistem ve Firma bilgilerini ayıran çizgi */
.info-divider {
  border: 0;
  border-top: 1px dashed var(--fsign-primary-border);
  margin: 5px 0;
  opacity: 0.5;
}

.btn-edit-selection {
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--fsign-primary);
  transition: all 0.2s;
}

.btn-edit-selection:hover {
  background: var(--fsign-primary);
  color: white;
  transform: scale(1.1);
}

/* --- KOYU MOD UYUMU --- */
body.dark-mode .selected-company-card {
  background: rgba(79, 70, 229, 0.15);
  border-color: rgba(79, 70, 229, 0.4);
  color: #C7D2FE;
}

body.dark-mode .btn-edit-selection {
  color: #C7D2FE;
  background: rgba(79, 70, 229, 0.3);
}

/* ============================================================
   7. YETKİLİ KADROSU (STEP 3 ÖZEL)
   ============================================================ */

/* Bölüm Başlığı */
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}

.section-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Personel Kartı (Satırı) */
.staff-row {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  /* İnce gri çerçeve */
  /* Sol taraftaki renkli çizgiyi HTML'den alacak (style="border-left:...") */
  border-left-width: 4px !important;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s;
}

.staff-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Personel Başlığı (İkon + Yazı) */
.sr-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
  /* Rengi HTML içindeki inline style'dan alır */
}

.sr-header i {
  font-size: 18px;
}

/* Yardımcı Sınıflar */
.mb-2 {
  margin-bottom: 10px !important;
}

/* Zorunlu Alan İşareti */
.staff-row.required {
  background: #fff;
  /* Beyaz */
  border-color: #cbd5e1;
}

.staff-row.required .sr-header {
  color: #ef4444;
  /* Kırmızı başlık */
}

.radio-box {
  flex: 1;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s;
  background: white;
}

.radio-box:hover {
  border-color: #cbd5e1;
}

.radio-box.selected {
  border-color: #4F46E5;
  background: #eef2ff;
  color: #3730a3;
}

.radio-box input {
  display: none;
}

/* Radyo yuvarlağını gizle, kutuya tıklansın */
.calc-field {
  background: #f8fafc;
  color: #475569;
}

/* FSign Özel Bilgi Notu Standartı */
.fsign-info-wrapper {
  display: flex;
  align-items: center;
  /* İkon ve 10px yazı tam ortalı dursun */
  gap: 4px;
  /* İkon ile yazı arası dar ve şık boşluk */
  margin-top: 4px;
  /* İstediğin üst boşluk */
  padding-left: 2px;
}

.fsign-info-wrapper i.material-icons {
  font-family: 'Material Icons';
  font-size: 12px;
  /* Yazı 10px olduğu için ikon 12px çok dengeli durur */
  color: #64748b;
  /* İstediğin Slate Grey rengi */
  line-height: 1;
}

/* Her yerdeki dönen ikonlar için genel kural */
.material-icons.spin {
  animation: fsign-rotate 2s linear infinite !important;
  display: inline-block !important;
}

/* FSign Animasyon Hızını FPay ile Eşitledik */
@keyframes fsign-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.fsign-spin {
  /* Hızı 1 saniyeye sabitledik, linear ile akıcılık sağladık */
  animation: fsign-rotate 1s linear infinite !important;
  display: inline-block;
}

.fsign-info-note {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  /* Tam olarak istediğin font boyutu */
  color: #64748b;
  /* Tam olarak istediğin renk */
  font-weight: 500;
  /* 10px'de okunurluk için Medium ağırlık */
  line-height: 1.2;
}

/* 1. Slider'ın Çizgisi (Track) */
.fsign-slider {
  -webkit-appearance: none;
  /* Varsayılan tarayıcı stilini kapatır */
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: #e2e8f0;
  /* Yolun rengi: Açık gri */
  outline: none;
  cursor: pointer;
}

/* 2. Yuvarlak Kaydırıcı (Chrome, Safari, Edge için) */
.fsign-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5;
  /* İŞTE İNDİGO RENK */
  cursor: pointer;
  border: 2px solid #ffffff;
  /* Beyaz çerçeve */
  box-shadow: 0 0 5px rgba(79, 70, 229, 0.4);
}

/* 3. Yuvarlak Kaydırıcı (Firefox için) */
.fsign-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4f46e5;
  cursor: pointer;
  border: 2px solid #ffffff;
}

/* 4. Kaydırırken Yuvarlağın Parlaması (Hover) */
.fsign-slider::-webkit-slider-thumb:hover {
  background: #4338ca;
  /* Üzerine gelince biraz daha koyu indigo */
  transform: scale(1.1);
}

/* Ana Kart: Büyük, Indigo ve Görkemli */
.live-total-card {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
  /* Derin Indigo Gradyan */
  padding: 24px 20px;
  border-radius: 15px;
  /* Daha yuvarlak, daha modern */
  color: #ffffff;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.2), 0 10px 10px -5px rgba(79, 70, 229, 0.1);
  margin: 20px 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Hafif iç parıltı */
}

/* "SÖZLEŞME TUTARI" Yazısı */
.lt-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.9);
  /* Saf beyaz değil, göz yormayan hafif şeffaf */
}

/* Rakam ve ₺ Simgesi */
.lt-amount {
  font-size: 36px;
  /* Okunabilir ve baskın */
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dinamik Rakam Fontu */
#txtTotalDisplay {
  font-family: 'Inter', sans-serif;
  letter-spacing: -1.5px;
}

@media (max-width: 480px) {
  .lt-amount {
    font-size: 28px;
    /* Mobilde biraz daha kibar durur */
  }

  .live-total-card {
    padding: 18px 15px;
    /* Mobilde yer kazanmak için */
  }
}

/* =========================================
   FSIGN DETAY EKRANI (FULL VIEW)
   ========================================= */

/* Ana Taşıyıcı: Header'ın hemen altından başlar */
.fsign-detail-view {
  position: fixed;
  top: 60px;
  /* Senin Header yüksekliğin */
  left: 0;
  width: 100%;
  height: calc(100% - 60px);
  /* Ekranın kalanı */
  background: #F9FAFB;
  /* Temiz zemin */
  z-index: 900;
  /* Header(1000)'ın altında kalır */
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

/* 2. Kaydırılabilir İçerik Alanı */
.fsign-scroll-content {
  flex: 1;
  /* Kalan tüm boşluğu kapla */
  overflow-y: auto;
  /* Sadece burası kaysın */
  padding: 0 0 120px 0;
  /* En altta butonların yüksekliği kadar boşluk bırak */
  -webkit-overflow-scrolling: touch;
  /* Mobil akıcılığı */
}

/* ============================================================
   FSign Detail Dark Mode Overrides (HTML'e dokunmadan)
   ============================================================ */

body.dark-mode .fsign-scroll-content {
  background-color: var(--bg-app);
}

/* 1. Kapatma Butonu ve İkonu */
body.dark-mode .fsign-scroll-content button {
  background-color: var(--glass-bg) !important;
  /* Satır içi rgba'yı ezmek için zorunlu */
  color: var(--fuarix-black) !important;
  border-color: var(--border-color) !important;
}

/* 2. "Sözleşme Önizleme" Başlığı */
body.dark-mode .fsign-scroll-content div[style*="font-size: 24px"] {
  color: var(--fuarix-black) !important;
}

/* ============================================================
    GÜNCELLENMİŞ DARK MODE - INDIGO 500 VURGUSU
   ============================================================ */

/* 1. Başlıklar ve İkonlar için Indigo 500 (#6366F1) */
body.dark-mode .section-title {
  color: #6366F1 !important;
  /* Indigo 500 */
  border-bottom-color: rgba(99, 102, 241, 0.3) !important;
  /* Indigo 500 şeffaf hali */
  padding-bottom: 8px;
  margin-bottom: 15px;
}

/* 2. Kart Tasarımı ve Çizgiler (Yumuşak & Düz) */
body.dark-mode .detail-section-card {
  background-color: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

body.dark-mode .detail-row-item {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}


/* 3. Yetkili Rolleri ve "Düzenle" Linki için Indigo 500 */
body.dark-mode .contact-role {
  color: #007AFF !important;
}

/* --- Genel Rol Başlığı (İmza Yetkilisi vb.) --- */
.contact-role-text {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #4F46E5;
  /* Light Mode Indigo */
}

/* --- Aksiyon Linkleri (Düzenle, Tel, Mail) --- */
.fsign-action-link {
  color: #007AFF;
  /* Apple Action Blue (Light) */
  text-decoration: none;
  border: none;
}

/* ============================================================
   DARK MODE ÖZEL AYARLAR
   ============================================================ */

/* 1. Rol Başlıkları Indigo 500 */
body.dark-mode .contact-role-text {
  color: #6366F1;
  /* Dark Mode Indigo 500 */
}

/* 2. Aksiyon Linkleri Apple Vibrant Blue */
body.dark-mode .fsign-action-link {
  color: #0A84FF;
  /* Dark Mode Apple Blue */
}

body.dark-mode .financial-row,
body.dark-mode .contact-item {
  /* Sadece rengi ez, kalınlık ve stil (solid) sabit kalsın */
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Linklerde hover etkisi */
.fsign-action-link:hover {
  opacity: 0.7;
}

/* 4. Metin ve İkon Renkleri */
body.dark-mode .detail-section-card div,
body.dark-mode .detail-section-card span,
body.dark-mode .detail-section-card i {
  color: var(--fuarix-black);
}

/* 5. Alt Aksiyon Çubuğu */
body.dark-mode .fsign-sticky-action-bar {
  background-color: var(--glass-bg);
  border-top: 1px solid var(--border-color);
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

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

/* Başlık Barı (Detay içi Header) */
.fsign-detail-header {
  background: white;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

/* Kart Tasarımı (Glassmorphism & Shadow) */
.detail-section-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin: 15px 20px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s;
}

/* Başlıklar */
.section-title {
  font-size: 13px;
  font-weight: 700;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #F3F4F6;
  padding-bottom: 8px;
}

/* Satır Yapısı (Alt alta döküm) */
.detail-row-item {
  display: flex;
  flex-direction: column;
  /* Alt alta */
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.d-lbl {
  font-size: 11px;
  color: #6B7280;
  margin-bottom: 4px;
  font-weight: 500;
}

.d-val {
  font-size: 14px;
  color: #111827;
  font-weight: 600;
  line-height: 1.5;
  word-break: break-word;
}

/* Finansal Satırlar (Sağlı Sollu) */
.financial-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
}

.fin-lbl {
  font-size: 13px;
  color: #4B5563;
}

.fin-val {
  font-size: 14px;
  font-weight: 700;
  color: #1F2937;
}

/* =========================================
   10. AKSİYON BUTONLARI (MOBILE-FIRST & DARK OPI)
   ========================================= */

/* Sabit Alt Bar (Sticky Footer) */
.fsign-sticky-action-bar {
  position: fixed;
  /* Mobilde scroll üzerinde sabit kalması için fixed daha güvenlidir */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* Temaya göre değişen cam efekti */
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);

  padding: 12px 16px;
  /* iPhone alt bar (çentik) koruması */
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

/* Ana Taşıyıcı: Butonları sarmalar */
.fsign-actions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Mobilde daha kompakt olması için 8px */
  width: 100%;
  max-width: 500px;
  /* Tabletlerde aşırı yayılmaması için */
  margin: 0 auto;
}

/* Üst Satır: Yan Yana İki Buton (Düzenle & Teklif gibi) */
.fsign-actions-top-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

/* Genel Buton Stili (Touch-Friendly) */
.btn-fsign {
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  /* Mobilde okunabilirlik için 14px idealdir */
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  white-space: nowrap;
  outline: none;
}

/* Dokunma Tepkisi */
.btn-fsign:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

/* --- BUTON TEMALARI (DEĞİŞKENLERLE) --- */

/* 1. Düzenle (Indigo Light) */
.btn-fsign.is-edit {
  background-color: var(--fsign-primary-light);
  color: var(--fsign-primary);
}

/* 2. Teklif (Secondary/Gray) */
.btn-fsign.is-offer {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--border-color);
}

/* 3. Ana Aksiyon: Gönder/Onayla (Sarı/Turuncu) */
.btn-fsign.is-approve,
.btn-fsign.is-send {
  background-color: var(--status-pending);
  color: #FFFFFF;
  /* Okunabilirlik için sabit beyaz */
  font-size: 15px;
  padding: 14px;
  width: 100%;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

/* 4. İmzalı / Başarılı Durumu */
.btn-fsign.is-signed {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--status-success);
  border: 1px solid var(--status-success);
  pointer-events: none;
  /* İmzalanmışsa tıklanmasın */
}

/* 5. Admin / Kritik İşlem (Kırmızı) */
.btn-fsign-admin {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  color: var(--status-error);
  border: 1px dashed var(--status-error);
  padding: 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Koyu Modda Admin Buton Arka Planı */
body.dark-mode .btn-fsign-admin {
  background: rgba(239, 68, 68, 0.05);
}

/* ============================================================
   FSign Belge Görüntüleyici (PDF & Image Viewer) 
   ============================================================ */

/* 1. Animasyonlar - Senin Değişkenlerinle Uyumlu */
@keyframes fsignFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fsignCardPop {
  from {
    transform: scale(0.92) translateY(10px);
    opacity: 0;
  }

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

@keyframes fsignSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 2. Kaplayıcı ve Kart Yapısı */
.fsign-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fsignFadeIn 0.3s var(--ease-premium);
}

.fsign-viewer-card {
  background: var(--card-bg);
  /* Dark Mode'da otomatik değişir */
  width: 100%;
  max-width: 950px;
  height: 85vh;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--border-color);
  animation: fsignCardPop 0.4s var(--ease-bounce);
}

/* 3. Header ve Buton Güvenliği (Kritik Alan) */
.fsign-viewer-header {
  height: 65px;
  background: var(--fuarix-black);
  /* Fuarix antrasit tonu */
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}

/* Akıllı Dosya İsmi Budama */
.fsign-viewer-filename {
  flex: 1;
  min-width: 0;
  /* Butonların ezilmesini önleyen sihirli satır */
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF;
  /* Header içinde her zaman beyaz kalsın */
}

.fsign-viewer-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  /* Butonlar asla küçülmez */
}

/* 4. Buton Stilleri */
.fsign-v-btn {
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s var(--ease-premium);
}

.fsign-v-btn.download {
  background: var(--status-success);
  color: white;
}

.fsign-v-btn.download:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.fsign-v-btn.close {
  background: var(--status-error);
  color: white;
}

.fsign-v-btn:active {
  transform: scale(0.95);
}

/* 5. İçerik Alanı ve Yükleyici */
.fsign-viewer-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background-color: #525659;
  /* PDF standart koyu gri fonu */
}

.fsign-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  border-top-color: var(--fsign-primary);
  animation: fsignSpin 1s linear infinite;
}

/* 6. Mobil Uyumluluk */
.fsign-btn-text {
  display: none;
}

@media (min-width: 600px) {
  .fsign-btn-text {
    display: inline;
  }
}

/* Modal açıkken arka planın kaymasını engeller */
.fsign-stop-scrolling {
  height: 100vh !important;
  overflow: hidden !important;
  /* Masaüstünde kaydırma çubuğu gidince ekranın titrememesi için */
  padding-right: 0px;
}

/* Mobildeki göz kırpma (flicker) hatasını önlemek için donanım ivmelendirmesi */
.fsign-viewer-overlay {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}


/* --- TEKLİF SAYFASI GENEL --- */
.proposal-page {
  padding: 30px 20px !important;
  font-family: 'Inter', sans-serif;
  color: #1A1A1A;
}

/* 1. HEADER YAPISI (Kırmızı Şeritle Hizalanmış) */
.proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  height: 40px;
  width: 100%;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*align-items: center;
  justify-content: center;*/
}

.header-left {
  align-items: flex-start;
}

.header-right {
  align-items: flex-end;
}

.main-logo {
  height: 45px;
  object-fit: contain;
}

.event-logo {
  height: 50px;
  object-fit: contain;
  margin-top: 17px;
}

.header-center {
  flex: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 8px;
}

.doc-title {
  font-size: 20px;
  font-weight: 900;
  color: #1A1A1A;
  margin: 0;
  line-height: 1;
}

.fuar-sub-title {
  font-size: 12px;
  font-weight: 600;
  color: #FF114D;
  /* Fuarix Kırmızısı */
  margin: 5px 0 0 0;
  text-transform: capitalize;
}

.date-box {
  font-size: 11px;
  margin-top: 3px;
  color: #666;
}

.proposal-divider {
  border-top: 2px solid #1A1A1A;
  margin: 10px 0;
}

/* 2. MÜŞTERİ BİLGİLERİ (Kompakt) */
.customer-section {
  margin-bottom: 12px;
}

.section-title {
  font-size: 12px;
  background: #eee;
  padding: 6px;
  font-weight: 700;
  margin-bottom: 10px;
  border-left: 4px solid #FF114D;
}

.customer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* İki sütun */
  gap: 8px 20px;
  font-size: 11px;
}

.info-row {
  display: flex;
  align-items: baseline;
}

.info-row.full-width {
  grid-column: span 2;
}

/* Tam satır kaplayanlar */

.label {
  font-weight: 600;
  color: #1A1A1A;
  width: 110px;
  flex-shrink: 0;
  font-size: 12px;
}

.val {
  color: #1A1A1A;
  font-weight: 400;
  font-size: 12px;
}

.fw-bold {
  font-weight: 400;
  color: #FF114D;
  font-size: 12px;

}

.customer-grid .val {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* En fazla 2 satıra izin ver */
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 2 satırdan sonrasını gizle */
  text-overflow: ellipsis;
  /* Eğer sığmazsa sonuna "..." koy (kurumsal durur) */
  max-height: 32px;
  /* Yüksekliği kilitle, asla büyümesin */
  line-height: 1.2;
}

/* Tek satır kalmasını istediğin Sergi Ürünleri ve Stant No için */
#prv-products,
#prv-stand-no {
  -webkit-line-clamp: 1;
  /* Sadece tek satır */
  max-height: 16px;
}

/* 3. FİNANSAL TABLO */
.proposal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-bottom: 10px;
}

.proposal-table th {
  background: none;
  color: #1A1A1A;
  padding: 6px 0px;
  text-align: left;
  font-weight: 800;
}

.proposal-table th.text-right {
  text-align: right;
}

.proposal-table td {
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  font-size: 12px;
  /* Her yerde aynı boyut */
  font-weight: 400;
  /* Her yerde aynı standart kalınlık */
  color: #1A1A1A;
}

.sub-row td {
  color: #1A1A1A;
  font-style: normal;
}

.grand-total-row td {

  color: #FF114D;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 0px 2px 0px;
  border-bottom: 1px solid #eee;
}

/* --- Yazı İle Satırı Düzenlemesi --- */

.text-amount-box td {
  padding: 8px 0px;
  border-bottom: 1px solid #eee;
}

/* Başlık ve Bedeli iki uca yaslayan taşıyıcı */
.text-amount-wrapper {
  display: flex;
  justify-content: space-between;
  /* Biri en sola, diğeri en sağa */
  align-items: center;
  width: 100%;
  white-space: nowrap !important;
  /* ASLA ALT SATIRA GEÇMEZ */
}

.label-left {
  color: #1A1A1A;
  font-size: 12px;
  font-weight: 400;
}

.value-right {
  font-size: 10px;
  /* Çok uzun tutarlarda taşmayı önlemek için 10px idealdir */
  font-weight: 400;
  font-style: italic;
  text-align: right;
  flex-grow: 1;
  /* Kalan tüm boşluğu kaplar */
  margin-left: 10px;
}

/* 4. ÖDEME PLANI */
.payment-summary-table {
  width: 100%;
  border: 1px solid #ddd;
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
}

.payment-summary-table th {
  background: #f1f1f1;
  padding: 6px;
  border: 1px solid #ddd;
}

.payment-summary-table td {
  padding: 8px;
  border: 1px solid #ddd;
  font-weight: 700;
}

/* 5. İMZA ALANI (Simetrik & Çizgisiz) */
.footer-signatures {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 10px;
}

.sign-box {
  width: 45%;
  /* İsimlerin sığması için %35'ten %45'e çektik */
  text-align: center;
  font-size: 10px;
}

.sign-title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 2px;
  /* İsme yakın olması için düşürüldü */
  color: #1A1A1A;
  text-transform: uppercase;
}

/* Yeni Eklenen: Yetkili İsim Alanı */
.sign-person {
  font-size: 11px;
  /* Başlıktan biraz daha küçük */
  font-weight: 600;
  color: #444;
  margin-bottom: 50px;
  /* İmza atılacak boşluğu buraya verdik */
  text-transform: capitalize;
  /* Baş harfleri büyük yapar */
}

.sign-area {
  padding-top: 5px;
  color: #999;
  font-style: normal;
  /* Eğik yazıyı kaldırdık */
  text-transform: uppercase;
  font-size: 10px;
}

/* 6. YASAL NOT (Simetrik ve Dibe Yakın) */
.footer-legal {
  position: absolute;
  /* Sayfanın en altından 2 cm yukarıda durur */
  bottom: 0mm;
  left: 15mm;
  /* Sol padding (25mm) ile hizaladık */
  right: 15mm;
  /* Sağ padding (25mm) ile hizaladık */

  margin: 0;
  padding-top: 5px;
  border-top: 1px solid #EEE;
  /* Üstteki ince ayırıcı çizgi */

  font-size: 10px;
  color: #888;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gizlilik Linkleri Bölümü */
.privacy-links {
  font-size: 12px;
  color: #666;
  margin: 15px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #eee;
}

.privacy-links a {
  color: #FF114D;
  text-decoration: none;
  font-weight: 700;
}

.privacy-links a:hover {
  text-decoration: underline;
}

/* Checkbox Alanı */
.checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}

.checkbox-text {
  margin-top: -2px;
}

/* Pasif Buton Görünümü */
.btn-approve:disabled {
  background-color: #bdc3c7 !important;
  cursor: not-allowed;
  opacity: 0.7;
  transform: none !important;
}

/* Ana Karartma Perdesi */
.privacy-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.85) !important;
  /* Arkayı sağlam karartır */
  backdrop-filter: blur(8px);
  /* Modern ve şık buzlu cam efekti */
  z-index: 9999999 !important;
  /* Her şeyin ama her şeyin üzerinde durur */
  display: none;
  /* JS ile flex yapılacak */
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Beyaz Modal Kutusu */
.privacy-modal {
  background: white;
  width: 100%;
  max-width: 450px;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: modalGelisi 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Checkbox işaretlendiğinde çerçeve rengini canlandır */
label#privacy-label:has(input:checked) {
  border-color: var(--fsign-primary) !important;
  background: var(--fsign-primary-light) !important;
}

/* Modal giriş animasyonu */
@keyframes fsignModalSlide {
  from {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
  }

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

/* Modalın yukarıdan tatlı bir sıçramayla gelmesi için */
@keyframes modalGelisi {
  from {
    transform: translateY(30px);
    opacity: 0;
  }

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

/* Başlık ve İkon Alanı */
.privacy-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.privacy-header h3 {
  margin: 0;
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 800;
}

.agreement-text ul {
  padding-left: 20px;
  margin: 15px 0;
}

.agreement-text li {
  margin-bottom: 10px;
  font-size: 14px;
}

.splash-screen {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Cubic-bezier geçişi: Apple'ın o meşhur pürüzsüz kapanışı */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

.splash-logo {
  width: 140px;
  /* Biraz daha kompakt ve zarif */
  height: auto;
  opacity: 0;
  transform: scale(0.95);
  animation: logoEntrance 0.8s ease-out forwards;
}

.splash-loader {
  width: 100px;
  height: 3px;
  background: #f2f2f7;
  /* İnce açık gri ray */
  margin: 30px auto 0;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.loader-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  /* Fuarix Kırmızısı süzülerek geçiyor */
  background: linear-gradient(90deg, transparent, #FF114D, transparent);
  animation: shimmerFlow 1.4s infinite ease-in-out;
}

@keyframes logoEntrance {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes shimmerFlow {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(400%);
  }
}