/* ==========================================================================
   diyarbakr.com — redesign-blog.css
   Blog listesi (/blog) + makale sayfası (/blog/:slug) editoryal katmanı
   Tasarım dili: turuncu #ea580c / #c2410c, tonlar #fff7ed/#ffedd5/#fdba74,
   stone #1c1917/#57534e/#78716c, kart köşe 1.25rem, başlık "Source Serif 4",
   gölge 0 1px 2px rgba(28,25,23,.05) + 0 12px 32px -16px rgba(28,25,23,.14),
   easing cubic-bezier(.22,.61,.36,1).

   KATMAN NOTLARI (çakışma yönetimi):
   - redesign-cards.css .hero-post-card / .related-post-card'ı tasarladı →
     bu iki sınıfın özellikleri burada YENİDEN TANIMLANMAZ; yalnızca
     .related-posts-sec / .related-posts-grid düzenine dokunulur.
   - redesign-pages.css koyu kabuğu (.bg-[#141414]) açık temaya çevirdi ve
     .dynamic-page-prose'u stiledi → burada SADECE makaleye özel iyileştirme;
     makale kapsayıcısı `article.bg-[#141414]:has(a[href="/blog"])` ile
     diğer detay sayfalarından (mekan/:slug div kabuğu, :slug içerik
     sayfaları) ayrıştırılır.
   - ::selection turuncu tonu polish.css §2'de site geneli tanımlı →
     burada tekrarlanmaz.
   - Bundle DOM (index-D3If5UAG.js):
     * /blog (p1): section.sec > span.overline + h2.sec-title +
       .sec-title-divider + div.grid(.md:grid-cols-2.lg:grid-cols-3.gap-8)
       > div.card-reveal > a[href^="/blog/"] (koyu Tailwind kart:
       bg-[rgba(38,30,24,0.9)], border-amber-500/25, text-white...).
     * /blog/:slug (m1): .max-w-3xl > article.bg-[#141414] (kapak,
       chip satırı, h1, özet p.text-white/55, h-px divider,
       .dynamic-page-prose, alt bar: a[href="/blog"] + #etiket chip'leri)
       + .related-posts-sec > h2.sec-title(inline stil) +
       .related-posts-grid > a.related-post-card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) BLOG LİSTESİ — sayfa başlığı: editoryal kicker + büyük serif başlık
   -------------------------------------------------------------------------- */

.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .overline {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.34rem 0.95rem 0.34rem 0.75rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
}
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .overline::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #ea580c;
}

.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .sec-title {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .sec-title-divider {
  margin-bottom: 2.5rem;
}

/* Kart grid'i: marka ritmine uygun boşluk (gap-8'in 2rem'i fazla geniş) */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid {
  gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   2) BLOG LİSTESİ KARTLARI — koyu Tailwind kabuk → beyaz premium kart
      (hero-post-card / related-post-card ile aynı kimlik: üst turuncu şerit,
      tarih chip'i, serif başlık, turuncu "devamını oku")
   -------------------------------------------------------------------------- */

.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a {
  position: relative;
  background: #fff;
  border-color: #eceae7;
  border-radius: 1.25rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.05),
    0 12px 32px -16px rgba(28, 25, 23, 0.14);
  transition:
    translate 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: translate;
}
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a:hover {
  translate: 0 -4px;
  border-color: #fdba74;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.05),
    0 12px 32px -16px rgba(28, 25, 23, 0.14),
    0 24px 56px -20px rgba(234, 88, 12, 0.18);
}

/* Üst kenarda ince turuncu gradyan şerit — blog kart kimliği */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #fdba74, #ea580c 45%, #c2410c);
}

/* Kapaksız yazı placeholder'ı: koyu degrade → krem-turuncu */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .bg-gradient-to-br {
  background-image: linear-gradient(135deg, #fff7ed, #fdba74);
}

/* Görsel üstü karartma: açık temada yumuşatılır */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    rgba(28, 25, 23, 0.3),
    rgba(28, 25, 23, 0.04) 55%,
    transparent
  );
}

/* "Öne çıkan" rozeti: amber → marka turuncu degradesi */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .from-amber-600 {
  background-image: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 6px 14px -6px rgba(234, 88, 12, 0.55);
}

/* Köşedeki etiket rozeti: koyu cam → beyaz chip */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .right-3.top-3 {
  background: rgba(255, 255, 255, 0.92);
  border-color: #fed7aa;
  color: #9a3412;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.08);
}

/* Kart gövdesi boşlukları (p-6 → kart ailesiyle aynı ritim) */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a > .p-6 {
  padding: 1.2rem 1.35rem 1.35rem;
  gap: 0.5rem;
}

/* Tarih: hero-post-date ile aynı chip dili */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .text-white\/35 {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.22rem 0.65rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
}

/* Başlık: beyaz sans → koyu serif */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1c1917;
  transition: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a:hover h2 {
  color: #c2410c;
}

/* Özet: soluk beyaz → stone */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .p-6 p {
  color: #78716c;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.62;
}

