/* --series-*, --muted ve --grid app.js tarafından grafik renkleri olarak okunur. */
:root {
    color-scheme: light;
    --surface: #ffffff;
    --page: #f6f6f3;
    --ink: #0f1115;
    --ink-2: #4a4c52;
    --muted: #66686e;
    --grid: #e4e4de;
    --axis: #b9b9b0;
    --accent: #1f62b3;
    --accent-hover: #184f95;
    --accent-soft: #e8f1fc;
    --link: #1c5cab;
    --series-1: #2a78d6;
    --series-2: #d9531e;
    --border: rgba(15, 17, 21, .1);
    --shadow: 0 1px 2px rgba(15, 17, 21, .05);
    --radius: 14px;
    --radius-sm: 10px;
    --gap: 1rem;
    --header-height: 3.5rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --surface: #1a1b1e;
        --page: #0f1012;
        --ink: #f3f3f0;
        --ink-2: #c9c9c2;
        --muted: #a5a59e;
        --grid: #2e2f33;
        --axis: #4a4b50;
        --accent: #2a70c8;
        --accent-hover: #3987e5;
        --accent-soft: #16263a;
        --link: #7db2f0;
        --series-1: #3987e5;
        --series-2: #d95926;
        --border: rgba(255, 255, 255, .1);
        --shadow: none;
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; text-wrap: balance; }
h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 1.3125rem; font-weight: 750; letter-spacing: -.01em; }
h3 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

@media (prefers-color-scheme: dark) {
    a:hover { color: var(--ink); }
}

:focus-visible {
    outline: 2px solid var(--series-1);
    outline-offset: 2px;
    border-radius: 4px;
}

.container {
    width: 100%;
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

main.container {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    gap: 2rem;
    padding-block: 1rem 3rem;
}

main.container > * { min-width: 0; }

.skip-link {
    position: absolute;
    left: -999px;
    top: .5rem;
    z-index: 40;
    padding: .5rem 1rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
}

.skip-link:focus { left: .5rem; }

/* Üst bölüm */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 44px;
    color: var(--ink);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-decoration: none;
    white-space: nowrap;
}

.brand:hover { color: var(--ink); }
.brand img { flex: none; width: auto; height: 28px; border-radius: 7px; }

.header-rate {
    flex: none;
    margin: 0 0 0 auto;
    color: var(--ink-2);
    font-size: .875rem;
    white-space: nowrap;
}

.header-rate strong { color: var(--ink); font-weight: 700; }
.header-rate__label, .header-rate__date { display: none; }

.site-nav { display: none; }

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: .625rem;
    border-radius: 8px;
    color: var(--ink-2);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav a:hover { color: var(--ink); background: var(--page); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.nav-menu { flex: none; }

.nav-menu summary {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding-inline: .75rem;
    border: 1px solid var(--axis);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    font-size: .9375rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}

.nav-menu summary::-webkit-details-marker { display: none; }

.nav-menu summary::before {
    content: "";
    width: 16px;
    height: 10px;
    border-block: 2px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.nav-menu[open] summary { background: var(--page); }

.nav-menu__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: .5rem 1rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 24px rgba(15, 17, 21, .14);
}

.nav-menu__panel a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: .5rem;
    border-bottom: 1px solid var(--grid);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
}

.nav-menu__panel a:last-child { border-bottom: 0; }
.nav-menu__panel a[aria-current="page"] { color: var(--link); font-weight: 700; }

/* Konum */
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .125rem .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: .8125rem;
}

.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--axis); }
.breadcrumb a { color: var(--ink-2); }

.breadcrumb + * { margin-top: -1.25rem; }

/* Metin blokları */
.eyebrow { margin-bottom: .25rem; color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.lead { color: var(--ink-2); font-size: 1.0625rem; }
.note { margin-top: .75rem; margin-bottom: 0; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }

.notice {
    margin-top: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--series-2);
    border-radius: 8px;
    background: var(--page);
}

.page-header { display: flex; flex-direction: column; }
.page-header .lead { margin-bottom: 0; }

.prose { max-width: 42rem; font-size: 1.0625rem; line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.25rem; margin: 0 0 1rem; }
.prose li { margin-bottom: .5rem; }

.message { padding-block: 3rem; text-align: center; }
.message .lead { margin-inline: auto; max-width: 32rem; }

