/* ================================================================
   ALISOFT — Blog listesi (blog.css)
   Düzen Tekin İnşaat blog sayfasını izler; renkler Alisoft'un.
   ================================================================ */

.bg {
    --bg-ink: var(--a-ink);
    --bg-text: var(--a-text);
    --bg-muted: var(--a-muted);
    --bg-line: var(--a-line);
    --bg-accent: var(--a-accent);
    --bg-accent-h: var(--a-accent-h);
    --bg-black: var(--a-black);
    --menu-h:    76px;

    color: var(--bg-ink);
    background: #fff;
}

.bg-wrap { max-width: var(--a-wrap); margin: 0 auto; padding: 0 var(--a-gutter); }

/* ── Tam ekran başlık ───────────────────────────────────── */
.bg-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    margin-top: calc((var(--menu-h) + 38px) * -1);
    overflow: hidden;
    color: #fff;
    background: var(--bg-black);
}

.bg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-hero-shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11, 11, 15, .93) 0%, rgba(11, 11, 15, .75) 45%, rgba(11, 11, 15, .3) 100%); }
.bg-hero-inner { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--menu-h) + 38px + 72px); padding-bottom: 110px; }

.bg-crumb { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.bg-crumb a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.bg-crumb a:hover { color: #fff; }
.bg-crumb span[aria-hidden] { color: var(--a-accent-light); }
.bg-crumb [aria-current] { color: rgba(255, 255, 255, .85); }

.bg-kicker { display: flex; align-items: center; gap: 12px; margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--a-accent-light); }
.bg-kicker span { width: 32px; height: 2px; background: currentColor; }

.bg-title { max-width: 950px; margin: 20px 0 22px; font-size: clamp(2.375rem, 1.2rem + 4.6vw, 5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; text-transform: uppercase; color: #fff; }
.bg-title em { font-style: normal; color: var(--a-accent-light); }
.bg-sub { max-width: 580px; margin: 0 0 36px; font-size: 1.125rem; line-height: 1.7; color: rgba(255, 255, 255, .82); }

.bg-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    background: var(--bg-accent);
    transition: background .2s;
}

.bg-btn:hover { background: var(--bg-accent-h); }
.bg-btn svg, .bg-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.bg-btn:hover svg { transform: translateX(4px); }

/* Aşağı kaydır işareti */
.bg-scroll { position: absolute; left: 50%; bottom: 32px; z-index: 1; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .6); border-radius: 14px; transform: translateX(-50%); }
.bg-scroll span { position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: bg-scroll 1.8s infinite; }

@keyframes bg-scroll {
    0% { opacity: 0; transform: translate(-50%, 0); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, 14px); }
}

/* ── İçerik ─────────────────────────────────────────────── */
.bg-main { padding: 96px 0 120px; scroll-margin-top: 80px; }

.bg-bar { margin-bottom: 44px; }
.bg-top { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.bg-head { margin: 0; font-size: clamp(1.625rem, 1rem + 2vw, 2.375rem); font-weight: 800; letter-spacing: -.03em; text-transform: uppercase; }

.bg-search { display: flex; flex: none; width: 360px; border: 1px solid var(--bg-line); transition: border-color .2s; }
.bg-search:focus-within { border-color: var(--bg-ink); }
.bg-search input { flex: 1; min-width: 0; padding: 13px 16px; font: inherit; font-size: .875rem; background: transparent; border: 0; outline: 0; }
.bg-search button { display: grid; place-items: center; width: 50px; color: #fff; cursor: pointer; background: var(--bg-ink); border: 0; transition: background .2s; }
.bg-search button:hover { background: var(--bg-accent); }
.bg-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.bg-cats { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--bg-line); }
.bg-cats::-webkit-scrollbar { display: none; }

.bg-cats a {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0 0 16px;
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--bg-muted);
    text-decoration: none;
    transition: color .2s;
}

