/* =============================================================================
   BLOG — liste ve yazı sayfaları (koyu)

   Kendi başına bir gramer DEĞİL: çekirdeği hizmet sayfalarıyla paylaşıyor
   (`hizmet-ortak.css` → `.sv-root`, `.sv-inset`, `.sv-mono`, `.sv-btn`,
   `.sv-rise`, odak halkası, tipografi ölçeği). Burada yalnız blogun kendi
   parçaları var: kapak, okuma sütunu, alıntı bloğu, kategori hapları, kart
   ızgarası.

   Sürücü de ortak: `hizmet-ortak.js` (açılışlar, kelime kelime başlık).
   Blogun kendi iki işi — kategori süzgeci ve paylaşım — blog.js'te.

   REFERANS AYRIMI: kaynak tasarım AÇIK zeminliydi (beyaz sayfa, siyah
   başlık). Burası koyu. Bire bir çevirmek yerine iki şey değişti:
     1) "Views / Shares" sayaçları YOK. Statik teslimde sayaç uydurmak
        anlamsız; yerine gerçekten çalışan paylaşım bağlantıları var.
     2) Instagram ikonu YOK: Instagram'ın bir bağlantıyı paylaştıran web
        adresi yok, çalışmayan bir ikon koymaktansa yerine "bağlantıyı
        kopyala" kondu.
   Kapak görselinin neden yazı sayfasında değil listede olduğu aşağıda,
   başlık alanının notunda.
   ========================================================================= */

.bl-root { --bl-okuma: 44cqw; }

/* ── kategori hapı ─────────────────────────────────────────────────────────
   Fontu AFACAD: kartın başlığıyla aynı aile. Önceki hâli Jost'tu ve hap
   kartın içinde ayrı bir dilden konuşuyordu. */
.bl-chip {
  display: inline-flex; align-items: center; height: 1.9cqw; min-height: 26px;
  padding: 0 0.95cqw; border-radius: 999px;
  background: rgba(12,12,12,0.55); box-shadow: inset 0 0 0 1px rgba(240,240,240,0.24);
  -webkit-backdrop-filter: blur(1.2cqw); backdrop-filter: blur(1.2cqw);
  font-family: 'Afacad Flux', sans-serif; font-weight: 500;
  font-size: 0.78cqw; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffffff; white-space: nowrap;
}

/* ===========================================================================
   1) YAZI SAYFASI — başlık alanı
   =========================================================================== */
/* KAPAK GÖRSELİ BURADA YOK, bilerek. Yazıların kapakları birer BAŞLIK KARTI:
   başlık zaten görselin içine basılı. Görseli sayfanın tepesine koyup üstüne
   H1 bindirince aynı cümle iki kez okunuyor, kırıntı yolu da görselin alt
   yazısının üstüne düşüyordu (ölçüldü). Kaynak tasarımda da yazı sayfası
   düz zeminde açılıyor; kapaklar listede, anasayfa şeridinde ve paylaşım
   önizlemesinde (og:image) çalışıyor.

   Yükseklik ekranın %62'si: başlık, künye ve gövdenin ilk satırları ilk
   ekranda birlikte görünüyor — ziyaretçi yazıya girdiğini kaydırmadan
   anlıyor. */
.bl-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 62vh; min-height: 62svh; padding-top: 11cqw; padding-bottom: 3.6cqw;
  overflow: hidden; border-bottom: 1px solid var(--sv-line); }
/* Zemindeki ışık: hizmet sayfalarının açılışındaki hâlenin sessiz hâli —
   orada vurgu renginde, burada nötr. Blogun bir vurgu rengi yok: yazıların
   rengi kapaklarından geliyor, sayfanın kendisi tarafsız kalıyor. */
.bl-hero-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(64% 58% at 20% 96%, rgba(240,240,240,0.075) 0%, transparent 72%); }
.bl-hero-in { position: relative; z-index: 2; }

