/* ============================================================================
   LinguMonster Blog — düzen + makale tipografisi (K3.1)
   ----------------------------------------------------------------------------
   TEK KAYNAK: tüm renk/font/boşluk/köşe/gölge/hareket token'ları
   lm-design-system.css'ten gelir (landing ile BİREBİR aynı dosya kopyası).
   Bu dosya YALNIZCA blog-özel düzen/ritim ekler; yeni token TANIMLAMAZ,
   renkleri doğrudan HEX ile yazMAZ — hepsi var(--lm-*) üzerinden.

   Kimlik: Başlık = Bricolage Grotesque, gövde = Hanken Grotesk;
           mor (indigo→purple gradyan) + tek sıcak aksan kehribar.
   Render: statik / sunucu-render dostu — JS'e bağımlı DEĞİL (CWV).
   Kapsam: .lm-blog kök sınıfı altında; landing/panel stillerini etkilemez.
   ============================================================================ */

/* ───────────────────────────── Kök + gövde ────────────────────────────────── */
.lm-blog {
    font-family: var(--lm-font-sans);
    color: var(--lm-ink);
    background: var(--lm-bg-soft);
    font-size: 16px;
    line-height: var(--lm-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.lm-blog :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--lm-font-display);
    letter-spacing: var(--lm-tracking-tight);
    color: var(--lm-ink-strong);
}
.lm-blog :is(h1, h2) { font-weight: var(--lm-weight-black); line-height: var(--lm-leading-tight); }
.lm-blog :is(h3, h4, h5, h6) { font-weight: var(--lm-weight-bold); line-height: var(--lm-leading-snug); }
.lm-blog a { color: var(--lm-primary-strong); text-decoration: none; }
.lm-blog a:hover { color: var(--lm-purple-600); text-decoration: underline; }
.lm-blog img { max-width: 100%; height: auto; display: block; }
.lm-blog :is(input, select, textarea, button) { font-family: inherit; }

.lm-blog a:focus-visible,
.lm-blog button:focus-visible {
    outline: none;
    box-shadow: var(--lm-focus-ring);
    border-radius: var(--lm-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .lm-blog *, .lm-blog *::before, .lm-blog *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───────────────────────────── Düzen kapsayıcıları ─────────────────────────── */
.lm-blog-container {
    width: 100%;
    max-width: var(--lm-container);
    margin-inline: auto;
    padding-inline: var(--lm-space-5);
}
.lm-blog-container--narrow { max-width: var(--lm-container-narrow); }

.lm-blog-main { padding-block: var(--lm-section-y); }

/* Atlama bağlantısı (erişilebilirlik) */
.lm-blog-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--lm-space-2) var(--lm-space-4);
    background: var(--lm-primary);
    color: var(--lm-on-primary);
    border-radius: var(--lm-radius-sm);
}
.lm-blog-skip:focus { left: var(--lm-space-4); top: var(--lm-space-4); }

/* ───────────────────────────── Header / Footer ────────────────────────────── */
/* Not: Header/footer işaretlemesinin landing'den Razor'a tam portu K3.2'de;
   burada statik, token-tabanlı taban stiller hazır bekler. */
.lm-blog-header {
    background: var(--lm-surface);
    border-bottom: 1px solid var(--lm-border);
    position: sticky;
    top: 0;
    z-index: 40;
}
.lm-blog-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lm-space-6);
    min-height: 64px;
}
.lm-blog-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--lm-space-2);
    font-family: var(--lm-font-display);
    font-weight: var(--lm-weight-black);
    font-size: var(--lm-text-xl);
    letter-spacing: var(--lm-tracking-tight);
    color: var(--lm-ink-strong);
}
.lm-blog-brand:hover { text-decoration: none; color: var(--lm-ink-strong); }
.lm-blog-brand__mark { height: 32px; width: 32px; border-radius: var(--lm-radius-sm); object-fit: cover; }

