/* ==========================================================================
   Crafty AI — Shared base styles
   Tüm sayfalarda ortak olan custom CSS. Sayfaya özel stiller (phone frame,
   masonry vb.) ilgili sayfanın kendi <style> bloğunda kalır.
   ========================================================================== */

/* Material Symbols default axis */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Brand gradients */
.hero-gradient { background: linear-gradient(135deg, #D4789B 0%, #E899B0 100%); }
.gold-gradient { background: linear-gradient(135deg, #B88C5D 0%, #EFBD8A 100%); }
.text-gradient {
  background: linear-gradient(135deg, #D4789B 0%, #E899B0 60%, #B88C5D 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Surfaces / shadows */
.glass { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.shadow-brand { box-shadow: 0 4px 24px rgba(212, 120, 155, 0.12); }
.shadow-brand-lg { box-shadow: 0 8px 40px rgba(212, 120, 155, 0.16); }

/* Form status messages (contact / newsletter / waitlist) */
.form-status {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-status::before { font-family: 'Material Symbols Outlined'; font-size: 18px; }
.form-status-success {
  background: rgba(123, 198, 126, 0.14);
  color: #3f8047;
  border: 1px solid rgba(123, 198, 126, 0.35);
}
.form-status-success::before { content: 'check_circle'; }
.form-status-error {
  background: rgba(212, 120, 155, 0.14);
  color: #944364;
  border: 1px solid rgba(212, 120, 155, 0.35);
}
.form-status-error::before { content: 'error'; }

/* Honeypot (bot trap) */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* Animations */
.spin-keyframe { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.7s ease-out forwards; }