/* Sayfa düzeni. Yalnızca styles.css'teki token'ları kullanır; ham renk/px yok (istisna: yerleşim ölçüleri). */
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: var(--space-4); }
.nav { flex-wrap: wrap; row-gap: var(--space-2); }
.nav .lang { display: flex; gap: var(--space-2); font-size: 13px; letter-spacing: 0.08em; }
.nav .lang [aria-current="true"] { color: var(--color-accent); font-weight: 600; }
.status-bar { border-bottom: 2px solid var(--color-divider); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding-block: var(--space-2); }

.hero { padding-block: var(--space-8) calc(var(--space-8) * 2); border-bottom: 2px solid var(--color-divider); }
.hero h1 { font-size: clamp(40px, 8vw, 88px); line-height: 1.02; max-width: 14ch; margin-bottom: var(--space-6); }
.hero .lead { font-size: 19px; max-width: 56ch; margin-bottom: var(--space-6); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn { padding: var(--space-3) var(--space-6); justify-content: flex-start; }

.section { padding-block: calc(var(--space-8) * 1.5); border-bottom: 2px solid var(--color-divider); }
.section > .wrap > h2 { max-width: 22ch; margin-bottom: var(--space-6); }
.section > .wrap > p { max-width: 64ch; }
.kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: var(--space-3); }

/* Görünen modüler ızgara: eşit hücreler, aralarında 2px çizgi. */
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--color-divider); margin-top: var(--space-6); }
.cell { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-bottom: 2px solid var(--color-divider); }
.cell + .cell { padding-left: var(--space-6); border-left: 2px solid var(--color-divider); }
@media (max-width: 700px) { .cell + .cell { padding-left: 0; border-left: 0; } .cell { padding-right: 0; } }
.cell h3 { font-size: 20px; }
.cell p { font-size: 15px; margin: 0; opacity: 0.85; }
.num { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 44px; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-3); }

.tbl-wrap { overflow-x: auto; margin-top: var(--space-6); }
.table td, .table th { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.table td { vertical-align: top; }

.prose h2 { margin-top: calc(var(--space-8) * 1.5); font-size: 28px; }
.prose p, .prose li { max-width: 68ch; }
.prose ul { padding-left: var(--space-6); }

.poster { background: var(--color-accent); color: var(--color-bg); padding-block: calc(var(--space-8) * 2); }
.poster h2 { font-size: clamp(36px, 6vw, 72px); line-height: 1.05; max-width: 16ch; }
.poster p { font-size: 19px; max-width: 52ch; }
.poster :focus-visible { outline-color: var(--color-bg); }

footer { border-top: 2px solid var(--color-divider); padding-block: var(--space-8); font-size: 13px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: space-between; }
footer a { color: inherit; }
.nav-brand { display: block; line-height: 0; } .nav-brand svg { height: 28px; width: auto; display: block; }
.nav { position: sticky; top: 0; background: var(--color-bg); z-index: 1; } html { scroll-behavior: smooth; scroll-padding-top: 72px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }