/* Blog sayfaları: yeni tasarım (site.css ile birlikte yüklenir) */
.btn-dark { color: var(--ink); background: var(--bg); }
.btn-dark:hover { background: #000; }
.reading-progress { position: fixed; z-index: 60; top: 0; left: 0; width: 0; height: 6px; background: var(--ink); }

/* ---------- üst satır ---------- */
.b-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 46px var(--m) 0; }
.b-top .toplink { position: static; }
.b-meta { color: var(--muted); font-size: 15px; }
.b-meta a { color: var(--ink); text-underline-offset: 4px; }

/* ---------- liste: giriş ---------- */
.b-hero { padding: 150px var(--m) 110px; }
.b-hero h1 { max-width: 14ch; font-size: var(--t3); line-height: 1.02; letter-spacing: -.035em; }
.b-hero .mask { display: block; }
.b-lead { max-width: 52ch; margin-top: 28px; font-size: var(--t1); }

/* ---------- liste: son yazı ---------- */
.b-featured { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: center; padding: 0 var(--m) 180px; }
.b-feat-img { grid-column: 1 / span 7; overflow: hidden; }
.b-feat-img img { width: 100%; height: auto; transition: transform .8s var(--ease); }
.b-feat-img:hover img { transform: scale(1.03); }
.b-feat-text { grid-column: 9 / span 4; }
.b-feat-text h2 { margin: 12px 0 16px; font-size: var(--t2); line-height: 1.12; }
.b-feat-text h2 a { text-decoration: none; }
.b-feat-text h2 a:hover { color: var(--accent); }
.b-excerpt { max-width: 44ch; margin-bottom: 26px; }

/* ---------- liste: tüm yazılar ---------- */
.b-index { padding: 0 var(--m) 180px; }
.b-index-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-bottom: 36px; }
.b-index-head h2 { font-size: var(--t2); }
.b-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.b-filter button { padding: 10px 18px; border: 0; border-radius: var(--radius); color: var(--ink); background: var(--surface); font: inherit; font-size: 15px; cursor: pointer; transition: background-color .15s, color .15s, transform .15s var(--ease); }
.b-filter button:hover { background: var(--tile); }
.b-filter button:active { transform: translateY(1px); }
.b-filter button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); }
.b-split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }
.b-list { grid-column: 1 / span 7; margin: 0; padding: 0; list-style: none; }
.b-list li[hidden] { display: none; }
.b-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "t i" "m i"; align-items: center; column-gap: 20px; row-gap: 4px; padding: 20px 22px 22px; border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: background-color .15s, color .15s; }
.b-row-title { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; }
.b-row-meta { color: var(--muted); font-size: 15px; transition: color .15s; }
.b-list li.is-on .b-row, .b-row:hover, .b-row:focus-visible { color: var(--accent-ink); background: var(--accent); }
.b-list li.is-on .b-row-meta, .b-row:hover .b-row-meta, .b-row:focus-visible .b-row-meta { color: var(--accent-ink); }
.b-thumb { grid-area: i; width: 200px; height: 112px; object-fit: cover; }
.b-row-title { grid-area: t; }
.b-row-meta { grid-area: m; }
.b-preview { grid-column: 9 / span 4; position: sticky; top: 40px; }
.b-preview img { width: 100%; height: auto; }
.b-preview figcaption { margin-top: 14px; font-size: var(--t1); }
.b-empty { margin-top: 24px; color: var(--muted); }
.b-list-wide { grid-column: auto; max-width: none; }

/* ---------- kapanış alanı ---------- */
.b-cta { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px 20px; align-items: end; padding: 140px var(--m); color: var(--accent-ink); background: var(--accent); }
.b-cta h2 { grid-column: 1 / span 6; max-width: 12ch; font-size: var(--t3); font-weight: 700; line-height: .98; letter-spacing: -.04em; }
.b-cta > div { grid-column: 8 / span 5; }
.b-cta p { max-width: 44ch; margin-bottom: 26px; }
.b-related { padding: 150px var(--m) 160px; }
.b-related h2 { margin-bottom: 28px; font-size: var(--t2); }
.b-related .b-list { max-width: 900px; }