.bl-crumb { display: flex; align-items: center; gap: 0.6cqw; margin-bottom: 2.2cqw; }
.bl-crumb span, .bl-root .bl-crumb a {
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.83cqw;
  letter-spacing: 0.02em; color: rgba(255,255,255,0.73); }
.bl-root .bl-crumb a:hover { color: #ffffff; }
.bl-crumb-now { color: #ffffff !important; }

/* Seçicilerin başında `.bl-root` var: hizmet-ortak.css h1/h2/p/ul için
   `margin: 0` diyor ve o kural `.sv-root p` biçiminde — sınıf+tip, yani
   tek sınıflı bir kuraldan DAHA ÖZGÜL. Sıralama kurtarmıyor, özgüllük
   gerekiyordu; boşluklar sessizce düşüyordu (ölçüldü). */
.bl-root .bl-h1 { max-width: 30ch; margin-top: 1.3cqw;
  font-family: 'Afacad Flux', sans-serif; font-weight: 600;
  font-size: 3.6cqw; line-height: 1.04; letter-spacing: -0.03em; color: #ffffff;
  text-wrap: balance; }

/* Künye: kaynak tasarımdaki üç kutulu satırın sadeleşmiş hâli. Orada her
   kutunun bir ikonu vardı; koyu zeminde o ikonlar bir araç çubuğu gibi
   okunuyordu — burada ayraç ince bir çizgi. */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6cqw;
  margin-top: 2cqw; }
.bl-meta-i { display: flex; flex-direction: column; gap: 0.3cqw; }
.bl-meta-k { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400;
  font-size: 0.6cqw; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.67); }
.bl-meta-v { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 0.95cqw;
  color: #ffffff; }
.bl-meta-sep { width: 1px; height: 2.2cqw; background: var(--sv-line); }

/* ===========================================================================
   2) YAZI SAYFASI — gövde
   =========================================================================== */
/* İki sütun: solda yapışkan paylaşım rayı, sağda okuma sütunu. Ray dar ve
   BOŞ kalabiliyor; ızgara ölçüsü sabit ki okuma sütunu her yazıda aynı yerde
   başlasın. */
.bl-body { display: grid; grid-template-columns: 4.5cqw minmax(0, var(--bl-okuma)) 1fr;
  column-gap: 3.2cqw; padding-top: 4.4cqw; padding-bottom: 5cqw; }

.bl-rail { position: sticky; top: 8cqw; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.bl-rail-lbl { writing-mode: vertical-rl; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.58cqw; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.64); margin-bottom: 0.4cqw; }
.bl-rail-line { width: 1px; height: 2.6cqw; background: var(--sv-line); }
.bl-root .bl-share { display: flex; align-items: center; justify-content: center;
  width: 2.3cqw; height: 2.3cqw; min-width: 34px; min-height: 34px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--sv-line); color: rgba(255,255,255,0.82);
  background: transparent; cursor: pointer; padding: 0;
  transition: color .3s ease, box-shadow .3s ease, background .3s ease; }