/* "Devamını oku" — hero-post-read ile aynı ses */
.portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .text-amber-500 {
  color: #ea580c;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3) ÖNE ÇIKAN İLK KART — grid'de 2 kolon kaplar, dergi kapağı hissi
      (bundle'da featured için ayrı render yok; ilk kart liderdir)
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal:first-child {
    grid-column: span 2;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal:first-child > a .h-52 {
    height: 17.5rem;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal:first-child > a h2 {
    font-size: 1.55rem;
    line-height: 1.22;
    letter-spacing: -0.015em;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal:first-child > a .p-6 p {
    font-size: 0.9375rem;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal:first-child > a > .p-6 {
    padding: 1.4rem 1.6rem 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   4) MAKALE BAŞLIK BLOĞU — büyük serif başlık, chip satırı, lead, divider
      (kabuk → beyaz dönüşümü redesign-pages.css §6'da; burada makale-özel)
   -------------------------------------------------------------------------- */

/* Başlık: pages.css'in genel clamp'i makale için büyütülür */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.12;
}

/* Kategori (etiket) chip'leri: pages.css renkleri verdi; biçim rafine edilir */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .mb-5 {
  gap: 0.6rem;
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .mb-5 .bg-amber-500\/10 {
  padding: 0.3rem 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* Tarih / okunma meta'sı */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .mb-5 .text-white\/30,
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .mb-5 .text-white\/25 {
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Özet (lead) paragrafı */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) p.text-white\/55 {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #57534e;
  max-width: 42rem;
  text-wrap: pretty;
}

/* İnce turuncu divider */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .h-px.bg-gradient-to-r {
  height: 2px;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #ea580c, #fdba74 45%, transparent);
}

/* Kapak görseli karartması: açık kart üzerinde yumuşak */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .from-black\/70 {
  background-image: linear-gradient(
    to top,
    rgba(28, 25, 23, 0.42),
    rgba(28, 25, 23, 0.06) 50%,
    transparent
  );
}

/* --------------------------------------------------------------------------
   5) MAKALE GÖVDE TİPOGRAFİSİ — dergi ölçüsü
      (pages.css §10 temel prose'u verdi; makalede ölçü/ritim derinleştirilir)
   -------------------------------------------------------------------------- */

.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose {
  max-width: 42rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.85;
}
@media (min-width: 768px) {
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose {
    font-size: 1.125rem;
  }
}

.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose p {
  margin: 0 0 1.3rem;
}

/* GİRİŞ PARAGRAFI — büyük ve soluk, dergi girişi */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose > p:first-of-type {
  font-size: 1.25rem;
  line-height: 1.72;
  color: #57534e;
  margin-bottom: 1.7rem;
}

/* DROP-CAP — Source Serif 4, turuncu; güvenli marjlar, mobilde kapatılır */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose > p:first-of-type::first-letter {
  float: left;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.82;
  color: #ea580c;
  padding: 0.06em 0.14em 0.02em 0;
}

/* Ara başlıklar — pages.css'in serif + turuncu alt çizgisini tamamlar */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose h2 {
  font-size: 1.5625rem;
  margin-top: 2.6rem;
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose h3 {
  font-size: 1.25rem;
  margin-top: 2.1rem;
}

/* Linkler — pages.css rengine ek okuma konforu */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose a {
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

/* İçerik içi görseller: yuvarlatılmış + marka gölgesi */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose img {
  display: block;
  width: 100%;
  border-radius: 1rem;
  box-shadow:
    0 1px 2px rgba(28, 25, 23, 0.05),
    0 16px 40px -18px rgba(28, 25, 23, 0.22);
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose figure {
  margin: 1.7rem 0;
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose figure img {
  margin: 0;
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose figcaption {
  margin-top: 0.65rem;
  text-align: center;
  font-size: 0.8125rem;
  font-style: italic;
  color: #a8a29e;
}
/* blockquote krem zemin (bundle) ve tablo zebrası (pages.css) korunur */

/* --------------------------------------------------------------------------
   6) MAKALE ALT BARI — geri pili + etiket bulutu
   -------------------------------------------------------------------------- */

/* "← Tüm yazılar" — marka pill'i */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) a[href="/blog"] {
  padding: 0.55rem 1.2rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  color: #c2410c;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05);
  transition:
    background-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
    translate 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) a[href="/blog"]:hover {
  background: #ffedd5;
  border-color: #fdba74;
  color: #9a3412;
  translate: 0 -1px;
}

/* #etiket chip bulutu — krem zemin */
.portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) span.bg-white\/5 {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  color: #9a3412;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   7) İLGİLİ YAZILAR — bölüm ayracı + başlık aksanı + grid ritmi
      (kart içi tasarım redesign-cards.css'te; ona dokunulmaz)
   -------------------------------------------------------------------------- */

.portal-root .related-posts-sec {
  margin-top: 2.75rem;
  border-top: 1px dashed #e7e5e4;
}
.portal-root .related-posts-sec .sec-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: -0.01em;
}
.portal-root .related-posts-sec .sec-title::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ea580c, #fdba74);
}
.portal-root .related-posts-grid {
  gap: 1.1rem;
}

/* --------------------------------------------------------------------------
   8) MOBİL KONTROL
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid {
    gap: 1.1rem;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .sec-title-divider {
    margin-bottom: 1.75rem;
  }

  /* Makale iç boşlukları daraltılır (px-8'in 2rem'i mobilde geniş) */
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) > .px-8 {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) p.text-white\/55 {
    font-size: 1.0625rem;
  }
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose {
    font-size: 1.0625rem;
  }
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose > p:first-of-type {
    font-size: 1.125rem;
  }

  /* Drop-cap mobilde kapatılır */
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) .dynamic-page-prose > p:first-of-type::first-letter {
    float: none;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   9) HAREKET AZALTMA
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a,
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a img,
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a h2,
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a .text-amber-500 span,
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) a[href="/blog"] {
    transition: none;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a:hover {
    translate: none;
  }
  .portal-root .sec:has(> .grid > .card-reveal > a[href^="/blog/"]) > .grid > .card-reveal > a:hover img {
    scale: none;
    translate: none;
  }
  .portal-root article.bg-\[\#141414\]:has(a[href="/blog"]) a[href="/blog"]:hover {
    translate: none;
  }
}