/* ==========================================================================
   Bloq yazısının detal səhifəsi - /{dil}/bloq/{slug}
   --------------------------------------------------------------------------
   `blog.css` ilə BİRLİKDƏ yüklənir: kök element `.blog-page`-dir, ona görə
   dəyişənlər (--blog-blue, --blog-border…), `.blog-grid`, `.blog-card` və
   `.blog-badge` oradan gəlir - burada təkrarlanmır.

   Əsas qərar: mətn sütunu **məhdudlaşdırılıb**. Əvvəl gövdə konteynerin
   bütün enini tuturdu (≈1100px) - sətir çox uzun olduğu üçün göz sətirin
   başını itirirdi. Oxunaqlı ölçü 65-75 simvoldur.
   ========================================================================== */

.blog-detail {
    --bd-measure: 760px;
    /* Örtük mətndən bir az geniş olur - editorial ritm, amma sütunla bağlı qalır */
    --bd-cover-width: 900px;
}

/* ── Başlıq zolağı ────────────────────────────────────────────────────── */

.bd-head {
    padding: 0 0 30px;
    background: linear-gradient(180deg, #FBFCFD 0%, #FFF 100%);
    border-bottom: 1px solid var(--blog-line);
}

/* Sütun MƏRKƏZDƏDİR: konteyner ≈1100px, mətn isə 760px - sola dayansaydı
   sağda böyük boş sahə qalırdı. */
.bd-head__inner {
    max-width: var(--bd-measure);
    margin: 0 auto;
}

.bd-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    color: var(--blog-muted);
    font: 400 14px/22px "Poppins", sans-serif;
}

/* Nişan siyahı səhifəsindəki ilə eynidir - burada yalnız keçid halı əlavədir */
.bd-meta a.blog-badge { text-decoration: none; }

.bd-meta__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #C9CFD4;
}

.bd-title {
    margin: 0;
    color: var(--blog-text);
    font: 500 38px/56px "Poppins", sans-serif;
    letter-spacing: -.2px;
}

/* ── Örtük şəkli ──────────────────────────────────────────────────────── */

.bd-cover {
    max-width: var(--bd-cover-width);
    margin: 34px auto 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--blog-surface);
}

.bd-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ── Mətn ─────────────────────────────────────────────────────────────── */

.bd-body {
    max-width: var(--bd-measure);
    margin: 34px auto 0;
    color: #3A3A3A;
    font: 400 16px/30px "Poppins", sans-serif;
}

.bd-body > *:first-child { margin-top: 0; }
.bd-body > *:last-child { margin-bottom: 0; }

.bd-body p { margin: 0 0 20px; }

.bd-body h2,
.bd-body h3,
.bd-body h4 {
    margin: 38px 0 14px;
    color: var(--blog-text);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.bd-body h2 { font-size: 26px; line-height: 40px; }
.bd-body h3 { font-size: 21px; line-height: 34px; }
.bd-body h4 { font-size: 18px; line-height: 30px; }

.bd-body a {
    color: var(--blog-blue);
    text-decoration: none;
    border-bottom: 1px solid rgba(6, 164, 237, .35);
    transition: border-color .25s ease;
}

.bd-body a:hover { border-color: var(--blog-blue); }

.bd-body ul,
.bd-body ol { margin: 0 0 20px; padding-left: 22px; }
.bd-body li { margin: 0 0 10px; }

.bd-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 16px;
}

.bd-body blockquote {
    margin: 26px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--blog-blue);
    color: var(--blog-text);
    font-size: 17px;
    line-height: 32px;
}

.bd-body blockquote p:last-child { margin-bottom: 0; }

/* CKEditor cədvəlləri: dar ekranda konteynerin İÇİNDƏ sürüşür, səhifə daşmır */
.bd-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0 0 22px;
    font-size: 15px;
}

.bd-body th,
.bd-body td {
    padding: 10px 14px;
    border: 1px solid var(--blog-border);
    text-align: left;
}

.bd-body th { background: var(--blog-surface); font-weight: 500; }

.bd-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--blog-surface);
    font-size: 14px;
}

.bd-body pre {
    margin: 0 0 22px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #0F1720;
    color: #E6EDF3;
    overflow-x: auto;
}

.bd-body pre code { padding: 0; background: none; color: inherit; }

.bd-body hr {
    margin: 32px 0;
    border: 0;
    border-top: 1px solid var(--blog-line);
}

/* ── Alt sətir: geri + paylaş ─────────────────────────────────────────── */

.bd-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    max-width: var(--bd-measure);
    margin: 34px auto 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--blog-line);
}

.bd-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blog-muted);
    font: 400 15px/24px "Poppins", sans-serif;
    text-decoration: none;
    transition: color .25s ease;
}

.bd-back:hover { color: var(--blog-blue); }

.bd-back__arrow {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    transition: transform .25s ease;
}

.bd-back__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bd-back:hover .bd-back__arrow { transform: translateX(-3px); }

.bd-share { display: flex; align-items: center; gap: 10px; }

.bd-share__label {
    color: var(--blog-muted);
    font: 400 14px/22px "Poppins", sans-serif;
}

.bd-share__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--blog-border);
    border-radius: 50%;
    background: #fff;
    color: var(--blog-muted);
    font-size: 14px;
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.bd-share__btn:hover {
    border-color: var(--blog-blue);
    background: rgba(6, 164, 237, .06);
    color: var(--blog-blue);
}

/* ── Oxşar yazılar ────────────────────────────────────────────────────── */

.bd-related { padding: 56px 0 8px; }

.bd-related__title {
    margin: 0 0 24px;
    color: var(--blog-text);
    font: 500 26px/40px "Poppins", sans-serif;
}

/* ── Səhifənin altındakı ortaq bloklar ────────────────────────────────── */

/* `.page-faq` və `.seo-links` layout-dan gəlir (`main.blade.php`).

   Onlar QƏSDƏN tam en tutur - «Oxşar yazılar» kimi ayrı zolaqdırlar və
   başlıqları konteynerin sol kənarı ilə düzülür. Yalnız yuxarı boşluq
   bərabərləşdirilir ki, məqalə ilə aralarında eyni ritm olsun.
   Bu fayl yalnız detal səhifəsində yüklənir, ona görə selektorlar sadədir. */
.blog-detail + .page-faq,
.blog-detail + .seo-links,
.page-faq + .seo-links { padding-top: 48px; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media only screen and (max-width: 991.98px) {
    .bd-title { font-size: 30px; line-height: 46px; }
    .bd-cover { margin-top: 26px; }
    .bd-cover img { aspect-ratio: 16 / 9; }
    .bd-body { font-size: 15px; line-height: 28px; }
    .bd-body h2 { font-size: 23px; line-height: 36px; }
    .bd-related { padding-top: 44px; }
}

@media only screen and (max-width: 575.98px) {
    .bd-head { padding-bottom: 22px; }
    .bd-title { font-size: 24px; line-height: 38px; }
    .bd-cover { border-radius: 16px; }
    .bd-foot { align-items: flex-start; flex-direction: column; }
    .bd-related__title { font-size: 22px; line-height: 34px; }
}

/* Hərəkət azaldılması */
@media (prefers-reduced-motion: reduce) {
    .bd-back__arrow,
    .bd-share__btn { transition: none; }
    .bd-back:hover .bd-back__arrow { transform: none; }
}