/* =====================================================================
   Palto Sanat Merkezi — Modern Blog Tasarımı
   Sadece blog listesi, kategori ve tekil yazı sayfalarına uygulanır.
   Marka renkleri: kırmızı #e14341, lacivert #1d1f45
   ===================================================================== */

:root {
  --palto-red: #e14341;
  --palto-red-dark: #b8302e;
  --palto-navy: #1d1f45;
  --palto-ink: #3f3f48;
  --palto-muted: #7c7c88;
  --palto-line: #ecebf1;
  --palto-card-shadow: 0 4px 24px rgba(29, 31, 69, 0.07);
  --palto-card-shadow-hover: 0 18px 44px rgba(225, 67, 65, 0.16);
  --palto-radius: 18px;
}

/* ---------- Sayfa üst başlığı (Blog / Kategori) ---------- */
body.blog #main::before,
body.archive #main::before {
  content: "Blog";
  display: block;
  font-family: inherit;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 800;
  color: var(--palto-navy);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  padding: 0 12px;
}
body.archive #main::before { content: "Yazılar"; }
body.blog #main::after,
body.archive #main::after {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  border-radius: 4px;
  background: var(--palto-red);
  margin: 0 0 34px 12px;
}

/* ---------- Kart ızgarası (grid) ---------- */
body.blog #main .ast-row,
body.archive #main .ast-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin: 0 !important;
}

/* ---------- Yazı kartı ---------- */
body.blog article.ast-article-post,
body.archive article.ast-article-post {
  background: #fff;
  border: 1px solid var(--palto-line);
  border-radius: var(--palto-radius);
  box-shadow: var(--palto-card-shadow);
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease;
  display: flex;
  flex-direction: column;
}
body.blog article.ast-article-post:hover,
body.archive article.ast-article-post:hover {
  transform: translateY(-8px);
  box-shadow: var(--palto-card-shadow-hover);
  border-color: transparent;
}

/* Astra'nın kart altı boşluğunu (padding-bottom:2em) kaldır — tüm kartlar */
body.blog .blog-layout-1,
body.archive .blog-layout-1 {
  padding-bottom: 0 !important;
}
/* iç sarmalayıcıyı dikey akışa çevir ve görseli en üste al */
body.blog .blog-layout-1 .post-content,
body.archive .blog-layout-1 .post-content {
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100%;
}
body.blog .blog-layout-1 .ast-blog-featured-section { order: 1; }
body.blog .blog-layout-1 .entry-header { order: 2; }
body.blog .blog-layout-1 .entry-content { order: 3; }
body.archive .blog-layout-1 .ast-blog-featured-section { order: 1; }
body.archive .blog-layout-1 .entry-header { order: 2; }
body.archive .blog-layout-1 .entry-content { order: 3; }