.lm-blog-nav { display: flex; align-items: center; gap: var(--lm-space-6); }
.lm-blog-nav a { color: var(--lm-ink-muted); font-weight: var(--lm-weight-medium); }
.lm-blog-nav a:hover { color: var(--lm-primary-strong); text-decoration: none; }

.lm-blog-footer {
    background: var(--lm-slate-900);
    color: var(--lm-slate-300);
    padding-block: var(--lm-space-12);
    margin-top: var(--lm-section-y);
}
.lm-blog-footer a { color: var(--lm-slate-200); }
.lm-blog-footer a:hover { color: #fff; }
.lm-blog-footer__bottom {
    margin-top: var(--lm-space-8);
    padding-top: var(--lm-space-6);
    border-top: 1px solid var(--lm-slate-700);
    font-size: var(--lm-text-sm);
    color: var(--lm-slate-400);
}

/* ───────────────────────────── Sayfa başlığı (arşiv/kategori) ──────────────── */
.lm-blog-pagehead { text-align: center; margin-bottom: var(--lm-space-12); }
.lm-blog-pagehead__eyebrow {
    display: inline-block;
    font-size: var(--lm-text-sm);
    font-weight: var(--lm-weight-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lm-primary-strong);
    margin-bottom: var(--lm-space-3);
}
.lm-blog-pagehead__title { font-size: var(--lm-display-2); margin: 0; }
.lm-blog-pagehead__lede {
    max-width: 60ch;
    margin: var(--lm-space-4) auto 0;
    color: var(--lm-ink-muted);
    font-size: var(--lm-text-lg);
    line-height: var(--lm-leading-normal);
}

/* ───────────────────────────── Makale listesi (grid) ──────────────────────── */
.lm-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--lm-space-8);
}

.lm-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--lm-surface);
    border: 1px solid var(--lm-border-soft);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
    overflow: hidden;
    transition: transform var(--lm-dur-base) var(--lm-ease-out),
                box-shadow var(--lm-dur-base) var(--lm-ease-out);
}
.lm-blog-card:hover { transform: translateY(-4px); box-shadow: var(--lm-shadow-lg); }

.lm-blog-card__media {
    aspect-ratio: 16 / 9;
    background: var(--lm-grad-soft);
    overflow: hidden;
}
.lm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }

.lm-blog-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--lm-space-3);
    padding: var(--lm-space-6);
    flex: 1 1 auto;
}
.lm-blog-card__title {
    font-size: var(--lm-text-xl);
    margin: 0;
    line-height: var(--lm-leading-snug);
}
.lm-blog-card__title a { color: inherit; }
.lm-blog-card__title a:hover { color: var(--lm-primary-strong); text-decoration: none; }
.lm-blog-card__excerpt {
    color: var(--lm-ink-muted);
    font-size: var(--lm-text-base);
    margin: 0;
    /* 3 satırda kes — statik, JS'siz */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lm-blog-card__meta {
    margin-top: auto;
    padding-top: var(--lm-space-3);
    display: flex;
    align-items: center;
    gap: var(--lm-space-3);
    font-size: var(--lm-text-sm);
    color: var(--lm-ink-subtle);
}
.lm-blog-card__meta time { color: inherit; }

/* Kategori etiketi / rozet */
.lm-blog-chip {
    display: inline-flex;
    align-items: center;
    padding: .25rem .75rem;
    border-radius: var(--lm-radius-pill);
    font-size: var(--lm-text-xs);
    font-weight: var(--lm-weight-bold);
    letter-spacing: .02em;
    background: var(--lm-primary-soft);
    color: var(--lm-primary-strong);
}
.lm-blog-chip--accent { background: var(--lm-accent-soft); color: var(--lm-on-accent); }

/* ───────────────────────────── Kategori filtre şeridi ──────────────────────── */
.lm-blog-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lm-space-2);
    justify-content: center;
    margin-bottom: var(--lm-space-10);
}
.lm-blog-cats a {
    padding: .5rem 1rem;
    border-radius: var(--lm-radius-pill);
    border: 1.5px solid var(--lm-border);
    color: var(--lm-ink-muted);
    font-weight: var(--lm-weight-medium);
    font-size: var(--lm-text-sm);
    transition: border-color var(--lm-dur-fast) var(--lm-ease),
                background-color var(--lm-dur-fast) var(--lm-ease),
                color var(--lm-dur-fast) var(--lm-ease);
}
.lm-blog-cats a:hover { border-color: var(--lm-primary); color: var(--lm-primary-strong); text-decoration: none; }
.lm-blog-cats a[aria-current="page"] {
    background: var(--lm-grad);
    border-color: transparent;
    color: var(--lm-on-primary);
}

