/* ============================================================
   AI Market Agent — style.css
   Tailwind CDN üzerine eklenen özel stiller.
   ============================================================ */

:root{
  --ink:#070B15;
  --panel:#0E1524;
  --panel-2:#131C30;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --accent:#4F9CFF;
  --accent-2:#3B82F6;
  --violet:#8B5CF6;
  --up:#22D39A;
  --down:#F04B5B;
  --text:#E6EDF7;
  --muted:#8A97B0;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background-color:var(--ink);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  overflow-x:hidden;
  /* katmanlı ışıma + ince nokta ızgara */
  background-image:
    radial-gradient(1100px 620px at 82% -8%, rgba(79,156,255,.14), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(139,92,246,.12), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
  background-size:auto, auto, 26px 26px;
  background-attachment:fixed, fixed, fixed;
}

::selection{ background:rgba(79,156,255,.28); color:#fff; }

h1,h2,h3,.font-display{ font-family:'Space Grotesk',sans-serif; letter-spacing:-.01em; }
.mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

/* ---- Odak erişilebilirliği ---- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#1c2740; border-radius:20px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:#26344f; }

/* ---- Yüzey / panel ---- */
.surface{
  background:linear-gradient(180deg, rgba(19,28,48,.72), rgba(14,21,36,.72));
  border:1px solid var(--line);
  border-radius:16px;
  backdrop-filter:blur(6px);
}
.surface-hover{ transition:border-color .25s ease, transform .25s ease, background .25s ease; }
.surface-hover:hover{ border-color:var(--line-strong); transform:translateY(-3px); }

/* Gradient hairline üst çizgi (kartlarda vurgu) */
.topline{ position:relative; overflow:hidden; }
.topline::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(79,156,255,.55), rgba(139,92,246,.55), transparent);
}

.grad-text{
  background:linear-gradient(92deg,#EAF2FF 0%, #9FC4FF 45%, #C6B2FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Butonlar ---- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; border-radius:12px;
  padding:.8rem 1.35rem; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{ color:#04101f; background:linear-gradient(180deg,#66ABFF,#3B82F6);
  box-shadow:0 8px 26px -10px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-primary:hover{ box-shadow:0 12px 34px -10px rgba(79,156,255,.9), inset 0 1px 0 rgba(255,255,255,.45); transform:translateY(-2px); }
.btn-ghost{ color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line-strong); }
.btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.24); }

/* ---- Rozetler ---- */
.badge{ display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:600;
  letter-spacing:.14em; padding:.35rem .7rem; border-radius:999px; }
.badge-accent{ color:#bcd7ff; background:rgba(79,156,255,.10); border:1px solid rgba(79,156,255,.28); }
.badge-demo{ color:#9fb0cc; background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
  font-family:'JetBrains Mono',monospace; letter-spacing:.12em; }
.badge-soon{ color:#c8b6ff; background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.34);
  font-family:'JetBrains Mono',monospace; }
.badge-live{ color:#031a12; background:linear-gradient(180deg,#3DE3AC,#22D39A);
  font-family:'JetBrains Mono',monospace; }

.tag-up{ color:var(--up); }
.tag-down{ color:var(--down); }

/* ---- Navbar ---- */
#navbar{ transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
#navbar.scrolled{ background:rgba(7,11,21,.72); backdrop-filter:blur(14px);
  border-bottom-color:var(--line); }
#mobile-menu{ transition:max-height .35s ease, opacity .3s ease; max-height:0; opacity:0; overflow:hidden; }
#mobile-menu.open{ max-height:26rem; opacity:1; }

/* ---- Terminal panel chrome ---- */
.terminal{ background:linear-gradient(180deg,#0C1424,#0A101d); border:1px solid var(--line-strong);
  border-radius:18px; box-shadow:0 40px 90px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(79,156,255,.05) inset; }
.terminal-bar{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem;
  border-bottom:1px solid var(--line); }
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.led{ width:8px; height:8px; border-radius:50%; background:var(--up); display:inline-block;
  box-shadow:0 0 0 0 rgba(34,211,154,.6); animation:pulse-led 2.2s infinite; }
@keyframes pulse-led{
  0%{ box-shadow:0 0 0 0 rgba(34,211,154,.55); }
  70%{ box-shadow:0 0 0 7px rgba(34,211,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,211,154,0); }
}

/* İç metrik hücreleri */
.cell{ background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; padding:.85rem .9rem; }
.cell-label{ font-size:.68rem; letter-spacing:.14em; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.cell-value{ font-family:'JetBrains Mono',monospace; font-weight:600; }

.signal-buy{ color:var(--up); background:rgba(34,211,154,.10); border:1px solid rgba(34,211,154,.3); }
.signal-sell{ color:var(--down); background:rgba(240,75,91,.10); border:1px solid rgba(240,75,91,.3); }

/* ---- Grafik ---- */
.chart-grid line{ stroke:rgba(255,255,255,.06); stroke-width:1; }
.chart-line{ fill:none; stroke:url(#lineGrad); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.chart-line.animate{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 1.6s ease forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.chart-area{ fill:url(#areaGrad); opacity:.9; }
.chart-dot{ fill:#EAF2FF; stroke:var(--accent); stroke-width:2; }

/* Terminal tarama çizgisi (tek, hafif) */
.scan{ position:absolute; left:0; right:0; height:120px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(79,156,255,.05) 45%, transparent);
  animation:scan 6s linear infinite; }
@keyframes scan{ 0%{ transform:translateY(-120px); } 100%{ transform:translateY(520px); } }

/* ---- Timeframe / tab ---- */
.tf-btn{ font-family:'JetBrains Mono',monospace; font-size:.8rem; padding:.4rem .8rem; border-radius:9px;
  color:var(--muted); border:1px solid transparent; transition:all .2s ease; }
.tf-btn:hover{ color:var(--text); }
.tf-btn.active{ color:#eaf2ff; background:rgba(79,156,255,.12); border-color:rgba(79,156,255,.3); }

/* ---- Adım akış oku ---- */
.flow-step{ font-family:'JetBrains Mono',monospace; }
.flow-arrow{ color:var(--accent); opacity:.7; }

/* ---- Roadmap timeline ---- */
.rm-node{ width:14px; height:14px; border-radius:50%; background:var(--panel-2);
  border:2px solid var(--line-strong); }
.rm-node.live{ background:var(--up); border-color:var(--up); box-shadow:0 0 0 4px rgba(34,211,154,.15); }

/* ---- FAQ akordeon ---- */
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-item.open .faq-chevron{ transform:rotate(180deg); }
.faq-chevron{ transition:transform .3s ease; }

/* ---- Reveal ---- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  .chart-line.animate{ animation:none; stroke-dashoffset:0; }
  .led,.scan{ animation:none; }
}

/* İnce bölüm ayıracı */
.divider{ height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }