/* PresenceLux — tanıtım sitesi. Harici kaynak (font/CDN/analiz/JS) yok;
   nginx'teki CSP `default-src 'self'; script-src 'none'` ile uyumlu. */

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --bg-soft: #f4f7f6;
    --fg: #0b1a1f;
    --fg-soft: #33474e;
    --brand: #0b786e;
    --brand-deep: #075a52;
    --on-brand: #ffffff;
    --border: #d9e2e0;
    --tag-ok: #0b6b3a;
    --tag-mid: #8a5300;
    --tag-hyp: #5a4ab0;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0d1517;
        --bg-soft: #142024;
        --fg: #e8efee;
        --fg-soft: #b4c4c2;
        --brand: #4fc4b6;
        --brand-deep: #7fd8cc;
        --on-brand: #06201c;
        --border: #2a3a3e;
        --tag-ok: #6fd69c;
        --tag-mid: #f0b45a;
        --tag-hyp: #b6aaf5;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--brand-deep); }
a:focus-visible, .btn:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 3px;
}

.skip {
    position: absolute;
    left: 16px;
    top: -60px;
    background: var(--brand);
    color: var(--on-brand);
    padding: 8px 14px;
    border-radius: 6px;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

header.site {
    border-bottom: 1px solid var(--border);
}
header.site .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    flex-wrap: wrap;
}
.logo {
    font-weight: 700;
    font-size: 20px;
    color: var(--fg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.logo svg { width: 26px; height: 26px; color: var(--brand); }
nav.lang a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    text-align: center;
}

section { padding: 56px 0; }
section.soft { background: var(--bg-soft); }

h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.15; margin: 0 0 18px; }
h2 { font-size: clamp(24px, 3.4vw, 32px); line-height: 1.25; margin: 0 0 14px; }
h3 { font-size: 19px; margin: 0 0 6px; }
p { margin: 0 0 14px; }
.lead { font-size: 20px; color: var(--fg-soft); max-width: 46em; }
.muted { color: var(--fg-soft); }

.badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-deep);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 2px 12px;
    margin-bottom: 16px;
}

.btn {
    display: inline-block;
    background: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 8px;
    margin-top: 6px;
}
.btn:hover { background: var(--brand-deep); }

.grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin-top: 24px;
}
.card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
}
.card p:last-child { margin-bottom: 0; }
.step { font-size: 14px; font-weight: 700; color: var(--brand-deep); letter-spacing: .04em; }

ul.checks { padding-left: 1.2em; margin: 18px 0 0; }
ul.checks li { margin-bottom: 10px; }

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.tags li { border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; flex: 1 1 220px; }
.tags strong { display: block; }
.t-ok strong { color: var(--tag-ok); }
.t-mid strong { color: var(--tag-mid); }
.t-hyp strong { color: var(--tag-hyp); }

ol.report { padding-left: 1.4em; columns: 2 260px; column-gap: 32px; }
ol.report li { margin-bottom: 8px; break-inside: avoid; }

footer.site {
    border-top: 1px solid var(--border);
    padding: 28px 0 40px;
    font-size: 15px;
    color: var(--fg-soft);
}
footer.site p { max-width: 60em; }

@media (prefers-reduced-motion: no-preference) {
    .btn { transition: background .15s; }
}