/* ══════════════════════════════════════════════════════════════
   site.css — Landing kurumsal tema katmanı (koyu varsayılan + açık)
   main.css, landing.css ve blog.css'den SONRA yalnızca landing.html'de yüklenir.
   Palet: #0B1220 lacivert zemin · #2563EB ana mavi · #22D3EE tek vurgu.
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;
  --ink: #E8EEF8;
  --ink-2: #9DAAC0;
  --ink-3: #7F8CA3;
  --bg: #0B1220;
  --bg-alt: #0D1526;
  --panel: #101A2D;
  --panel-2: #15213A;
  --edge: rgba(148, 163, 184, 0.16);
  --edge-2: rgba(148, 163, 184, 0.30);
  --brand: #2563EB;
  --brand-hover: #1D4ED8;
  --brand-text: #7FA8FF;
  --cyan: #22D3EE;
  --cyan-text: #22D3EE;
  --ok: #34D399; --ok-tint: rgba(52, 211, 153, 0.12);
  --warn: #FB923C; --crit: #F87171;
  --glow: rgba(37, 99, 235, 0.22);
  --dot: rgba(148, 163, 184, 0.14);
  --c-info: #4F8CFF; --c-crit: #F87171; --c-warn: #FB923C; --c-ok: #34D399; --c-cyan: #22D3EE;
  --chart-grid: rgba(148, 163, 184, 0.12); --chart-text: #8493AB; --chart-ink: #E8EEF8; --chart-empty: rgba(148, 163, 184, 0.16);
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* main.css token'ları (eski bileşenler) */
  --bg-primary: var(--bg); --bg-secondary: var(--bg-alt); --bg-tertiary: var(--panel);
  --bg-card: var(--panel); --bg-card-hover: var(--panel-2); --bg-elevated: var(--panel-2);
  --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-3);
  --border-subtle: var(--edge); --border-default: var(--edge); --border-strong: var(--edge-2);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #0B1220; --ink-2: #475569; --ink-3: #64748B;
  --bg: #F4F7FB; --bg-alt: #EAF0F8; --panel: #FFFFFF; --panel-2: #F8FAFD;
  --edge: #E2E8F0; --edge-2: #CBD5E1;
  --brand-text: #1D4ED8; --cyan-text: #0E7490;
  --ok: #15803D; --ok-tint: #E4F5EA; --warn: #C2410C; --crit: #DC2626;
  --glow: rgba(37, 99, 235, 0.12); --dot: rgba(15, 23, 42, 0.10);
  --c-info: #2563EB; --c-crit: #DC2626; --c-warn: #C2410C; --c-ok: #15803D; --c-cyan: #0891B2;
  --chart-grid: rgba(15, 23, 42, 0.08); --chart-text: #64748B; --chart-ink: #0B1220; --chart-empty: #E2E8F0;
}

body { background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; }
.mono { font-family: var(--mono); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Sayfa zemini: nokta deseni + üstte yumuşak mavi parıltı */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(1100px 460px at 50% -120px, var(--glow), transparent 70%), radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: auto, 24px 24px;
}

/* ── Navbar / footer ── */
.navbar { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--edge); box-shadow: none; padding: 0 clamp(16px, 4vw, 60px); }
.navbar.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); }
.nav-logo { color: var(--ink); }
.nav-links { background: var(--panel); border: 1px solid var(--edge); }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); background: var(--panel-2); }
.navbar .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--edge-2); }
.navbar .btn-secondary:hover { background: var(--panel); color: var(--ink); border-color: var(--cyan); box-shadow: none; }
.footer { background: var(--bg-alt); border-top: 1px solid var(--edge); }
.footer a:hover { color: var(--ink) !important; }

.theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--edge-2); background: transparent; color: var(--ink-2); cursor: pointer; }
.theme-toggle:hover { color: var(--ink); border-color: var(--cyan); }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }

