/* Aşama 1: Tasarım sistemi token'ları + global stiller (CLAUDE.md Bölüm 3) */

:root {
  --bg: #FAF6EC;
  --surface: #FFFFFF;
  --surface-2: #F2EBD9;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;
  --border: #E5DDC8;
  --accent: #C9A961;
  --accent-dark: #A88A48;
  --success: #2E7D4F;
  --danger: #C1432F;
  --warning: #D88B2A;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: 16px; /* iOS Safari'de auto-zoom'u engellemek için ≥16px */
}

/* --- Aşama 1 Adım 12 polish ---
   Accessibility, mobile safe-area, reduced-motion. */

/* Keyboard focus — sadece klavye navigasyonunda outline göster.
   Tailwind focus:ring zaten var ama focus-visible olmayan farelilerde de etkin;
   bunu netleştirmek için outline-offset ile altın halka. */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Tap target ≥44px (Apple HIG / WCAG). Tailwind class-bağlı padding'lerimiz
   genelde uyumlu (py-2.5 ≈ 40, py-3 ≈ 48). Ufak iconlu buton ezdiyse fallback. */
button, [role="button"] {
  min-height: 36px; /* iconlu küçük butonlar (toggle/edit/sil) için, kart içindeki ergonomi */
}

/* iOS safe-area: notch + bottom indicator alanını koru. layout.js bottom nav
   zaten pb-[env(safe-area-inset-bottom)] yapıyor; bu css fallback. */
body {
  padding-top: env(safe-area-inset-top, 0);
}

/* Reduced motion: kullanıcı sistem ayarında "azalt" diyorsa transition'ları kapat. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Modal/drawer içi scrollbar — daha ince + tema rengi */
[data-body],
#bkm-drawer-root [data-panel] {
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
[data-body]::-webkit-scrollbar,
#bkm-drawer-root [data-panel]::-webkit-scrollbar {
  width: 6px;
}
[data-body]::-webkit-scrollbar-thumb,
#bkm-drawer-root [data-panel]::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 3px;
}

/* Randevu grid yatay scroll daha akıcı (mobile touch) */
#rd-grid-wrap {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}