/* ───────────────────────────── Makale detay (BlogPost) ────────────────────── */
.lm-article { max-width: var(--lm-container-narrow); margin-inline: auto; }

.lm-article__header { text-align: center; margin-bottom: var(--lm-space-10); }
.lm-article__title {
    font-size: var(--lm-display-1);
    margin: var(--lm-space-4) 0 0;
    max-width: 22ch;
    margin-inline: auto;
}
.lm-article__lede {
    margin: var(--lm-space-5) auto 0;
    max-width: 62ch;
    font-size: var(--lm-text-xl);
    line-height: var(--lm-leading-snug);
    color: var(--lm-ink-muted);
}
.lm-article__meta {
    margin-top: var(--lm-space-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-3);
    font-size: var(--lm-text-sm);
    color: var(--lm-ink-subtle);
}
.lm-article__cover {
    margin: var(--lm-space-10) 0;
    border-radius: var(--lm-radius-xl);
    overflow: hidden;
    box-shadow: var(--lm-shadow-lg);
}
.lm-article__cover img { width: 100%; }

/* ── Prose: makale gövdesi tipografik ritmi (H1-H3 + liste/alıntı/kod) ── */
.lm-prose {
    font-size: var(--lm-text-lg);
    line-height: var(--lm-leading-normal);
    color: var(--lm-ink);
    max-width: 68ch;
    margin-inline: auto;
}
.lm-prose > * + * { margin-top: var(--lm-space-5); }

.lm-prose h2 {
    font-size: var(--lm-display-3);
    margin-top: var(--lm-space-12);
    margin-bottom: var(--lm-space-4);
    padding-top: var(--lm-space-2);
}
.lm-prose h3 {
    font-size: var(--lm-text-2xl);
    margin-top: var(--lm-space-10);
    margin-bottom: var(--lm-space-3);
}
.lm-prose h2 + h3 { margin-top: var(--lm-space-5); }

.lm-prose p { margin: 0; }
.lm-prose a { text-decoration: underline; text-underline-offset: 2px; }

.lm-prose :is(ul, ol) { padding-left: 1.4em; }
.lm-prose li + li { margin-top: var(--lm-space-2); }
.lm-prose li::marker { color: var(--lm-primary); }

.lm-prose blockquote {
    margin: var(--lm-space-8) 0;
    padding: var(--lm-space-4) var(--lm-space-6);
    border-left: 4px solid var(--lm-primary);
    background: var(--lm-grad-soft);
    border-radius: var(--lm-radius-md);
    color: var(--lm-ink-strong);
    font-size: var(--lm-text-xl);
    font-style: italic;
}
.lm-prose blockquote p { margin: 0; }

.lm-prose img, .lm-prose figure {
    margin: var(--lm-space-8) auto;
    border-radius: var(--lm-radius-lg);
    overflow: hidden;
}
.lm-prose figcaption {
    margin-top: var(--lm-space-2);
    text-align: center;
    font-size: var(--lm-text-sm);
    color: var(--lm-ink-subtle);
}

