:root {
  --page-bg-1: #fdf1e2;
  --page-bg-2: #eaf5ef;
  --page-bg-3: #eef2fb;
  --card-bg: #ffffff;
  --card-border: #f0e4d3;
  --pill-bg: #eaf5f1;
  --pill-hover: #d8ece4;
  --text-dark: #3d3227;
  --text-muted: #a08f77;

  --accent: #2fa88f;
  --accent-dark: #1f8570;
  --accent-light: #5fd6b8;
  --accent-soft: #e1f5ef;

  --gold: #f0a63f;
  --gold-dark: #d4881f;
  --gold-soft: #fdf0dc;

  --violet: #8b7cf0;
  --violet-soft: #efecfd;

  --danger: #e0654a;
  --danger-soft: #fbe9e4;

  --blue: #3b82d6;
  --blue-dark: #2563ab;
  --blue-light: #7db4ea;
  --blue-soft: #e4effb;

  --gray: #8b93a0;
  --gray-dark: #636b78;
  --gray-light: #b6bcc6;
  --gray-soft: #eef0f3;

  /* Aliases eski isimlerle uyumluluk icin */
  --cream-bg: var(--page-bg-1);
  --cream-card: var(--card-bg);
  --tan: var(--pill-bg);
  --tan-dark: var(--pill-hover);
}

body {
  background: linear-gradient(135deg, var(--page-bg-1) 0%, var(--page-bg-2) 55%, var(--page-bg-3) 100%);
  background-attachment: fixed;
  color: var(--text-dark);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(61, 50, 39, 0.08);
}

.pill {
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent-dark);
  font-weight: 600;
  transition: all 0.15s ease;
  border: 2px solid transparent;
}

.pill:hover:not(.pill-disabled) {
  background: var(--pill-hover);
  cursor: pointer;
}

.pill-selected {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(31, 133, 112, 0.3);
}

.pill-disabled {
  background: #f2efe7;
  color: #c3b8a4;
  cursor: not-allowed;
  opacity: 0.7;
}

.pill-booked {
  background: linear-gradient(135deg, #e88b73, var(--danger));
  color: #fff;
  border-color: #b5503a;
  box-shadow: 0 4px 12px rgba(224, 101, 74, 0.3);
}

.pill-completed {
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: #fff;
  border-color: var(--blue-dark);
  box-shadow: 0 4px 12px rgba(59, 130, 214, 0.3);
}

.pill-missed {
  background: linear-gradient(135deg, var(--gray-light), var(--gray));
  color: #fff;
  border-color: var(--gray-dark);
  box-shadow: 0 4px 12px rgba(139, 147, 160, 0.3);
}

.hour-toggle {
  display: none;
}

.hour-toggle + .pill {
  cursor: pointer;
  user-select: none;
}

.hour-toggle:checked + .pill {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  border-color: var(--accent-dark);
  box-shadow: 0 4px 12px rgba(31, 133, 112, 0.3);
}

.pill-gold {
  background: var(--gold-soft);
  color: var(--gold-dark);
}

.date-col {
  border-radius: 14px;
  transition: background 0.15s ease;
}

.date-col-today {
  background: var(--violet-soft);
}

.date-col-today .date-col-heading {
  color: var(--violet);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  transition: filter 0.15s ease;
  box-shadow: 0 6px 16px rgba(31, 133, 112, 0.28);
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-primary:disabled {
  background: #d8d0c1;
  box-shadow: none;
  cursor: not-allowed;
}

.nav-link {
  border-radius: 12px;
  color: var(--text-dark);
}

.nav-link.active, .nav-link:hover {
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.icon-btn {
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--accent-dark);
  transition: all 0.15s ease;
  border: none;
}

.icon-btn:hover:not(:disabled) {
  background: var(--pill-hover);
}

.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.badge-gold {
  background: linear-gradient(135deg, #fbc975, var(--gold));
  color: #573c0a;
  box-shadow: 0 4px 12px rgba(212, 136, 31, 0.25);
}

.top-accent-bar {
  height: 6px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--violet), var(--accent), var(--gold));
  margin: -1px -1px 0 -1px;
}

::-webkit-scrollbar {
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--pill-hover);
  border-radius: 999px;
}

/* Tailwind CDN'in JIT taramasi gecikirse bile ust satirlar tasmasin diye guvence. */
@media (max-width: 480px) {
  .header-row {
    flex-direction: column;
    align-items: flex-start !important;
  }
  .header-row > * {
    width: 100%;
  }
  .header-row nav {
    justify-content: flex-start;
  }
}