/* ============================================================
   /blog + /blog/{slug} — editorial layout.
   Token-driven; light & dark. Layers on app.css.

   2026 listing redesign pass: everything from here down to the
   "Article" boundary comment is /blog-listing-only. `.bl-tag` /
   `.bl-meta` (shared bits, just below) and `.bl-grid` / `.bl-card*`
   (latest grid, further down) are the ones also rendered by
   /blog/{slug}'s own "Devamı" related-posts strip — restyled here in
   place since both pages load this one stylesheet, but that page's
   PHP/markup is untouched and out of scope.
   ============================================================ */

.bl {
    --bl-measure: 68ch;
    /* BUG 3 fix: /blog's content must always render in the light
       palette regardless of OS/browser color-scheme preference or the
       (now-removed-from-public-pages) pa_theme cookie. CSS custom
       properties inherit from the nearest ancestor that redeclares
       them, so locally re-declaring the exact light values app.css's
       own :root[data-theme="light"] block ships makes every
       var(--bg)/var(--text)/etc. reference inside .bl resolve to light
       unconditionally — :root, body, header, footer and every other
       page stay untouched. */
    --bg: #ffffff; --bg-1: #f7f7f4; --bg-2: #eeeeea;
    --surface: #ffffff; --surface-2: #f4f4f0;
    --line: color-mix(in srgb, #0c0c0e 12%, transparent);
    --line-2: color-mix(in srgb, #0c0c0e 20%, transparent);
    --text: #14140f; --text-1: #45443d; --text-2: #605f57;
    --accent: #6237e0; --accent-ink: #ffffff; --coral: #cf4a2c; --violet: #6237e0;
    --shadow-1: 0 1px 2px rgba(17,17,15,.05), 0 10px 30px -16px rgba(17,17,15,.16);
    --shadow-2: 0 30px 80px -34px rgba(17,17,15,.20), 0 8px 24px -14px rgba(17,17,15,.10);
    --hero-glow-1: color-mix(in srgb, var(--violet) 7%, transparent);
    --hero-glow-2: color-mix(in srgb, var(--accent) 8%, transparent);
    background: var(--bg); color: var(--text);
}

/* ---- a11y utility -------------------------------------------- */
.bl-sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- shared bits --------------------------------------------- */
.bl-tag {
    display: inline-block;
    font-size: .68rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--accent);
}
.bl-tag--lg { font-size: .74rem; margin-bottom: .4rem; }

.bl-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    color: var(--text-2); font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.bl-meta--article { font-size: .9rem; margin-top: 1.1rem; }

/* ================================================================
   Hero
   ================================================================ */
.bl-hero {
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(720px 320px at 90% -40%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 70%),
        radial-gradient(520px 260px at -5% 110%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 65%),
        var(--bg-1);
    overflow: hidden;
}
.bl-hero__inner {
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(3.25rem, 7vw, 5.5rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
@media (max-width: 60rem) { .bl-hero__inner { grid-template-columns: 1fr; } }

.bl-hero__col-text { max-width: 34rem; }
.bl-hero__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(2.1rem, 4.8vw, 3.25rem);
    line-height: 1.05; letter-spacing: -.03em;
    margin: .8rem 0 .8rem; max-width: 18ch; text-wrap: balance;
}
.bl-hero__accent { color: var(--accent); }
.bl-hero__lede { color: var(--text-1); max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.12rem); margin: 0; text-wrap: pretty; }

.bl-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 0; padding: 0; }
.bl-hero__chips li {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .84rem; font-weight: 600; color: var(--text-1);
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: .4rem .8rem;
}
.bl-hero__chips .pi { color: var(--accent); }

/* Decorative "stacked article card" composition — desktop only, no
   fake product screenshot, no invented UI. Skeleton bars + real
   category names in the chip row; aria-hidden in the markup. */