.lm-prose :not(pre) > code {
    font-family: var(--lm-font-mono);
    font-size: .9em;
    background: var(--lm-slate-100);
    color: var(--lm-purple-700);
    padding: .15em .4em;
    border-radius: var(--lm-radius-sm);
}
.lm-prose pre {
    font-family: var(--lm-font-mono);
    font-size: var(--lm-text-sm);
    background: var(--lm-slate-900);
    color: var(--lm-slate-100);
    padding: var(--lm-space-5);
    border-radius: var(--lm-radius-lg);
    overflow-x: auto;
    line-height: var(--lm-leading-snug);
}
.lm-prose pre code { background: none; color: inherit; padding: 0; }

.lm-prose hr {
    border: 0;
    height: 1px;
    background: var(--lm-border);
    margin: var(--lm-space-12) 0;
}
.lm-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--lm-text-base);
}
.lm-prose :is(th, td) {
    padding: var(--lm-space-3);
    border-bottom: 1px solid var(--lm-border);
    text-align: left;
}
.lm-prose th { font-weight: var(--lm-weight-bold); color: var(--lm-ink-strong); }

/* ───────────────────────────── Yazar (Author) ─────────────────────────────── */
.lm-author-card {
    display: flex;
    align-items: center;
    gap: var(--lm-space-5);
    padding: var(--lm-space-6);
    background: var(--lm-surface);
    border: 1px solid var(--lm-border-soft);
    border-radius: var(--lm-radius-lg);
    box-shadow: var(--lm-shadow-sm);
}
.lm-author-card__avatar {
    height: 72px;
    width: 72px;
    border-radius: var(--lm-radius-pill);
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: var(--lm-shadow-md);
}
.lm-author-card__name { font-size: var(--lm-text-xl); margin: 0; }
.lm-author-card__role { color: var(--lm-primary-strong); font-weight: var(--lm-weight-semi); font-size: var(--lm-text-sm); }
.lm-author-card__bio { color: var(--lm-ink-muted); margin: var(--lm-space-2) 0 0; }

/* Yazar sayfası başlık bloğu (geniş) */
.lm-author-hero {
    text-align: center;
    margin-bottom: var(--lm-space-12);
}
.lm-author-hero__avatar {
    height: 112px;
    width: 112px;
    border-radius: var(--lm-radius-pill);
    object-fit: cover;
    margin: 0 auto var(--lm-space-5);
    box-shadow: var(--lm-shadow-lg);
}

/* Makale altı yazar kutusu */
.lm-article__author {
    margin-top: var(--lm-space-12);
    padding-top: var(--lm-space-8);
    border-top: 1px solid var(--lm-border);
}

/* ───────────────────────────── Sayfalama ──────────────────────────────────── */
.lm-blog-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--lm-space-2);
    margin-top: var(--lm-space-12);
}
.lm-blog-pager a, .lm-blog-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding-inline: var(--lm-space-3);
    border-radius: var(--lm-radius-md);
    border: 1.5px solid var(--lm-border);
    color: var(--lm-ink-muted);
    font-weight: var(--lm-weight-semi);
}
.lm-blog-pager a:hover { border-color: var(--lm-primary); color: var(--lm-primary-strong); text-decoration: none; }
.lm-blog-pager [aria-current="page"] {
    background: var(--lm-grad);
    border-color: transparent;
    color: var(--lm-on-primary);
}
.lm-blog-pager__disabled { opacity: .45; pointer-events: none; }

/* ───────────────────────────── Boş durum ──────────────────────────────────── */
.lm-blog-empty {
    text-align: center;
    padding: var(--lm-space-16) var(--lm-space-5);
    color: var(--lm-ink-muted);
}
.lm-blog-empty__title { font-size: var(--lm-text-2xl); color: var(--lm-ink-strong); margin: 0 0 var(--lm-space-2); }

/* ───────────────────────────── Duyarlı ayarlar ────────────────────────────── */
@media (max-width: 640px) {
    .lm-blog-nav { gap: var(--lm-space-4); }
    .lm-blog-grid { grid-template-columns: 1fr; gap: var(--lm-space-6); }
    .lm-author-card { flex-direction: column; text-align: center; }
    .lm-prose { font-size: var(--lm-text-base); }
}