/* ═══════════════════════════════════════════════════════════════════
   LoveDoc Design System v1
   Tüm panellerde import edilir → tek dilde konuşma
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Marka renkleri */
  --ld-pink: #d63384;
  --ld-pink-soft: #fce7f3;
  --ld-pink-deep: #b02a72;
  --ld-purple: #6f42c1;
  --ld-purple-soft: #ede4f8;
  --ld-rose: #fdf6f9;

  /* Nötrler */
  --ld-ink: #1f1f2e;
  --ld-ink-2: #4a4a5e;
  --ld-mute: #6b7280;
  --ld-muted-2: #9ca3af;
  --ld-line: #e9e7ee;
  --ld-bg: #fbfafc;
  --ld-card: #ffffff;

  /* Durumlar */
  --ld-ok: #198754;
  --ld-ok-soft: #d1f4dd;
  --ld-warn: #fd7e14;
  --ld-warn-soft: #fff3cd;
  --ld-bad: #dc3545;
  --ld-bad-soft: #f8d7da;
  --ld-info: #0dcaf0;
  --ld-info-soft: #cff4fc;

  /* Aşk Doktoru özel */
  --ld-doctor: linear-gradient(135deg, #d63384, #6f42c1);
  --ld-doctor-soft: linear-gradient(135deg, #fce7f3, #ede4f8);
  --ld-warmth: linear-gradient(135deg, #fdf6f9, #fef9f3);

  /* Tipografi */
  --ld-font: -apple-system, "Nunito", "Segoe UI", system-ui, sans-serif;
  --ld-font-mono: "SF Mono", "JetBrains Mono", Monaco, monospace;

  /* Boşluk */
  --ld-gap-xs: 6px;
  --ld-gap-sm: 10px;
  --ld-gap: 16px;
  --ld-gap-lg: 24px;
  --ld-gap-xl: 36px;

  /* Köşe */
  --ld-r-sm: 8px;
  --ld-r: 12px;
  --ld-r-lg: 18px;
  --ld-r-xl: 24px;

  /* Gölge */
  --ld-shadow-1: 0 1px 3px rgba(31, 31, 46, 0.06);
  --ld-shadow-2: 0 4px 14px rgba(31, 31, 46, 0.08);
  --ld-shadow-3: 0 12px 36px rgba(31, 31, 46, 0.12);
  --ld-shadow-doctor: 0 8px 32px rgba(214, 51, 132, 0.2);

  /* Animasyon */
  --ld-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ld-norm: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --ld-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Reset + base ──────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--ld-font);
  background: var(--ld-bg);
  color: var(--ld-ink);
  line-height: 1.55;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ld-pink); text-decoration: none; }
a:hover { text-decoration: underline; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(214, 51, 132, 0.18); border-radius: 9px; }
::-webkit-scrollbar-thumb:hover { background: rgba(214, 51, 132, 0.32); }

/* ─── Layout ────────────────────────────────────────────────────── */
.ld-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--ld-gap-lg);
}

.ld-app--narrow { max-width: 880px; }

.ld-header {
  background: var(--ld-doctor);
  color: #fff;
  padding: 22px 26px;
  border-radius: var(--ld-r-lg);
  margin-bottom: var(--ld-gap-lg);
  box-shadow: var(--ld-shadow-doctor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ld-gap);
}

.ld-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ld-header .ld-sub {
  font-size: 13px;
  opacity: 0.92;
  margin-top: 4px;
  font-weight: 400;
}

.ld-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ld-header__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  backdrop-filter: blur(6px);
}

.ld-header__stats {
  font-size: 13px;
  opacity: 0.9;
  text-align: right;
}

/* ─── Section / Card ────────────────────────────────────────────── */
.ld-section,
.ld-card {
  background: var(--ld-card);
  border-radius: var(--ld-r-lg);
  padding: 22px 24px;
  box-shadow: var(--ld-shadow-1);
  margin-bottom: var(--ld-gap);
  border: 1px solid var(--ld-line);
}

