.gradient-text {
  background: linear-gradient(to right, #38bdf8, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.animated-bg {
  background: linear-gradient(-45deg, #020617, #111827, #1e1b4b, #0f172a);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.glass-card {
  background: rgba(30, 41, 59, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- CUSTOM CURSOR STYLES --- */
body {
  /* PC'de varsayılan imleci gizle */
  cursor: none;
}

/* Mobil cihazlarda özel cursor'ı iptal et */
@media (pointer: coarse) {
  body {
    cursor: auto;
  }
  .cursor-dot,
  .cursor-outline {
    display: none !important;
  }
}

.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 9999;
  pointer-events: none; /* Tıklamayı engellememesi için şart */
}

.cursor-dot {
  width: 8px;
  height: 8px;
  /* Hem koyu hem açık zeminde görünmesi için mavi (brand) renk */
  background-color: #0ea5e9;
  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
}

.cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(14, 165, 233, 0.5);
  transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}

/* Hover Durumu (JS ile tetiklenecek) */
body.hovering .cursor-outline {
  width: 70px;
  height: 70px;
  background-color: rgba(14, 165, 233, 0.1); /* Brand rengi, şeffaf */
  border-color: #0284c7;
  backdrop-filter: blur(0px); /* Açık zeminde blur sorun olmasın diye kaldırdık */
}

body.hovering .cursor-dot {
  background-color: #0284c7;
  width: 10px;
  height: 10px;
}

/* Fallback color variables and utilities in case Tailwind/Config not available */
:root {
  --brand-50: #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-400: #38bdf8;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-900: #0c4a6e;
  --dark-800: #1e293b;
  --dark-900: #0f172a;
  --dark-950: #020617;
}

.text-brand-400 {
  color: var(--brand-400) !important;
}
.text-brand-500 {
  color: var(--brand-500) !important;
}
.text-brand-600 {
  color: var(--brand-600) !important;
}
.bg-brand-600 {
  background-color: var(--brand-600) !important;
}
.bg-dark-900 {
  background-color: var(--dark-900) !important;
}
.bg-dark-950 {
  background-color: var(--dark-950) !important;
}

/* Step badge (explicit fallback for Tailwind gradient utility) */
.step-badge {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #ffffff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow: 0 18px 40px rgba(3, 105, 161, 0.16), 0 6px 12px rgba(3, 105, 161, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Step heading fallback: visible background and hover state */
.step-heading {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--brand-50);
  color: #0f172a; /* slate-900 */
  font-weight: 700;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.group:hover .step-heading {
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(2, 132, 199, 0.15);
}

/* Step card styles */
.step-card {
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 300ms ease, background-color 300ms ease;
  will-change: transform;
}
.step-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 60px rgba(2, 132, 199, 0.08), 0 8px 20px rgba(15, 23, 42, 0.06);
}

/* Icon circle */
.step-icon {
  width: 88px;
  height: 88px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(99, 102, 241, 0.06));
  color: var(--brand-600);
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.06);
}
.step-icon i,
.step-icon svg {
  font-size: 2.25rem;
  width: 40px;
  height: 40px;
}

/* small entrance animation */
@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step-card[data-aos] {
  animation: enter-up 600ms ease both;
}

/* Ensure contrast for headings inside cards */
.step-card .step-heading {
  background: var(--brand-50);
  color: var(--dark-900);
}
.group:hover .step-card .step-heading {
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
  color: #fff;
}

/* Price badge for pricing header - ensures visible colored background and contrast */
.price-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.12), 0 4px 8px rgba(2, 132, 199, 0.06);
}
.price-badge .price-number {
  font-size: 2.75rem;
  line-height: 1;
  font-weight: 800;
}
.price-badge .price-currency {
  font-size: 1.25rem;
  opacity: 0.95;
}

/* Pricing header persistent background fallback (used when Tailwind gradient utilities are not applied) */
.pricing-header {
  background: linear-gradient(90deg, var(--brand-600), var(--brand-500));
  color: #ffffff;
}
.pricing-header .price-badge {
  box-shadow: 0 14px 36px rgba(2, 132, 199, 0.14);
}
.pricing-header .text-brand-100 {
  color: rgba(255, 255, 255, 0.85) !important;
}