/* =========================================================================
   Acil Sertifika Core — [asc_blog] "Blog Arşivi" · TASARIM v2
   Kaynak: "Acil Sertifika.dc.html" 1418–1495 (`isBlog`).

   Tüm kurallar .asc-app[data-page="blog"] altına scope'lanır.
   Token öneki --as-* (v1 önekli token adları bu dosyadan TAMAMEN kaldırıldı).
   Kart, çip, buton, ızgara, boş durum, sayfalama ve breadcrumb PAYLAŞILAN
   bileşenlerdir (asc.css §4/§9) — burada yalnızca sayfaya özel yerleşim var.
   Ham hex YOK: her renk asc.css §1'deki token'dan gelir.

   Bölümler: 1) Hero  2) Filtre şeridi (çip + arama)  3) Öne çıkan yazı
             4) Izgara / sayfalama / boş durum  5) Responsive
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) HERO — açık degrade bant + alt çizgi (DC 1420–1428)
   ------------------------------------------------------------------------- */
.asc-app[data-page="blog"] .as-blog-hero {
  background: linear-gradient(180deg, var(--as-tint) 0%, var(--as-white) 100%);
  border-bottom: 1px solid var(--as-line-2);
  padding-block: clamp(32px, 5vw, 44px) clamp(36px, 5vw, 52px);
}
.asc-app[data-page="blog"] .as-blog-hero__title { margin-top: 18px; }
/* Tasarımda hero lead'i 1.0625rem/1.6; paylaşılan `.as-lead` 1.7 basıyor (ölçüm:
   28.9px yerine 27.2px). Hero yüksekliği bu 1.7px + aşağıdaki breadcrumb farkıyla
   birlikte tasarımın 248px'ine oturur (canlı 234px ölçülmüştü). */
.asc-app[data-page="blog"] .as-blog-hero__lead  { margin-top: 14px; max-width: 620px; line-height: 1.6; }
/* Breadcrumb bağlantısı tasarımda 40px dokunma hedefidir (handoff §2.9: tüm
   dokunma hedefleri ≥40px). Paylaşılan `.as-breadcrumb a` yalnızca satır kutusu
   kadar (~23.6px) yükseklikteydi → hero 16px kısa kalıyordu. */
.asc-app[data-page="blog"] .as-blog-hero .as-breadcrumb a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}

/* -------------------------------------------------------------------------
   2) GÖVDE + FİLTRE ŞERİDİ (DC 1429–1442)
   Bölüm dibi standart 96 ritmi; üst boşluk hero'ya bitişik olduğu için DC'deki
   36px'tir (tasarım kararı — filtre şeridi başlığa yakın durur).
   ------------------------------------------------------------------------- */
.asc-app[data-page="blog"] .as-blog-body {
  padding-block: clamp(28px, 4vw, 36px) var(--as-section-y);
}

.asc-app[data-page="blog"] .as-blog-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--as-line-2);
}
.asc-app[data-page="blog"] .as-blog-filter__chips { row-gap: 10px; min-width: 0; }
/* Çip ölçüsü: tasarım 10px 16px / 14px / satır 41px — canlıda paylaşılan
   `a.as-chip` (0,1,1) 9px 13px / 13px basıyordu (satır 39px). Yalnızca blog
   filtre şeridine scope'lanır; `.as-chip--pill`in kendisi asc.css'in bileşenidir,
   ona dokunulmaz. Pasif çip RENKLERİ bu dosyanın konusu değildir. */
.asc-app[data-page="blog"] .as-blog-filter__chips .as-chip--pill {
  min-height: 41px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.4;
}

/* Arama — DC'deki tek satırlık alan + "Ara" düğmesi (JS'siz, sunucu tarafı). */
.asc-app[data-page="blog"] .as-blog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.asc-app[data-page="blog"] .as-blog-search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  min-width: 240px;
  border-radius: var(--as-r-btn);
  background: var(--as-tint);
  border: 1px solid var(--as-line-2);
  transition: border-color var(--as-t-fast) var(--as-ease), box-shadow var(--as-t-fast) var(--as-ease);
}
.asc-app[data-page="blog"] .as-blog-search__field:focus-within {
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-ring);
}
.asc-app[data-page="blog"] .as-blog-search__ico { color: var(--as-blue); flex: none; }
.asc-app[data-page="blog"] .as-blog-search__ico svg { width: 18px; height: 18px; }
.asc-app[data-page="blog"] .as-blog-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--as-navy);
  outline: none;
}
.asc-app[data-page="blog"] .as-blog-search__input::placeholder { color: var(--as-muted-2); opacity: 1; }

/* -------------------------------------------------------------------------
   3) ÖNE ÇIKAN YAZI — iki kolonlu geniş kart (DC 1444–1459)
   ------------------------------------------------------------------------- */
