:root {
  --bg: #0b0f14;
  --panel: #121820;
  --border: #1e2a38;
  --text: #e6edf5;
  --muted: #8b9bb0;
  --green: #22c55e;
  --red: #ef4444;
  --blue: #3b82f6;
  --amber: #f59e0b;
  --cyan: #22d3ee;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
nav.top {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: #0d131a;
  position: sticky; top: 0; z-index: 20;
}
nav.top .brand { font-weight: 800; letter-spacing: .3px; }
nav.top .brand span { color: var(--cyan); }
nav.top .menu { display: flex; gap: 6px; flex-wrap: wrap; }
nav.top .menu a {
  padding: 8px 14px; border-radius: 8px; color: var(--muted); font-weight: 700;
  border: 1px solid transparent;
}
nav.top .menu a:hover { color: var(--text); text-decoration: none; }
nav.top .menu a.active {
  background: var(--panel); color: var(--cyan); border-color: var(--border);
}
header.bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: #0d131a;
}
h1 { font-size: 16px; margin: 0; }
h1 span { color: var(--cyan); }
.metrics { display: flex; gap: 14px; flex-wrap: wrap; }
.metric { min-width: 88px; }
.metric .lbl { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.metric .val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.periods {
  display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
}
@media (max-width: 800px) { .periods { grid-template-columns: repeat(2, 1fr); } }
.period-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.period-card .lbl { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.period-card .pct { font-size: 18px; font-weight: 800; margin-top: 4px; }
.period-card .pnl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Günlük (daily) summary — Demo & Canlı */
.daily-panel {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: #0c1512;
}
.daily-panel .daily-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.daily-panel .daily-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--cyan);
}
.daily-panel .daily-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.daily-panel .daily-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.daily-panel .metric { min-width: 100px; }
.period-card--today {
  border-color: #0d9488;
  box-shadow: inset 0 0 0 1px rgba(13, 148, 136, 0.35);
}
.period-card .extra {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .daily-panel { padding: 10px 12px; }
  .daily-panel .metric { min-width: 88px; }
}