.ld-section h2,
.ld-card h2 {
  margin: 0 0 var(--ld-gap);
  font-size: 17px;
  color: var(--ld-pink-deep);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ld-card h3 {
  margin: 0 0 8px;
  font-size: 11px;
  color: var(--ld-mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.ld-card--accent {
  background: var(--ld-warmth);
  border-color: var(--ld-pink-soft);
}

.ld-card--alert {
  background: var(--ld-warn-soft);
  border-color: #ffe2a8;
  color: #7c4a00;
}

.ld-card--good {
  background: var(--ld-ok-soft);
  border-color: #a6e9be;
}

/* ─── KPI ─────────────────────────────────────────────────────── */
.ld-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ld-gap);
  margin-bottom: var(--ld-gap-lg);
}

.ld-kpi {
  background: var(--ld-card);
  border-radius: var(--ld-r);
  padding: 14px 18px;
  box-shadow: var(--ld-shadow-1);
  border: 1px solid var(--ld-line);
}

.ld-kpi__label {
  font-size: 11px;
  color: var(--ld-mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
}

.ld-kpi__value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: -0.02em;
  background: var(--ld-doctor);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ld-kpi__value.ok { background: linear-gradient(135deg, #198754, #20c997); -webkit-background-clip: text; background-clip: text; }
.ld-kpi__value.warn { background: linear-gradient(135deg, #fd7e14, #ffc107); -webkit-background-clip: text; background-clip: text; }
.ld-kpi__value.bad { background: linear-gradient(135deg, #dc3545, #c2185b); -webkit-background-clip: text; background-clip: text; }

.ld-kpi__delta {
  font-size: 12px;
  color: var(--ld-mute);
  margin-top: 4px;
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.ld-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--ld-r-sm);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: all var(--ld-fast);
  background: var(--ld-doctor);
  color: #fff;
  box-shadow: var(--ld-shadow-1);
}
.ld-btn:hover { transform: translateY(-1px); box-shadow: var(--ld-shadow-2); filter: brightness(1.04); }
.ld-btn:active { transform: translateY(0); }

.ld-btn--ghost { background: transparent; color: var(--ld-pink); border: 1.5px solid var(--ld-pink); box-shadow: none; }
.ld-btn--ghost:hover { background: var(--ld-pink-soft); }

.ld-btn--soft { background: var(--ld-pink-soft); color: var(--ld-pink-deep); box-shadow: none; }
.ld-btn--ok { background: linear-gradient(135deg, #198754, #20c997); }
.ld-btn--warn { background: linear-gradient(135deg, #fd7e14, #ffc107); color: #5a3700; }
.ld-btn--bad { background: linear-gradient(135deg, #dc3545, #c2185b); }
.ld-btn--gold { background: linear-gradient(135deg, #ffc107, #ff9800); color: #4a2c00; }
.ld-btn--mute { background: #adb5bd; color: #fff; }

.ld-btn--lg { padding: 14px 26px; font-size: 15px; }
.ld-btn--sm { padding: 6px 12px; font-size: 12.5px; }

/* ─── Tags ──────────────────────────────────────────────────── */
.ld-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ld-tag--ok { background: var(--ld-ok-soft); color: var(--ld-ok); }
.ld-tag--warn { background: var(--ld-warn-soft); color: #7c4a00; }
.ld-tag--bad { background: var(--ld-bad-soft); color: var(--ld-bad); }
.ld-tag--info { background: var(--ld-info-soft); color: #055160; }
.ld-tag--purple { background: var(--ld-purple-soft); color: var(--ld-purple); }

/* ─── Tables ──────────────────────────────────────────────────── */
.ld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ld-table th, .ld-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--ld-line);
}
.ld-table th {
  background: var(--ld-bg);
  color: var(--ld-mute);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ld-table tr:hover td { background: var(--ld-pink-soft); }

/* ─── Form ──────────────────────────────────────────────────── */
.ld-textarea, .ld-input {
  width: 100%;
  border: 1.5px solid var(--ld-line);
  border-radius: var(--ld-r-sm);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  background: var(--ld-card);
  color: var(--ld-ink);
  transition: border var(--ld-fast);
}
.ld-textarea:focus, .ld-input:focus {
  outline: none;
  border-color: var(--ld-pink);
  box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.12);
}
.ld-textarea { min-height: 70px; resize: vertical; }

/* ─── Toggle (switch) ──────────────────────────────────────────── */
.ld-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}
.ld-toggle input {
  opacity: 0; width: 0; height: 0;
}
.ld-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #d1d5db;
  border-radius: 28px;
  transition: var(--ld-fast);
}
.ld-toggle__slider::before {
  position: absolute;
  content: "";
  height: 22px; width: 22px;
  left: 3px; bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: var(--ld-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ld-toggle input:checked + .ld-toggle__slider { background: var(--ld-pink); }
.ld-toggle input:checked + .ld-toggle__slider::before { transform: translateX(22px); }

/* ─── Toast (bildirim) ──────────────────────────────────────────── */
.ld-toast-stack {
  position: fixed;
  bottom: 22px; right: 22px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}
.ld-toast {
  background: var(--ld-card);
  color: var(--ld-ink);
  padding: 12px 18px 12px 14px;
  border-radius: var(--ld-r);
  box-shadow: var(--ld-shadow-3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  pointer-events: auto;
  border-left: 4px solid var(--ld-pink);
  animation: ld-slide-in var(--ld-norm);
  max-width: 360px;
}
.ld-toast--ok { border-color: var(--ld-ok); }
.ld-toast--warn { border-color: var(--ld-warn); }
.ld-toast--bad { border-color: var(--ld-bad); }
.ld-toast__icon { font-size: 18px; }
@keyframes ld-slide-in {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── Empty state ───────────────────────────────────────────────── */
.ld-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ld-mute);
  font-style: italic;
  background: var(--ld-card);
  border-radius: var(--ld-r-lg);
  border: 2px dashed var(--ld-line);
}
.ld-empty__icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ─── Aşk Doktoru — özel ───────────────────────────────────────── */
.ld-doctor-card {
  background: var(--ld-warmth);
  border-radius: var(--ld-r-xl);
  padding: 28px;
  box-shadow: var(--ld-shadow-2);
  border: 1px solid var(--ld-pink-soft);
  position: relative;
  overflow: hidden;
}
.ld-doctor-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: var(--ld-doctor-soft);
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
}
.ld-doctor-card > * { position: relative; z-index: 1; }

.ld-axis-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
}
.ld-axis-row__name {
  flex: 0 0 200px;
  font-size: 13px;
  color: var(--ld-ink);
  font-weight: 500;
}
.ld-axis-row__bar {
  flex: 1;
  height: 12px;
  background: var(--ld-line);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.ld-axis-row__bar > div {
  height: 100%;
  background: var(--ld-doctor);
  border-radius: 6px;
  transition: width var(--ld-slow);
}
.ld-axis-row__bar--ok > div { background: linear-gradient(135deg, #198754, #20c997); }
.ld-axis-row__bar--warn > div { background: linear-gradient(135deg, #fd7e14, #ffc107); }
.ld-axis-row__bar--bad > div { background: linear-gradient(135deg, #dc3545, #c2185b); }
.ld-axis-row__score {
  flex: 0 0 50px;
  text-align: right;
  font-weight: 700;
  font-size: 14px;
}

/* ─── Pulse / Loading ─────────────────────────────────────────── */
@keyframes ld-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 1; }
}
.ld-pulse { animation: ld-pulse 1.6s ease-in-out infinite; }

@keyframes ld-thinking {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.ld-thinking-dots { display: inline-flex; gap: 4px; }
.ld-thinking-dots span {
  width: 8px; height: 8px;
  background: var(--ld-pink);
  border-radius: 50%;
  animation: ld-thinking 1s ease-in-out infinite;
}
.ld-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.ld-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ─── Couple Session — özel sıra göstergesi ───────────────────── */
.ld-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 18px;
  background: var(--ld-warmth);
  border-radius: var(--ld-r-lg);
  margin-bottom: var(--ld-gap);
}
.ld-turn__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--ld-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  transition: all var(--ld-norm);
  opacity: 0.4;
}
.ld-turn__avatar.active {
  background: var(--ld-doctor);
  color: #fff;
  opacity: 1;
  box-shadow: var(--ld-shadow-doctor);
  animation: ld-pulse 1.4s ease-in-out infinite;
}
.ld-turn__arrow { font-size: 22px; color: var(--ld-mute); }

/* ─── Mobile responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .ld-app { padding: var(--ld-gap); }
  .ld-header { flex-direction: column; align-items: flex-start; }
  .ld-header h1 { font-size: 19px; }
  .ld-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ld-kpi__value { font-size: 22px; }
  .ld-section, .ld-card { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   v2 — Eril/Dişil renk sistemi + Buton 2.0 + Mikro animasyonlar
   (P1+P2+P3, mevcut v1'i bozmadan eklendi)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Dişil (Taraf A) palet */
  --ld-fem-50:  #fff0f7;
  --ld-fem-100: #fce7f3;
  --ld-fem-200: #fbcfe8;
  --ld-fem-300: #f9a8d4;
  --ld-fem-400: #f472b6;
  --ld-fem-500: #d63384;
  --ld-fem-600: #b02a72;
  --ld-fem-700: #831843;
  --ld-fem-grad:    linear-gradient(135deg, #f472b6, #d63384);
  --ld-fem-grad-soft: linear-gradient(135deg, #fce7f3, #fbcfe8);
  --ld-fem-glow:    0 0 24px rgba(214, 51, 132, .35);
  --ld-fem-shadow:  0 8px 24px rgba(214, 51, 132, .22);

  /* Eril (Taraf B) palet */
  --ld-mas-50:  #f5f0fc;
  --ld-mas-100: #ede4f8;
  --ld-mas-200: #d8b4fe;
  --ld-mas-300: #c4a3f0;
  --ld-mas-400: #a78bfa;
  --ld-mas-500: #6f42c1;
  --ld-mas-600: #5b2fa6;
  --ld-mas-700: #4c1d95;
  --ld-mas-grad:     linear-gradient(135deg, #a78bfa, #6f42c1);
  --ld-mas-grad-soft: linear-gradient(135deg, #ede4f8, #d8b4fe);
  --ld-mas-glow:     0 0 24px rgba(111, 66, 193, .35);
  --ld-mas-shadow:   0 8px 24px rgba(111, 66, 193, .22);

  /* Birleşik (LoveDoc nötr) */
  --ld-uni-grad:      linear-gradient(135deg, #d63384, #6f42c1);
  --ld-uni-grad-soft: linear-gradient(135deg, #fce7f3, #ede4f8);
  --ld-uni-glow:      0 0 28px rgba(168, 85, 247, .3);

  /* Cam efekti (glassmorphism) */
  --ld-glass-bg:     rgba(255, 255, 255, .72);
  --ld-glass-border: 1px solid rgba(255, 255, 255, .5);
  --ld-glass-blur:   blur(14px) saturate(140%);
}

/* ─── Buton 2.0 ─────────────────────────────────────────────────── */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: none;
  border-radius: 12px;
  font-family: var(--ld-font);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--ld-fast),
              box-shadow var(--ld-norm),
              opacity var(--ld-fast),
              filter var(--ld-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.ld-btn:focus-visible {
  outline: 2px solid var(--ld-pink);
  outline-offset: 2px;
}
.ld-btn:disabled,
.ld-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.3);
}
.ld-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%),
              rgba(255, 255, 255, .55) 0%,
              transparent 60%);
  opacity: 0;
  transition: opacity var(--ld-fast);
  pointer-events: none;
}
.ld-btn:hover:not(:disabled)::after { opacity: .35; }
.ld-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ld-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

/* Boyutlar */
.ld-btn--xs { padding: 6px 12px;  font-size: 11.5px; border-radius: 8px;  gap: 5px; }
.ld-btn--sm { padding: 8px 16px;  font-size: 12.5px; border-radius: 10px; gap: 6px; }
.ld-btn--md { padding: 11px 22px; font-size: 14px;   border-radius: 12px; gap: 8px; }
.ld-btn--lg { padding: 14px 28px; font-size: 15.5px; border-radius: 14px; gap: 10px; }
.ld-btn--block { width: 100%; }

/* Çeşit: Dişil (Taraf A) */
.ld-btn--fem {
  background: var(--ld-fem-grad);
  color: #fff;
  box-shadow: var(--ld-fem-shadow);
}
.ld-btn--fem:hover:not(:disabled) {
  box-shadow: var(--ld-fem-shadow), var(--ld-fem-glow);
}

/* Çeşit: Eril (Taraf B) */
.ld-btn--mas {
  background: var(--ld-mas-grad);
  color: #fff;
  box-shadow: var(--ld-mas-shadow);
}
.ld-btn--mas:hover:not(:disabled) {
  box-shadow: var(--ld-mas-shadow), var(--ld-mas-glow);
}

/* Çeşit: Birleşik (LoveDoc nötr) — birincil aksiyon */
.ld-btn--uni,
.ld-btn--primary {
  background: var(--ld-uni-grad);
  color: #fff;
  box-shadow: var(--ld-shadow-doctor);
}
.ld-btn--uni:hover:not(:disabled),
.ld-btn--primary:hover:not(:disabled) {
  box-shadow: var(--ld-shadow-doctor), var(--ld-uni-glow);
}

/* Çeşit: Yumuşak (soft, ikinci derece) */
.ld-btn--soft-fem { background: var(--ld-fem-100); color: var(--ld-fem-700); }
.ld-btn--soft-fem:hover:not(:disabled) { background: var(--ld-fem-200); }
.ld-btn--soft-mas { background: var(--ld-mas-100); color: var(--ld-mas-700); }
.ld-btn--soft-mas:hover:not(:disabled) { background: var(--ld-mas-200); }
.ld-btn--soft {
  background: var(--ld-pink-soft);
  color: var(--ld-pink-deep);
}
.ld-btn--soft:hover:not(:disabled) { background: var(--ld-fem-200); }

/* Çeşit: Hayalet (sadece çerçeve) */
.ld-btn--ghost {
  background: transparent;
  color: var(--ld-ink-2);
  box-shadow: inset 0 0 0 1.5px var(--ld-line);
}
.ld-btn--ghost:hover:not(:disabled) {
  background: var(--ld-glass-bg);
  color: var(--ld-pink-deep);
  box-shadow: inset 0 0 0 1.5px var(--ld-pink);
}

/* Çeşit: Düz / link benzeri */
.ld-btn--flat {
  background: transparent;
  color: var(--ld-ink-2);
  font-weight: 600;
}
.ld-btn--flat:hover:not(:disabled) {
  background: rgba(31, 31, 46, .04);
  color: var(--ld-pink);
}

/* Çeşit: Tehlike (kriz/iptal) */
.ld-btn--danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 8px 24px rgba(220, 38, 38, .28);
}
.ld-btn--danger:hover:not(:disabled) {
  box-shadow: 0 8px 24px rgba(220, 38, 38, .28), 0 0 24px rgba(239, 68, 68, .35);
}

/* Loading state — spinner */
.ld-btn--loading { color: transparent !important; pointer-events: none; }
.ld-btn--loading::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ld-spin .65s linear infinite;
}
.ld-btn--loading.ld-btn--ghost::before,
.ld-btn--loading.ld-btn--soft::before,
.ld-btn--loading.ld-btn--soft-fem::before,
.ld-btn--loading.ld-btn--soft-mas::before,
.ld-btn--loading.ld-btn--flat::before {
  border-color: rgba(31, 31, 46, .15);
  border-top-color: var(--ld-pink);
}

/* İkon-only buton */
.ld-btn--icon {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
}
.ld-btn--icon.ld-btn--xs { width: 28px; height: 28px; }
.ld-btn--icon.ld-btn--lg { width: 48px; height: 48px; }

/* ─── Buton grubu ───────────────────────────────────────────────── */
.ld-btn-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ld-btn-group--connected .ld-btn {
  border-radius: 0;
}
.ld-btn-group--connected .ld-btn:first-child { border-radius: 12px 0 0 12px; }
.ld-btn-group--connected .ld-btn:last-child  { border-radius: 0 12px 12px 0; }

/* ─── Eril/Dişil tema kapsayıcılar ──────────────────────────────── */
.ld-side-fem {
  --ld-side-color: var(--ld-fem-500);
  --ld-side-soft:  var(--ld-fem-100);
  --ld-side-grad:  var(--ld-fem-grad);
  --ld-side-glow:  var(--ld-fem-glow);
}
.ld-side-mas {
  --ld-side-color: var(--ld-mas-500);
  --ld-side-soft:  var(--ld-mas-100);
  --ld-side-grad:  var(--ld-mas-grad);
  --ld-side-glow:  var(--ld-mas-glow);
}

.ld-bubble-fem {
  background: var(--ld-fem-grad);
  color: #fff;
  border-radius: 18px 18px 6px 18px;
  padding: 11px 16px;
  box-shadow: var(--ld-fem-shadow);
}
.ld-bubble-mas {
  background: var(--ld-mas-grad);
  color: #fff;
  border-radius: 18px 18px 18px 6px;
  padding: 11px 16px;
  box-shadow: var(--ld-mas-shadow);
}

.ld-avatar-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 3px;
  background: var(--ld-side-grad, var(--ld-uni-grad));
  box-shadow: var(--ld-side-glow, var(--ld-uni-glow));
}
.ld-avatar-ring > * {
  border-radius: 50%;
  background: var(--ld-card);
}

/* ─── Cam panel (glassmorphism) ─────────────────────────────────── */
.ld-glass {
  background: var(--ld-glass-bg);
  backdrop-filter: var(--ld-glass-blur);
  -webkit-backdrop-filter: var(--ld-glass-blur);
  border: var(--ld-glass-border);
  border-radius: var(--ld-r-lg);
  box-shadow: var(--ld-shadow-2);
}

/* ─── Mikro animasyonlar (P3) ───────────────────────────────────── */
@keyframes ld-spin    { to { transform: rotate(360deg); } }
@keyframes ld-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ld-pop-in  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes ld-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes ld-bounce  {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes ld-pulse-fem {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 51, 132, .45); }
  60%      { box-shadow: 0 0 0 14px rgba(214, 51, 132, 0); }
}
@keyframes ld-pulse-mas {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, .45); }
  60%      { box-shadow: 0 0 0 14px rgba(111, 66, 193, 0); }
}

.ld-fade-in   { animation: ld-fade-in var(--ld-norm) both; }
.ld-pop-in    { animation: ld-pop-in var(--ld-norm) both; }
.ld-bounce    { animation: ld-bounce 1.6s ease infinite; }
.ld-pulse-fem { animation: ld-pulse-fem 1.6s ease-in-out infinite; }
.ld-pulse-mas { animation: ld-pulse-mas 1.6s ease-in-out infinite; }

/* Stagger için — children sırayla fade-in */
.ld-stagger > * { animation: ld-fade-in var(--ld-norm) both; }
.ld-stagger > *:nth-child(1) { animation-delay: .04s; }
.ld-stagger > *:nth-child(2) { animation-delay: .10s; }
.ld-stagger > *:nth-child(3) { animation-delay: .16s; }
.ld-stagger > *:nth-child(4) { animation-delay: .22s; }
.ld-stagger > *:nth-child(5) { animation-delay: .28s; }
.ld-stagger > *:nth-child(6) { animation-delay: .34s; }
.ld-stagger > *:nth-child(7) { animation-delay: .40s; }
.ld-stagger > *:nth-child(8) { animation-delay: .46s; }

/* Skeleton (loading placeholder) */
.ld-skeleton {
  background: linear-gradient(90deg,
              rgba(214, 51, 132, .06) 0%,
              rgba(214, 51, 132, .14) 50%,
              rgba(214, 51, 132, .06) 100%);
  background-size: 800px 100%;
  animation: ld-shimmer 1.4s linear infinite;
  border-radius: 8px;
  height: 14px;
}
.ld-skeleton--lg { height: 24px; }
.ld-skeleton--xl { height: 56px; border-radius: 12px; }

/* Card hover lift */
.ld-card-hover {
  transition: transform var(--ld-norm), box-shadow var(--ld-norm);
  cursor: pointer;
}
.ld-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--ld-shadow-3);
}

/* Toast (slide-in sağ alt) */
@keyframes ld-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}
.ld-toast-v2 {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--ld-glass-bg);
  backdrop-filter: var(--ld-glass-blur);
  -webkit-backdrop-filter: var(--ld-glass-blur);
  border: var(--ld-glass-border);
  box-shadow: var(--ld-shadow-3);
  animation: ld-toast-in var(--ld-norm) both;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ld-ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ld-toast-v2--ok  { border-left: 4px solid var(--ld-ok); }
.ld-toast-v2--warn { border-left: 4px solid var(--ld-warn); }
.ld-toast-v2--bad { border-left: 4px solid var(--ld-bad); }

/* Erişilebilirlik — animasyonu azalt */
@media (prefers-reduced-motion: reduce) {
  .ld-fade-in,
  .ld-pop-in,
  .ld-bounce,
  .ld-pulse-fem,
  .ld-pulse-mas,
  .ld-stagger > *,
  .ld-skeleton {
    animation: none !important;
  }
  .ld-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v3 — Modern motion patterns (spring, focus glow, scale-in, heart,
        smart scroll, lazy image, press-state, view transitions)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Spring easing — yumuşak, hafif overshoot, bouncy değil */
  --ld-spring:        cubic-bezier(.34, 1.30, .64, 1);
  --ld-spring-strong: cubic-bezier(.20, 1.55, .50, 1);
  --ld-ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ld-ease-in-out:   cubic-bezier(.65, 0, .35, 1);

  /* Animasyon süreleri (60-400ms, sıkmayan) */
  --ld-t-instant: 80ms;
  --ld-t-quick:   140ms;
  --ld-t-base:    240ms;
  --ld-t-slow:    400ms;
  --ld-t-page:    520ms;
}

/* ─── Spring buton (Buton 2.0'ı geliştirir) ─────────────────────── */
.ld-btn {
  transition:
    transform var(--ld-t-quick) var(--ld-spring),
    box-shadow var(--ld-t-base) var(--ld-ease-out),
    opacity var(--ld-t-quick) var(--ld-ease-out),
    filter var(--ld-t-quick) var(--ld-ease-out);
}
.ld-btn:active:not(:disabled) {
  transform: translateY(0) scale(.96) !important;
  transition-duration: var(--ld-t-instant);
}

/* ─── Press state — her tıklanabilir öğeye uygulanabilir ────────── */
.ld-pressable {
  transition: transform var(--ld-t-quick) var(--ld-spring);
  cursor: pointer;
}
.ld-pressable:active { transform: scale(.97); transition-duration: var(--ld-t-instant); }

/* ─── Focus glow — modern Tailwind v3 stili ─────────────────────── */
.ld-input,
.ld-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--ld-line);
  border-radius: var(--ld-r);
  font-family: var(--ld-font);
  font-size: 14px;
  color: var(--ld-ink);
  background: var(--ld-card);
  transition:
    border-color var(--ld-t-quick) var(--ld-ease-out),
    box-shadow var(--ld-t-quick) var(--ld-ease-out),
    background var(--ld-t-quick) var(--ld-ease-out);
  outline: none;
}
.ld-textarea {
  min-height: 60px;
  resize: none;
  line-height: 1.55;
}
.ld-input:hover,
.ld-textarea:hover {
  border-color: var(--ld-fem-200);
}
.ld-input:focus,
.ld-textarea:focus {
  border-color: var(--ld-fem-400);
  box-shadow: 0 0 0 4px rgba(214, 51, 132, .12);
  background: #fff;
}
.ld-input--mas:focus,
.ld-textarea--mas:focus {
  border-color: var(--ld-mas-400);
  box-shadow: 0 0 0 4px rgba(111, 66, 193, .12);
}

/* ─── Auto-grow textarea (JS ile yükseklik ayarlanır) ───────────── */
.ld-textarea--grow {
  overflow: hidden;
}

/* ─── Modal scale-in (overshoot ile spring) ─────────────────────── */
@keyframes ld-modal-in {
  0%   { opacity: 0; transform: scale(.92) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ld-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 31, 46, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: ld-fade-in var(--ld-t-base) var(--ld-ease-out) both;
}
.ld-modal {
  background: var(--ld-card);
  border-radius: var(--ld-r-xl);
  padding: 28px;
  max-width: 440px;
  width: calc(100% - 32px);
  box-shadow: var(--ld-shadow-3);
  animation: ld-modal-in var(--ld-t-slow) var(--ld-spring-strong) both;
}

/* ─── Toast iyileştirme (spring out) ────────────────────────────── */
.ld-toast-v2 {
  animation: ld-toast-in var(--ld-t-base) var(--ld-spring) both;
}

/* ─── Heart bond progress (LoveDoc'a özel) ──────────────────────── */
.ld-heart-bond {
  position: relative;
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ld-heart-bond::before,
.ld-heart-bond::after {
  content: "♥";
  position: absolute;
  font-size: 56px;
  line-height: 1;
  display: block;
  transition: opacity var(--ld-t-slow) var(--ld-ease-out);
}
.ld-heart-bond::before {
  color: var(--ld-line);
}
.ld-heart-bond::after {
  color: transparent;
  background: var(--ld-uni-grad);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 4px 12px rgba(214, 51, 132, .35));
  clip-path: inset(calc(100% - var(--ld-bond, 0%)) 0 0 0);
  transition: clip-path var(--ld-t-page) var(--ld-spring);
}
.ld-heart-bond[data-bond="0"]   { --ld-bond: 0%; }
.ld-heart-bond[data-bond="25"]  { --ld-bond: 25%; }
.ld-heart-bond[data-bond="50"]  { --ld-bond: 50%; }
.ld-heart-bond[data-bond="75"]  { --ld-bond: 75%; }
.ld-heart-bond[data-bond="100"] { --ld-bond: 100%; }
.ld-heart-bond--beat::after {
  animation: ld-heart-beat 1.6s var(--ld-spring) infinite;
}
@keyframes ld-heart-beat {
  0%, 100% { transform: scale(1); }
  20%      { transform: scale(1.08); }
  40%      { transform: scale(1); }
  60%      { transform: scale(1.04); }
}

/* ─── Skeleton → İçerik crossfade ───────────────────────────────── */
.ld-loaded-fade {
  opacity: 0;
  animation: ld-fade-in var(--ld-t-slow) var(--ld-ease-out) both;
}

/* ─── Smart scroll — chat aşağıya yapışır ───────────────────────── */
.ld-smart-scroll {
  overflow-y: auto;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.ld-smart-scroll[data-pinned="true"]::-webkit-scrollbar-thumb {
  background: var(--ld-pink);
}

/* ─── Lazy image — yüklenince fade-in ───────────────────────────── */
.ld-img {
  opacity: 0;
  transition: opacity var(--ld-t-base) var(--ld-ease-out);
}
.ld-img.is-loaded { opacity: 1; }

/* ─── Number counter — sadece görsel sınıf, sayı JS'te artar ────── */
.ld-counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

/* ─── Switch (optimistic toggle) ────────────────────────────────── */
.ld-switch {
  position: relative;
  width: 44px;
  height: 26px;
  background: var(--ld-line);
  border-radius: 13px;
  cursor: pointer;
  transition: background var(--ld-t-quick) var(--ld-ease-out);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.ld-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  transition: transform var(--ld-t-base) var(--ld-spring);
}
.ld-switch[aria-checked="true"] {
  background: var(--ld-uni-grad);
}
.ld-switch[aria-checked="true"]::after {
  transform: translateX(18px);
}
.ld-switch:active::after {
  width: 24px;
  transition-duration: var(--ld-t-instant);
}

/* ─── Page progress bar ─────────────────────────────────────────── */
.ld-progress-top {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--ld-uni-grad);
  z-index: 9998;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--ld-t-page) var(--ld-ease-out);
  border-radius: 0 3px 3px 0;
}
.ld-progress-top.is-active { transform: scaleX(0.7); }
.ld-progress-top.is-done   { transform: scaleX(1); opacity: 0; transition: opacity var(--ld-t-base) ease; }

/* ─── View Transitions (Chrome 111+) — sayfa crossfade ──────────── */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--ld-t-page);
    animation-timing-function: var(--ld-ease-out);
  }
}

/* ─── Confetti (mini partikül burst, milestone'lar için) ────────── */
.ld-confetti-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  overflow: hidden;
}
.ld-confetti-piece {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: ld-confetti-fall 1100ms var(--ld-ease-out) forwards;
}
@keyframes ld-confetti-fall {
  0%   { transform: translateY(-20vh) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ─── Tooltip (hover'da küçük balon) ────────────────────────────── */
.ld-tooltip {
  position: relative;
}
.ld-tooltip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--ld-ink);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ld-t-quick) var(--ld-ease-out),
              transform var(--ld-t-quick) var(--ld-spring);
}
.ld-tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ─── Reduced motion için v3 ek ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ld-modal,
  .ld-toast-v2,
  .ld-heart-bond--beat::after,
  .ld-confetti-piece,
  .ld-loaded-fade {
    animation: none !important;
  }
  .ld-pressable:active,
  .ld-btn:active:not(:disabled) {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v4 — Mobile responsive + PWA katmanı (2026-05-15)
   iPhone/Android telefonda kullanılabilir hale getirme.
   Mevcut stilleri ezmez, sadece dar ekranlarda davranış ekler.
   ═══════════════════════════════════════════════════════════════════ */

/* iOS safe area (notch + home indicator için) */
:root {
  --ld-safe-top: env(safe-area-inset-top, 0px);
  --ld-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ld-safe-left: env(safe-area-inset-left, 0px);
  --ld-safe-right: env(safe-area-inset-right, 0px);
}

html, body {
  /* iOS Safari bounce'u app içinde devre dışı */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: rgba(214, 51, 132, 0.15);
  -webkit-touch-callout: none;
}

body {
  /* Notch için üst boşluk; alt safe area ana container'da uygulanacak */
  padding-top: var(--ld-safe-top);
}

/* iOS Safari: input'a focus olunca otomatik zoom yapmaması için font ≥16px */
input, textarea, select {
  font-size: 16px;
}

/* Yatay scroll engelle (mobile'da yan kaçma sorununu önler) */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Telefon (≤480px) — gerçek mobile breakpoint */
@media (max-width: 480px) {
  /* Genel padding sıkılaştır */
  .ld-app {
    padding: 12px;
    padding-left: max(12px, var(--ld-safe-left));
    padding-right: max(12px, var(--ld-safe-right));
    padding-bottom: max(12px, var(--ld-safe-bottom));
  }

  /* Header dikey */
  .ld-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ld-header h1 { font-size: 18px; line-height: 1.25; }

  /* KPI grid — telefon dar, tek sütun */
  .ld-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ld-kpi__value { font-size: 20px; }
  .ld-kpi { padding: 12px; }

  /* Section ve kart padding */
  .ld-section, .ld-card {
    padding: 14px;
    border-radius: 14px;
  }

  /* Modallar tam ekrana yakın */
  .ld-modal {
    width: calc(100vw - 24px);
    max-width: 100vw;
    max-height: calc(100vh - 24px);
    border-radius: 16px;
  }

  /* Button touch target — minimum 44×44px (Apple HIG) */
  .ld-btn, button, [role="button"] {
    min-height: 44px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Form input rahat boyut */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], textarea {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 12px;
    width: 100%;
  }

  /* Tablolar yatay scroll'a açık */
  table { display: block; overflow-x: auto; max-width: 100%; }

  /* Avatar widget mobile'da küçülsün */
  .ld-avatar-container, .lovedoc-avatar-widget {
    transform: scale(0.85);
    transform-origin: center top;
  }

  /* Çift sayfası grid → tek sütun */
  .ld-couple-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  /* Chat / mesajlaşma alanı — alt input fixed davranır */
  .ld-chat-input,
  .ld-message-input,
  .ld-couple-input {
    position: sticky;
    bottom: 0;
    padding-bottom: max(8px, var(--ld-safe-bottom));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
  }
}

/* Çok küçük ekranlar (≤360px) — eski iPhone SE vs. */
@media (max-width: 360px) {
  .ld-kpis { grid-template-columns: 1fr; }
  .ld-header h1 { font-size: 16px; }
  .ld-app { padding: 10px; }
}

/* PWA standalone modda (ana ekrandan açıldı) gizlenecek elementler */
@media (display-mode: standalone) {
  .ld-install-prompt,
  .ld-pwa-hint {
    display: none !important;
  }
}