/* ============================================================
   YKA Teknoloji — Home overrides (home.css)
   ============================================================
   Loads LAST on index.html. Unifies the whole homepage into one
   cohesive dark-tech premium surface (matching the blog), without
   touching markup or JS. Only overrides existing classes.
   Uses real tokens from variables.css.
   ============================================================ */

:root {
  --home-bg-deep:  #060B16;
  --home-bg-base:  #0A1322;
  --home-ink:      #EAF0FA;
  --home-ink-mut:  rgba(234, 240, 250, 0.62);
  --home-ink-fnt:  rgba(234, 240, 250, 0.42);
  --home-glass:    rgba(255, 255, 255, 0.045);
  --home-glass-2:  rgba(255, 255, 255, 0.07);
  --home-hair:     rgba(255, 255, 255, 0.09);
  --home-hair-2:   rgba(255, 255, 255, 0.16);
  --home-gold:     var(--color-accent-glow);
  --home-cyan:     var(--color-cyan);
  --home-ease:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   1. UNIFIED DARK CANVAS + AMBIENT ATMOSPHERE
   ============================================================ */
body {
  background-color: var(--home-bg-deep);
  background-image:
    radial-gradient(120% 70% at 50% -5%, #112647 0%, transparent 55%),
    linear-gradient(180deg, var(--home-bg-base) 0%, var(--home-bg-deep) 60%);
  background-attachment: fixed;
  color: var(--home-ink);
}

/* Drifting gold + cyan glow, fixed behind all content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%,  rgba(196, 137, 26, 0.16), transparent 70%),
    radial-gradient(34vw 34vw at 88% 22%, rgba(56, 189, 248, 0.10), transparent 70%),
    radial-gradient(40vw 40vw at 70% 92%, rgba(196, 137, 26, 0.08), transparent 72%);
  animation: home-glow 26s var(--home-ease) infinite alternate;
}
@keyframes home-glow {
  to { transform: translate3d(0, -3%, 0) scale(1.08); opacity: 0.85; }
}

/* Fine tech grid, masked toward top, fixed behind content */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(130% 90% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 0%, transparent 75%);
}

/* ============================================================
   2. SECTION RHYTHM  (all transparent over the shared canvas)
   ============================================================ */
.section { background: transparent; }

/* --alt: a barely-there glass veil + hairlines for depth */
.section--alt {
  background: rgba(255, 255, 255, 0.018);
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --dark (İletişim finale): richer focal glow */
.section--dark {
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(27, 79, 140, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(10, 19, 34, 0.6), rgba(6, 11, 22, 0.9));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ============================================================
   3. SECTION HEADERS — light on dark everywhere
   ============================================================ */
.section-title { color: rgba(255, 255, 255, 0.96); }
.section-subtitle { color: var(--home-ink-mut); }
.section-subtitle strong { color: #fff; }

/* Hero→section transition wave was light (#F5F5F7) for the old light
   layout. Whole page is dark now, so the transition is unnecessary. */
.hero-wave { display: none; }

/* ============================================================
   4. "NASIL ÇALIŞIR" — flip step text to light
   ============================================================ */
.step-title { color: rgba(255, 255, 255, 0.92); }
.step-text  { color: var(--home-ink-mut); }
.step-num {
  background: linear-gradient(135deg, #14305a, #0d1f3a);
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.08), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.step-num--accent {
  background: linear-gradient(135deg, var(--color-accent), var(--home-gold));
  box-shadow: 0 0 0 4px rgba(196, 137, 26, 0.18), 0 6px 22px rgba(196, 137, 26, 0.3);
}
.demo-step::before {
  background: linear-gradient(to bottom, rgba(56, 189, 248, 0.4), transparent);
}

/* ============================================================
   5. TRUST CARDS (Referanslar) → dark glass like the rest
   ============================================================ */
.card-trust {
  background: var(--home-glass);
  border-color: var(--home-hair);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.card-trust:hover {
  border-color: rgba(196, 137, 26, 0.28);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.7), 0 0 24px rgba(196, 137, 26, 0.08);
}
.section--alt .card-trust-title { color: rgba(255, 255, 255, 0.92); }
.section--alt .card-trust-text  { color: var(--home-ink-mut); }
.card-trust-icon {
  background: linear-gradient(135deg, rgba(196, 137, 26, 0.16), rgba(56, 189, 248, 0.1));
  border-color: rgba(196, 137, 26, 0.22);
}

/* ============================================================
   6. PRICING — section is dark now; fix the loose notes
   ============================================================ */
.pricing-info-note { color: var(--home-ink-fnt); }
.pricing-info-note i { color: var(--home-gold); }

/* ============================================================
   7. SSS / FAQ — light questions, glass dividers
   ============================================================ */
.faq-wrapper {
  background: var(--home-glass);
  border: 1px solid var(--home-hair);
  border-radius: var(--radius-lg);
  padding: 8px 28px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.faq-item { border-bottom-color: rgba(255, 255, 255, 0.08); }
.faq-question { color: rgba(255, 255, 255, 0.9); transition: color var(--duration-fast) ease; }
.faq-btn:hover .faq-question { color: var(--home-gold); }
.faq-answer p { color: var(--home-ink-mut); }
.faq-cta-text { color: var(--home-ink-mut); }

/* ============================================================
   8. İLETİŞİM FORM — dark glass card + inputs
   ============================================================ */
.form-card {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  border-radius: var(--radius-lg);
  border: 1px solid var(--home-hair);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(196, 137, 26, 0.7), var(--color-accent), rgba(196, 137, 26, 0.7), transparent) 1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(196, 137, 26, 0.1);
}

.field-label { color: rgba(255, 255, 255, 0.72); }
.field-icon  { color: var(--home-gold); }

.field-input,
.field-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--home-hair);
  color: #fff;
}
.field-input::placeholder { color: rgba(255, 255, 255, 0.34); }
.field-input:focus,
.field-select:focus {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(196, 137, 26, 0.18);
}
.field-chevron { color: rgba(255, 255, 255, 0.45); }
/* Native dropdown options stay readable */
.field-select option { color: #111827; }

/* ============================================================
   9. HOME BLOG PREVIEW — match glass cards (blog.css supplies
   the .blog-card styling; just ensure grid sizing here)
   ============================================================ */
#home-blog-list.blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ============================================================
   10. ACCESSIBILITY / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  body { background-attachment: scroll; }
}

/* iOS performance: background-attachment:fixed can jank — scroll on touch */
@media (hover: none) {
  body { background-attachment: scroll; }
}