/* ---------- Öne çıkan görsel ---------- */
/* Astra sütun boşluklarını sıfırla — görsel kartı kenardan kenara kaplasın */
body.blog .ast-blog-featured-section,
body.archive .ast-blog-featured-section,
body.blog .blog-layout-1 .post-thumb,
body.archive .blog-layout-1 .post-thumb {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.blog .post-thumb-img-content a,
body.archive .post-thumb-img-content a {
  display: block;
  line-height: 0;
  font-size: 0;
}
body.blog .post-thumb-img-content,
body.archive .post-thumb-img-content {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
body.blog .post-thumb-img-content img,
body.archive .post-thumb-img-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
body.blog article.ast-article-post:hover .post-thumb-img-content img,
body.archive article.ast-article-post:hover .post-thumb-img-content img {
  transform: scale(1.06);
}

/* ---------- Başlık alanı ---------- */
body.blog .entry-header,
body.archive .entry-header {
  padding: 22px 24px 0;
}
/* Kategori rozeti */
body.blog .entry-meta .cat-links,
body.archive .entry-meta .cat-links { display: inline-flex; gap: 8px; }
body.blog .entry-meta .cat-links a,
body.archive .entry-meta .cat-links a {
  display: inline-block;
  background: rgba(225, 67, 65, 0.10);
  color: var(--palto-red);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}
body.blog .entry-meta .cat-links a:hover,
body.archive .entry-meta .cat-links a:hover {
  background: var(--palto-red);
  color: #fff;
}
/* kategori rozetini başlığın üstüne al */
body.blog .blog-layout-1 .entry-header,
body.archive .blog-layout-1 .entry-header {
  display: flex;
  flex-direction: column;
}
body.blog .blog-layout-1 .entry-header .entry-meta,
body.archive .blog-layout-1 .entry-header .entry-meta { order: 1; margin-bottom: 12px; }
body.blog .blog-layout-1 .entry-header .entry-title,
body.archive .blog-layout-1 .entry-header .entry-title { order: 2; }

body.blog .entry-title,
body.archive .entry-title {
  font-size: 1.28rem;
  line-height: 1.32;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
body.blog .entry-title a,
body.archive .entry-title a {
  color: var(--palto-navy);
  text-decoration: none;
  transition: color .25s ease;
}
body.blog .entry-title a:hover,
body.archive .entry-title a:hover { color: var(--palto-red); }

/* ---------- Özet metni ---------- */
body.blog .entry-content,
body.archive .entry-content {
  padding: 14px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body.blog .entry-content > p,
body.archive .entry-content > p {
  color: var(--palto-muted);
  font-size: .95rem;
  line-height: 1.7;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Daha Fazla" bağlantısı */
body.blog .read-more,
body.archive .read-more { margin: auto 0 0 !important; padding: 0; }
body.blog .read-more a,
body.archive .read-more a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--palto-red);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: gap .25s ease, color .25s ease;
}
body.blog .read-more a::after,
body.archive .read-more a::after { content: "→"; transition: transform .25s ease; }
body.blog .read-more a:hover,
body.archive .read-more a:hover { color: var(--palto-red-dark); }
body.blog .read-more a:hover::after,
body.archive .read-more a:hover::after { transform: translateX(4px); }

/* ---------- Yan menü (sidebar) modern kartlar ---------- */
body.blog #secondary .widget,
body.archive #secondary .widget {
  background: #fff;
  border: 1px solid var(--palto-line);
  border-radius: 16px;
  padding: 22px 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--palto-card-shadow);
}
body.blog #secondary .widget-title,
body.archive #secondary .widget-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--palto-navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--palto-line);
  position: relative;
}
body.blog #secondary .widget-title::after,
body.archive #secondary .widget-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 42px; height: 2px;
  background: var(--palto-red);
}
body.blog #secondary .widget a,
body.archive #secondary .widget a {
  color: var(--palto-ink);
  text-decoration: none;
  transition: color .2s ease;
}
body.blog #secondary .widget a:hover,
body.archive #secondary .widget a:hover { color: var(--palto-red); }
body.blog #secondary .widget li,
body.archive #secondary .widget li {
  padding: 8px 0;
  border-bottom: 1px solid var(--palto-line);
}
body.blog #secondary .widget li:last-child,
body.archive #secondary .widget li:last-child { border-bottom: 0; }

/* =====================================================================
   TEKİL YAZI SAYFASI — okunabilir, modern makale görünümü
   ===================================================================== */
