/* =========================================================
   CXper - Ortak Stil Dosyası
   Tailwind CDN ile birlikte çalışır.
   ========================================================= */

:root {
  --cx-blue: #0052ff;
  --cx-blue-2: #0066ff;
  --cx-purple: #b026ff;
  --cx-fuchsia: #d946ef;
  --cx-ink: #0f172a;
  --cx-ink-2: #1e293b;
  --cx-bg: #ffffff;
  --cx-bg-soft: #f8fafc;
  --cx-bg-soft-2: #f1f5f9;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  color: var(--cx-ink-2);
  background: var(--cx-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--cx-ink); letter-spacing: -0.02em; }

/* ---------- Gradient yardımcıları ---------- */
.bg-gradient-cxper {
  background: linear-gradient(45deg, var(--cx-blue) 0%, var(--cx-purple) 100%);
}
.bg-gradient-cxper-soft {
  background: linear-gradient(45deg, rgba(0,82,255,.10) 0%, rgba(176,38,255,.10) 100%);
}
.text-gradient-cxper {
  background: linear-gradient(45deg, var(--cx-blue-2) 0%, var(--cx-fuchsia) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.border-gradient-cxper {
  position: relative;
}
.border-gradient-cxper::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(45deg, var(--cx-blue), var(--cx-purple));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Glass kartlar ---------- */
.glass-card {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px -12px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.04);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(0,82,255,.25), 0 8px 20px -10px rgba(176,38,255,.2);
  border-color: rgba(176,38,255,.35);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 8px 24px -12px rgba(15,23,42,.15); }

.nav-link {
  position: relative;
  font-weight: 600; font-size: .92rem;
  color: var(--cx-ink-2);
  padding: .4rem 0;
  transition: color .2s ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; width: 0;
  background: linear-gradient(45deg, var(--cx-blue), var(--cx-purple));
  transition: width .25s ease;
}
.nav-link:hover, .nav-link.active { color: var(--cx-blue); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* ---------- Butonlar ---------- */
.btn-gradient {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(45deg, var(--cx-blue) 0%, var(--cx-purple) 100%);
  color: #fff; font-weight: 700;
  padding: .8rem 1.6rem; border-radius: 999px;
  box-shadow: 0 10px 24px -8px rgba(0,82,255,.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  border: 0; cursor: pointer;
}
.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(176,38,255,.55);
  filter: brightness(1.07);
}
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; color: var(--cx-ink);
  padding: .8rem 1.6rem; border-radius: 999px;
  background: #fff; border: 1.5px solid rgba(15,23,42,.12);
  transition: all .2s ease; cursor: pointer;
}
.btn-outline:hover {
  border-color: var(--cx-purple); color: var(--cx-purple);
  transform: translateY(-2px);
}

/* ---------- Hero & glow ---------- */
.hero-bg {
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(176,38,255,.16), transparent 60%),
    radial-gradient(50rem 28rem at 0% 0%, rgba(0,82,255,.14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.glow {
  position: absolute; border-radius: 9999px; filter: blur(80px);
  opacity: .45; pointer-events: none; z-index: 0;
}
.glow-blue   { background: var(--cx-blue); }
.glow-purple { background: var(--cx-purple); }

.section-soft { background: var(--cx-bg-soft); }
.section-soft-2 { background: var(--cx-bg-soft-2); }

.dark-section {
  background: linear-gradient(135deg, #0b1220 0%, #0f172a 45%, #1a1245 100%);
  color: #e2e8f0; position: relative; overflow: hidden;
}
.dark-section h2, .dark-section h3, .dark-section h4 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px;
  background: linear-gradient(45deg, rgba(0,82,255,.10), rgba(176,38,255,.12));
  color: var(--cx-blue);
}

/* ---------- İkon kutuları ---------- */
.icon-box {
  width: 3rem; height: 3rem; border-radius: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(45deg, var(--cx-blue), var(--cx-purple));
  color: #fff; font-size: 1.15rem;
  box-shadow: 0 10px 20px -8px rgba(0,82,255,.5);
}

/* ---------- Modül sekmeleri (software.html) ---------- */
.module-tab {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  text-align: left; padding: .9rem 1rem; border-radius: 1rem;
  background: #fff; border: 1.5px solid rgba(15,23,42,.07);
  font-weight: 700; color: var(--cx-ink-2); cursor: pointer;
  transition: all .2s ease;
}
.module-tab:hover { border-color: rgba(176,38,255,.4); transform: translateX(3px); }
.module-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(45deg, var(--cx-blue), var(--cx-purple));
  box-shadow: 0 14px 28px -12px rgba(0,82,255,.55);
}
.module-tab .tab-letter {
  width: 2rem; height: 2rem; flex: none; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.06); font-weight: 800; font-size: .85rem;
}
.module-tab.active .tab-letter { background: rgba(255,255,255,.22); }

.module-panel { display: none; animation: fadeUp .4s ease both; }
.module-panel.active { display: block; }

.feature-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem; border-radius: 999px;
  background: var(--cx-bg-soft-2); border: 1px solid rgba(15,23,42,.06);
  font-size: .85rem; font-weight: 600; color: var(--cx-ink-2);
}

/* ---------- Teklif formu etiketleri (tag seçim) ---------- */
.tag-option { position: relative; }
.tag-option input { position: absolute; opacity: 0; pointer-events: none; }
.tag-option label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1.1rem; border-radius: 999px; cursor: pointer;
  background: #fff; border: 1.5px solid rgba(15,23,42,.12);
  font-weight: 600; font-size: .9rem; color: var(--cx-ink-2);
  transition: all .2s ease; user-select: none;
}
.tag-option label:hover { border-color: var(--cx-purple); }
.tag-option input:checked + label {
  color: #fff; border-color: transparent;
  background: linear-gradient(45deg, var(--cx-blue), var(--cx-purple));
  box-shadow: 0 10px 20px -10px rgba(0,82,255,.6);
}
.tag-option input:focus-visible + label { outline: 2px solid var(--cx-blue); outline-offset: 2px; }

.form-input {
  width: 100%; padding: .85rem 1rem; border-radius: .9rem;
  background: #fff; border: 1.5px solid rgba(15,23,42,.12);
  color: var(--cx-ink); font-size: .95rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus {
  outline: none; border-color: var(--cx-blue-2);
  box-shadow: 0 0 0 4px rgba(0,102,255,.14);
}
.form-input.invalid { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.12); }
.field-error { color: #ef4444; font-size: .8rem; margin-top: .3rem; display: none; }
.field-error.show { display: block; }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; animation: fadeIn .25s ease both; }
.modal-box {
  background: #fff; border-radius: 1.5rem; max-width: 28rem; width: 100%;
  padding: 2.25rem; text-align: center;
  box-shadow: 0 40px 80px -20px rgba(0,82,255,.45);
  animation: popIn .35s cubic-bezier(.2,1.2,.4,1) both;
}

/* ---------- Mobil menü ---------- */
.mobile-menu {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease;
  background: rgba(255,255,255,.96);
  border-top: 1px solid transparent;
}
.mobile-menu.open { max-height: 28rem; border-top-color: rgba(15,23,42,.06); }

/* ---------- Animasyonlar ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .floaty { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Footer ---------- */
.site-footer { background: #0b1220; color: #94a3b8; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: #fff; }