.bg-cats a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--bg-accent); transform: scaleX(0); transition: transform .25s; }
.bg-cats a small { padding: 2px 7px; font-size: .6875rem; font-weight: 700; color: #98A2B3; background: #F2F4F7; border-radius: 10px; }
.bg-cats a:hover, .bg-cats a.is-on { color: var(--bg-ink); }
.bg-cats a.is-on::after { transform: scaleX(1); }
.bg-cats a.is-on small { color: #fff; background: var(--bg-accent); }

.bg-result { margin: -20px 0 34px; font-size: .9375rem; color: var(--bg-text); }
.bg-result a { margin-left: 12px; font-weight: 700; color: var(--bg-accent); text-decoration: none; }

/* Öne çıkan yazı */
.bg-feat { display: grid; grid-template-columns: 1.25fr 1fr; margin-bottom: 60px; color: inherit; text-decoration: none; background: var(--bg-black); }
.bg-feat-img { position: relative; min-height: 440px; overflow: hidden; background: #1D2939; }
.bg-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.bg-feat:hover .bg-feat-img img { filter: brightness(.9); }
.bg-tag { position: absolute; top: 22px; left: 22px; padding: 8px 14px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--bg-accent); }

.bg-feat-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 56px 50px; }
.bg-meta { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bg-accent); }
.bg-feat .bg-meta { color: var(--a-accent-light); }
.bg-feat-body h2 { margin: 16px 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem); font-weight: 800; line-height: 1.25; color: #fff; }
.bg-feat-body p { margin: 0 0 30px; font-size: 1rem; line-height: 1.75; color: rgba(255, 255, 255, .7); }

/* Kartlar */
.bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 46px 30px; }

.bg-card { color: inherit; text-decoration: none; border-bottom: 3px solid transparent; transition: border-color .3s; }
.bg-card:hover { border-color: var(--bg-accent); }
.bg-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #F2F4F7; }
.bg-card-img img { width: 100%; height: 100%; object-fit: cover; transition: filter .3s; }
.bg-card:hover .bg-card-img img { filter: brightness(.85); }

.bg-card-body { padding: 22px 0; }
.bg-card-body h3 { margin: 10px 0 14px; font-size: 1.1875rem; font-weight: 800; line-height: 1.35; color: var(--bg-ink); }
.bg-desc { display: -webkit-box; overflow: hidden; margin: 0 0 16px; font-size: .9375rem; line-height: 1.65; color: var(--bg-text); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.bg-more { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-ink); }
.bg-card:hover .bg-more { color: var(--bg-accent); }
.bg-card:hover .bg-more svg { transform: translateX(4px); }

/* Sayfalama */
.bg-pages { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 64px; }
.bg-pages a, .bg-pages span { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px; font-weight: 700; color: var(--bg-ink); text-decoration: none; border: 1px solid var(--bg-line); }
.bg-pages span { color: #98A2B3; border: 0; }
.bg-pages a:hover { border-color: var(--bg-ink); }
.bg-pages a.is-on { color: #fff; background: var(--bg-accent); border-color: var(--bg-accent); }

/* Boş durum */
.bg-empty { padding: 64px 24px; text-align: center; background: var(--a-soft); }
.bg-empty p { margin: 0 0 24px; font-size: 1.0625rem; color: var(--bg-text); }

/* Odak */
.bg a:focus-visible, .bg button:focus-visible, .bg input:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 3px; }

/* ── Duyarlı ────────────────────────────────────────────── */
@media (max-width: 960px) {
    .bg { --menu-h: 64px; }
    .bg-top { flex-direction: column; align-items: stretch; }
    .bg-search { width: 100%; }
    .bg-feat { grid-template-columns: 1fr; }
    .bg-feat-img { min-height: 300px; }
    .bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .bg-wrap { padding: 0 16px; }
    .bg-hero-inner { padding-bottom: 96px; }
    .bg-main { padding: 64px 0 88px; }
    .bg-feat-body { padding: 34px 24px; }
    .bg-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Blog yazısı (blog/yazi) — blog listesiyle aynı dil
   ================================================================ */
.bp-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; pointer-events: none; }
.bp-progress span { display: block; height: 100%; background: var(--bg-accent); transform: scaleX(0); transform-origin: 0 50%; }

/* Başlık: koyu, kısa */
.bp-head {
    margin-top: calc((var(--menu-h) + 38px) * -1);
    color: #fff;
    background: radial-gradient(700px 360px at 85% 0%, rgba(66, 99, 235, .3), transparent 70%), var(--bg-black);
}

.bp-head-inner { max-width: 960px; padding-top: calc(var(--menu-h) + 38px + 56px); padding-bottom: 160px; }
.bp-head .bg-crumb { flex-wrap: wrap; }
.bp-title { margin: 18px 0 18px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
.bp-lead { max-width: 720px; margin: 0 0 28px; font-size: 1.1875rem; line-height: 1.65; color: rgba(255, 255, 255, .75); }

.bp-meta { display: flex; align-items: center; gap: 12px; }
.bp-author { display: grid; place-items: center; width: 44px; height: 44px; background: #fff; border-radius: 50%; }
.bp-author img { width: 24px; height: auto; }
.bp-meta-text strong { display: block; font-size: .9375rem; }
.bp-meta-text small { font-size: .8125rem; color: rgba(255, 255, 255, .6); }

/* Kapak başlığın üstüne biner */
.bp-cover-wrap { max-width: 1120px; margin-top: -120px; }
.bp-cover { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; box-shadow: 0 40px 80px -40px rgba(16, 24, 40, .5); }

/* İçerik ve yan sütun */
.bp-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; gap: 64px; max-width: 1120px; padding-top: 56px; padding-bottom: 96px; }

.bp-content { font-size: 1.125rem; line-height: 1.8; color: var(--bg-text); }
.bp-content > :first-child { margin-top: 0; }
.bp-content p { margin: 0 0 1.25em; }
.bp-content h2 { margin: 2.2em 0 .7em; font-size: 1.625rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--bg-ink); scroll-margin-top: 110px; }
.bp-content h3 { margin: 1.8em 0 .6em; font-size: 1.25rem; font-weight: 700; color: var(--bg-ink); }
.bp-content ul, .bp-content ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.bp-content li { margin-bottom: .55em; }
.bp-content li::marker { color: var(--bg-accent); font-weight: 700; }
.bp-content strong { color: var(--bg-ink); }
.bp-content a { font-weight: 600; color: var(--bg-accent); text-underline-offset: 3px; }

.bp-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bg-line); }
.bp-end-tag { margin: 0; font-size: .9375rem; color: var(--bg-muted); }
.bp-end-tag a { font-weight: 700; color: var(--bg-ink); text-decoration: none; }
.bp-end-tag a:hover { color: var(--bg-accent); }