body.single-post .entry-header .entry-title,
body.single-post h1.entry-title {
  color: var(--palto-navy);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* okuma genişliğini kısıtla */
body.single-post .ast-article-single .entry-content,
body.single-post .ast-article-single > .entry-header {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
/* kategori/meta rozeti */
body.single-post .entry-meta .cat-links a {
  display: inline-block;
  background: rgba(225, 67, 65, 0.10);
  color: var(--palto-red);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 999px;
  text-decoration: none;
}
/* öne çıkan görsel */
body.single-post .single-featured-image-header img,
body.single-post .entry-content > figure img,
body.single-post .wp-post-image {
  border-radius: var(--palto-radius);
  box-shadow: var(--palto-card-shadow);
}
/* gövde tipografisi */
body.single-post .entry-content p {
  font-size: 1.09rem;
  line-height: 1.85;
  color: var(--palto-ink);
  margin: 0 0 1.45em;
}
body.single-post .entry-content h2,
body.single-post .entry-content h3,
body.single-post .entry-content h4 {
  color: var(--palto-navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 1.9em 0 .7em;
  line-height: 1.3;
}
body.single-post .entry-content h2 { font-size: 1.6rem; }
body.single-post .entry-content h3 { font-size: 1.32rem; }
body.single-post .entry-content a {
  color: var(--palto-red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
body.single-post .entry-content ul li,
body.single-post .entry-content ol li {
  line-height: 1.8;
  margin-bottom: .5em;
  color: var(--palto-ink);
}
body.single-post .entry-content blockquote {
  border-left: 4px solid var(--palto-red);
  background: #faf7f7;
  margin: 1.8em 0;
  padding: 18px 24px;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: var(--palto-navy);
}
body.single-post .entry-content img { border-radius: 12px; }

/* =====================================================================
   ÖNE ÇIKAN İLK YAZI — yatay geniş kart (görsel solda, yazı sağda)
   ===================================================================== */
body.blog #main .ast-row > article.ast-article-post:first-of-type,
body.archive #main .ast-row > article.ast-article-post:first-of-type {
  grid-column: 1 / -1;
}
/* ara katmanların (blog-layout / post-format) boşluğunu sıfırla ve tam yüksekliğe uzat */
body.blog .ast-row > article.ast-article-post:first-of-type,
body.archive .ast-row > article.ast-article-post:first-of-type {
  display: flex;
}
body.blog .ast-row > article.ast-article-post:first-of-type > .blog-layout-1,
body.archive .ast-row > article.ast-article-post:first-of-type > .blog-layout-1 {
  flex: 1 1 auto;
  display: flex;
  margin: 0 !important;
  padding: 0 !important;
}
body.blog .ast-row > article.ast-article-post:first-of-type .post-content,
body.archive .ast-row > article.ast-article-post:first-of-type .post-content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-areas:
    "img header"
    "img content";
  grid-template-rows: 1fr 1fr;
  align-items: stretch;
  margin: 0 !important;
  padding: 0 !important;
}
/* görsel solda, sol sütunu tam kaplar (beyaz boşluk yok) */
body.blog .ast-row > article.ast-article-post:first-of-type .ast-blog-featured-section,
body.archive .ast-row > article.ast-article-post:first-of-type .ast-blog-featured-section {
  grid-area: img;
  position: relative;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
}
body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content,
body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content a,
body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content a {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}
body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content img,
body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
}
/* sağ üst: başlık + kategori, alta yaslı */
body.blog .ast-row > article.ast-article-post:first-of-type .entry-header,
body.archive .ast-row > article.ast-article-post:first-of-type .entry-header {
  grid-area: header;
  align-self: end;
  padding: 38px 40px 0;
}
/* sağ alt: özet + daha fazla, üste yaslı → metin bloğu dikeyde ortalanır */
body.blog .ast-row > article.ast-article-post:first-of-type .entry-content,
body.archive .ast-row > article.ast-article-post:first-of-type .entry-content {
  grid-area: content;
  align-self: start;
  padding: 16px 40px 38px;
}
/* öne çıkan kartta daha büyük başlık ve daha uzun özet */
body.blog .ast-row > article.ast-article-post:first-of-type .entry-title,
body.archive .ast-row > article.ast-article-post:first-of-type .entry-title {
  font-size: 1.7rem;
  line-height: 1.25;
}
body.blog .ast-row > article.ast-article-post:first-of-type .entry-content > p,
body.archive .ast-row > article.ast-article-post:first-of-type .entry-content > p {
  font-size: 1.02rem;
  -webkit-line-clamp: 4;
}

/* ---------- Mobil düzen ---------- */
@media (max-width: 921px) {
  body.blog #main .ast-row,
  body.archive #main .ast-row { grid-template-columns: 1fr; }
  /* öne çıkan kart mobilde normal dikey karta döner */
  body.blog .ast-row > article.ast-article-post:first-of-type .post-content,
  body.archive .ast-row > article.ast-article-post:first-of-type .post-content {
    display: flex;
    flex-direction: column;
  }
  body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content,
  body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content {
    aspect-ratio: 16 / 10;
    height: auto;
    min-height: 0;
  }
  body.blog .ast-row > article.ast-article-post:first-of-type .entry-header,
  body.archive .ast-row > article.ast-article-post:first-of-type .entry-header {
    align-self: stretch;
    align-items: flex-start;
    text-align: left;
    padding: 22px 24px 0;
  }
  body.blog .ast-row > article.ast-article-post:first-of-type .entry-content,
  body.archive .ast-row > article.ast-article-post:first-of-type .entry-content {
    align-self: stretch;
    text-align: left;
    padding: 14px 24px 24px;
  }
  /* mobilde öne çıkan görsel yine normal orana dönsün (mutlak konumu geri al) */
  body.blog .ast-row > article.ast-article-post:first-of-type .ast-blog-featured-section,
  body.archive .ast-row > article.ast-article-post:first-of-type .ast-blog-featured-section {
    min-height: 0;
    height: auto;
  }
  body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content,
  body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }
  body.blog .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content a,
  body.archive .ast-row > article.ast-article-post:first-of-type .post-thumb-img-content a {
    position: relative;
    inset: auto;
  }
}