.bl-hero__col-stage { min-width: 0; }
@media (max-width: 60rem) { .bl-hero__col-stage { display: none; } }
.bl-stage { position: relative; min-height: clamp(280px, 26vw, 360px); }
.bl-stage-card {
    position: absolute; border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: var(--surface); box-shadow: var(--shadow-2); padding: 1.1rem 1.2rem;
    display: grid; gap: .55rem; align-content: start;
}
.bl-stage-card--back {
    top: 0; right: 6%; width: 78%; transform: rotate(-4deg);
    opacity: .82;
}
.bl-stage-card--front {
    left: 0; bottom: 6%; width: 72%; transform: rotate(3deg);
}
.bl-stage-card__media {
    display: block; aspect-ratio: 16 / 9; border-radius: 10px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--violet) 22%, var(--bg-2)), var(--bg-2));
}
.bl-stage-card__tag {
    display: block; width: 2.4rem; height: .4rem; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.bl-stage-card__line { display: block; height: .5rem; border-radius: 999px; background: var(--line-2); width: 90%; }
.bl-stage-card__line--lg { height: .65rem; width: 96%; }
.bl-stage-card__line--sm { width: 55%; }
.bl-stage-chips {
    list-style: none; margin: 0; padding: 0; position: absolute; right: 0; bottom: -.5rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: .4rem;
}
.bl-stage-chips li {
    font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--text-1);
    background: var(--bg); border: 1px solid var(--line-2); border-radius: 999px; padding: .32rem .7rem;
    box-shadow: var(--shadow-1);
}

/* ================================================================
   Empty state (zero published posts)
   ================================================================ */
.bl-empty { max-width: var(--maxw); margin: 0 auto; padding: 4rem var(--gutter); color: var(--text-2); }

/* ================================================================
   Featured lead + secondary
   ================================================================ */
.bl-lead {
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(2.75rem, 5vw, 4.25rem) var(--gutter) 0;
    display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: start;
}
@media (max-width: 60rem) { .bl-lead { grid-template-columns: 1fr; } }

.bl-feature {
    display: grid; gap: 1.4rem;
    color: inherit; text-decoration: none;
    border: 1px solid var(--line); border-radius: var(--radius-xl);
    overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1);
    transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
/* BUG 1 fix: real two-column desktop layout (media | body), matching
   .bl-lead's own ~60rem collapse breakpoint below. align-items: stretch
   makes the media column's height track the body column's height
   (height:100% + object-fit:cover on the img below) instead of an
   aspect-ratio that can outgrow the content beside it. */
@media (min-width: 60.0625rem) {
    .bl-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; }
}
.bl-feature:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.bl-feature:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* BUG 2 fix: inset padding + a light surface behind the (still
   rounded, still clipped) image keeps a visible light frame around
   real cover images that are themselves dark branded graphics, so they
   read as "contained in a light card" rather than "the page went
   black". aspect-ratio on mobile/stacked layout; height:100% takes over
   once the min-width:60.0625rem rule above puts the two columns side
   by side, and the max-height cap keeps any single image instance from
   dominating a whole screenful either way. */
.bl-feature__media {
    display: block; aspect-ratio: 16 / 9; max-height: 360px;
    overflow: hidden; background: var(--bg-2);
    padding: .6rem; box-sizing: border-box;
}
.bl-feature__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); transition: transform .5s var(--ease); }
@media (min-width: 60.0625rem) {
    .bl-feature__media { aspect-ratio: auto; height: 100%; max-height: 360px; }
}
.bl-feature:hover .bl-feature__media img { transform: scale(1.03); }
.bl-feature__body { padding: 0 clamp(1.4rem, 3vw, 2.2rem) clamp(1.7rem, 3vw, 2.3rem); display: grid; gap: .65rem; align-content: center; }
/* desktop side-by-side: gap:0 on the parent grid above means the body
   column needs its own top padding now that it isn't stacked below the
   image with .bl-feature's row-gap providing that space. */
@media (min-width: 60.0625rem) {
    .bl-feature__body { padding: clamp(1.4rem, 3vw, 2.2rem); }
}
.bl-feature__tags { display: flex; align-items: center; gap: .7rem; }
.bl-feature__flag {
    font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: .18rem .55rem;
}
.bl-feature__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.12; letter-spacing: -.02em;
    margin: 0; text-wrap: balance;
}
.bl-feature:hover .bl-feature__title { color: var(--accent); }
.bl-feature__excerpt { color: var(--text-1); font-size: .98rem; margin: 0; max-width: 52ch; }
.bl-meta--feature { margin-top: .2rem; }
.bl-feature__cta {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .88rem; font-weight: 650; color: var(--accent); margin-top: .1rem;
}
.bl-feature__cta .pi { transition: transform var(--dur-micro) var(--ease); }
.bl-feature:hover .bl-feature__cta .pi { transform: translateX(3px); }