/* ── Düğmeler ── */
.btn-primary { background: var(--brand); color: #fff; border-radius: 8px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 20px -8px var(--brand); font-weight: 600; }
.btn-primary:hover { background: var(--brand-hover); box-shadow: 0 8px 26px -8px var(--brand); transform: translateY(-1px); }
.btn-primary::before { display: none; }
.btn-secondary { border-radius: 8px; background: var(--panel); color: var(--ink); border: 1px solid var(--edge-2); }
.btn-secondary:hover { background: var(--panel-2); color: var(--ink); border-color: var(--cyan); box-shadow: none; }

/* ── Hero ── */
.hero2 { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px) 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; }
@media (min-width: 1080px) { .hero2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px; border: 1px solid var(--edge-2); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: 12.5px; font-weight: 500; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2); }
.hero2-title { margin: 20px 0 18px; font-size: clamp(34px, 5vw, 58px); line-height: 1.06; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.hero2-title span { background: linear-gradient(100deg, var(--brand-text), var(--cyan-text)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero2-sub { max-width: 54ch; font-size: 17px; line-height: 1.65; color: var(--ink-2); margin: 0 0 28px; }
.hero2-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero2-cta .btn-primary, .hero2-cta .btn-secondary { font-size: 15px; padding: 13px 24px; }
.hero2-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 24px 0 0; color: var(--ink-2); font-size: 13.5px; }
.hero2-points li { display: inline-flex; align-items: center; gap: 7px; }
.hero2-points svg { width: 15px; height: 15px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Ürün önizleme çerçevesi */
.hero2-shot { border: 1px solid var(--edge-2); border-radius: 12px; background: var(--panel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; overflow: hidden; position: relative; min-width: 0; }
.hero2-shot::after { content: ''; position: absolute; inset: auto 0 0 0; height: 90px; background: linear-gradient(transparent, var(--panel)); pointer-events: none; }
:root[data-theme="light"] .hero2-shot { box-shadow: 0 40px 80px -36px rgba(15, 23, 42, 0.28); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--edge); background: var(--panel-2); }
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--edge-2); }
.shot-bar .mono { margin-left: 10px; font-size: 11.5px; color: var(--ink-3); }
.shot-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 330px; }
.shot-side { border-right: 1px solid var(--edge); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink-2); background: color-mix(in srgb, var(--bg) 40%, var(--panel)); }
.shot-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--ink); padding: 2px 8px 12px; }
.shot-side span { padding: 7px 8px; border-radius: 6px; }
.shot-side span.on { background: rgba(37, 99, 235, 0.18); color: var(--ink); box-shadow: inset 2px 0 0 var(--cyan); }
.shot-main { padding: 14px; min-width: 0; }
.shot-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.shot-kpi { border: 1px solid var(--edge); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); min-width: 0; }
.shot-kpi .lbl { font-size: 11px; color: var(--ink-2); }
.shot-kpi .lbl small { color: var(--ink-3); margin-left: 4px; }
.shot-kpi .val { font-size: 22px; font-weight: 600; margin: 4px 0 2px; color: var(--ink); }
.shot-kpi canvas { width: 100%; height: 36px; display: block; }
.shot-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; padding: 3px 8px; border-radius: 6px; background: var(--ok-tint); color: var(--ok); font-size: 11px; font-weight: 500; }
.shot-chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.shot-chart { border: 1px solid var(--edge); border-radius: 8px; padding: 12px; background: var(--panel-2); }
.shot-chart-head { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.shot-chart-head small { font-weight: 400; color: var(--ink-3); margin-left: 6px; }
.dash-chart-wrap { position: relative; height: 170px; }
.dash-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.dash-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 12px; color: var(--ink-3); }
.dash-state b { color: var(--ink); font-size: 13px; font-weight: 600; }
.dash-tip { display: none; }
@media (max-width: 640px) { .shot-body { grid-template-columns: 1fr; } .shot-side { display: none; } .shot-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shot-kpi:nth-child(3) { display: none; } }

/* ── Güven şeridi ── */
.trust-strip { max-width: 1240px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 32px; display: grid; gap: 22px; }
.trust-row { display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap; padding: 18px 22px; border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); }
.trust-label { flex: 0 0 auto; min-width: 190px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; }
.trust-cust { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border: 1px solid var(--edge-2); border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.trust-cust b { font-weight: 600; color: var(--ink); }
.trust-cust span { font-size: 12px; color: var(--ink-3); }
.provider-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; justify-content: flex-start; }
.provider-chip { background: var(--panel-2); border: 1px solid var(--edge-2); color: var(--ink-2); border-radius: 8px; font-size: 13.5px; font-weight: 500; }
.provider-chip:hover { border-color: var(--cyan); color: var(--ink); }
.provider-logo { filter: none; }