.message__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
}

/* Ana sayfa cevabı */
.hero, .answer-card {
    padding: 1.25rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero h1 {
    margin-bottom: .25rem;
    color: var(--ink-2);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0;
}

.hero__value {
    display: block;
    margin-top: .25rem;
    color: var(--ink);
    font-size: clamp(2.5rem, 13vw, 4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.05;
}

.hero__change { margin: .5rem 0 1rem; color: var(--ink-2); font-size: .9375rem; }
.hero__change strong { color: var(--ink); }
.hero__note { margin: .75rem 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }

/* Tutar sayfası cevabı */
.answer-card { background: var(--accent-soft); border-color: transparent; }
.answer-card h1 { margin-bottom: .5rem; font-size: 1.375rem; }

.answer-card__value {
    display: block;
    margin-bottom: .75rem;
    font-size: clamp(2.125rem, 11vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.answer-card__detail { margin: 0; color: var(--ink-2); font-size: .9375rem; }

/* Yerleşim */
.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }

.rates-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel, .card, .tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel { padding: 1.25rem 1rem; }
.card { padding: .75rem 1rem; }

.card__label { margin: 0 0 .125rem; color: var(--ink-2); font-size: .8125rem; font-weight: 600; letter-spacing: 0; }
.card__value { display: block; margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.card__meta { margin: .25rem 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.35; }

.tool-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 44px;
    padding: 1rem;
    color: var(--ink-2);
    font-size: .9375rem;
    line-height: 1.45;
    text-decoration: none;
}

.tool-card strong { color: var(--ink); font-size: 1.0625rem; }
.tool-card:hover { border-color: var(--series-1); color: var(--ink-2); }

.link-list { list-style: none; margin: 0; padding: 0; }

.link-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 48px;
    border-bottom: 1px solid var(--grid);
}

.link-list li:last-child { border-bottom: 0; }

.link-list a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    min-height: 47px;
}

.link-list span {
    flex: none;
    color: var(--ink-2);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.link-grid {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}

.link-grid a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: .9375rem;
}

.disclosure {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.disclosure + .disclosure { margin-top: .75rem; }

.disclosure summary {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: .5rem 1rem;
    cursor: pointer;
    font-weight: 700;
}

.disclosure > :not(summary) { margin-inline: 1rem; }
.disclosure > :last-child { margin-bottom: 1rem; }

/* Form öğeleri */
input, select, button { font: inherit; color: inherit; }

input, select {
    width: 100%;
    min-height: 48px;
    padding: .5rem .75rem;
    background: var(--surface);
    border: 1px solid var(--axis);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}

input:focus, select:focus {
    border-color: var(--series-1);
    outline: 2px solid var(--series-1);
    outline-offset: 0;
}

.field { display: flex; flex-direction: column; gap: .25rem; }
.field > span { color: var(--ink-2); font-size: .875rem; font-weight: 500; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    padding: .5rem 1.25rem;
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    text-decoration: none;
}

.button:hover { background: var(--accent-hover); color: #fff; }

.button--ghost {
    background: transparent;
    border-color: var(--axis);
    color: var(--ink);
    font-weight: 600;
}

.button--ghost:hover { background: var(--page); color: var(--ink); }

.converter {
    display: grid;
    gap: .75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
}

.converter__input { display: flex; flex-direction: column; gap: .25rem; }

.converter__input input {
    min-height: 56px;
    font-size: 1.5rem;
    font-weight: 700;
}

.converter__unit { color: var(--ink-2); font-size: .875rem; font-weight: 600; }

.converter .button--ghost {
    width: 56px;
    height: 56px;
    padding: 0;
    font-size: 1.25rem;
}

.converter__result {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    align-items: baseline;
    gap: .375rem;
    margin: 0;
    padding: .75rem 1rem;
    background: var(--accent-soft);
    border-radius: var(--radius-sm);
}

.converter__result output {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.converter__result .converter__unit { color: var(--ink); font-size: 1rem; }

.date-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; }
.date-form .field { flex: 1 1 12rem; }

/* Maaş aracı */
.salary-input input {
    min-height: 56px;
    font-size: 1.5rem;
    font-weight: 700;
}

.salary-hint { margin: .5rem 0 0; color: var(--ink-2); font-size: .8125rem; line-height: 1.45; }

.stat-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.stat-grid .card:first-child {
    grid-column: 1 / -1;
    background: var(--accent-soft);
    border-color: transparent;
    box-shadow: none;
}

.stat-grid .card:first-child .card__value { font-size: 2rem; letter-spacing: -.02em; }

.salary-past {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--grid);
}

.salary-row {
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: end;
    padding-block: .75rem;
    border-bottom: 1px solid var(--grid);
}

.salary-row output { align-self: center; font-weight: 700; }
[data-salary-add] { margin-top: .75rem; }

/* Grafikler */
.chart { position: relative; min-width: 0; margin: 0; }
.chart figcaption { margin-bottom: .75rem; color: var(--ink-2); font-size: .875rem; line-height: 1.45; }

.chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .75rem;
}

.chart-controls button {
    min-height: 44px;
    min-width: 44px;
    padding: .25rem .75rem;
    background: transparent;
    border: 1px solid var(--axis);
    border-radius: 8px;
    color: var(--ink-2);
    cursor: pointer;
    font-size: .875rem;
    font-weight: 500;
}

.chart-controls button:hover { color: var(--ink); background: var(--page); }

.chart-controls button[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

[data-chart-canvas] { position: relative; width: 100%; min-height: 240px; }

.chart-tooltip {
    position: absolute;
    z-index: 5;
    padding: .375rem .625rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    color: var(--ink);
    font-size: .8125rem;
    line-height: 1.35;
    pointer-events: none;
    white-space: nowrap;
}

.u-legend { color: var(--ink-2); font-size: .8125rem; }

/* Tablolar */
.table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
    font-variant-numeric: tabular-nums;
}

th, td {
    padding: .625rem .5rem;
    border-bottom: 1px solid var(--grid);
    text-align: left;
    white-space: nowrap;
}

thead th { color: var(--ink-2); font-size: .8125rem; font-weight: 600; }
tbody th { font-weight: 600; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

.num { text-align: right; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* Sık sorulanlar */
.faq__item + .faq__item { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--grid); }
.faq__item h3 { margin-bottom: .25rem; }
.faq__item p { color: var(--ink-2); }

/* Zaman çizelgesi */
.timeline { list-style: none; margin: .75rem 0 0; padding: 0 0 0 1rem; border-left: 2px solid var(--axis); }
.timeline li { padding-block: .5rem; }
.timeline p { margin: .125rem 0 0; color: var(--ink-2); font-size: .9375rem; }
.timeline__date { display: block; color: var(--ink-2); font-size: .8125rem; font-weight: 600; }

.pager { display: flex; gap: .75rem; }
.pager__next { margin-left: auto; }

.section-more { margin: .75rem 0 0; font-weight: 600; }

/* Reklam */
.ad-slot { min-height: 280px; min-width: 0; overflow: hidden; }

/* Alt bölüm */
.site-footer {
    padding-block: 2rem 1.5rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--ink-2);
    font-size: .875rem;
}

.site-footer__columns {
    display: grid;
    gap: 1.5rem 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer h2 {
    margin-bottom: .25rem;
    color: var(--ink);
    font-size: .875rem;
    letter-spacing: 0;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }

.site-footer li a {
    display: flex;
    align-items: center;
    min-height: 40px;
    color: var(--ink-2);
    text-decoration: none;
}

.site-footer li a:hover { color: var(--ink); text-decoration: underline; }

.site-footer__legal {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--grid);
    font-size: .8125rem;
    line-height: 1.5;
}

.site-footer__legal p { margin-bottom: .25rem; }

/* Blog */
.post-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }

