/* TradeLabX tanıtım sayfası (renkler ui.css değişkenlerinden; açık / koyu tema) */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: rgb(var(--x-acc-t)); text-decoration: none; }
a:hover { color: rgb(var(--x-text)); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid rgb(var(--x-acc)); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { margin: 0; color: rgb(var(--x-text)); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
.lp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-mono { font-family: var(--font-mono); }
.lp-muted { color: rgb(var(--x-muted)); }
.lp-pos { color: rgb(var(--x-pos-t)); }
.lp-neg { color: rgb(var(--x-neg-t)); }
.lp-skip { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: rgb(var(--x-acc)); color: #fff; border-radius: 6px; z-index: 50; }
.lp-skip:focus { left: 8px; color: #fff; }

/* Üst çubuk */
.lp-top { position: sticky; top: 0; z-index: 20; background: rgb(var(--x-bg2)); border-bottom: 1px solid rgb(var(--x-line)); }
.lp-top-in { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: rgb(var(--x-text)); font-weight: 600; font-size: 17px; }
.lp-brand:hover { color: rgb(var(--x-text)); }
.lp-mark { width: 28px; height: 28px; border-radius: 7px; background: rgb(var(--x-acc)); display: grid; place-items: center; }
.lp-mark svg { width: 18px; height: 18px; }
.lp-links { display: flex; gap: 4px; }
.lp-links a { padding: 8px 12px; border-radius: 6px; color: rgb(var(--x-muted)); font-weight: 500; font-size: 15px; }
.lp-links a:hover { color: rgb(var(--x-text)); background: rgb(var(--x-surface2)); }
.lp-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.lp-lang { display: flex; border: 1px solid rgb(var(--x-line2)); border-radius: 6px; overflow: hidden; }
.lp-lang button { height: 34px; padding: 0 10px; border: 0; background: transparent; color: rgb(var(--x-muted)); font: 600 12px var(--font-body); cursor: pointer; }
.lp-lang button.active { background: rgb(var(--x-surface2)); color: rgb(var(--x-text)); }
.lp-signin { padding: 8px 10px; color: rgb(var(--x-text)); font-weight: 500; }

/* Düğmeler */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.lp-btn-lg { height: 48px; padding: 0 22px; font-size: 16px; }
.lp-btn-block { display: flex; width: 100%; height: 46px; }
.lp-btn-pri { background: rgb(var(--x-acc)); color: #fff; }
.lp-btn-pri:hover { background: rgb(var(--x-acc) / 0.88); color: #fff; }
.lp-btn-sec { border: 1px solid rgb(var(--x-line2)); color: rgb(var(--x-text)); }
.lp-btn-sec:hover { background: rgb(var(--x-surface2)); color: rgb(var(--x-text)); }

/* Giriş bölümü */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 72px; }
.lp-hero-text { display: flex; flex-direction: column; gap: 22px; }
.lp-eyebrow { align-self: flex-start; padding: 4px 12px; border-radius: 999px; border: 1px solid rgb(var(--x-acc) / 0.45); color: rgb(var(--x-acc-t)); font-size: 13px; font-weight: 500; }
.lp-hero h1 { font-size: clamp(32px, 4.2vw, 48px); line-height: 1.12; text-wrap: balance; }
.lp-lead { font-size: 18px; color: rgb(var(--x-muted)); max-width: 560px; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.lp-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: rgb(var(--x-muted)); }
.lp-ticks li::before { content: '✓ '; color: rgb(var(--x-pos-t)); }

.lp-preview { margin: 0; background: rgb(var(--x-surface)); border: 1px solid rgb(var(--x-line)); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgb(var(--x-shade) / 0.18); }
.lp-prev-head { display: flex; align-items: center; gap: 10px; }
.lp-pill { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.lp-pill-long { background: rgb(var(--x-pos) / 0.14); color: rgb(var(--x-pos-t)); }
.lp-score { margin-left: auto; font-family: var(--font-mono); font-size: 20px; }
.lp-score small { font-size: 12px; color: rgb(var(--x-muted2)); }
.lp-prev-chart { height: 220px; background: rgb(var(--x-bg2)); border: 1px solid rgb(var(--x-line)); border-radius: 8px; overflow: hidden; }
.lp-chart { width: 100%; height: 100%; display: block; }
.lp-chart .u { stroke: rgb(var(--x-pos)); fill: rgb(var(--x-pos)); }
.lp-chart .d { stroke: rgb(var(--x-neg)); fill: rgb(var(--x-neg)); }
.lp-chart line.u, .lp-chart line.d { stroke-width: 1; }
.lp-chart .lv { stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.lp-chart .tp { stroke: rgb(var(--x-pos-t)); } .lp-chart .en { stroke: rgb(var(--x-acc-t)); } .lp-chart .sl { stroke: rgb(var(--x-neg-t)); }
.lp-prev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; font-size: 12px; color: rgb(var(--x-muted)); }
.lp-prev-grid div { display: flex; flex-direction: column; }
.lp-prev-grid b { font-size: 14px; font-weight: 500; color: rgb(var(--x-text)); }
.lp-prev-grid b.lp-neg { color: rgb(var(--x-neg-t)); } .lp-prev-grid b.lp-pos { color: rgb(var(--x-pos-t)); }
.lp-preview figcaption { font-size: 12px; color: rgb(var(--x-muted2)); }

/* Bölümler */
.lp-band { background: rgb(var(--x-bg2)); border-top: 1px solid rgb(var(--x-line)); border-bottom: 1px solid rgb(var(--x-line)); }
.lp-sec { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 36px; }
.lp-sec-head { max-width: 680px; display: flex; flex-direction: column; gap: 10px; }
.lp-sec-head h2 { font-size: clamp(26px, 3vw, 32px); }
.lp-sec-head p { color: rgb(var(--x-muted)); font-size: 17px; }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-card { background: rgb(var(--x-surface)); border: 1px solid rgb(var(--x-line)); border-radius: 10px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-num { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: rgb(var(--x-surface2)); color: rgb(var(--x-acc-t)); font-family: var(--font-mono); font-weight: 500; }
.lp-card h3 { font-size: 18px; }
.lp-card p { color: rgb(var(--x-muted)); }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.lp-steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 2px solid rgb(var(--x-acc)); }
.lp-step-n { font-family: var(--font-mono); font-size: 13px; color: rgb(var(--x-acc-t)); }
.lp-steps h3 { font-size: 20px; }
.lp-steps p { color: rgb(var(--x-muted)); }

.lp-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 860px; }
.lp-plan { background: rgb(var(--x-surface)); border: 1px solid rgb(var(--x-line)); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.lp-plan-hl { border: 2px solid rgb(var(--x-acc)); }
.lp-plan h3 { font-size: 20px; display: flex; align-items: center; gap: 10px; }
.lp-badge { padding: 2px 10px; border-radius: 999px; background: rgb(var(--x-acc)); color: #fff; font-size: 12px; font-weight: 600; }
.lp-price { display: flex; align-items: baseline; gap: 8px; min-height: 44px; }
.lp-price b { font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: rgb(var(--x-text)); }
.lp-price span { color: rgb(var(--x-muted)); font-size: 17px; }
.lp-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lp-plan li { display: flex; gap: 10px; }
.lp-plan li::before { content: '✓'; color: rgb(var(--x-pos-t)); }

.lp-faq { max-width: 880px; gap: 0; }
.lp-faq .lp-sec-head { margin-bottom: 20px; }
.lp-faq details { border-bottom: 1px solid rgb(var(--x-line)); }
.lp-faq details:first-of-type { border-top: 1px solid rgb(var(--x-line)); }
.lp-faq summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 500; color: rgb(var(--x-text)); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; margin-left: auto; color: rgb(var(--x-muted)); font-size: 20px; }
.lp-faq details[open] summary::after { content: '−'; }
.lp-faq details p { padding: 0 0 18px; color: rgb(var(--x-muted)); max-width: 740px; }

.lp-final { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 64px; padding-bottom: 64px; }
.lp-final > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.lp-final h2 { font-size: 28px; }

.lp-foot { padding: 32px 0 40px; font-size: 13px; color: rgb(var(--x-muted)); }
.lp-foot .lp-wrap { display: flex; flex-direction: column; gap: 16px; }
.lp-risk { max-width: 980px; color: rgb(var(--x-muted2)); }
.lp-risk b { color: rgb(var(--x-text2)); }
.lp-foot-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.lp-foot-row a { color: rgb(var(--x-muted)); }

@media (max-width: 960px) {
    .lp-links { display: none; }
    .lp-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
    .lp-grid3, .lp-steps { grid-template-columns: 1fr; }
    .lp-plans { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .lp-wrap { padding: 0 16px; }
    .lp-top-in { gap: 10px; min-height: 60px; }
    .lp-brand span:last-child { font-size: 16px; }
    .lp-actions { gap: 6px; }
    .lp-hide-sm { display: none; }
    .lp-signin { padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border: 1px solid rgb(var(--x-line2)); border-radius: 6px; font-size: 14px; }
    .lp-hero { padding-top: 32px; padding-bottom: 40px; }
    .lp-lead { font-size: 16px; }
    .lp-cta .lp-btn { flex: 1 1 100%; }
    .lp-prev-chart { height: 160px; }
    .lp-sec { padding-top: 48px; padding-bottom: 48px; gap: 24px; }
    .lp-card { padding: 18px; }
}