/* ── Rakamlar ── */
.numbers { padding-top: 24px; padding-bottom: 24px; }
.numbers-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border: 1px solid var(--edge); border-radius: 12px; background: var(--panel); overflow: hidden; }
.num-cell { padding: 28px 24px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); margin: 0 -1px -1px 0; }
.num-val { font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.num-lbl { margin-top: 6px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }

/* ── Bölümler ── */
.section { max-width: none; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
.section > *:not(div[style]) { max-width: 1240px; margin-left: auto; margin-right: auto; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.section-tag { display: block; text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan-text); background: none; border: 0; padding: 0; }
.section-h2 { color: var(--ink); font-weight: 700; letter-spacing: -0.03em; }
.section-desc { color: var(--ink-2); }
.feat-grid, .plan-grid, .how-grid, .faq-list, .sec-grid { max-width: 1240px; margin-left: auto; margin-right: auto; }

.feat-card, .plan-card, .faq-item, .sec-item { background: var(--panel); border: 1px solid var(--edge); border-radius: 12px; box-shadow: none; }
.feat-card:hover, .plan-card:hover { border-color: var(--edge-2); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.5); transform: translateY(-2px); }
.feat-card::after { display: none; }
.feat-card::before, .plan-card::before { background: linear-gradient(90deg, transparent, var(--cyan), transparent); height: 1px; }
.feat-icon { background: rgba(37, 99, 235, 0.14); color: var(--brand-text); border: 1px solid rgba(37, 99, 235, 0.25); border-radius: 10px; box-shadow: none; }
.feat-card:hover .feat-icon { background: rgba(37, 99, 235, 0.2); box-shadow: none; transform: none; }
.feat-title, .plan-name, .how-title, .faq-item summary { color: var(--ink); font-weight: 600; }
.feat-desc, .how-desc, .plan-features li, .faq-item p { color: var(--ink-2); }
.how-num { background: var(--panel); border: 1px solid var(--edge-2); color: var(--cyan-text); font-family: var(--mono); box-shadow: none; }
.how-grid::before { background: var(--edge-2); }
.plan-card.featured { border-color: var(--brand); background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, var(--panel)), var(--panel) 60%); }
.plan-badge { background: var(--brand); color: #fff; }
.plan-price { color: var(--ink); font-family: var(--mono); font-weight: 600; letter-spacing: -0.03em; }
.plan-price span { color: var(--ink-3); }
.plan-features li { border-color: var(--edge); }
.faq-item summary:hover { color: var(--brand-text); }
.cta-section { background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 16%, var(--bg-alt)), var(--bg-alt) 70%); border-color: var(--edge); }
.cta-section::before { background: radial-gradient(ellipse, var(--glow), transparent 70%); }
.cta-section p { color: var(--ink-2) !important; }

/* Platform güvenliği */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 36px; }
@media (min-width: 1000px) { .sec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-item { padding: 22px; display: grid; gap: 6px; align-content: start; }
.sec-item svg { width: 22px; height: 22px; fill: none; stroke: var(--cyan-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.sec-item b { font-weight: 600; font-size: 15px; color: var(--ink); }
.sec-item span { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }

/* Blog kartları (blog.css sabit renklerini tema değişkenlerine bağla) */
.bl-card, [class^="bl-"][class*="card"] { background: var(--panel); border-color: var(--edge); }
.bl-h1, .bl-h2 { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left { opacity: 1; transform: none; transition: none; }
  .feat-card, .btn-primary { transition: none; }
}

.mobile-menu-btn { color: var(--ink); }
@media (max-width: 900px) { .nav-links, .nav-actions { background: var(--bg-alt); border-color: var(--edge); } }

/* Sabit tema düğmesi: gezinti çubuğu olmayan sayfalar (giriş, kayıt, hata) */
.theme-fab { position: fixed; top: 16px; right: 16px; z-index: 1100; background: var(--panel); }
body:has(.navbar) .theme-fab { display: none; }

.discount-badge { background: var(--ok-tint) !important; color: var(--ok) !important; }