/* ajaniq blog (founder 18 Ekim: "az yer kaplayan, görselli, renkli, kendine has").
   site.css'in koyu teması ve token'ları üzerine; yalnız blog sayfalarında yüklenir.
   Renk: her kategori iki ton taşır (--a, --b: "r,g,b"); kapaklar koddan üretilir. */

.blog-hero { padding-block: 44px 18px; position: relative; isolation: isolate; overflow: hidden; }
.blog-hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 620px; height: 420px; z-index: -1; background: radial-gradient(closest-side, rgba(59,157,255,.16), transparent), radial-gradient(closest-side at 30% 60%, rgba(139,92,246,.14), transparent); filter: blur(10px); }
.blog-hero h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); max-width: 24ch; margin-top: 12px; }
.blog-hero .lead { margin-top: 12px; font-size: 1.04rem; }
.blog-cadence { margin-top: 14px; font: 500 13px var(--font-mono); color: var(--muted); }
.blog-cadence .dot { display: inline-block; vertical-align: middle; margin-right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }

/* filtre çipleri */
.blog-list { display: grid; gap: 22px; padding-bottom: 64px; }
.blog-filter { display: grid; gap: 10px; }
.bf-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; align-items: center; }
.bf-row::-webkit-scrollbar { display: none; }
.bf-label { font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 56px; flex: none; }
.bchip { --a: 53,227,208; --b: 59,157,255; flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--text); font-size: 13.5px; text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.bchip i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, rgb(var(--a)), rgb(var(--b))); }
.bchip:hover { border-color: rgba(var(--a), .6); color: var(--heading); }
.bchip.on { background: linear-gradient(120deg, rgba(var(--a), .2), rgba(var(--b), .14)); border-color: rgba(var(--a), .55); color: var(--heading); }
.bchip.sec { border-style: dashed; }
.bchip.sec.on { border-style: solid; }
.bchip-ic svg { width: 15px; height: 15px; stroke: var(--cyan); display: block; }