.bl-secondary { display: grid; gap: 1.1rem; align-content: start; }
.bl-mini {
    display: grid; grid-template-columns: 96px 1fr; gap: 1rem;
    color: inherit; text-decoration: none;
    padding-bottom: 1.1rem; border-bottom: 1px solid var(--line);
}
.bl-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.bl-secondary .bl-mini:last-child { border-bottom: 0; padding-bottom: 0; }
/* BUG 2 fix: same light-frame treatment as .bl-feature__media, scaled
   down for this 96px thumbnail so a dark cover image never touches the
   card's own edge. */
.bl-mini__media {
    display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
    background: var(--bg-2); padding: .3rem; box-sizing: border-box;
}
.bl-mini__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.bl-mini__body { display: grid; gap: .35rem; align-content: start; }
.bl-mini__body h3 { font-size: 1rem; line-height: 1.28; letter-spacing: -.01em; margin: 0; }
.bl-mini:hover .bl-mini__body h3 { color: var(--accent); }

/* ================================================================
   Toolbar (search + category filters) + latest grid
   ================================================================ */
.bl-latest {
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
}
.bl-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.8rem; padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}
.bl-toolbar__title {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem); letter-spacing: -.02em; margin: 0;
}
.bl-toolbar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }

.bl-search {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
    padding: .5rem .9rem .5rem 1rem; transition: border-color var(--dur-micro) var(--ease);
}
.bl-search:focus-within { border-color: var(--accent); }
.bl-search .pi { color: var(--text-2); flex: none; }
.bl-search input {
    font: inherit; font-size: .88rem; color: var(--text); background: none; border: 0; outline: none;
    width: clamp(9rem, 16vw, 14rem);
}
.bl-search input::placeholder { color: var(--text-2); }
.bl-search input::-webkit-search-cancel-button { cursor: pointer; }

.bl-filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.bl-chip {
    font: inherit; font-size: .84rem;
    padding: .4rem .8rem; border-radius: 999px; cursor: pointer;
    background: var(--surface); border: 1px solid var(--line-2); color: var(--text-1);
    transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);
}
.bl-chip:hover { color: var(--text); }
.bl-chip.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.bl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bl-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem);
}
@media (max-width: 60rem) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .bl-grid { grid-template-columns: 1fr; } }

.bl-card { min-width: 0; }
.bl-card.is-hidden { display: none; }
.bl-card a { display: grid; gap: .9rem; color: inherit; text-decoration: none; }
.bl-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-lg); }
/* BUG 1/2 fix: same light-frame + height cap as .bl-feature__media —
   inset padding keeps a light margin visible around real (dark)
   cover images, and max-height stops any grid-card image from
   growing tall enough to dominate the viewport. */
.bl-card__media {
    display: block; aspect-ratio: 16 / 10; max-height: 280px; border-radius: var(--radius-lg);
    overflow: hidden; background: var(--bg-2); border: 1px solid var(--line);
    padding: .5rem; box-sizing: border-box;
}
.bl-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; transition: transform .45s var(--ease); }
.bl-card a:hover .bl-card__media img { transform: scale(1.04); }
.bl-card__media--blank {
    display: grid; place-items: center;
    padding: 0;
    background: linear-gradient(150deg, var(--bg-2), var(--surface));
}
.bl-card__media--blank span { font-weight: 700; letter-spacing: -.02em; color: var(--text-2); font-size: 1.1rem; }
.bl-card__media--blank b { color: var(--accent); }
.bl-card__body { display: grid; gap: .4rem; }
.bl-card__body h3 { font-size: 1.08rem; line-height: 1.28; letter-spacing: -.01em; margin: 0; }
.bl-card a:hover .bl-card__body h3 { color: var(--accent); }
.bl-card__body p {
    color: var(--text-2); font-size: .9rem; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card__go {
    display: inline-flex; align-items: center; gap: .25rem;
    margin-left: auto; font-weight: 650; color: var(--accent);
}
.bl-card__go .pi { transition: transform var(--dur-micro) var(--ease); }
.bl-card a:hover .bl-card__go .pi { transform: translateX(3px); }
.bl-grid-empty { color: var(--text-2); margin-top: 1.5rem; }

/* ================================================================
   Bottom CTA — real "build your own site" band (see partials/blog/
   cta.php). New .bl-cta-scoped rules echo the visual language of
   partials/home/final-cta.php's `.finalcta` (home.css) without
   pulling that whole stylesheet onto /blog.
   ================================================================ */
.bl-cta { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(4rem, 8vw, 6rem); }
.bl-cta__inner {
    position: relative; overflow: hidden; isolation: isolate;
    padding: clamp(2.25rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.5rem);
    border: 1px solid var(--line-2); border-radius: var(--radius-xl); background: var(--bg-1);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.bl-cta__glow {
    position: absolute; z-index: -1; top: -60%; left: 15%; width: 45%; aspect-ratio: 2 / 1;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 26%, transparent), transparent);
    filter: blur(10px);
}
.bl-cta__copy { position: relative; max-width: 38rem; }
.bl-cta__title { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.bl-cta__text { color: var(--text-1); margin: .6rem 0 0; }
.bl-cta__actions { position: relative; flex: none; }
@media (max-width: 640px) {
    .bl-cta__inner { flex-direction: column; align-items: flex-start; }
    .bl-cta__actions .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .bl-feature__media img, .bl-card__media img, .bl-feature__cta .pi, .bl-card__go .pi { transition: none; }
}

/* ============================================================
   Article
   ============================================================ */
.bl-article__head {
    border-bottom: 1px solid var(--line);
    background: var(--bg-1);
}
.bl-article__head-inner {
    max-width: 760px; margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 2.75rem);
}
.bl-article__head .crumbs { font-size: .82rem; color: var(--text-2); margin-bottom: 1.2rem; }
.bl-article__head .crumbs a { color: var(--text-1); }
.bl-article__head h1 {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.03em;
    margin: 0; text-wrap: balance;
}
.bl-article__standfirst {
    color: var(--text-1); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6;
    margin: 1rem 0 0; max-width: 54ch;
}

