/* Clean-Room Apple-Inspired Hardware Studio & Checkout Stilleri */
:root {
  --bg-page: #FFFFFF;
  --bg-surface: #F5F5F7;
  --bg-card: #FFFFFF;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --border-hairline: #D2D2D7;
  --accent-blue: #0071E3;
  --accent-blue-hover: #0077ED;
  --trust-green: #16A34A;
  --warn-amber: #D97706;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glass-bar {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.studio-stage {
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F5F5F7 72%, #EFEFF2 100%);
  border: 1px solid rgba(210, 210, 215, 0.65);
}

.hairline-divider {
  border-color: var(--border-hairline);
}

.config-card {
  border: 1px solid var(--border-hairline);
  background-color: var(--bg-card);
  transition: border-color 180ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 180ms var(--ease-out), transform 140ms var(--ease-out);
  cursor: pointer;
}

.config-card:hover {
  border-color: #86868B;
}

.config-card:active {
  transform: scale(0.992);
}

.config-card.is-selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue), 0 8px 24px -8px rgba(0, 113, 227, 0.16);
  background-color: #F7FBFF;
}

.btn-cta {
  background-color: var(--accent-blue);
  color: #FFFFFF;
  transition: background-color 180ms var(--ease-out), transform 130ms var(--ease-out), box-shadow 180ms var(--ease-out);
  cursor: pointer;
}

.btn-cta:hover {
  background-color: var(--accent-blue-hover);
  box-shadow: 0 8px 22px -6px rgba(0, 113, 227, 0.36);
}

.btn-cta:active {
  transform: scale(0.97);
}

.btn-secondary-pill {
  background-color: #FFFFFF;
  color: var(--accent-blue);
  border: 1px solid var(--border-hairline);
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out), transform 130ms var(--ease-out);
  cursor: pointer;
}

.btn-secondary-pill:hover {
  border-color: var(--accent-blue);
  background-color: #F5FAFF;
}

.btn-secondary-pill:active {
  transform: scale(0.97);
}

.studio-tab {
  color: var(--text-secondary);
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out);
  cursor: pointer;
}

.studio-tab:hover {
  color: var(--text-primary);
}

.studio-tab.is-active {
  background-color: #FFFFFF;
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.card-input-mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.fade-slide-in {
  animation: fadeSlideIn 220ms var(--ease-out);
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Honeypot alanı görsel olarak tamamen gizli */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

[x-cloak] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .config-card,
  .btn-cta,
  .btn-secondary-pill,
  .studio-tab,
  .fade-slide-in {
    animation: none;
    transition: none;
  }
}