.post-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.post-card:hover { border-color: var(--series-1); }
.post-card__image { display: block; }
.post-card__image img { display: block; width: 100%; height: auto; }
.post-card__body { padding: 1rem; }
.post-card__body h2, .post-card__body h3 { margin-bottom: .25rem; font-size: 1.125rem; line-height: 1.3; }
.post-card__body h2 a, .post-card__body h3 a { color: var(--ink); text-decoration: none; }
.post-card__body h2 a:hover, .post-card__body h3 a:hover { color: var(--link); }
.post-card__body p { margin-bottom: 0; color: var(--ink-2); font-size: .9375rem; }
.post-card__body .post-card__date { margin-bottom: .5rem; color: var(--muted); font-size: .8125rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; }

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--axis);
    border-radius: 8px;
    color: var(--ink-2);
    text-decoration: none;
}

.pagination a:hover { background: var(--surface); color: var(--ink); }
.pagination a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.preview-note {
    width: 100%;
    max-width: 44rem;
    margin: 0 auto 1rem;
    padding: .6rem .9rem;
    background: var(--accent-soft);
    border-radius: 8px;
}

.post { width: 100%; max-width: 44rem; margin-inline: auto; }
.post__header { margin-bottom: 1.25rem; }
.post__header h1 { font-size: clamp(1.75rem, 6.5vw, 2.5rem); margin-bottom: .75rem; }
.post__meta { margin: 0; color: var(--muted); font-size: .875rem; }