.bl-article__cover {
    max-width: 980px; margin: clamp(1.5rem, 4vw, 3rem) auto 0;
    padding-inline: var(--gutter);
}
.bl-article__cover img {
    width: 100%; border-radius: var(--radius-lg);
    border: 1px solid var(--line); aspect-ratio: 16 / 9; object-fit: cover;
}

.bl-article__body {
    max-width: 720px; margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
}
.bl-article__body .prose { font-size: 1.06rem; line-height: 1.8; color: var(--text-1); }
.bl-article__body .prose > * + * { margin-top: 1.15rem; }
.bl-article__body .prose h2 {
    font-family: var(--font-display, inherit);
    color: var(--text); font-size: 1.5rem; letter-spacing: -.02em;
    margin-top: 2.6rem; line-height: 1.2;
}
.bl-article__body .prose h3 { color: var(--text); font-size: 1.18rem; margin-top: 2rem; }
.bl-article__body .prose ul,
.bl-article__body .prose ol { padding-left: 1.4rem; }
.bl-article__body .prose li { margin: .5rem 0; }
.bl-article__body .prose li::marker { color: var(--text-2); }
.bl-article__body .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.bl-article__body .prose strong { color: var(--text); }
.bl-article__body .prose code {
    font-family: var(--font-mono, ui-monospace, monospace); font-size: .88em;
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 5px; padding: .1em .35em;
}
.bl-article__body .prose pre {
    background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 1rem 1.15rem; overflow-x: auto; font-size: .9rem; line-height: 1.6;
}
.bl-article__body .prose pre code { background: none; border: 0; padding: 0; }
.bl-article__body .prose blockquote {
    border-left: 3px solid var(--accent); padding-left: 1.1rem; color: var(--text);
    font-size: 1.12rem;
}
.bl-article__body .prose img { border-radius: 12px; border: 1px solid var(--line); }
.bl-article__body .prose table { width: 100%; border-collapse: collapse; font-size: .95rem; display: block; overflow-x: auto; }
.bl-article__body .prose th, .bl-article__body .prose td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }

.bl-article__foot {
    display: flex; flex-wrap: wrap; gap: .7rem;
    margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line);
}

.bl-related { border-top: 1px solid var(--line); background: var(--bg-1); }
.bl-related__inner {
    max-width: var(--maxw); margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
}
.bl-related__inner h2 {
    font-family: var(--font-display, inherit);
    font-size: 1.4rem; letter-spacing: -.02em; margin: 0 0 1.6rem;
}
.bl-related .bl-card__body p { display: none; }

@media (prefers-reduced-motion: reduce) {
    .bl-feature__media img, .bl-card__media img { transition: none; }
}