/* ==========================================================================
   landing.css — oturum açmadan görülen tanıtım sayfası.
   app.css'in token'larını kullanır (renk/tema/tipografi oradan gelir);
   burada yalnızca tanıtım düzeni ve grafik stilleri var.
   Grafik renkleri: veri-görselleştirme paletinden seçildi ve iki modda da
   doğrulandı (mavi↔turuncu kategorik; kırmızı↔gri↔mavi kutuplaşma).
   ========================================================================== */

:root,
html[data-theme="light"]{
  --viz-pos:#2a78d6;      /* olumlu / destek */
  --viz-neg:#e34948;      /* olumsuz / öfke */
  --viz-neu:#c9c8c4;      /* nötr (kutuplaşmanın orta noktası) */
  --viz-b:#eb6834;        /* kıyasta ikinci seri */
  --viz-grid:rgba(15,23,42,.10);
  --viz-on-fill:#ffffff;  /* renkli dilim üzerindeki değer yazısı */
  --viz-on-neu:#1f2937;   /* nötr (gri) dilim üzerindeki değer yazısı */
}
html[data-theme="dark"]{
  --viz-pos:#3987e5;
  --viz-neg:#e66767;
  --viz-neu:#5c5b57;
  --viz-b:#d95926;
  --viz-grid:rgba(226,232,240,.12);
  /* Koyu temada seriler açık tonda: üzerine beyaz değil KOYU yazı okunur olur */
  --viz-on-fill:#0b1220;
  --viz-on-neu:#f1f5f9;
}

/* ── Üst çubuk ──────────────────────────────────────────────────────────── */
.lp-nav{
  position:sticky;top:0;z-index:80;
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;
  background:var(--surface);
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.lp-nav .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--text);text-decoration:none;}
.lp-nav .brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 12px var(--glow);
}
.lp-nav .brand span{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lp-nav .links{display:flex;gap:4px;margin-left:18px;}
.lp-nav .links a{
  padding:7px 12px;border-radius:8px;font-size:.84rem;font-weight:500;
  color:var(--subtle);text-decoration:none;
}
.lp-nav .links a:hover{background:var(--card2);color:var(--text);}
.lp-nav .spacer{flex:1;}

/* ── Bölüm iskeleti ─────────────────────────────────────────────────────── */
.lp-section{max-width:1140px;margin:0 auto;padding:72px 24px;}
.lp-section.tight{padding-top:44px;}
.lp-head{text-align:center;max-width:640px;margin:0 auto 40px;}
.lp-head h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.5px;margin-bottom:10px;}
.lp-head p{color:var(--subtle);font-size:1rem;}
.lp-alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.lp-hero{
  position:relative;max-width:1140px;margin:0 auto;
  padding:64px 24px 40px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.lp-hero::before{
  content:'';position:absolute;inset:-40px -10% auto;height:420px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,var(--glow) 0%,transparent 68%);
}
.lp-hero .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-soft);border:1px solid var(--accent-line);
  border-radius:99px;padding:5px 15px;font-size:.75rem;font-weight:600;color:var(--accent-text);
  margin-bottom:18px;
}
.lp-hero h1{
  font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800;line-height:1.1;letter-spacing:-1.2px;
  margin-bottom:16px;
  background:var(--heading-grad);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.lp-hero p.lead{color:var(--subtle);font-size:1.05rem;line-height:1.65;margin-bottom:26px;}
.lp-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
.btn-lg{padding:14px 26px;font-size:.95rem;}
.lp-note{margin-top:16px;font-size:.78rem;color:var(--muted);line-height:1.6;}

/* ── İki rapor türü ─────────────────────────────────────────────────────── */
.rep-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.rep-card{
  background:var(--card);border:1px solid var(--border);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:12px;
}
.rep-top{display:flex;align-items:center;gap:14px;}
.rep-top .ico{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);font-size:1.25rem;
}
.rep-top h3{font-size:1.15rem;font-weight:800;letter-spacing:-.3px;}
.rep-badge{
  display:inline-block;margin-top:3px;font-size:.68rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--accent-text);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:99px;padding:2px 10px;
}
.rep-card > p{color:var(--subtle);font-size:.92rem;line-height:1.65;}
.rep-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:2px;}
.rep-list li{
  position:relative;padding-left:24px;color:var(--text);font-size:.87rem;line-height:1.5;
}
.rep-list li::before{
  content:'✓';position:absolute;left:0;top:0;
  color:var(--accent-text);font-weight:800;font-size:.85rem;
}