.post__image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
}

.post .ad-slot { margin-block: 1.5rem; }

.post__content { font-size: 1.0625rem; line-height: 1.7; }
.post__content > :first-child { margin-top: 0; }
.post__content h2 { margin: 2.5rem 0 .75rem; font-size: 1.5rem; }
.post__content h3 { margin: 2rem 0 .5rem; font-size: 1.25rem; }
.post__content h4 { margin: 1.5rem 0 .5rem; font-size: 1.0625rem; }
.post__content p { margin-bottom: 1.25rem; }
.post__content ul, .post__content ol { margin: 0 0 1.25rem; padding-left: 1.5rem; }
.post__content li { margin-bottom: .5rem; }
.post__content img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.post__content figure { margin: 1.5rem 0; }
.post__content figure img { width: 100%; }
.post__content figcaption { margin-top: .5rem; color: var(--ink-2); font-size: .875rem; }
.post__content hr { border: 0; border-top: 1px solid var(--grid); margin-block: 2rem; }
.post__content pre { overflow-x: auto; padding: 1rem; background: var(--page); border-radius: var(--radius-sm); font-size: .9375rem; }
.post__content table { display: block; overflow-x: auto; margin-bottom: 1.25rem; }
.post__content th, .post__content td { min-width: 7rem; white-space: normal; }
.post__content iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-block: 1.5rem; border: 0; border-radius: var(--radius-sm); }

.post__content blockquote {
    margin: 0 0 1.25rem;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--series-1);
    color: var(--ink-2);
}

.post__content details {
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.post__content summary { cursor: pointer; font-weight: 700; }

.post__section { margin-top: 2.5rem; }
.post__back { margin: 2rem 0 0; font-weight: 600; }

/* Ekran boyutları */
@media (min-width: 360px) {
    .header-rate__label { display: inline; }
    .card__value { font-size: 1.375rem; }
}

@media (min-width: 640px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.5rem; }
    main.container { gap: 2.5rem; padding-block: 1.5rem 4rem; }
    .breadcrumb + * { margin-top: -1.5rem; }
    .container { padding-inline: 1.5rem; }
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero, .answer-card { padding: 2rem; }
    .answer-card h1 { font-size: 1.625rem; }
    .panel { padding: 1.5rem; }
    .card { padding: 1rem 1.25rem; }
    .card__value { font-size: 1.625rem; }
    .tool-card { padding: 1.25rem; }
    .converter { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .converter__result { grid-column: auto; min-height: 56px; padding-block: .5rem; align-items: center; }
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-grid .card:first-child { grid-column: auto; }
    .stat-grid .card:first-child .card__value { font-size: 1.625rem; }
    .salary-row { grid-template-columns: 7rem minmax(0, 1fr) minmax(7rem, auto) auto; }
    .salary-row output { padding-bottom: .75rem; align-self: end; }
    .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .post__content { font-size: 1.125rem; }
    .post__content h2 { font-size: 1.625rem; }
    .site-footer__columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
    .header-rate__date { display: inline; margin-left: .25rem; color: var(--muted); }
}

@media (min-width: 960px) {
    .site-header__inner { gap: 1rem; }
    .header-rate { margin-left: 0; }
    .site-nav { display: flex; gap: .125rem; margin-left: auto; }
    .nav-menu { display: none; }
    .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) and (max-width: 1100px) {
    .header-rate__date { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
    a, button { transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
}

@media (forced-colors: active) {
    .chart-controls button[aria-pressed="true"] { border-width: 2px; }
}

@media print {
    .site-header, .site-footer, .ad-slot, .chart-controls { display: none; }
}