/* kartlar */
.post-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card { --a: 53,227,208; --b: 59,157,255; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; }
.post-card:hover { transform: translateY(-3px); border-color: rgba(var(--a), .5); box-shadow: 0 14px 40px -18px rgba(var(--a), .45); }
.post-card a { display: grid; height: 100%; color: inherit; text-decoration: none; grid-template-rows: auto 1fr; }
.pc-cover { aspect-ratio: 480 / 220; overflow: hidden; background: #0a0e17; }
.pc-cover svg { width: 100%; height: 100%; display: block; }
.pc-body { padding: 14px 16px 16px; display: grid; gap: 8px; align-content: start; }
.pc-meta { display: flex; gap: 8px; flex-wrap: wrap; font: 600 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.pc-cat { color: rgb(var(--a)); }
.pc-sec { color: var(--muted); }
.post-card h3, .post-card h2 { font-size: 1.06rem; line-height: 1.3; color: var(--heading); }
.post-card p { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { display: flex; justify-content: space-between; gap: 10px; font: 500 12px var(--font-mono); color: var(--muted); margin-top: 2px; }
.post-card.wide .pc-cover { aspect-ratio: 720 / 300; }
@media (min-width: 860px) {
  .post-card.wide a { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto; }
  .post-card.wide .pc-cover { aspect-ratio: auto; height: 100%; min-height: 250px; }
  .post-card.wide .pc-body { padding: 26px 28px; align-content: center; gap: 12px; }
  .post-card.wide h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
  .post-card.wide p { -webkit-line-clamp: 4; font-size: 15px; }
}

/* yazı sayfası */
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.blog-hero .post-tags + h1 { margin-top: 16px; max-width: 30ch; }
.post-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 14px; font: 500 12.5px var(--font-mono); color: var(--muted); }
.post-meta > * + *::before { content: "·"; margin-right: 16px; color: var(--line-strong); }
.post-cover { margin-top: 22px; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(var(--a), .35); aspect-ratio: 1100 / 260; min-height: 120px; }
.post-cover svg { width: 100%; height: 100%; display: block; }

.post-layout { display: grid; gap: 22px; padding-top: 14px; padding-bottom: 40px; }
@media (min-width: 1000px) {
  .post-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .post-toc { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; }
}
.post-toc details { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 4px 14px; }
.post-toc summary { cursor: pointer; padding: 10px 0; font: 600 12px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.post-toc ol { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 7px; font-size: 13.5px; }
.post-toc a { color: var(--text); text-decoration: none; }
.post-toc a:hover { color: var(--cyan); }

.post-body { max-width: 74ch; min-width: 0; }
.post-body > * + * { margin-top: 16px; }
.post-body h2 { font-size: clamp(1.32rem, 2.4vw, 1.7rem); margin-top: 38px; scroll-margin-top: 90px; }
.post-body h3 { font-size: 1.12rem; margin-top: 26px; scroll-margin-top: 90px; }
.post-body p, .post-body li { font-size: 16.5px; line-height: 1.72; }
.post-body > p:first-child { font-size: 17.5px; color: var(--heading); }
.post-body ul, .post-body ol { padding-left: 22px; display: grid; gap: 8px; }
.post-body li::marker { color: var(--cyan); }
.post-body strong { color: var(--heading); }
.post-body code { font: 500 .9em var(--font-mono); background: rgba(122,164,255,.1); padding: 1px 5px; border-radius: 5px; }
.post-body a { text-underline-offset: 3px; }
.post-body .tip { border: 1px solid rgba(245,165,36,.35); border-left: 3px solid #f5a524; background: rgba(245,165,36,.06); border-radius: 0 12px 12px 0; padding: 14px 18px; display: grid; gap: 8px; }
.post-body .tip p { font-size: 15.5px; }
.prompt-box { margin: 18px 0 0; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: #0b1120; }
.prompt-box figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 600 11.5px var(--font-mono); color: var(--cyan); letter-spacing: .04em; }
.pb-copy { font: 600 11px var(--font-mono); color: var(--text); background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer; flex: none; }
.pb-copy:hover { border-color: var(--cyan); }
.prompt-box pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; font: 500 13.5px/1.65 var(--font-mono); color: var(--text); }
.post-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.post-table th, .post-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-table thead th { font: 600 12px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.post-table tbody th { color: var(--heading); font-weight: 600; }
.post-faq { max-width: none; margin: 0; }
.post-links h2 { font-size: 1.15rem; margin-top: 34px; }
.post-links .related { margin-top: 12px; }
.post-cta { margin-top: 34px !important; display: grid; gap: 14px; align-items: center; padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: linear-gradient(120deg, rgba(53,227,208,.08), rgba(139,92,246,.08)); }
.post-cta strong { font: 600 1.08rem var(--font-display); color: var(--heading); }
.post-cta p { margin-top: 6px; font-size: 15px; color: var(--text); }
@media (min-width: 720px) { .post-cta { grid-template-columns: 1fr auto; } }
.related-posts { padding-bottom: 72px; display: grid; gap: 18px; }
.related-posts > h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

/* telefon: kartlar yatay ve kısa (founder: "az yer kaplayan") — kapak solda kare, özet gizli */
@media (max-width: 560px) {
  .post-grid { gap: 10px; }
  .post-card:not(.wide) a { grid-template-columns: 96px 1fr; grid-template-rows: auto; }
  .post-card:not(.wide) .pc-cover { aspect-ratio: auto; height: 100%; min-height: 104px; }
  .post-card:not(.wide) .pc-body { padding: 10px 12px; gap: 5px; }
  .post-card:not(.wide) p { display: none; }
  .post-card:not(.wide) h3 { font-size: .98rem; }
  .post-card:not(.wide) .pc-meta { font-size: 10px; }
  .post-card:not(.wide) .pc-foot { font-size: 11px; }
  .blog-hero { padding-block: 30px 12px; }
  .post-body p, .post-body li { font-size: 16px; }
  .post-cover { aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: reduce) { .post-card, .post-card:hover { transition: none; transform: none; } }