.bl-root .bl-share:hover { color: #0c0c0c; background: #f0f0f0;
  box-shadow: inset 0 0 0 1px #f0f0f0; }
.bl-share svg { width: 46%; height: 46%; min-width: 14px; min-height: 14px; }
/* "Kopyalandı" geri bildirimi: düğmenin kendi metni yok, bu yüzden mesaj
   yanında beliriyor ve iki saniye sonra sönüyor (sürücü sayfanın içinde). */
.bl-copied { font-family: 'Jost', sans-serif; font-size: 0.62cqw; color: rgba(255,255,255,0.73);
  opacity: 0; transition: opacity .3s ease; }
.bl-copied.on { opacity: 1; }

/* Okuma sütunu. Ölçü 44cqw ≈ 70 karakter: kaynak tasarımdaki satır uzunluğu
   ile aynı, punto ise koyu zemin için bir tık büyük (açık zeminde ince
   yazı daha kolay okunur, koyuda kalınlaşması gerekir). */
.bl-article { font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 1.02cqw; line-height: 1.78; color: rgba(255,255,255,0.86);
  text-wrap: pretty; }
.bl-root .bl-article > * + * { margin-top: 1.5cqw; }
.bl-article strong, .bl-article b { font-weight: 500; color: #ffffff; }
.bl-article em { font-style: italic; color: rgba(255,255,255,0.94); }
.bl-root .bl-article a { text-decoration: underline; text-underline-offset: 0.22em; }

/* Giriş paragrafı: gövdeden bir punto büyük ve daha açık. Yazının ilk
   cümlesi listede özet olarak da kullanılıyor. */
.bl-lead { font-size: 1.18cqw; line-height: 1.62; color: rgba(255,255,255,0.94);
  font-weight: 300; }

.bl-root .bl-article h2 { margin-top: 3cqw; font-family: 'Afacad Flux', sans-serif; font-weight: 600;
  font-size: 1.85cqw; line-height: 1.16; letter-spacing: -0.02em; color: #ffffff; }

/* Madde imi ARTI: kaynak tasarımdaki işaretin aynısı. Nokta yerine artı,
   çünkü maddeler "ekleme" anlatıyor — kim kimdir, ne gerekir. */
.bl-list { display: flex; flex-direction: column; gap: 0.9cqw; }
.bl-list li { position: relative; padding-left: 2cqw; }
.bl-list li::before { content: "+"; position: absolute; left: 0; top: -0.06em;
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 1.2cqw;
  color: var(--sv-ac); line-height: inherit; }

/* ── alıntı bloğu ──────────────────────────────────────────────────────────
   Kaynak tasarımdaki büyük tırnak + iri cümle + altında kaynak satırı.
   Tırnak bir GÖRSEL değil, tipografik işaret: ölçekle birlikte büyüyor ve
   sayfanın rengini alıyor. Sola taşıyor (negatif margin) ki alıntı okuma
   sütununun hizasını kırsın — göz oraya takılsın diye. */
.bl-quote { display: grid; grid-template-columns: 3.4cqw 1fr; column-gap: 1.2cqw;
  margin-top: 2.6cqw; margin-bottom: 2.6cqw; margin-left: -3.6cqw; }
.bl-quote-mark { font-family: 'Afacad Flux', sans-serif; font-weight: 700;
  font-size: 4.6cqw; line-height: 0.78; color: rgba(255,255,255,0.18);
  user-select: none; }
.bl-quote blockquote { margin: 0; font-family: 'Afacad Flux', sans-serif; font-weight: 500;
  font-size: 2cqw; line-height: 1.14; letter-spacing: -0.022em; color: #ffffff; }
.bl-quote figcaption { display: flex; align-items: center; gap: 0.7cqw; margin-top: 0.9cqw;
  font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.85cqw;
  color: rgba(255,255,255,0.73); }
.bl-quote figcaption::before { content: ""; width: 1.6cqw; height: 1px;
  background: rgba(240,240,240,0.4); }

/* Yazının kapanışı: paylaşım daveti + hizmet sayfalarına köprü. */
.bl-end { margin-top: 3.4cqw; padding-top: 2cqw; border-top: 1px solid var(--sv-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2cqw; }

/* ===========================================================================
   3) LİSTE SAYFASI
   =========================================================================== */
.bl-top { padding-top: 12cqw; padding-bottom: 3.4cqw; }
.bl-top h1 { font-family: 'Afacad Flux', sans-serif; font-weight: 600;
  font-size: 5.2cqw; line-height: 1; letter-spacing: -0.035em; color: #ffffff;
  margin-top: 1.1cqw; }
.bl-top p { max-width: 52ch; margin-top: 1.6cqw; font-family: 'Jost', sans-serif;
  font-weight: 300; font-size: 1.1cqw; line-height: 1.66; color: rgba(255,255,255,0.82); }

/* Süzgeç: hap şeridi. Aktif hap dolu, ötekiler çizgili — hizmet sayfalarındaki
   bölüm menüsüyle aynı dil. */
.bl-filter { display: flex; flex-wrap: wrap; gap: 0.7cqw; padding-bottom: 3cqw; }
.bl-root .bl-f { height: 2.4cqw; min-height: 34px; padding: 0 1.2cqw; border-radius: 999px;
  background: transparent; box-shadow: inset 0 0 0 1px var(--sv-line);
  font-family: 'Afacad Flux', sans-serif; font-weight: 500; font-size: 0.95cqw;
  letter-spacing: 0.01em; color: rgba(255,255,255,0.82); cursor: pointer;
  transition: color .3s ease, background .3s ease, box-shadow .3s ease; }
.bl-root .bl-f:hover { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(240,240,240,0.34); }
.bl-root .bl-f[aria-pressed="true"] { background: #f0f0f0; color: #0c0c0c;
  box-shadow: inset 0 0 0 1px #f0f0f0; }

.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw;
  padding-bottom: 6cqw; }
.bl-root .bl-card { display: flex; flex-direction: column; border-radius: 0.83cqw;
  overflow: hidden; background: #101012; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  transition: transform .5s cubic-bezier(.22,.7,.2,1), box-shadow .5s cubic-bezier(.22,.7,.2,1); }
.bl-root .bl-card:hover { transform: translateY(-0.5cqw);
  box-shadow: inset 0 0 0 1px rgba(240,240,240,0.22), 0 1.2cqw 2.6cqw rgba(0,0,0,0.5); }
.bl-card-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10;
  overflow: hidden; background: #17171c; }
.bl-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s cubic-bezier(.22,.7,.2,1); }
.bl-card:hover .bl-card-thumb img { transform: scale(1.04); }
.bl-card-thumb .bl-chip { position: absolute; left: 1cqw; top: 1cqw; }
.bl-card-body { display: flex; flex-direction: column; gap: 0.8cqw; flex: 1 1 auto;
  padding: 1.3cqw 1.3cqw 1.5cqw; }
.bl-card-title { margin: 0; font-family: 'Afacad Flux', sans-serif; font-weight: 600;
  font-size: 1.35cqw; line-height: 1.2; letter-spacing: -0.012em; color: #ffffff; }
.bl-card-ozet { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 0.88cqw;
  line-height: 1.6; color: rgba(255,255,255,0.76); }
.bl-card-date { margin-top: auto; font-family: 'Jost', sans-serif; font-weight: 300;
  font-size: 0.83cqw; letter-spacing: 0.04em; color: #b9b9b9; }
/* Süzgeç dışında kalan kart: yer kaplamadan gidiyor. */
.bl-card[hidden] { display: none; }
.bl-bos { display: none; padding: 3cqw 0 6cqw; font-family: 'Jost', sans-serif;
  font-weight: 300; font-size: 1cqw; color: rgba(255,255,255,0.73); }
.bl-bos.on { display: block; }

/* Yazı sayfasının altındaki "başka yazılar" ızgarası iki kolon. */
.bl-more { padding-bottom: 6cqw; }
.bl-more-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 2cqw; margin-bottom: 2cqw; }
.bl-more-h h2 { font-family: 'Afacad Flux', sans-serif; font-weight: 600; font-size: 2.1cqw;
  letter-spacing: -0.02em; color: #ffffff; }
.bl-more .bl-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 0; }

/* ===========================================================================
   DAR EKRAN
   =========================================================================== */
@media (max-width: 900px) {
  /* TAVANLI BİRİM. Dar ekran ölçüleri 390 tuvalinde çizildi; düz cqw iken
     900px'e kadar büyüyorlardı (768'de 30px gövde, 100px başlık, 69px'lik
     haplar — ölçüldü). `--bl-u` 440px'e kadar 1cqw ile aynı, sonra 4.4px'te
     duruyor: telefonda tasarım aynen kalıyor, tablette yazı ve ritim sabit.
     Kenar boşlukları (`.sv-inset`) genişlikle büyümeye devam ediyor. */
  .bl-root { --bl-okuma: 100%; --bl-u: min(1cqw, 4.4px); }
  /* Mikro etiketlerin tabanı 12px (künye anahtarları ve ray etiketi dahil):
     360'ta 8.6px'e iniyorlardı. Aralıklı büyük harfli mono etiketler 12px'te
     de 360'ta tek satıra sığıyor (künye satırı ve ray ölçüldü). */
  .bl-chip { height: calc(6 * var(--bl-u)); padding: 0 calc(3 * var(--bl-u));
    font-size: max(12px, calc(2.7 * var(--bl-u))); }

  .bl-hero { min-height: auto; padding-top: calc(30 * var(--bl-u)); padding-bottom: calc(9 * var(--bl-u)); }
  /* Aralık en az 4px (360'ta 2.2px'ti): "Blog"un 44px'lik dokunma alanı iki
     yanındaki ayraç boşluğuna ancak böyle sığıyor, "Anasayfa"nın son harfine
     ve "Markalaşma"ya değmiyor (satır piksel piksel tarandı). */
  .bl-crumb { margin-bottom: calc(5 * var(--bl-u)); gap: max(4px, 0.6cqw); }
  .bl-crumb span, .bl-root .bl-crumb a { font-size: max(12px, calc(3 * var(--bl-u))); }
  /* Kırıntı yolu bağlantısı 17px boydu: dikey dolgu dokunma kutusunu 44px'e
     çıkarıyor, eşit negatif marj satırın yerini koruyor. */
  .bl-root .bl-crumb a { display: inline-block; line-height: 1.4; position: relative;
    padding-block: calc((44px - 1.4em) / 2); margin-block: calc((1.4em - 44px) / 2); }
  /* Genişlik de 44px: "Blog" 23px enindeydi. Yatay dolgu işe yaramıyor —
     komşu bağlantının kutusu ayraçtan taşıp "Anasayfa"nın son harflerini
     örtüyordu. Görünmez katman bağlantı kadar geniş, dar bağlantıda 44px'e
     kadar ORTADAN açılıyor; geniş bağlantıda hiçbir şey değişmiyor. */
  .bl-root .bl-crumb a::before { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
    left: 50%; width: max(100%, 44px); transform: translateX(-50%); }
  .bl-root .bl-h1 { font-size: calc(8.6 * var(--bl-u)); margin-top: calc(4 * var(--bl-u)); }
  .bl-meta { gap: calc(5 * var(--bl-u)); margin-top: calc(6 * var(--bl-u)); }
  .bl-meta-k { font-size: max(12px, calc(2.4 * var(--bl-u))); }
  .bl-meta-v { font-size: max(12px, calc(3.4 * var(--bl-u))); }
  .bl-meta-sep { display: none; }

  /* Ray yatay: dikey ray dar ekranda okuma sütununu daraltıyordu. */
  /* `minmax(0, 1fr)`, düz `1fr` değil: 44px'lik paylaşım rayı 360'ta içerik
     genişliğinden uzun; düz `1fr` kolonu rayın en küçük genişliğine açıp
     okuma sütununu kenar boşluğuna taşırıyordu (ölçüldü: 317 / 313px). */
  .bl-body { grid-template-columns: minmax(0, 1fr); row-gap: calc(5 * var(--bl-u));
    padding-top: calc(8 * var(--bl-u)); padding-bottom: calc(10 * var(--bl-u)); }
  .bl-rail { position: static; flex-direction: row; justify-content: flex-start; gap: calc(3 * var(--bl-u)); }
  .bl-rail-lbl { writing-mode: horizontal-tb; font-size: max(12px, calc(2.4 * var(--bl-u))); margin-bottom: 0; }
  .bl-rail-line { width: calc(6 * var(--bl-u)); height: 1px; }
  /* Paylaşım düğmeleri 34px'ti; parmak için 44px. `flex: none`: 360'ta yatay
     ray dar geliyor, esnek öge 43px'e eziliyordu (ölçüldü). */
  .bl-root .bl-share { width: 44px; height: 44px; flex: none; }
  .bl-copied { font-size: max(12px, calc(2.6 * var(--bl-u))); }
  .bl-article { font-size: max(14px, calc(3.9 * var(--bl-u))); line-height: 1.7; }
  .bl-root .bl-article > * + * { margin-top: calc(5 * var(--bl-u)); }
  .bl-lead { font-size: calc(4.4 * var(--bl-u)); }
  .bl-root .bl-article h2 { font-size: calc(6.4 * var(--bl-u)); margin-top: calc(9 * var(--bl-u)); }
  .bl-list li { padding-left: calc(6.5 * var(--bl-u)); }
  .bl-list li::before { font-size: calc(4.4 * var(--bl-u)); }
  .bl-quote { grid-template-columns: calc(8 * var(--bl-u)) 1fr; column-gap: calc(3 * var(--bl-u)); margin-left: 0;
    margin-top: calc(8 * var(--bl-u)); margin-bottom: calc(8 * var(--bl-u)); }
  .bl-quote-mark { font-size: calc(12 * var(--bl-u)); }
  .bl-quote blockquote { font-size: calc(6 * var(--bl-u)); }
  .bl-quote figcaption { font-size: max(12px, calc(3 * var(--bl-u))); margin-top: calc(3 * var(--bl-u)); }
  .bl-end { margin-top: calc(9 * var(--bl-u)); padding-top: calc(6 * var(--bl-u)); gap: calc(4 * var(--bl-u)); }

  .bl-top { padding-top: calc(30 * var(--bl-u)); padding-bottom: calc(8 * var(--bl-u)); }
  .bl-top h1 { font-size: calc(13 * var(--bl-u)); }
  .bl-top p { font-size: calc(4.1 * var(--bl-u)); margin-top: calc(5 * var(--bl-u)); }
  .bl-filter { gap: calc(2.4 * var(--bl-u)); padding-bottom: calc(8 * var(--bl-u)); }
  /* Haplar 35px boydu; 44px parmak ölçüsü. Yazı 14px'in altına inmiyor. */
  .bl-root .bl-f { height: 44px; padding: 0 calc(4 * var(--bl-u));
    font-size: max(14px, calc(3.6 * var(--bl-u))); }
  .bl-grid, .bl-more .bl-grid { grid-template-columns: 1fr; gap: calc(6 * var(--bl-u)); padding-bottom: calc(14 * var(--bl-u)); }
  .bl-card-title { font-size: calc(5 * var(--bl-u)); }
  .bl-card-ozet { font-size: max(14px, calc(3.4 * var(--bl-u))); }
  .bl-card-date { font-size: max(12px, calc(3 * var(--bl-u))); }
  .bl-card-body { gap: calc(3 * var(--bl-u)); padding: calc(5 * var(--bl-u)) calc(5 * var(--bl-u)) calc(6 * var(--bl-u)); }
  .bl-more-h h2 { font-size: calc(7 * var(--bl-u)); }
  /* "Tüm yazılar" 13px boyunda bir mono etiketti. Görünüşü aynı, dokunma
     kutusu dolgu + negatif marjla 44px; yazı 12px tabanlı. */
  .bl-root .bl-more-h a { display: inline-block; font-size: max(12px, calc(2.7 * var(--bl-u)));
    padding-block: calc((44px - 1.2em) / 2); margin-block: calc((1.2em - 44px) / 2); }
}