/* =====================================================================
   components.css — Paylaşılan Bileşen Kütüphanesi
   Her bileşen TEK yerde tanımlanır, her ekranda yeniden kullanılır.
   ===================================================================== */

/* === BUTTON ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: var(--radius-input);
  font-size: 0.875rem; font-weight: 600; border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--navy); }
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-secondary { background: var(--card-bg); color: var(--text-heading); border: 1px solid var(--border-soft); }
.btn-secondary:hover:not(:disabled) { border-color: var(--gold-accent); }
.btn-ghost { background: transparent; color: var(--text-body); padding: 8px 12px; }
.btn-ghost:hover:not(:disabled) { background: rgba(15, 23, 42, 0.04); }
.btn-danger-ghost { background: transparent; color: var(--danger); padding: 8px 12px; }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-bg); }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
.btn-icon { padding: 8px; width: 34px; height: 34px; }
.btn-block { width: 100%; }
.btn .spinner { width: 14px; height: 14px; }

/* === INPUT / SEARCH / SELECT =========================================== */
.field-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-heading); margin-bottom: var(--space-2); }
.input, .select {
  width: 100%; padding: 10px 14px; background: var(--card-bg);
  border: 1px solid var(--border-soft); border-radius: var(--radius-input);
  font-size: 0.875rem; color: var(--text-heading); font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus, .select:focus { border-color: var(--gold-accent); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.12); outline: none; }
.input::placeholder { color: var(--text-muted); }
.search-box { position: relative; flex: 1; min-width: 200px; }
.search-box .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.search-box .input { padding-left: 38px; }
.select-wrap { position: relative; }
.select { appearance: none; padding-right: 34px; cursor: pointer; }
.select-wrap::after {
  content: ''; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

/* === CHECKBOX / RADIO ================================================== */
.checkbox, .radio {
  width: 18px; height: 18px; border: 1.5px solid var(--border-soft); border-radius: 4px;
  appearance: none; cursor: pointer; position: relative; vertical-align: middle;
}
.radio { border-radius: 50%; }
.checkbox:checked, .radio:checked { background: var(--gold-accent); border-color: var(--gold-accent); }
.checkbox:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--navy); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.radio:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--navy); transform: translate(-50%, -50%);
}

/* === CARD / KPI CARD ==================================================== */
.card { background: var(--card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: var(--space-5); }
.card-clickable { cursor: pointer; transition: box-shadow var(--transition-fast); }
.card-clickable:hover { box-shadow: var(--shadow-sm); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 720px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 720px) { .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); } }
/* EKLENTİ: Landing Page (Women/General) kartları için 2 sütunlu grid. */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }
.kpi-card { background: var(--card-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: var(--space-4) var(--space-5); }
.kpi-card-icon {
  width: 36px; height: 36px; border-radius: 50%; background: var(--gold-pale-10);
  display: flex; align-items: center; justify-content: center; color: var(--gold-accent-hover); margin-bottom: var(--space-3);
}
.kpi-card-icon svg { width: 18px; height: 18px; }
.kpi-card-label { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-2); }