.pos { color: var(--green); } .neg { color: var(--red); }
.btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
button, .btn {
  background: #1a2430; color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; cursor: pointer; font-weight: 600;
}
button:hover { border-color: #334155; }
button.primary { background: #0e3a2f; border-color: #166534; color: #bbf7d0; }
button.warn { background: #3a2a0e; border-color: #a16207; color: #fde68a; }
button.danger { background: #3a1212; border-color: #991b1b; color: #fecaca; }
.badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: #1e293b; color: var(--cyan); border: 1px solid #334155;
}
.badge.long { color: #86efac; border-color: #166534; background: #052e1a; }
.badge.short { color: #fca5a5; border-color: #991b1b; background: #2a0f0f; }
.badge.tf { color: #fde68a; border-color: #854d0e; background: #1c1405; }
.tv {
  display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800;
  background: #1d4ed8; color: #fff; text-decoration: none; border: 1px solid #2563eb;
}
.tv:hover { background: #2563eb; text-decoration: none; }
main.layout { display: grid; grid-template-columns: 300px 1fr; gap: 14px; padding: 14px; }
@media (max-width: 980px) { main.layout { grid-template-columns: 1fr; } }
.panel {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
}
.panel h2 {
  margin: 0 0 10px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.settings label {
  display: grid; grid-template-columns: 1fr 100px; gap: 8px; align-items: center;
  margin-bottom: 7px; font-size: 12px; color: #cbd5e1;
}
.settings input, .settings select, .inline-input {
  width: 100%; background: #0b1220; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 7px;
}
.settings .row-bool { grid-template-columns: 1fr 40px; }
.settings .row-multi { display: block; margin-bottom: 10px; font-size: 12px; color: #cbd5e1; }
.settings .chk-row { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.settings .chk-row label { display: inline-flex; align-items: center; gap: 5px; margin: 0; grid-template-columns: none; }
.settings .chk-row input { width: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; }
tr:hover td { background: #0f1722; }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.time { color: #94a3b8; white-space: nowrap; font-size: 11px; }
.log {
  max-height: 220px; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  line-height: 1.45; color: #cbd5e1;
}
.log .error { color: #fca5a5; } .log .warn { color: #fcd34d; } .log .trade { color: #67e8f9; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; background: #64748b;
}
.status-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.scroll { overflow: auto; max-height: 420px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.stats b { color: var(--text); }
.note {
  font-size: 12px; color: #94a3b8; background: #0b1220; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; line-height: 1.45;
}
/* Landing — video/poster hero like eski anasayfa */
body.page-landing {
  min-height: 100vh;
  background: #05090d;
}
.hero {
  max-width: 1100px; margin: 0 auto; padding: 40px 18px 60px;
}
.hero.hero-with-bg {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 54px);
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #05090d;
  /* Ekranı doldur — yan siyah yok */
  background-image: url("/static/landing-assets/x9-poster.jpg");
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: cover;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  pointer-events: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  /* Daha açık orta: kafa + göğüs kodu okunur */
  background:
    linear-gradient(180deg,
      rgba(5,9,13,.42) 0%,
      rgba(5,9,13,.18) 36%,
      rgba(5,9,13,.22) 58%,
      rgba(5,9,13,.72) 100%),
    radial-gradient(ellipse at 50% 52%, rgba(0,0,0,.08), transparent 55%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 18px 56px;
}
.hero h1 { font-size: 32px; line-height: 1.2; margin-bottom: 10px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero p.lead { color: var(--muted); font-size: 16px; max-width: 640px; text-shadow: 0 1px 10px rgba(0,0,0,.45); }
.story-card {
  margin-top: 28px;
  /* Daha şeffaf: robot görünsün; yazı için hafif blur + gölge */
  background: linear-gradient(160deg, rgba(10,16,24,.48), rgba(8,14,20,.42));
  border: 1px solid rgba(148,163,184,.32);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}
.story-card h2,
.story-card .story-balance strong,
.story-card .period-card .pct,
.story-card .period-card .pnl {
  text-shadow: 0 1px 8px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.9);
}
.story-card p,
.story-card .story-balance small,
.story-card .period-card .lbl,
.story-card #landingUpdated {
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
.story-card h2 { margin: 0 0 6px; font-size: 18px; }
.story-balance { display: flex; gap: 24px; flex-wrap: wrap; margin: 16px 0; }
.story-balance div small { display: block; color: var(--muted); font-size: 11px; }
.story-balance div strong { font-size: 22px; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cta-row a.btn { display: inline-block; }

@media (max-width: 900px) {
  .hero-media { background-position: center 32%; background-size: cover; }
  .hero-video { object-position: center 32%; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(5,9,13,.40) 0%, rgba(5,9,13,.18) 40%, rgba(5,9,13,.65) 100%),
      radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.10), transparent 60%);
  }
}
@media (min-width: 1100px) {
  .hero-media { background-position: center 40%; background-size: cover; }
  .hero-video { object-position: center 40%; }
}

/* Haberler — 3 columns full viewport */
body.page-haberler { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.news-layout {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 240px;
  gap: 10px; padding: 10px;
}
@media (max-width: 1100px) {
  .news-layout { grid-template-columns: 280px minmax(0, 1fr); }
  .symbol-list { display: none; }
}
@media (max-width: 800px) {
  body.page-haberler { height: auto; overflow: auto; }
  .news-layout { grid-template-columns: 1fr; height: auto; }
}
.news-list, .symbol-list {
  max-height: none; height: 100%; overflow: auto; min-height: 0;
  display: flex; flex-direction: column;
}
.news-list #newsItems, .symbol-scroll { flex: 1; overflow: auto; min-height: 0; }
.news-chart-col {
  display: flex; flex-direction: column; min-height: 0; min-width: 0; padding-bottom: 8px;
}
.chart-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0;
}
.chart-note { margin: 8px 0; flex-shrink: 0; }
.chart-wrap {
  flex: 1; min-height: 0; width: 100%;
  height: calc(100vh - 180px);
  position: relative; background: #0b0f14; border-radius: 8px; border: 1px solid var(--border);
}
#chartHost { width: 100%; height: 100%; }
.zone-legend { font-size: 12px; color: var(--muted); margin-top: 6px; flex-shrink: 0; }
.news-item {
  padding: 10px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.news-item:hover, .news-item.active { background: #0f1722; }
.news-item.important { border-left: 3px solid var(--amber); }
.news-item .title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.news-item .meta { font-size: 11px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge.important {
  color: #fde68a; border-color: #a16207; background: #3a2a0e;
}
.symbol-search { margin-bottom: 8px; position: sticky; top: 0; z-index: 2; }
.symbol-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 8px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12px;
}
.symbol-item:hover, .symbol-item.active { background: #0f1722; }
.symbol-item.active { outline: 1px solid var(--cyan); border-radius: 6px; }
.sym-base { font-weight: 700; }
.sym-chg { font-variant-numeric: tabular-nums; font-size: 11px; }
/* Access / paywall */
a.nav-locked, .btn.nav-locked {
  opacity: 0.55; position: relative;
}
a.nav-locked::after { content: " 🔒"; font-size: 11px; }
.paywall {
  max-width: 520px; margin: 48px auto; padding: 28px; text-align: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
}
.paywall h2 { margin: 0 0 10px; font-size: 20px; color: var(--text); text-transform: none; letter-spacing: 0; }
.paywall p { color: var(--muted); line-height: 1.5; }
.paywall input { max-width: 280px; margin: 12px auto; display: block; text-align: center; }
#livePaywall { display: none; }
#liveApp[hidden] { display: none !important; }
.live-locked #livePaywall { display: block; }
.live-locked #liveApp { display: none !important; }
body:not(.live-locked) #livePaywall { display: none !important; }

/* ========== Mobile / tablet ========== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
button, .btn, .menu a, .symbol-item, .news-item {
  touch-action: manipulation;
}
@media (max-width: 900px) {
  nav.top {
    padding: 10px 12px; gap: 8px; position: sticky; top: 0;
  }
  nav.top .brand { font-size: 14px; width: 100%; }
  nav.top .menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  nav.top .menu a {
    text-align: center; padding: 10px 6px; font-size: 12px;
  }
  header.bar {
    flex-direction: column; align-items: stretch; padding: 12px;
    gap: 10px;
  }
  header.bar .btns {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  header.bar .btns button { width: 100%; padding: 12px 10px; }
  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
  }
  .periods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px;
  }
  main.layout {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 10px;
  }
  .settings { order: 2; }
  .scroll {
    max-height: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table { min-width: 720px; font-size: 11px; }
  .hero { padding: 24px 14px 40px; }
  .hero h1 { font-size: 24px; }
  .hero p.lead { font-size: 14px; }
  .story-card { padding: 16px; }
  .story-balance { gap: 14px; }
  .story-balance div strong { font-size: 18px; }
  .cta-row a.btn { flex: 1 1 40%; text-align: center; padding: 12px 10px; }
  #proUnlockBar, #freePlanNote { margin: 10px 12px !important; }
  #proUnlockBar input { max-width: none !important; width: 100%; }
  #proUnlockBar .primary, #proUnlockBar .warn { flex: 1; }
  .paywall { margin: 24px 12px; padding: 20px 16px; }
  .log { max-height: 180px; }
}

@media (max-width: 900px) {
  /* Haberler: tabbed mobile shell */
  body.page-haberler { height: auto; overflow: auto; }
  .haberler-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 10px 0;
  }
  .haberler-tabs button {
    padding: 11px 8px; font-size: 12px;
  }
  .haberler-tabs button.active {
    background: #0e3a2f; border-color: #166534; color: #bbf7d0;
  }
  .news-layout {
    grid-template-columns: 1fr;
    padding: 8px 10px 14px;
    gap: 10px;
  }
  .news-layout > .panel { display: none; min-height: 50vh; }
  .news-layout > .panel.mob-active { display: flex; }
  .symbol-list { display: none; }
  .news-layout > .symbol-list.mob-active { display: flex; }
  .chart-wrap {
    height: min(62vh, 520px);
    min-height: 280px;
  }
  .chart-toolbar .btns { width: 100%; }
  .chart-toolbar select, .chart-toolbar button, .chart-toolbar a.tv {
    min-height: 40px;
  }
}

@media (min-width: 901px) {
  .haberler-tabs { display: none !important; }
}

@media (max-width: 480px) {
  nav.top .menu a { font-size: 11px; padding: 9px 4px; }
  .periods { grid-template-columns: 1fr 1fr; }
  .metric .val { font-size: 14px; }
  .hero h1 { font-size: 22px; }
}

/* ========== Mobile / tablet ========== */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); }
button, .btn, .menu a, .symbol-item, .news-item { touch-action: manipulation; }

@media (max-width: 900px) {
  nav.top { padding: 10px 12px; gap: 8px; }
  nav.top .brand { font-size: 14px; width: 100%; }
  nav.top .menu {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  nav.top .menu a { text-align: center; padding: 10px 6px; font-size: 12px; }
  header.bar { flex-direction: column; align-items: stretch; padding: 12px; gap: 10px; }
  header.bar .btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  header.bar .btns button { width: 100%; padding: 12px 10px; }
  .metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; width: 100%; }
  .periods { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 12px; }
  main.layout { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .settings { order: 2; }
  .scroll { max-height: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 720px; font-size: 11px; }
  .hero { padding: 24px 14px 40px; }
  .hero h1 { font-size: 24px; }
  .story-card { padding: 16px; }
  .cta-row a.btn { flex: 1 1 40%; text-align: center; padding: 12px 10px; }
  #proUnlockBar, #freePlanNote { margin: 10px 12px !important; }
  #proUnlockBar input { max-width: none !important; width: 100%; }
  .paywall { margin: 24px 12px; padding: 20px 16px; }
  .log { max-height: 180px; }

  body.page-haberler { height: auto; overflow: auto; }
  .haberler-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px 0;
  }
  .haberler-tabs button { padding: 11px 8px; font-size: 12px; }
  .haberler-tabs button.active { background: #0e3a2f; border-color: #166534; color: #bbf7d0; }
  .news-layout { grid-template-columns: 1fr; padding: 8px 10px 14px; gap: 10px; }
  .news-layout > .panel { display: none; min-height: 50vh; }
  .news-layout > .panel.mob-active { display: flex; }
  .symbol-list { display: none; }
  .news-layout > .symbol-list.mob-active { display: flex; }
  .chart-wrap { height: min(62vh, 520px); min-height: 280px; }
}

@media (min-width: 901px) {
  .haberler-tabs { display: none !important; }
}
@media (max-width: 480px) {
  nav.top .menu a { font-size: 11px; padding: 9px 4px; }
  .hero h1 { font-size: 22px; }
}


/* Floating X9 logo — sağ üst, menünün altı */
.x9-corner-logo {
  position: fixed;
  top: 118px;
  right: 28px;
  z-index: 25;
  width: 200px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: x9Float 3.6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 14px rgba(34,211,238,.85))
    drop-shadow(0 0 36px rgba(34,211,238,.55))
    drop-shadow(0 0 64px rgba(103,232,249,.35));
}
.x9-corner-glow {
  position: absolute;
  inset: -18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34,211,238,.55), transparent 62%),
    radial-gradient(circle at 30% 40%, rgba(255,255,255,.22), transparent 45%);
  animation: x9Pulse 2.2s ease-in-out infinite;
}
.x9-corner-svg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.x9-corner-text {
  animation: x9ShimmerHue 5s linear infinite;
}
.x9-corner-shine {
  position: absolute;
  z-index: 3;
  top: 0; left: -40%;
  width: 42%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent);
  transform: skewX(-18deg);
  animation: x9Sweep 2.4s ease-in-out infinite;
  border-radius: 4px;
  pointer-events: none;
}
.x9-corner-spark {
  position: absolute;
  z-index: 4;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 3px rgba(103,232,249,1), 0 0 22px rgba(34,211,238,.95);
  animation: x9Spark 1.8s ease-in-out infinite;
}
.x9-corner-spark.s1 { top: 4px; right: 18px; animation-delay: 0s; }
.x9-corner-spark.s2 { bottom: 12px; left: 22px; width: 5px; height: 5px; animation-delay: .55s; }
.x9-corner-spark.s3 { top: 22px; left: 10px; width: 6px; height: 6px; animation-delay: 1.1s; }
.x9-corner-spark.s4 { top: 8px; left: 48%; width: 4px; height: 4px; animation-delay: .3s; }
.x9-corner-spark.s5 { bottom: 6px; right: 28px; width: 5px; height: 5px; animation-delay: 1.4s; }

@keyframes x9Float {
  0%, 100% { transform: translateY(0) rotate(-2deg) scale(1); }
  50% { transform: translateY(-12px) rotate(2deg) scale(1.06); }
}
@keyframes x9Pulse {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
@keyframes x9Sweep {
  0% { left: -45%; opacity: 0; }
  15% { opacity: .9; }
  45% { left: 110%; opacity: 0; }
  100% { left: 110%; opacity: 0; }
}
@keyframes x9Spark {
  0%, 100% { opacity: .15; transform: scale(.6); }
  40% { opacity: 1; transform: scale(1.25); }
  70% { opacity: .4; transform: scale(.85); }
}
@keyframes x9ShimmerHue {
  0% { filter: hue-rotate(0deg) brightness(1); }
  50% { filter: hue-rotate(25deg) brightness(1.15); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}

@media (max-width: 700px) {
  .x9-corner-logo {
    top: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    right: 10px;
    width: 140px;
    height: 68px;
    opacity: .98;
  }
}
@media (prefers-reduced-motion: reduce) {
  .x9-corner-logo,
  .x9-corner-glow,
  .x9-corner-shine,
  .x9-corner-spark,
  .x9-corner-text { animation: none !important; }
}


/* Landing slogan — glow in place, no slide */
.x9-slogan {
  margin: 28px auto 8px;
  max-width: 920px;
  text-align: center;
  padding: 18px 16px 8px;
  position: relative;
}
.x9-slogan-line,
.x9-slogan-accent {
  display: block;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.25;
}
.x9-slogan-line {
  font-size: clamp(18px, 3.2vw, 26px);
  color: #e2e8f0;
  text-shadow: 0 0 18px rgba(34,211,238,.35);
  margin-bottom: 6px;
}
.x9-slogan-accent {
  font-size: clamp(22px, 4.2vw, 34px);
  background: linear-gradient(100deg, #a5f3fc 0%, #ffffff 40%, #22d3ee 70%, #67e8f9 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(34,211,238,.65)) drop-shadow(0 0 28px rgba(34,211,238,.35));
  animation: x9SloganGlow 2.6s ease-in-out infinite, x9SloganShimmer 4.5s linear infinite;
}
@keyframes x9SloganGlow {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(34,211,238,.5)) drop-shadow(0 0 22px rgba(34,211,238,.25)); opacity: .92; }
  50% { filter: drop-shadow(0 0 18px rgba(34,211,238,.95)) drop-shadow(0 0 40px rgba(103,232,249,.55)); opacity: 1; }
}
@keyframes x9SloganShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .x9-slogan-accent { animation: none; }
}

.x9-sound-chip {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  border: 1px solid rgba(34,211,238,.45);
  background: rgba(8,14,22,.88);
  color: #e0f2fe;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(34,211,238,.35);
  backdrop-filter: blur(8px);
  animation: x9Pulse 1.8s ease-in-out infinite;
}
.x9-sound-chip:hover { border-color: #67e8f9; color: #fff; }
.x9-sound-chip[hidden] { display: none !important; }

.auth-tabs[hidden], .auth-panel[hidden], #panelPurchase[hidden] { display: none !important; }
.auth-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:14px 0 10px; }
.auth-tab {
  background:#1a2430; color:var(--muted); border:1px solid var(--border);
  border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer;
}
.auth-tab.active { color:#bbf7d0; border-color:#166534; background:#0e3a2f; }
.auth-panel { margin-top:8px; }
.x9-sound-chip { display:none !important; }

.mexc-keys-panel {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(8,20,28,.9), rgba(10,16,24,.85));
}
.mexc-keys-panel input.inline-input { box-sizing: border-box; }

.news-feed-stamp {
  font-size: 11px; color: var(--muted); padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.news-foot {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin-top: 6px; font-size: 12px;
}
.news-dir {
  font-weight: 800; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.news-dir.bullish { color: #86efac; border-color: #166534; background: #052e1a; }
.news-dir.bearish { color: #fca5a5; border-color: #991b1b; background: #2a0f0f; }
.news-dir.neutral { color: #fde68a; border-color: #854d0e; background: #1c1405; }
.news-when { color: var(--muted); font-variant-numeric: tabular-nums; }

.settings-save-msg {
  display: inline-block;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  vertical-align: middle;
  min-width: 8em;
}
.settings-save-msg.ok { color: #86efac; }
.settings-save-msg.err { color: #fca5a5; }
.landing-auth-gate {
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: linear-gradient(160deg, rgba(8,20,28,.92), rgba(10,16,24,.9));
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.landing-auth-gate .inline-input { text-align: left; }

/* —— Günlük calendar (TradesViz-style) —— */
.gunluk-page { min-height: 100vh; }
.gunluk-bar { gap: 16px; }
.gunluk-mode-toggle {
  display: inline-flex; gap: 0; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--panel);
}
.gunluk-mode-toggle .mode-btn {
  padding: 8px 16px; color: var(--muted); font-weight: 700;
  border: none; border-right: 1px solid var(--border);
  text-decoration: none !important;
}
.gunluk-mode-toggle .mode-btn:last-child { border-right: none; }
.gunluk-mode-toggle .mode-btn:hover { color: var(--text); background: #182230; }
.gunluk-mode-toggle .mode-btn.active {
  background: #0e3a2f; color: #bbf7d0;
}
.gunluk-wrap { padding: 16px 18px 32px; max-width: 1200px; margin: 0 auto; }
.gunluk-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.gunluk-nav-btn {
  min-width: 40px; height: 40px; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.gunluk-today-btn { font-size: 13px; min-width: auto; padding: 8px 14px; }
.gunluk-month-label {
  font-size: 20px; font-weight: 800; min-width: 160px; text-align: center;
  letter-spacing: .3px;
}
.gunluk-month-pill {
  margin-left: auto;
  padding: 8px 14px; border-radius: 999px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #1e293b; border: 1px solid #334155; color: var(--text);
}
.gunluk-month-pill.pos { background: #052e1a; border-color: #166534; color: #86efac; }
.gunluk-month-pill.neg { background: #2a0f0f; border-color: #991b1b; color: #fca5a5; }

.gunluk-summary {
  display: grid; grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
@media (max-width: 900px) {
  .gunluk-summary { grid-template-columns: repeat(2, 1fr); }
  .gunluk-month-pill { margin-left: 0; }
}
.gunluk-sum-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.gunluk-sum-card .lbl {
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase;
}
.gunluk-sum-card .val { font-size: 16px; font-weight: 800; margin-top: 4px; }

.gunluk-msg {
  margin-bottom: 12px; padding: 10px 12px; border-radius: 8px;
  background: #1a2430; border: 1px solid var(--border); color: var(--muted);
}
.gunluk-msg.err { background: #3a1212; border-color: #991b1b; color: #fecaca; }

.cal-grid-head, .cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.cal-grid-head {
  margin-bottom: 6px;
}
.cal-grid-head > div {
  text-align: center; font-size: 11px; font-weight: 800;
  color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  padding: 4px 0;
}
.cal-day {
  min-height: 124px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #0f1620;
  padding: 8px 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
}
.cal-day.pad {
  background: transparent; border-color: transparent; min-height: 0;
}
.cal-day.empty {
  background: #0c1118; opacity: 0.72;
}
.cal-day.win { border-color: rgba(34,197,94,.45); }
.cal-day.loss { border-color: rgba(239,68,68,.45); }
.cal-day.flat { border-color: #334155; }
.cal-day.today {
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.55);
}
.cal-dom {
  font-size: 12px; font-weight: 800; color: var(--muted);
  align-self: flex-start;
}
.cal-day.today .cal-dom { color: var(--cyan); }
.cal-pnl {
  font-size: 15px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums; margin-top: 6px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cal-day { min-width: 0; overflow: hidden; }
.cal-pnl, .cal-pnl-sub, .cal-pct, .cal-meta, .cal-wl {
  overflow-wrap: break-word; word-break: normal; line-height: 1.2; max-width: 100%;
}
.cal-pct {
  font-size: 13px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.cal-pct.pos { color: #86efac; }
.cal-pct.neg { color: #fca5a5; }
.cal-pct.muted { color: #64748b; font-weight: 600; }
.sum-pct { font-size: 13px; font-weight: 700; white-space: nowrap; }
.sum-pct.pos { color: #86efac; }
.sum-pct.neg { color: #fca5a5; }
.cal-pnl.pos { color: #86efac; }
.cal-pnl.neg { color: #fca5a5; }
.cal-pnl-sub {
  font-size: 11px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.88);
}
.cal-pnl-sub.pos { color: #86efac; }
.cal-pnl-sub.neg { color: #fca5a5; }
.cal-pnl-sub.muted { color: #64748b; font-weight: 600; }
.cal-meta, .cal-wl {
  font-size: 11px; text-align: center; color: rgba(255,255,255,.88);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.cal-empty-hint {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #334155; font-size: 14px;
}
@media (max-width: 700px) {
  .cal-day { min-height: 88px; padding: 6px; }
  .cal-pnl { font-size: 12px; }
  .cal-pnl-sub { font-size: 9px; }
  .cal-pct { font-size: 11px; }
  .sum-pct { font-size: 11px; }
  .cal-meta, .cal-wl { font-size: 9px; }
  .gunluk-wrap { padding: 12px; }
  .cal-grid-head, .cal-grid { gap: 4px; }
}

/* Vivid PnL colors (Chrome dark mode / forced-dark fix) — 2026-10-03 */
:root { color-scheme: dark; --green: #2ee77a; --red: #ff4d4f; }
.pos, .neg,
.period-card .pct, .period-card .pnl.pos, .period-card .pnl.neg,
.cal-pnl.pos, .cal-pnl.neg, .cal-pct.pos, .cal-pct.neg, .cal-pnl-sub.pos, .cal-pnl-sub.neg,
.sum-pct.pos, .sum-pct.neg, .val.pos, .val.neg, .gunluk-month-pill.pos, .gunluk-month-pill.neg {
  opacity: 1 !important; filter: none !important; -webkit-text-fill-color: currentColor;
}
.pos, .period-card .pnl.pos, .cal-pnl.pos, .cal-pct.pos, .cal-pnl-sub.pos, .sum-pct.pos, .val.pos, .gunluk-month-pill.pos { color: #2ee77a !important; }
.neg, .period-card .pnl.neg, .cal-pnl.neg, .cal-pct.neg, .cal-pnl-sub.neg, .sum-pct.neg, .val.neg, .gunluk-month-pill.neg { color: #ff4d4f !important; }
.cal-day.win { border-color: rgba(46,231,122,.6); }
.cal-day.loss { border-color: rgba(255,77,79,.6); }
.period-card, .daily-panel, .cal-day:not(.empty) { opacity: 1; filter: none; }

/* Stats side frame (2026-10-17): border + very light tint by net open direction (LONG green / SHORT red / flat gray).
   Text colors untouched; alpha tint stays readable in Chrome dark / forced-dark. */
.sx-box { border: 1.5px solid rgba(148,163,184,.45) !important; background-color: rgba(148,163,184,.05) !important;
  border-radius: 10px; padding: 8px 10px; box-sizing: border-box; filter: none !important; opacity: 1 !important;
  transition: border-color .3s, background-color .3s; }
.sx-box.sx-long { border-color: rgba(46,231,122,.75) !important; background-color: rgba(46,231,122,.07) !important; }
.sx-box.sx-short { border-color: rgba(255,77,79,.75) !important; background-color: rgba(255,77,79,.07) !important; }

/* Stats L/S/BTC line + phone fit (2026-10-18) */
.sx-line { flex: 1 1 100%; width: 100%; font-size: 13px; font-weight: 700; letter-spacing: .02em; padding: 2px 0 4px; white-space: nowrap; }
.sx-line .pos { color: #2ee77a !important; } .sx-line .neg { color: #ff4d4f !important; }
.sx-box, .sx-box * { min-width: 0; }
.sx-box { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  header.bar .metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 10px !important; width: 100% !important; }
  .sx-line { grid-column: 1 / -1; font-size: 12px; }
  .sx-box { padding: 6px 7px; }
  .sx-box .val, .sx-box .v { font-size: 13px !important; }
  .sx-box .lbl, .sx-box .l { font-size: 10px !important; }
  #dailyPanel > *:not(.daily-head) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px 10px !important; }
  #periodCards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  #periodCards > * { padding: 7px !important; }
  #tradeStats, #posFeeStats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
}

/* Header order (2026-10-18): buttons (+ Başlangıç sermayesi) first, then title/status, then stats box right above GÜNLÜK */
header.bar > .btns { order: -1; flex: 1 1 100%; justify-content: flex-start; }
header.bar > div:not(.btns):not(.metrics) { order: 0; }
header.bar > .metrics { order: 1; }
@media (min-width: 901px) { header.bar > .metrics { flex: 1 1 100%; } }