/* Non-critical enhancements — critical CSS is inlined in _Layout */
.prose p { margin: 0 0 1rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose pre { overflow: auto; background: #111; color: #f5f5f5; padding: 1rem; border-radius: 8px; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.prose a { text-decoration: underline; }
.tag { display: inline-block; padding: .15rem .5rem; border-radius: 999px; background: #eef3ff; color: #0b57d0; font-size: .8rem; }

body:not(.landing) header.site { background: transparent; }

body.landing footer.site { margin-top: 0; }

.foot {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 1.5rem;
}
.foot-top {
    display: grid;
    grid-template-columns: 1.15fr 1.55fr;
    gap: 2.6rem 2.2rem;
    align-items: start;
    padding-bottom: 2.2rem;
}
.foot-brand .brand { color: #fff; }
.foot-brand .brand:hover { opacity: 1; }
.foot-brand > p {
    margin: .95rem 0 1.2rem;
    max-width: 22rem;
    line-height: 1.55;
    font-size: .95rem;
    color: rgba(255,255,255,.55);
}
.foot-store {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    background: #fff;
    color: #111;
    border-radius: 999px;
    padding: .7rem 1.15rem .7rem 1rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
}
.foot-store:hover { opacity: .88; color: #111; }
.foot-store small {
    display: block;
    font-size: .62rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .55;
    margin-bottom: .12rem;
}
.foot-store span { font-size: .95rem; }
.foot-rating {
    margin: .9rem 0 0;
    font-size: .8rem;
    color: rgba(255,255,255,.42);
}
.foot-rating span { letter-spacing: .08em; margin-right: .35rem; }
.foot-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
.foot-h {
    margin: .15rem 0 .8rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.38);
}
.foot-cols ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .42rem;
}
.foot-cols a {
    color: rgba(255,255,255,.86);
    font-weight: 500;
    font-size: .95rem;
    letter-spacing: -.01em;
}
.foot-cols a:hover { opacity: 1; color: var(--teal); }
.foot-ops {
    display: flex;
    gap: .55rem;
    margin: 2rem 0 1.15rem;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}
.foot-ops span {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.06);
}
.foot-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: .8rem;
    color: rgba(255,255,255,.38);
}
.foot-bottom p { margin: 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.foot-legal a { color: rgba(255,255,255,.55); }
.foot-legal a:hover { color: var(--teal); opacity: 1; }

.legal { max-width: 42rem; padding: .4rem 0 2rem; }
.legal .eyebrow { margin-bottom: .35rem; }
.legal-nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; }
.legal-nav a {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .38rem .85rem;
    background: #f0f0f0;
    color: #111;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.legal-nav a:hover { opacity: 1; background: #e7e7e7; }
.legal-nav a.is-on { background: #111; color: #fff; }
.legal .prose h2 { font-size: 1.12rem; letter-spacing: -.02em; margin-top: 1.55rem; }
.legal .prose ul { margin: 0 0 1rem; }

.cookie-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 0 1.25rem 1.15rem;
    pointer-events: none;
}
.cookie-inner {
    pointer-events: auto;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    background: #111;
    color: rgba(255,255,255,.78);
    border-radius: 22px;
    padding: 1.05rem 1.2rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.cookie-title { margin: 0 0 .25rem; color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: -.02em; }
.cookie-inner p { margin: 0; font-size: .88rem; line-height: 1.45; max-width: 38rem; }
.cookie-inner a { color: var(--teal); text-decoration: underline; }
.cookie-inner a:hover { opacity: 1; }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
.cookie-actions .pill { border: 0; cursor: pointer; font: inherit; padding: .62rem 1.1rem; font-size: .86rem; }
.cookie-actions .pill-mute { background: #2a2a2a; color: #fff; }
body.has-cookie-bar { padding-bottom: 7.5rem; }

@media (max-width: 720px) {
    .cookie-inner { flex-direction: column; align-items: stretch; padding: 1rem 1.05rem; border-radius: 18px; }
    .cookie-actions { justify-content: stretch; }
    .cookie-actions .pill { flex: 1; }
    body.has-cookie-bar { padding-bottom: 11rem; }
}

.band { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 4.6rem; text-align: left; }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.band-head h2 { margin: .15rem 0 0; font-size: clamp(1.55rem, 3vw, 2.05rem); letter-spacing: -.035em; line-height: 1.2; }
.eyebrow { margin: 0; font-size: .78rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

.ops { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: .85rem; }
.op { display: flex; flex-direction: column; justify-content: flex-end; min-height: 168px; padding: 1.25rem 1.2rem; border-radius: 28px; background: #f4f4f4; color: #111; transition: transform .2s ease; }
.op:hover { opacity: 1; transform: translateY(-2px); }
.op-sym { font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: auto; }
.op strong { font-size: 1.02rem; letter-spacing: -.02em; margin: .85rem 0 .15rem; }
.op span:last-child { color: #5c5c5c; font-size: .88rem; }
.op.is-featured { background: var(--teal); }
.op.is-featured span:last-child { color: #0d4a46; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.post-tile { background: #f6f6f6; border-radius: 24px; overflow: hidden; transition: transform .2s ease; }
.post-tile a { color: inherit; display: block; height: 100%; }
.post-tile a:hover { opacity: 1; }
.post-tile:hover { transform: translateY(-2px); }
.post-tile img, .post-cover { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #e8e8e8; }
.post-cover { display: flex; align-items: center; justify-content: center; font-size: 2.6rem; font-weight: 700; letter-spacing: -.05em; }
.post-cover[data-op="carpim-tablosu"] { background: #3ecfc4; }
.post-cover[data-op="toplama"] { background: #8ec5ff; }
.post-cover[data-op="cikarma"] { background: #ffb199; }
.post-cover[data-op="bolme"] { background: #d4c4ff; }
.post-body { padding: 1rem 1.1rem 1.2rem; }
.post-tile h3 { font-size: 1.08rem; letter-spacing: -.03em; line-height: 1.3; margin: 0 0 .4rem; }
.post-tile .meta { margin: 0 0 .35rem; font-size: .8rem; }
.post-tile p:last-child { margin: 0; color: #5c5c5c; font-size: .92rem; line-height: 1.5; }
.post-tile:first-child { grid-column: span 2; }
.post-tile:first-child h3 { font-size: 1.45rem; }

.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.note { background-color: #f4f4f4; border-radius: 28px; padding: 1.4rem 1.25rem; }
.note h3 { margin: 0 0 .45rem; font-size: 1.05rem; letter-spacing: -.02em; }
.note p { margin: 0; color: #5c5c5c; font-size: .95rem; }

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
.quote { margin: 0; background: #111; color: #fff; border-radius: 28px; padding: 1.45rem 1.3rem; }
.quote p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.45; letter-spacing: -.02em; font-weight: 500; }
.quote footer { color: rgba(255,255,255,.55); font-size: .8rem; }
.quote-accent { background: var(--teal); color: #0a0a0a; }
.quote-accent footer { color: #0d4a46; }

.faq { display: grid; gap: .7rem; }
.faq details { background: #f4f4f4; border-radius: 22px; padding: 0; overflow: hidden; }
.faq details[open] { background: #f0f8f7; }
.faq summary {
    cursor: pointer;
    font-weight: 650;
    letter-spacing: -.02em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    font-size: 1.02rem;
    line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.7rem;
    text-align: center;
}
.faq details[open] summary::after { content: "−"; background: var(--teal); }
.faq details p {
    margin: 0;
    padding: 0 1.25rem 1.2rem;
    color: #4a4a4a;
    font-size: .95rem;
    line-height: 1.6;
    max-width: 38em;
}

.download { text-align: center; padding-bottom: 5rem; }
.download h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); letter-spacing: -.04em; margin: 0; }
.download .lede { margin-top: .7rem; }

body.landing .hero.hero-topic { padding-bottom: 3.2rem; }
body.landing .hero-topic h1 { margin: .2rem 0 .35rem; }
.hero-topic .eyebrow { margin-bottom: .35rem; }
.hero-topic .eyebrow a { color: inherit; }

[data-n="2"] { --tile: #3ecfc4; --ink: #073532; }
[data-n="3"] { --tile: #8ec5ff; --ink: #0a335c; }
[data-n="4"] { --tile: #ffe08a; --ink: #3d2e00; }
[data-n="5"] { --tile: #9be7a8; --ink: #0e3a1c; }
[data-n="6"] { --tile: #d4c4ff; --ink: #2a1760; }
[data-n="7"] { --tile: #ffb199; --ink: #4a1c12; }
[data-n="8"] { --tile: #ffc2d4; --ink: #5a1830; }
[data-n="9"] { --tile: #ffd36b; --ink: #3d2e00; }
[data-n="10"] { --tile: #6ec8f0; --ink: #0a335c; }

.blob {
    background-image:
        radial-gradient(circle at 92% 8%, rgba(255,255,255,.3) 0 36px, transparent 37px),
        radial-gradient(circle at 8% 108%, rgba(0,0,0,.06) 0 45px, transparent 46px);
}

.factor-mark {
    width: 132px;
    height: 132px;
    margin: 1.15rem auto .35rem;
    border-radius: 32px;
    background-color: var(--tile);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.factor-mark strong { font-size: 3.1rem; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.factor-mark span { font-size: 1.35rem; font-weight: 650; opacity: .7; margin-top: .1rem; }

.tables { display: grid; grid-template-columns: repeat(5, 1fr); gap: .85rem; }
.table-tile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 156px;
    padding: 1.15rem 1.1rem;
    border-radius: 28px;
    background-color: var(--tile, #f4f4f4);
    color: var(--ink, #111);
    transition: transform .2s ease;
}
.table-tile:hover { opacity: 1; transform: translateY(-2px); }
.table-n { font-size: 1.85rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-bottom: auto; }
.table-tile strong { font-size: 1.02rem; letter-spacing: -.02em; margin: .7rem 0 .12rem; }
.table-tile span:last-child { color: inherit; opacity: .72; font-size: .85rem; }

.note[data-n] { background-color: var(--tile); color: var(--ink); }
.note[data-n] p { color: inherit; opacity: .78; }

.facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.fact {
    background-color: var(--tile, #f4f4f4);
    color: var(--ink, #111);
    border-radius: 22px;
    padding: 1.15rem .9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.facts[data-n] .fact:nth-child(even) { background-color: color-mix(in srgb, var(--tile) 78%, #fff); }
.fact-eq { font-weight: 700; letter-spacing: -.03em; font-size: 1.05rem; }
.fact-res { color: inherit; opacity: .78; font-size: 1.2rem; font-weight: 650; }

@media (max-width: 960px) {
    .ops { grid-template-columns: 1fr 1fr; }
    .post-grid, .notes, .quotes { grid-template-columns: 1fr 1fr; }
    .post-tile:first-child { grid-column: span 2; }
    .tables, .facts { grid-template-columns: repeat(3, 1fr); }
    .foot-top { grid-template-columns: 1fr; gap: 2.1rem; }
}
@media (max-width: 720px) {
    .ops, .post-grid, .notes, .quotes { grid-template-columns: 1fr; }
    .post-tile:first-child { grid-column: auto; }
    .post-tile:first-child h3 { font-size: 1.2rem; }
    .band { padding-bottom: 3.4rem; }
    .tables, .facts { grid-template-columns: 1fr 1fr; }
    .factor-mark { width: 112px; height: 112px; border-radius: 26px; }
    .factor-mark strong { font-size: 2.5rem; }
    .foot { padding: 2.2rem 1.25rem 1.25rem; }
    .foot-cols { grid-template-columns: 1fr 1fr; }
    .foot-cols > div:last-child { grid-column: 1 / -1; }
}