/* === TABLE ================================================================ */
.table-wrap { overflow-x: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-xs); background: var(--card-bg); }
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table thead th {
  position: sticky; top: 0; background: var(--canvas-bg); text-align: left; padding: 12px 16px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border-bottom: 1px solid var(--border-soft); white-space: nowrap;
}
.data-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-body); vertical-align: middle; }
.data-table tbody tr { background: var(--card-bg); transition: background var(--transition-fast); }
.data-table tbody tr:hover { background: var(--card-bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
.cell-name { font-weight: 600; color: var(--text-heading); }
.cell-quick-actions { display: inline-flex; gap: 6px; margin-left: 8px; }
.cell-quick-actions button, .cell-quick-actions a {
  width: 26px; height: 26px; border: none; background: var(--neutral-bg); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cell-quick-actions button:hover, .cell-quick-actions a:hover { background: var(--gold-pale-20); color: var(--gold-accent-hover); }
.cell-quick-actions svg { width: 13px; height: 13px; }

/* === MODAL ================================================================== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10, 15, 30, 0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--card-bg); border-radius: var(--radius-modal); box-shadow: var(--shadow-lg);
  width: min(480px, 92vw); max-height: 88vh; overflow-y: auto; overscroll-behavior-y: contain; padding: var(--space-5);
  transform: translateY(12px) scale(0.98); transition: transform var(--transition-base);
}
.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.modal-close { background: none; border: none; color: var(--text-muted); }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-5); }

/* === BOTTOM SHEET ============================================================ */
.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(10, 15, 30, 0.5); z-index: 210;
  opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.bottom-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; background: var(--card-bg);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-lg); z-index: 211;
  transform: translateY(100%); transition: transform 380ms var(--ease-panel);
  display: flex; flex-direction: column; overflow: hidden;
}
.sheet-backdrop.open .bottom-sheet { transform: translateY(0); }
.sheet-handle { width: 40px; height: 4px; background: var(--border-soft); border-radius: 4px; margin: 10px auto; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5) var(--space-3); border-bottom: 1px solid var(--border-soft); }
/* EKLENTİ: Lead detay popup başlığı — telefon/e-posta + kopyala ikonu satırları. */
.lead-detail-contact-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.8rem; color: var(--text-muted); }
.copy-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0; padding: 0; border: none; border-radius: 6px;
  background: transparent; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast);
}
.copy-icon-btn:hover { background: var(--gold-pale-10); color: var(--gold-accent-hover); }
.copy-icon-btn svg { pointer-events: none; }
.sheet-body { padding: var(--space-5); overflow-y: auto; overscroll-behavior-y: contain; }
.sheet-quick-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); }
.sheet-quick-actions a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--space-3);
  border-radius: var(--radius-card); background: var(--canvas-bg);
  font-size: 0.75rem; font-weight: 600; color: var(--text-heading); transition: background var(--transition-fast);
}
.sheet-quick-actions a:hover { background: var(--gold-pale-10); }
.sheet-quick-actions svg { width: 20px; height: 20px; color: var(--gold-accent-hover); }

@media (min-width: 720px) {
  .bottom-sheet {
    left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -46%) scale(0.98);
    border-radius: var(--radius-modal); width: min(560px, 92vw); opacity: 0;
  }
  .sheet-backdrop.open .bottom-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  .sheet-handle { display: none; }
}

/* === TIMELINE ================================================================ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--space-4) 24px; border-left: 2px solid var(--border-soft); margin-left: 6px; }
.timeline li:last-child { border-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ''; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-pale-20); border: 2px solid var(--gold-accent);
}
.timeline-title { font-size: 0.85rem; font-weight: 600; color: var(--text-heading); }
.timeline-meta { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* Karar Yolculuğu'ndaki "← Geri" adımları — aynı .timeline yapısı,
   sadece nokta ve başlık rengi kırmızıya dönüyor. */
.timeline li.km-back::before { background: var(--danger-bg); border-color: var(--danger); }
.timeline li.km-back .timeline-title { color: var(--danger); }

/* === NOT ALANI ================================================================= */
.note-textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: 10px 14px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-input);
  font-family: var(--font-body); font-size: 0.85rem;
}

/* === BADGE / STATUS PILL ====================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; background: var(--neutral-bg); color: var(--text-body);
}
.status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.status-pill svg { width: 12px; height: 12px; }

/* Funnel — huni ilerledikçe altının yoğunluğu artar */
.status-landing        { background: var(--neutral-bg); color: var(--text-body); }
.status-whatsapp       { background: var(--gold-pale-10); color: var(--gold-accent-hover); }
.status-zoom           { background: var(--gold-pale-20); color: var(--gold-accent-hover); }
.status-karar_merkezi  { background: var(--gold-pale-35); color: var(--text-heading); }
/* EKLENTİ: Kayıt Sayfası — Karar Merkezi'nden bir ton daha koyu altın,
   Başlangıç Merkezi'nin yeşiline geçmeden önceki son adım. */
