/* ==============================================
   BLOG.CSS – blog.html & blog-detay.html
   ============================================== */

/* ===== PAYLAŞILAN: POST META ===== */
.post-meta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.post-meta--sm { gap: 8px; }
.post-cat {
  display: inline-flex; align-items: center;
  padding: 3px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.post-cat--blue  { background: rgba(21,101,192,.1); color: var(--base); }
.post-cat--navy  { background: rgba(8,37,69,.1); color: var(--black); }
.post-cat--green { background: rgba(34,197,94,.12); color: #16a34a; }
.post-date, .post-read {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-gray); font-weight: 600;
}
.post-author {
  display: flex; align-items: center; gap: 8px;
}
.post-author__avatar {
  width: 32px; height: 32px;
  background: var(--base); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff;
  flex-shrink: 0;
}
.post-author__avatar--lg {
  width: 44px; height: 44px; font-size: 18px;
}
.post-author span { font-size: 13px; font-weight: 700; color: var(--black); }
.post-read-more {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--base);
  transition: gap var(--transition);
}

/* ===== BLOG LİSTELEME ===== */
.blog-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: flex-start;
}

/* Öne Çıkan */
.featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 40px;
  transition: box-shadow var(--transition);
  background: #fff;
}
.featured-post:hover { box-shadow: 0 12px 48px rgba(8,37,69,.1); }
.featured-post__img {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
}
.featured-post__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.featured-post:hover .featured-post__img img { transform: scale(1.04); }
.featured-post__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,37,69,.5), transparent);
}
.featured-post__badge {
  position: absolute; top: 16px; left: 16px;
  display: flex; align-items: center; gap: 6px;
  background: var(--base); color: #fff;
  font-size: 11px; font-weight: 800; padding: 5px 12px;
  border-radius: 100px; text-transform: uppercase; letter-spacing: .4px;
}
.featured-post__body {
  padding: 32px 28px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.featured-post__title {
  font-size: clamp(18px, 2vw, 24px); font-weight: 900;
  color: var(--black); line-height: 1.3;
  letter-spacing: var(--letter);
}
.featured-post__excerpt {
  font-size: 14.5px; color: var(--text); line-height: 1.7; margin: 0;
}
.featured-post__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.featured-post:hover .post-read-more { gap: 8px; }

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.blog-card {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  display: flex; flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
}
.blog-card:hover {
  box-shadow: 0 8px 36px rgba(8,37,69,.09);
  transform: translateY(-3px);
}
.blog-card__img {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
}
.blog-card__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.blog-card:hover .blog-card__img img { transform: scale(1.05); }
.blog-card__img .post-cat {
  position: absolute; top: 12px; left: 12px;
}
.blog-card__body {
  padding: 22px 20px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.blog-card__title {
  font-size: 16px; font-weight: 800;
  color: var(--black); line-height: 1.35;
  letter-spacing: var(--letter);
}
.blog-card:hover .blog-card__title { color: var(--base); }
.blog-card__excerpt {
  font-size: 13.5px; color: var(--text); line-height: 1.65; margin: 0;
}
.blog-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid var(--border);
  margin-top: auto;
}
.blog-card:hover .post-read-more { gap: 8px; }

/* Pagination */
.blog-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 48px;
}
.pg-btn {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 700; color: var(--black);
  background: #fff; cursor: pointer;
  transition: all var(--transition);
}
.pg-btn:hover:not(:disabled) { border-color: var(--base); color: var(--base); }
.pg-btn--active { background: var(--base); border-color: var(--base); color: #fff; }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-dots { font-size: 14px; color: var(--text-gray); padding: 0 4px; }

/* ===== SIDEBAR ===== */
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.blog-sidebar--sticky { position: sticky; top: calc(var(--hdr-h) + 20px); }

.sidebar-widget {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px;
}
.sidebar-widget__title {
  font-size: 15px; font-weight: 800; color: var(--black);
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

/* Arama */
.sidebar-search {
  display: flex; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden;
  transition: border-color var(--transition);
}
.sidebar-search:focus-within { border-color: var(--base); }
.sidebar-search input {
  flex: 1; padding: 11px 14px;
  font-size: 14px; font-family: var(--ff);
  border: none; outline: none; background: #f9fbfd;
}
.sidebar-search button {
  padding: 0 16px;
  background: var(--base); color: #fff;
  font-size: 18px; cursor: pointer;
  border: none; transition: background var(--transition);
}
.sidebar-search button:hover { background: var(--primary); }

/* Kategoriler */
.sidebar-cats { display: flex; flex-direction: column; gap: 0; }
.sidebar-cats li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--black);
  transition: color var(--transition);
}
.sidebar-cats li:last-child a { border-bottom: none; }
.sidebar-cats li a:hover { color: var(--base); }
.sidebar-cats li a span:first-child { display: flex; align-items: center; gap: 8px; }
.sidebar-cats li a span i { font-size: 12px; color: var(--base); }
.sidebar-cats__count {
  background: #f5f8fc; border: 1px solid var(--border);
  border-radius: 100px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; color: var(--text-gray);
}

/* Son yazılar */
.sidebar-recent { display: flex; flex-direction: column; gap: 16px; }
.recent-post {
  display: flex; gap: 12px; align-items: flex-start;
  transition: opacity var(--transition);
}
.recent-post:hover { opacity: .8; }
.recent-post__img {
  width: 70px; height: 56px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
}
.recent-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-post__body h4 {
  font-size: 13px; font-weight: 700; color: var(--black);
  line-height: 1.4; margin-bottom: 4px;
}
.recent-post__body span {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-gray);
}