/* ---------- yazı başlığı ---------- */
.b-top-left { position: absolute; z-index: 5; top: 0; left: 0; gap: 28px; }
.a-head { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.a-head-text { align-self: end; padding: 150px var(--m) 80px; }
.a-meta { margin-top: 26px; }
.a-head h1 { margin: 16px 0 18px; font-size: clamp(32px, 4.2vw, 60px); line-height: 1.04; letter-spacing: -.035em; }
.a-head h1 .mask { display: block; }
.a-head h1.a-long { font-size: clamp(26px, 3vw, 44px); }
.a-sub { max-width: 30ch; margin-bottom: 22px; font-size: var(--t2); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.a-lead { max-width: 52ch; }
.a-head-img { width: 100%; height: 100%; min-height: 360px; object-fit: contain; background: var(--surface); }

/* ---------- yazı gövdesi: açık zemin ---------- */
.article-wrap {
  --navy: #18191b; --blue: #155eef; --red: #e5354f; --line: #cfd2d7; --muted: #4a4e55; --surface: #e2e4e7;
  --shadow: none; --blue: #0f4bd1; --ink: #20242b;
  padding: 110px 0 130px; color: var(--light-ink); background: var(--light);
}
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 72px; max-width: 1180px; margin: 0 auto; padding: 0 var(--m); }
.article-body { max-width: 74ch; color: #20242b; font-size: 17.5px; line-height: 1.85; }
.article-body h2 { color: var(--light-ink); font-weight: 700; }
.article-body strong { color: var(--light-ink); }
.article-toc { position: sticky; top: 40px; align-self: start; padding: 22px; border-radius: var(--radius); background: #e2e4e7; }
.toc-title { margin-bottom: 10px; font-size: 15px; font-weight: 700; }
.article-toc ol { margin: 0; padding: 0; list-style: none; }
.article-toc a { display: block; padding: 6px 0; color: #4a4e55; font-size: 15px; line-height: 1.4; text-decoration: none; }
.article-toc a:hover { color: var(--light-ink); }
.article-toc a.active { color: var(--light-ink); font-weight: 700; }

/* yazı bileşenleri: düz zemin, çerçevesiz */
.article-wrap .viz { border: 0; border-radius: var(--radius); background: #e2e4e7; }
.article-wrap .callout { border: 0; border-radius: var(--radius); background: #e2e4e7; }
.article-wrap .callout.warn, .article-wrap .callout.danger, .article-wrap .callout.ok { border: 0; background: #e2e4e7; }
.article-wrap .table-wrap { border: 0; border-radius: var(--radius); }
.article-wrap .cmp-table th { color: #eff0f1; background: #18191b; }
.article-wrap .cmp-table tr:nth-child(even) td { background: #e8eaed; }
.article-wrap .checklist li { border: 0; background: #e2e4e7; }
.article-wrap .code-block { border-radius: var(--radius); background: var(--bg); }
.article-wrap .calc { border: 0; border-radius: var(--radius); background: #e2e4e7; box-shadow: none; }
.article-wrap .calc-card { background: var(--light); }

/* ---------- ekran boyutları ---------- */
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .article-toc { display: none; }
}
@media (max-width: 900px) {
  .b-top { padding-top: 22px; }
  .b-hero { padding: 90px var(--m) 70px; }
  .b-hero h1 { max-width: none; font-size: 9.4vw; }
  .b-featured { grid-template-columns: 1fr; gap: 24px; padding-bottom: 110px; }
  .b-feat-img, .b-feat-text { grid-column: 1; }
  .b-index { padding-bottom: 110px; }
  .b-split { grid-template-columns: 1fr; }
  .b-list { grid-column: 1; }
  .b-preview { display: none; }
  .b-row { padding: 16px 0 22px; }
  .b-row { grid-template-columns: 1fr; grid-template-areas: "i" "t" "m"; }
  .b-row .b-thumb { width: 100%; height: auto; aspect-ratio: 1200 / 630; margin-bottom: 12px; }
  .b-list li.is-on .b-row { color: var(--ink); background: transparent; }
  .b-list li.is-on .b-row-meta { color: var(--muted); }
  .b-cta { grid-template-columns: 1fr; padding: 90px var(--m); }
  .b-cta h2, .b-cta > div { grid-column: 1; }
  .b-cta h2 { max-width: none; font-size: 9vw; }
  .b-related { padding: 100px var(--m) 110px; }
  .a-head { grid-template-columns: 1fr; min-height: 0; }
  .a-head-text { padding: 110px var(--m) 50px; }
  .a-head-img { height: auto; min-height: 0; aspect-ratio: 1200 / 630; }
  .a-head h1 { font-size: 8.6vw; }
  .a-head h1.a-long { font-size: 6.8vw; }
  .a-sub { font-size: 22px; }
  .article-wrap { padding: 70px 0 90px; }
  .article-body { font-size: 17px; }
}
@media (hover: none) {
  .b-row:hover { color: var(--ink); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .b-feat-img img { transition: none; }
}

.article-wrap *, .article-wrap *::before, .article-wrap *::after { box-shadow: none !important; }

.article-wrap .viz *:not(svg *) { border-width: 0 !important; }
.article-wrap .code-block { margin-bottom: 44px; }
.article-wrap .code-title { border-bottom: 0; }

/* ikonlu kart sırası yerine: ikon solda, metin sağda */
.article-wrap .threat { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; text-align: left; }
.article-wrap .threat i { grid-row: 1 / span 2; margin: 0; }
.article-wrap .threat b, .article-wrap .threat span { grid-column: 2; }
.article-wrap .threats, .article-wrap .threats.eight { grid-template-columns: 1fr; gap: 8px; }
.article-wrap .threat { padding: 12px 16px; }
@media (min-width: 901px) { .article-wrap .threats.eight { grid-template-columns: 1fr 1fr; } }
.b-top .mark { position: static; }
.legal-head { min-height: 82svh; }
.legal-head .auth-pics { min-height: 0; }
.legal-head { height: 82svh; min-height: 560px; }
.legal-head .auth-pics { height: calc(100% - 2 * var(--m)); overflow: hidden; }
@media (max-width: 900px) { .legal-head { height: auto; min-height: 0; } }
.legal-head { height: 90svh; grid-template-columns: 1fr 1.25fr; }
.legal-head .auth-pics { grid-template-rows: 4fr 1fr; }
@media (max-width: 900px) { .legal-head { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .legal-head { height: auto; min-height: 0; } }
.b-feat-img img, .b-preview img, .b-thumb, .a-head-img { transition: filter .5s ease; }
.legal-head { height: calc(90svh - var(--head-h)); min-height: 520px; }
@media (max-width: 900px) { .legal-head { height: auto; min-height: 0; } }