.status-registration   { background: var(--gold-accent); color: #fff; }

/* Takip Durumu */
.status-kayit_bekliyor  { background: var(--warning-bg); color: var(--warning); }
.status-mesaj_atildi    { background: var(--gold-pale-20); color: var(--gold-accent-hover); }
.status-tekrar_aranacak { background: var(--info-bg); color: var(--info); }
.status-arandi          { background: var(--gold-pale-35); color: var(--text-heading); }
.status-kayit_oldu      { background: var(--success-bg); color: var(--success); }
.status-urun_satildi    { background: var(--success-bg); color: var(--success); }
.status-iptal_edildi    { background: var(--danger-bg); color: var(--danger); }
.status-pasif           { background: var(--neutral-bg); color: var(--text-muted); }

/* Karar Merkezi — Son Karar (.status-pill ile aynı yapı, yeni renk seti) */
.decision-urun    { background: var(--info-bg); color: var(--info); }
.decision-ekgelir { background: var(--warning-bg); color: var(--warning); }
.decision-ikisi   { background: var(--gold-pale-35); color: var(--text-heading); }
.decision-hizli   { background: var(--neutral-bg); color: var(--text-muted); }

/* Karar Merkezi — Kararlılık (back_count'tan türetilir, DB'de tutulmaz) */
.stability-high { background: var(--success-bg); color: var(--success); }
.stability-mid  { background: var(--warning-bg); color: var(--warning); }
.stability-low  { background: var(--danger-bg); color: var(--danger); }

/* === TOAST ==================================================================== */
.toast-stack { position: fixed; top: var(--space-5); right: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); z-index: 300; }
@media (max-width: 720px) { .toast-stack { top: var(--space-4); left: var(--space-4); right: var(--space-4); } }
.toast {
  background: var(--card-bg); color: var(--text-heading); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
  padding: 13px 14px; min-width: 260px; max-width: 360px; display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border-soft); border-left: 3px solid var(--gold-accent);
  transform: translateX(8px) scale(0.98); opacity: 0;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.toast.show { transform: translateX(0) scale(1); opacity: 1; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--gold-accent-hover); }
.toast.success { border-left-color: var(--success); }
.toast.success svg { color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.error svg { color: var(--danger); }
.toast-msg { font-size: 0.85rem; font-weight: 500; flex: 1; padding-top: 1px; }
.toast-close { background: none; border: none; color: var(--text-muted); flex-shrink: 0; }
.toast-close:hover { color: var(--text-heading); }

/* === EMPTY / LOADING / SKELETON =============================================== */
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-muted); }
.empty-state svg { width: 42px; height: 42px; color: var(--border-soft); margin-bottom: var(--space-3); stroke: var(--text-muted); }
.empty-state-title { font-weight: 600; color: var(--text-heading); margin-bottom: var(--space-2); }
.empty-state-desc { font-size: 0.85rem; margin-bottom: var(--space-4); }
.skeleton { background: linear-gradient(90deg, #eef1f5 25%, #f6f7f9 37%, #eef1f5 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-input); }
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton-row { height: 44px; margin-bottom: 8px; }
.skeleton-card { height: 90px; }
.spinner { border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; width: 16px; height: 16px; animation: spin 0.7s linear infinite; }
.spinner-dark { border-color: rgba(15,23,42,0.15); border-top-color: var(--navy); }
@keyframes spin { to { transform: rotate(360deg); } }

/* EKLENTİ: Yenile butonu — mevcut "spin" animasyonu yeniden kullanılıyor. */
.icon-btn.is-refreshing svg { animation: spin 0.6s linear infinite; }

/* === PAGINATION ================================================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); }
.pagination button { background: none; border: none; color: var(--text-muted); width: 30px; height: 30px; border-radius: var(--radius-input); font-size: 0.85rem; font-weight: 600; }
.pagination button:hover:not(:disabled) { background: var(--canvas-bg); }
.pagination button.active { color: var(--text-heading); border-bottom: 2px solid var(--gold-accent); }
.pagination button:disabled { opacity: 0.35; cursor: default; }

/* === DROPDOWN / USER MENU ======================================================= */
.dropdown { position: relative; display: inline-block; }
.dropdown-panel {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--card-bg); border-radius: var(--radius-card);
  box-shadow: var(--shadow-md); min-width: 200px; padding: var(--space-2); opacity: 0; transform: translateY(-6px);
  pointer-events: none; transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 100;
}
.dropdown-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-input); font-size: 0.85rem; color: var(--text-body); }
.dropdown-item:hover { background: var(--canvas-bg); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-muted); }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: var(--space-2) 4px; }
.avatar-sm { width: 28px; height: 28px; font-size: 0.68rem; flex-shrink: 0; }

/* === CHIPS (FILTER) ============================================================= */
.chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 500;
  background: var(--card-bg); border: 1px solid var(--border-soft); color: var(--text-body);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip:hover:not(.active) { border-color: var(--gold-accent); }

/* === UTILITY ==================================================================== */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-4 { margin-bottom: var(--space-4); }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.8rem; }
.hidden { display: none !important; }
.rotate-180 { transform: rotate(180deg); }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(22,163,74,0.5); animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}