.bp-share { display: flex; align-items: center; gap: 8px; }
.bp-share > span { margin-right: 4px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-muted); }
.bp-share a, .bp-share button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--bg-ink); cursor: pointer; background: #fff; border: 1px solid var(--bg-line); transition: color .2s, background .2s, border-color .2s; }
.bp-share a:hover, .bp-share button:hover { color: #fff; background: var(--bg-ink); border-color: var(--bg-ink); }
.bp-share button.is-ok { color: #fff; background: #12B76A; border-color: #12B76A; }
.bp-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bp-side { position: sticky; top: calc(var(--menu-h) + 24px); display: grid; gap: 24px; align-self: start; }
.bp-side-title { margin: 0 0 14px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bg-ink); }

.bp-toc { padding-left: 16px; border-left: 2px solid var(--bg-line); }
.bp-toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bp-toc a { position: relative; display: block; padding: 6px 0; font-size: .875rem; line-height: 1.45; color: var(--bg-muted); text-decoration: none; transition: color .2s; }
.bp-toc a::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; width: 2px; background: var(--bg-accent); transform: scaleY(0); transition: transform .2s; }
.bp-toc a:hover, .bp-toc a.is-on { color: var(--bg-ink); }
.bp-toc a.is-on { font-weight: 600; }
.bp-toc a.is-on::before { transform: scaleY(1); }

.bp-cta { padding: 24px; color: #fff; background: var(--bg-black); }
.bp-cta .bp-side-title { color: #8DA2FB; }
.bp-cta p:not(.bp-side-title) { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.bp-cta .bg-btn { width: 100%; justify-content: center; padding: 14px 18px; }

/* Diğer yazılar */
.bp-more { padding: 88px 0 104px; background: #F5F7FA; }
.bp-more-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 36px; }
.bp-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--bg-ink); text-decoration: none; }
.bp-all:hover { color: var(--bg-accent); }
.bp-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1000px) {
    .bp-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .bp-side { position: static; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .bp-head-inner { padding-bottom: 110px; }
    .bp-cover-wrap { margin-top: -80px; }
    .bp-cover { aspect-ratio: 4 / 3; }
    .bp-content { font-size: 1.0625rem; }
    .bp-side { grid-template-columns: 1fr; }
    .bp-more { padding: 64px 0 80px; }
}

/* Yazı başlığı: kapak fotoğrafı arka planda */
.bp-head { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: min(78vh, 760px); }
.bp-head-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.bp-head-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 11, 15, .55) 0%, rgba(11, 11, 15, .6) 40%, rgba(11, 11, 15, .92) 100%); }
.bp-head-inner { width: 100%; padding-bottom: 64px; }
.bp-layout { padding-top: 64px; }

@media (max-width: 640px) {
    .bp-head { min-height: 0; }
    .bp-head-inner { padding-bottom: 44px; }
    .bp-layout { padding-top: 44px; }
}