/**
 * Retina AI tanıtım sitesi — retina_ai/apps/web renk sistemi
 * Kaynak: apps/web/src/app/globals.css (--retina-*, --clinic-*)
 */
:root {
  --retina-primary: #00a8cc;
  --retina-primary-deep: #006b8f;
  --retina-secondary: #0088bb;
  --retina-secondary-soft: #00b4d8;
  --retina-accent: #00d4ff;
  --retina-background: #f8fafc;
  --retina-text: #1a1a1a;
  --retina-border: #dbe6f5;
  --clinic-bg: #f8fafc;
  --clinic-beige: #f2f7ff;
  --clinic-soft-gray: #dbe6f5;
  --retina-primary-rgb: 0, 168, 204;
  --retina-primary-deep-rgb: 0, 107, 143;
  --retina-secondary-rgb: 0, 136, 187;
}

/* Nav & CTA — login sayfası ile aynı degrade */
nav {
  background: linear-gradient(
    92deg,
    var(--retina-primary-deep) 0%,
    var(--retina-primary) 45%,
    var(--retina-secondary) 100%
  ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 4px 24px rgba(var(--retina-primary-rgb), 0.25),
    0 8px 32px rgba(15, 23, 42, 0.08);
}

html.dark nav {
  background: linear-gradient(
    92deg,
    #083d44 0%,
    var(--retina-primary-deep) 50%,
    var(--retina-primary) 100%
  ) !important;
  border-bottom: 1px solid rgba(var(--retina-primary-rgb), 0.32) !important;
}

.primary-gradient,
button.primary-gradient,
.payment-btn.primary-gradient,
#contact > div.primary-gradient:first-of-type {
  background-color: var(--retina-primary-deep) !important;
  background-image: linear-gradient(
    135deg,
    var(--retina-primary-deep) 0%,
    var(--retina-primary) 46%,
    var(--retina-secondary-soft) 100%
  ) !important;
}

html.dark .primary-gradient {
  background-image: linear-gradient(
    160deg,
    #0f172a 0%,
    #083d44 100%
  ) !important;
}

html:not(.dark) .primary-gradient.bg-clip-text {
  background-image: linear-gradient(
    135deg,
    var(--retina-primary-deep) 0%,
    var(--retina-primary) 42%,
    var(--retina-secondary) 100%
  ) !important;
}

html.dark .primary-gradient.bg-clip-text {
  background-image: linear-gradient(
    135deg,
    var(--retina-accent) 0%,
    var(--retina-primary) 42%,
    var(--retina-secondary-soft) 100%
  ) !important;
}

.glass-card {
  border-color: rgba(var(--retina-primary-rgb), 0.22) !important;
}

html:not(.dark) .footer-brand-name {
  color: var(--retina-primary-deep) !important;
}

html.dark .footer-brand-name {
  color: var(--retina-secondary-soft) !important;
}

.site-head {
  background: linear-gradient(
    135deg,
    var(--retina-primary-deep) 0%,
    var(--retina-primary) 50%,
    var(--retina-secondary) 100%
  ) !important;
}

.btn {
  background: linear-gradient(
    135deg,
    var(--retina-primary-deep),
    var(--retina-primary)
  ) !important;
}