.asc-app[data-page="blog"] .as-blog-featured {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  border: 1px solid var(--as-line-2);
  border-radius: var(--as-r-card-lg);
  overflow: hidden;
  background: var(--as-white);
  color: var(--as-navy);
  transition: border-color var(--as-t-fast) var(--as-ease),
              box-shadow var(--as-t-mid) var(--as-ease);
}
.asc-app[data-page="blog"] .as-blog-featured:hover,
.asc-app[data-page="blog"] .as-blog-featured:focus-visible {
  border-color: var(--as-blue-ring);
  box-shadow: var(--as-shadow-card);
  color: var(--as-navy);
}
.asc-app[data-page="blog"] .as-blog-featured__media {
  position: relative;
  display: block;
  min-height: 300px;
  background: linear-gradient(140deg, var(--as-tint-3), var(--as-tint-4));
  overflow: hidden;
}
.asc-app[data-page="blog"] .as-blog-featured__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.asc-app[data-page="blog"] .as-blog-featured__flag {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 7px 13px;
  border-radius: var(--as-r-pill);
  background: var(--as-red);
  color: var(--as-white);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.asc-app[data-page="blog"] .as-blog-featured__body {
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.asc-app[data-page="blog"] .as-blog-featured__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.asc-app[data-page="blog"] .as-blog-featured__title {
  margin: 16px 0 0;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  color: var(--as-navy);
  text-wrap: balance;
}
.asc-app[data-page="blog"] .as-blog-featured__excerpt {
  display: block;
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--as-ink-2);
}
.asc-app[data-page="blog"] .as-blog-featured__more {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--as-red);
}
.asc-app[data-page="blog"] .as-blog-featured__more svg { width: 15px; height: 15px; }
.asc-app[data-page="blog"] .as-blog-featured:hover .as-blog-featured__more,
.asc-app[data-page="blog"] .as-blog-featured:focus-visible .as-blog-featured__more { color: var(--as-red-hover); }

/* -------------------------------------------------------------------------
   4) IZGARA / SAYFALAMA / BOŞ DURUM
   ------------------------------------------------------------------------- */
.asc-app[data-page="blog"] .as-blog-grid       { margin-top: 24px; }
.asc-app[data-page="blog"] .as-blog-pagination { margin-top: 40px; }
.asc-app[data-page="blog"] .as-blog-empty      { margin-top: 32px; }

/* -- Yazı kartı: arşivdeki ÖLÇÜ düzeltmeleri (DC 1461–1478) ----------------
   Kartın kendisi paylaşılan bir bileşendir (asc.css §9.4 + partials/blog-card.php);
   burada yalnızca blog arşivinde ölçülen sapmalar kapatılır, bileşen dosyasına
   dokunulmaz. Kart gölgesi/kenarlığı bu dosyanın konusu değildir.
   Ölçüm (374px kart genişliğinde): kart 428px yerine tasarımdaki 376px olur. */

/* Görsel: tasarım SABİT 158px (374×158, oran 2.37). Canlıda `.as-media--16x9`
   aspect-ratio'su 374×210 üretiyordu → kart tek başına 52px uzuyordu. */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__media {
  aspect-ratio: auto;
  height: 158px;
}

/* Gövde dolgusu: tasarım 22px (canlı 20px). */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__body { padding: 22px; }

/* Başlık: tasarım 17px/1.32 (22.44px) — canlı 16.5px/1.3 (21.45px). */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__title {
  font-size: 17px;
  line-height: 1.32;
}

/* Özet: tasarım 14px/1.55 (21.7px) w400 ve 2 satır — canlı 13.5px w500, 3 satır. */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__excerpt {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-line-clamp: 2;
}

/* Alt satır: tasarımda İKİ UÇLU tek satır — okuma süresi rozeti ve "Yazıyı Oku →"
   (DC 1474–1476), padding-top 18px (canlı 16px), gap 10px. Rozet canlıda hiç
   yoktu; markup sözleşmesi artık `__read` + `__cta` iki flex öğesi veriyor
   (partials/blog-card.php, `variant=archive`), bu yüzden `space-between`
   güvenlidir: metin ve ok tek bir `__cta` öğesinin İÇİNDE kaldığı için ok kartın
   sağ ucuna fırlamaz. `preview` varyantında (ana sayfa) rozet hiç basılmaz. */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__more {
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
/* CTA: tasarımın "Yazıyı Oku →" ölçüsü (14px/700/--as-red) `__more`dan miras
   kalır; burada yalnızca metin + ok'un tek öğe olarak hizası verilir. */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Okuma süresi rozeti (asc_reading_time çıktısı): tasarım 12.5px / 600 /
   #64748B = --as-muted. `__more`dan gelen kırmızıyı ve 14/700'ü ezmesi gerekir. */
.asc-app[data-page="blog"] .as-blog-grid .as-post-card__read {
  flex: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--as-muted);
}

/* -------------------------------------------------------------------------
   5) RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
  .asc-app[data-page="blog"] .as-blog-search { width: 100%; }
  .asc-app[data-page="blog"] .as-blog-search__field { flex: 1 1 200px; min-width: 0; }
}
@media (max-width: 559.98px) {
  .asc-app[data-page="blog"] .as-blog-featured__body  { padding: 22px; }
  .asc-app[data-page="blog"] .as-blog-featured__media { min-height: 200px; }
}