/* Etiketler */
.sidebar-tags {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.sidebar-tags a {
  font-size: 12px; font-weight: 600;
  background: #f5f8fc; border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 12px; color: var(--black);
  transition: all var(--transition);
}
.sidebar-tags a:hover { background: var(--base); border-color: var(--base); color: #fff; }

/* CTA kutu */
.sidebar-cta-box {
  text-align: center;
  background: var(--black);
  border-radius: 12px;
  padding: 28px 20px;
}
.sidebar-cta-box__icon {
  width: 56px; height: 56px;
  background: var(--base); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: #fff;
  margin: 0 auto 14px;
}
.sidebar-cta-box h3 { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.sidebar-cta-box p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6; margin: 0; }

/* ===== POST HERO (detay) ===== */
.post-hero {
  position: relative; padding: 90px 0 70px; overflow: hidden;
}
.post-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; z-index: 0;
}
.post-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, rgba(8,37,69,.93) 40%, rgba(13,71,161,.8) 100%);
  z-index: 1;
}
.post-hero__inner { position: relative; z-index: 2; max-width: 760px; }
.post-hero__title {
  font-size: clamp(26px, 4vw, 44px); font-weight: 900; color: #fff;
  line-height: 1.2; letter-spacing: var(--letter); margin-bottom: 20px;
}
.post-hero__author {
  display: flex; align-items: center; gap: 12px;
}
.post-hero__author strong { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.post-hero__author span { font-size: 12px; color: rgba(255,255,255,.55); }

/* ===== POST LAYOUT ===== */
.post-layout__inner {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: flex-start;
}

/* Makale */
.post-article { min-width: 0; }
.post-summary {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(21,101,192,.06);
  border-left: 3px solid var(--base);
  border-radius: 0 8px 8px 0;
  padding: 18px 20px;
  margin-bottom: 36px;
}
.post-summary i { font-size: 20px; color: var(--base); flex-shrink: 0; margin-top: 2px; }
.post-summary p { font-size: 14.5px; color: var(--black); font-weight: 600; line-height: 1.65; margin: 0; }

.post-content { line-height: 1.85; }
.post-content h2 {
  font-size: 22px; font-weight: 800; color: var(--black);
  margin: 36px 0 14px; letter-spacing: var(--letter);
}
.post-content p {
  font-size: 15px; color: var(--text); margin-bottom: 18px;
}
.post-content ul {
  padding-left: 0; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.post-content ul li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--text); line-height: 1.65;
  padding-left: 4px;
}
.post-content ul li::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--base); flex-shrink: 0; margin-top: 8px;
}

/* İnline tablo */
.post-price-table {
  overflow-x: auto; margin: 24px 0;
}
.post-price-table table {
  width: 100%; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.post-price-table thead th {
  background: var(--black); color: #fff;
  padding: 12px 16px; font-size: 13px; font-weight: 700;
  text-align: left;
}
.post-price-table tbody td {
  padding: 12px 16px; font-size: 14px; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.post-price-table tbody tr:last-child td { border-bottom: none; }
.post-price-table tbody tr:hover td { background: #f5f8fc; }

/* Alıntı */
.post-quote {
  background: #f5f8fc;
  border-left: 4px solid var(--base);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.post-quote p {
  font-size: 16px; font-weight: 600; font-style: italic;
  color: var(--black); margin: 0 0 10px;
}
.post-quote cite {
  font-size: 13px; color: var(--text-gray); font-style: normal; font-weight: 700;
}

/* Etiketler & Paylaş */
.post-tags {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 20px 0;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.post-tags > span { font-size: 13px; font-weight: 700; color: var(--black); }
.post-tags a {
  font-size: 12px; font-weight: 600;
  background: #f5f8fc; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 12px; color: var(--black);
  transition: all var(--transition);
}
.post-tags a:hover { background: var(--base); border-color: var(--base); color: #fff; }

.post-share {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 20px 0;
  border-top: 1px solid var(--border);
}
.post-share > span { font-size: 13px; font-weight: 700; color: var(--black); }
.share-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; color: #fff;
  transition: opacity var(--transition);
}
.share-btn:hover { opacity: .88; }
.share-btn--fb { background: #1877f2; }
.share-btn--wa { background: #25D366; }
.share-btn--tw { background: #1da1f2; }

/* İlgili Yazılar */
.related-posts { margin-top: 48px; }
.related-posts__title {
  font-size: 20px; font-weight: 800; color: var(--black);
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.related-card {
  border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: #fff;
  transition: box-shadow var(--transition), transform var(--transition);
}
.related-card:hover {
  box-shadow: 0 6px 28px rgba(8,37,69,.08);
  transform: translateY(-2px);
}
.related-card__img { aspect-ratio: 16/9; overflow: hidden; }
.related-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.related-card:hover .related-card__img img { transform: scale(1.05); }
.related-card__body {
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.related-card__body h4 {
  font-size: 13.5px; font-weight: 800; color: var(--black);
  line-height: 1.4;
}
.related-card:hover h4 { color: var(--base); }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
  .blog-layout { grid-template-columns: 1fr 280px; gap: 32px; }
  .post-layout__inner { grid-template-columns: 1fr 280px; gap: 40px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { display: grid; grid-template-columns: repeat(2, 1fr); }
  .post-layout__inner { grid-template-columns: 1fr; }
  .blog-sidebar--sticky { position: static; display: grid; grid-template-columns: repeat(2, 1fr); }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post__img { aspect-ratio: 16/9; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-sidebar { grid-template-columns: 1fr; }
  .blog-sidebar--sticky { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .post-hero { padding: 60px 0 48px; }
}
@media (max-width: 560px) {
  .featured-post__body { padding: 20px; }
}