:root { --c-primary: #39bfd9; /* Enakliyat mavi */ --c-accent: #eb9648; /* turuncu */ --c-pink: #f2609d; /* pembe */ --c-bg: #0b1720; /* koyu zemin */ --c-card: #0f2130; /* kart zemini */ --c-text: #eaf3f7; --c-muted: #9db3bf; --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,.25); }
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; background: linear-gradient(180deg,#0a1520 0%,#0e1f2e 100%); color: var(--c-text); font: 16px/1.6 "Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif }
a { color: var(--c-primary); text-decoration: none }
    a:hover { opacity: .9 }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(11,23,32,.75); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid rgba(255,255,255,.06) }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px }
.brand { display: flex; gap: 12px; align-items: center }
    .brand .logo { width: 55px; height: 55px }
    .brand b { font-weight: 700; letter-spacing: .2px }
.nav a.btn { padding: 10px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px }
    .nav a.btn.primary { background: linear-gradient(90deg,var(--c-primary),#5bd7ef); border: none; color: #061018; font-weight: 700 }

/* Hero */
.hero { position: relative; overflow: hidden }
    .hero .wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; min-height: 58vh; padding: 64px 20px }
.headline { font-size: 40px; line-height: 1.15; margin: 0 0 12px }
    .headline .chip { display: inline-block; font-size: 13px; padding: 6px 10px; border-radius: 999px; background: rgba(57,191,217,.15); border: 1px solid rgba(57,191,217,.35); margin-bottom: 12px }
.sub { color: var(--c-muted); max-width: 56ch }
.cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px; font-weight: 700; border: 1px solid rgba(255,255,255,.14); transition: transform .05s ease }
    .btn:hover { transform: translateY(-1px) }
    .btn.primary { background: linear-gradient(90deg,var(--c-primary),#74e8ff); color: #07131a; border: none }
    .btn.ghost { background: rgba(255,255,255,.04) }
.hero-art { position: relative; min-height: 280px }
.net { position: absolute; inset: 0; background: radial-gradient(1200px 400px at -10% 20%,rgba(242,96,157,.15),transparent 45%), radial-gradient(900px 380px at 110% 10%,rgba(235,150,72,.12),transparent 50%), radial-gradient(800px 500px at 50% 100%,rgba(57,191,217,.18),transparent 55%); mask: linear-gradient(180deg,white,white .5,transparent 95%); border-radius: 16px }
.mesh { position: absolute; inset: 10px; border-radius: 16px; background: linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); box-shadow: var(--shadow) }
.dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 2px,transparent 2px); background-size: 22px 22px; opacity: .35; mask: radial-gradient(300px 200px at 20% 30%,#000 0 50%,transparent 60%) }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin: 24px 0 8px }
.stat { background: var(--c-card); border: 1px solid rgba(255,255,255,.06); padding: 18px; border-radius: 14px; text-align: center }
    .stat b { display: block; font-size: 22px }
.muted { color: var(--c-muted) }

/* Cards */
.section { padding: 40px 0 }
.grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.card { background: var(--c-card); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 18px; box-shadow: var(--shadow) }
    .card h3 { margin: 6px 0 6px }
.kbd { font: 600 12px ui-monospace, SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; background: #07131a; border: 1px solid rgba(255,255,255,.12); padding: 8px 10px; border-radius: 10px; display: flex; justify-content: space-between; gap: 12px }
.copy { cursor: pointer; border-radius: 8px; padding: 6px 10px; background: rgba(255,255,255,.06) }
.pill { display: inline-block; border-radius: 999px; padding: 4px 10px; background: rgba(235,150,72,.15); border: 1px solid rgba(235,150,72,.35); font-size: 12px; margin-top: 6px }
code { overflow-wrap: anywhere }
/* FAQ */
details { background: var(--c-card); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px; margin: 8px 0 }
    details > summary { cursor: pointer; font-weight: 700 }
    details[open] { outline: 1px solid rgba(255,255,255,.12) }

/* Footer */
footer { color: var(--c-muted); padding: 30px 0; border-top: 1px solid rgba(255,255,255,.08); margin-top: 28px }

@media (max-width: 980px) {
    .hero .wrap { grid-template-columns: 1fr; min-height: auto }
    .grid { grid-template-columns: 1fr }
    .stats { grid-template-columns: repeat(2,1fr) }
    .headline { font-size: 34px }
}

@media only screen and (max-width: 547px) {
    .datasets { display: none }
}

@media only screen and (max-width: 427px) {
    .swagger { display: none }
}