/* ══════════════════════════════════════════════════════════════════════════
   land.css — tanıtım sayfası
   ──────────────────────────────────────────────────────────────────────────
   Panelin paletini ve tipografisini AYNEN kullanır (bkz. /DESIGN.md).
   Tanıtım sayfasının başka görünmesi için bir sebep yok: aynı ürün, ve
   kullanıcı panele girdiğinde sayfa değiştirdiğini fark etmemeli.

   SERT KURALLAR (panelle aynı):
     · box-shadow YOK. Derinlik = 1px sınır + zemin ton farkı.
     · Jenerik parlak AI turkuazı yok.
     · Gradyan yok. (Tek istisna: kahraman bölümünün zemini iki ton arası
       çok hafif bir geçiş — ve o bile düz renge düşebilir.)
     · Sayısal her şey IBM Plex Mono.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#fbfaf7; --surface:#ffffff; --ink:#1a1917; --muted:#6e6a62;
  --border:#e4e1da; --border-2:#cdc8bd; --hover:#f2efe9;
  --primary:#15496b; --primary-d:#0f3a57;
  --natm:#0f766e; --tbm:#15496b;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-shadow:none !important}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.ld-wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── Üst bar ───────────────────────────────────────────────────────────── */
.ld-hdr{
  position:sticky; top:0; z-index:20;
  background:rgba(251,250,247,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.ld-hdr-in{display:flex; align-items:center; justify-content:space-between; height:58px; gap:20px}
.ld-logo{display:flex; align-items:baseline; gap:8px; text-decoration:none}
.ld-logo:hover{text-decoration:none}
.ld-logo img{height:22px; width:auto; display:block}
.ld-logo-tx{font-weight:600; font-size:17px; color:var(--ink)}
/* "Plan" alt etiketi: ürünün adı, kurumsal adın yanında ikinci sırada. */
.ld-logo-sub{
  font-size:12px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.09em;
  border-left:1px solid var(--border-2); padding-left:8px;
}
.ld-nav{display:flex; align-items:center; gap:20px; font-size:13.5px}
.ld-nav a{color:var(--muted)}
.ld-nav a:hover{color:var(--ink); text-decoration:none}
.ld-lang{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  border:1px solid var(--border-2); border-radius:4px; padding:2px 7px;
}

.ld-btn{
  display:inline-block; padding:9px 18px; border-radius:5px;
  background:var(--primary); color:#fff; font-size:14px; font-weight:500;
  border:1px solid var(--primary); text-decoration:none;
}
.ld-btn:hover{background:var(--primary-d); border-color:var(--primary-d); text-decoration:none}
.ld-btn.sm{padding:6px 13px; font-size:13px}
.ld-btn.ghost{background:transparent; color:var(--primary); border-color:var(--border-2)}
.ld-btn.ghost:hover{background:var(--hover); border-color:var(--primary)}

/* ── Kahraman ──────────────────────────────────────────────────────────── */
.ld-hero{border-bottom:1px solid var(--border); background:var(--surface)}
.ld-hero-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:48px; align-items:center; padding:56px 24px 60px;
}
.ld-kicker{
  margin:0 0 14px; font-size:11.5px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.09em;
}
.ld-hero h1{
  margin:0 0 16px; font-size:38px; line-height:1.18; font-weight:600;
  letter-spacing:-.018em; color:var(--ink);
}
.ld-lead{margin:0 0 22px; font-size:16px; color:var(--muted); max-width:52ch}
.ld-acts{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 12px}
.ld-note{margin:0; font-size:12.5px; color:var(--muted)}

/* ── Zaman–zinciraj çizimi ─────────────────────────────────────────────── */
.ld-fig{margin:0}
.ld-fig svg{
  display:block; width:100%; height:auto;
  border:1px solid var(--border); border-radius:6px; background:var(--bg);
}
.ld-fig .g{stroke:#eeece6; stroke-width:1}
.ld-fig .gs{stroke:#ddd8ce; stroke-width:1}
.ld-fig .n{font-size:9px; fill:var(--muted); font-family:var(--mono)}
.ld-fig .st{fill:#ddd8ce; fill-opacity:.5}
.ld-fig .b-tbm{fill:var(--tbm); fill-opacity:.82}
.ld-fig .b-natm{fill:var(--natm); fill-opacity:.82}
.ld-fig .di{stroke:#fff; stroke-opacity:.45; stroke-width:1}
.ld-fig .lb{font-size:9.5px; fill:#fff; font-weight:500}
.ld-fig .lbo{font-size:9px; fill:var(--warn)}
.ld-fig .real{fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.ld-fig .rp{fill:var(--ink); stroke:var(--bg); stroke-width:.8}
.ld-fig .today{stroke:var(--warn); stroke-width:1; stroke-dasharray:4 3}
.ld-fig figcaption{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:9px;
  font-size:11.5px; color:var(--muted);
}
.ld-fig figcaption i{
  display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:5px; vertical-align:-1px;
}
.ld-fig .k-tbm{background:var(--tbm)}
.ld-fig .k-natm{background:var(--natm)}
.ld-fig .k-st{background:#ddd8ce}
.ld-fig .k-real{
  width:14px; height:0; border-radius:0;
  border-top:1.8px solid var(--ink); vertical-align:3px;
}

/* ── Bölümler ──────────────────────────────────────────────────────────── */
.ld-sec{padding:58px 0; border-bottom:1px solid var(--border)}
.ld-sec.alt{background:var(--surface)}
.ld-sec h2{
  margin:0 0 10px; font-size:24px; font-weight:600;
  letter-spacing:-.012em; color:var(--ink);
}
.ld-sec-p{margin:0 0 26px; font-size:15px; color:var(--muted); max-width:70ch}

.ld-grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:24px}
.ld-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start}

.ld-card{
  border:1px solid var(--border); border-radius:6px; background:var(--bg);
  padding:18px 18px 20px;
}
.ld-sec.alt .ld-card{background:var(--bg)}
.ld-card h3{margin:8px 0 7px; font-size:15.5px; font-weight:600; color:var(--ink)}
.ld-card p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.62}
.ld-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:4px;
  border:1px solid var(--border-2); background:var(--surface);
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--muted);
}

/* Adımlayıcı — panelin çizgisel adımlayıcısıyla aynı dil */
.ld-steps{list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden}
.ld-steps li{
  padding:14px 16px; border-right:1px solid var(--border);
  background:var(--bg); display:flex; flex-direction:column; gap:3px;
}
.ld-sec.alt .ld-steps li{background:var(--bg)}
.ld-steps li:last-child{border-right:0}
.ld-steps .s-n{font-family:var(--mono); font-size:11px; color:var(--muted)}
.ld-steps .s-h{font-size:14px; font-weight:600; color:var(--ink)}
.ld-steps .s-p{font-size:12.5px; color:var(--muted); line-height:1.5}

.ld-keys{margin:12px 0 0; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
kbd{
  font-family:var(--mono); font-size:11.5px; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-2);
  border-bottom-width:2px; border-radius:4px; padding:2px 7px;
}
.ld-keys .mono{
  font-size:11.5px; color:var(--muted);
  border:1px solid var(--border); border-radius:4px; padding:2px 7px;
  background:var(--surface);
}

/* Tahkik listesi */
.ld-ticks{list-style:none; margin:20px 0 0; padding:0}
.ld-ticks li{
  display:flex; align-items:flex-start; gap:9px;
  padding:7px 0; font-size:14px; color:var(--ink);
  border-bottom:1px solid var(--border);
}
.ld-ticks li:last-child{border-bottom:0}
.ld-ticks svg{width:12px; height:12px; flex:0 0 auto; margin-top:5px; color:var(--ok)}

/* Metrik kartı örneği — üç satırın üçü de zorunlu */
.ld-metrics{display:grid; gap:12px}
.ld-metrics .m{border:1px solid var(--border); border-radius:6px; background:var(--bg); padding:13px 15px}
.ld-metrics .m-k{
  font-size:10.5px; font-weight:500; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px;
}
.ld-metrics .m-v{
  font-family:var(--mono); font-size:30px; line-height:1.06;
  font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums;
}
.ld-metrics .m-v.none{
  font-family:'Inter',sans-serif; font-size:14px;
  color:var(--muted); font-style:italic;
}
.ld-metrics .m-u{font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.55}

/* "Ne yapmaz" listesi — kırmızı uyarı kutusu değil, sade liste.
   Bunlar hata değil, ilke. */
.ld-nots{list-style:none; margin:0; padding:0; display:grid; gap:0;
  border:1px solid var(--border); border-radius:6px; overflow:hidden}
.ld-nots li{
  padding:13px 16px; font-size:14px; color:var(--ink);
  background:var(--bg); border-bottom:1px solid var(--border);
}
.ld-sec.alt .ld-nots li{background:var(--bg)}
.ld-nots li:last-child{border-bottom:0}

/* ── Alt çağrı ve dip ──────────────────────────────────────────────────── */
.ld-cta{padding:52px 0; background:var(--surface); border-bottom:1px solid var(--border); text-align:center}
.ld-cta h2{margin:0 0 8px; font-size:23px; font-weight:600}
.ld-cta p{margin:0 0 20px; color:var(--muted)}
.ld-cta .ld-acts{justify-content:center}
.ld-foot{padding:22px 0; font-size:12.5px; color:var(--muted)}
.ld-foot-in{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
.ld-foot a{color:var(--muted); margin-left:16px}

/* ── Duyarlı ───────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .ld-hero-in{grid-template-columns:1fr; gap:32px; padding:40px 24px 44px}
  .ld-hero h1{font-size:30px}
  .ld-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ld-steps li:nth-child(2){border-right:0}
  .ld-steps li:nth-child(-n+2){border-bottom:1px solid var(--border)}
  .ld-two{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:14.5px}
  .ld-hero h1{font-size:26px}
  .ld-grid4,.ld-steps{grid-template-columns:1fr}
  .ld-steps li{border-right:0; border-bottom:1px solid var(--border)}
  .ld-steps li:last-child{border-bottom:0}
  /* Gezinme sıkışınca bölüm bağlantıları düşer, Giriş ve dil kalır:
     küçük ekranda üç bağlantı taşıyıp sarmalamak kötü görünüyor. */
  .ld-nav a:not(.ld-btn):not(.ld-lang){display:none}
  .ld-wrap{padding:0 16px}
}

@media print{
  .ld-hdr,.ld-cta,.ld-acts{display:none}
  .ld-sec,.ld-hero{border-bottom:1px solid var(--border)}
}