/* ── Kartlar ────────────────────────────────────────────────────────────── */
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;}
.lp-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.lp-card:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:var(--shadow);}
.lp-card .ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);font-size:1.05rem;
}
.lp-card h3{font-size:1rem;font-weight:700;}
.lp-card p{color:var(--subtle);font-size:.88rem;line-height:1.6;}

/* Adımlar */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step;}
.lp-step{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;}
.lp-step .n{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  font-weight:800;font-size:.85rem;margin-bottom:12px;
}
.lp-step h3{font-size:.98rem;font-weight:700;margin-bottom:6px;}
.lp-step p{color:var(--subtle);font-size:.87rem;line-height:1.6;}

/* ── Grafik kartları ────────────────────────────────────────────────────── */
.viz-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.viz-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 22px;
}
.viz-card .viz-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;}
.viz-card h3{font-size:.92rem;font-weight:700;}
.viz-tag{
  font-size:.65rem;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--border);border-radius:99px;padding:2px 9px;white-space:nowrap;
}
.viz-card svg{width:100%;height:auto;display:block;overflow:visible;}
.viz-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:.75rem;color:var(--subtle);}
.viz-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;}
.viz-note{margin-top:10px;font-size:.76rem;color:var(--muted);}
.viz-txt{fill:var(--subtle);font-size:11px;font-family:'Inter',sans-serif;}
.viz-txt.val{fill:var(--text);font-weight:600;font-variant-numeric:tabular-nums;}
.viz-txt.dim{fill:var(--muted);}
.viz-txt.on-fill{fill:var(--viz-on-fill);font-weight:600;}
.viz-txt.on-neu{fill:var(--viz-on-neu);font-weight:600;}
.viz-axis{stroke:var(--viz-grid);stroke-width:1;}

/* Risk kartı (kadran + bileşenler) */
.risk-num{font-size:2.4rem;font-weight:800;letter-spacing:-1px;fill:var(--text);}
.risk-comp{display:flex;flex-direction:column;gap:9px;margin-top:6px;}
.risk-comp .row{display:flex;align-items:center;gap:10px;font-size:.79rem;color:var(--subtle);}
.risk-comp .row .nm{flex:0 0 132px;}
.risk-comp .row .track{flex:1;display:block;height:7px;border-radius:99px;background:var(--card2);overflow:hidden;}
/* .fill satır içi span: display:block olmadan yükseklik uygulanmaz (çubuk boş görünür) */
.risk-comp .row .fill{display:block;height:100%;border-radius:99px;background:var(--viz-neg);}
.risk-comp .row .v{flex:0 0 38px;text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;}

/* ── SSS ───────────────────────────────────────────────────────────────── */
.lp-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.lp-faq details{
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;
}
.lp-faq summary{
  cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.lp-faq summary::-webkit-details-marker{display:none;}
.lp-faq summary::after{content:'+';color:var(--muted);font-size:1.1rem;font-weight:400;}
.lp-faq details[open] summary::after{content:'−';}
.lp-faq p{color:var(--subtle);font-size:.88rem;line-height:1.65;margin-top:10px;}

/* ── Kapanış çağrısı ────────────────────────────────────────────────────── */
.lp-cta{
  max-width:1140px;margin:0 auto 72px;padding:44px 24px;text-align:center;
  background:linear-gradient(135deg,var(--accent-soft),transparent);
  border:1px solid var(--accent-line);border-radius:20px;
}
.lp-cta h2{font-size:clamp(1.35rem,3vw,1.9rem);font-weight:800;margin-bottom:10px;}
.lp-cta p{color:var(--subtle);margin-bottom:22px;}

.lp-footer{
  border-top:1px solid var(--border);padding:26px 24px 40px;text-align:center;
  color:var(--muted);font-size:.78rem;
}
.lp-footer a{color:var(--muted);margin:0 8px;}
.lp-footer a:hover{color:var(--accent-text);}

/* ── Duyarlılık ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:32px;padding-top:40px;}
  .rep-grid{grid-template-columns:1fr;}
  .viz-grid{grid-template-columns:1fr;}
  .lp-steps{grid-template-columns:1fr;}
  .lp-nav .links{display:none;}
}
@media (max-width:720px){
  .lp-section{padding:48px 16px;}
  .lp-hero{padding:32px 16px 24px;}
  .lp-nav{padding:10px 12px;gap:8px;}
  .lp-nav .brand span{display:none;}
  .lp-cta-row .btn{flex:1 1 100%;justify-content:center;}
  .risk-comp .row .nm{flex:0 0 96px;font-size:.74rem;}
  .lp-cta{margin:0 16px 48px;padding:32px 18px;}
}