/* ==========================================================================
   Blog — The Coffee Factory
   Tasarım kaynağı: Coffee Factory Blog Detay.xd
   Paylaşımlı style.css'e dokunulmaz; blog'a özgü her şey burada.
   Tipografi ailesi/kalınlığı sitenin mevcut font-bai / font-500 sınıflarından
   gelir; burada yalnızca blog'a özgü boyut ve yerleşim tanımlanır.
   ========================================================================== */

:root {
  --blog-yellow: #f4bd18;
  --blog-ink: #222222;
  --blog-muted: #707070;
}

/* --- Hero --------------------------------------------------------------- */

.blog-banner-title {
  font-size: 50px;
  color: #fff;
  margin: 0;
}

.blog-banner-subtitle {
  color: #fff;
  margin: 0;
}

/* --- Bölümler ----------------------------------------------------------- */

.blog-section {
  padding: 90px 0;
}

/* Filtre / sayfalama / kategori linkleri #blog-list çapasıyla buraya gelir.
   .menu position:fixed ve 90px olduğu için hedefi biraz aşağı kaydırıyoruz;
   bölümün 90px üst boşluğu menünün altında kalır, filtre çubuğu tam görünür. */
#blog-list {
  scroll-margin-top: 20px;
}

/* blog.js kart / sayfalama / boş durum öğelerini [hidden] ile gizler.
   .blog-pagination display:flex olduğu için tarayıcının varsayılan
   [hidden] kuralını ezerdi — burada açıkça bastırıyoruz. */
.blog-section [hidden] {
  display: none !important;
}

.blog-empty {
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 16px;
  color: var(--blog-muted);
  text-align: center;
  padding: 60px 0;
}

.blog-col {
  margin-bottom: 46px;
}

/* XD'deki 38px kolon arası boşluğun ölçekli karşılığı (Bootstrap varsayılanı 24px) */
.blog-section .row,
.blog-related-section .row {
  --bs-gutter-x: 32px;
}

/* --- Kategori filtresi --------------------------------------------------- */

.blog-filter {
  display: flex;
  flex-wrap: nowrap;          /* kategori artınca alt satıra kırılmaz */
  justify-content: center;    /* azsa ortada durur */
  gap: 12px;
  margin-bottom: 54px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* eski Edge */
  user-select: none;
}

.blog-filter::-webkit-scrollbar {
  display: none;                      /* Chrome / Safari */
}

/* Sığmıyorsa: ortalama bırakılırsa Chrome'da baştaki öğeye kaydırılamıyor,
   bu yüzden JS taşma anında .is-scrollable ekleyip sola yaslıyor. */
.blog-filter.is-scrollable {
  justify-content: flex-start;
  cursor: grab;
}

.blog-filter.is-dragging {
  cursor: grabbing;
}

/* Devamı olduğunu belli eden kenar solması — yalnızca o yönde içerik varken */
.blog-filter.is-scrollable:not(.at-start):not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.blog-filter.is-scrollable.at-start:not(.at-end) {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.blog-filter.is-scrollable.at-end:not(.at-start) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
          mask-image: linear-gradient(to right, transparent 0, #000 28px);
}

.blog-filter-item {
  flex: 0 0 auto;                     /* sıkışıp daralmasın */
}

.blog-filter-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  height: 34px;
  padding: 0 20px;
  border: 1px solid #000;
  border-radius: 0 10px 0 10px;
  background: transparent;
  color: #000;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.blog-filter-item:hover {
  background: #000;
  color: #fff;
}

.blog-filter-item.is-active {
  background: var(--blog-yellow);
  border-color: var(--blog-yellow);
  color: #000;
}

/* --- Kart --------------------------------------------------------------- */

.blog-card {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 690 / 328;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fotoğrafın EXIF döndürme etiketine uy — kameradan yüklenen görseller
     yan yatmasın. Modern tarayıcıların varsayılanı budur, açıkça sabitliyoruz. */
  image-orientation: from-image;
  display: block;
  transition: transform .4s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.04);
}

.blog-card-body {
  /* XD: 690px kartta 48/45/44px -> 588px kartta oransal karşılığı */
  padding: 38px 40px 36px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* --- Pill'ler ----------------------------------------------------------- */

.blog-pills {
  display: flex;
  gap: 12px;
  margin-bottom: 21px;
}

.blog-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  height: 26px;
  padding: 0 14px;
  border-radius: 0 10px 0 10px;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.blog-pill--date {
  background: #000;
  color: #fff;
}

.blog-pill--category {
  background: var(--blog-yellow);
  color: #000;
}

.blog-filter-item:focus {
  outline: none;
}

.blog-filter-item:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

a.blog-pill--category:hover {
  background: #000;
  color: var(--blog-yellow);
}

/* --- Kart metni --------------------------------------------------------- */

.blog-card-title {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--blog-ink);
  margin: 0 0 14px;
}

.blog-card-title a {
  color: inherit;
  text-decoration: none;
}

.blog-card-title a:hover {
  color: var(--blog-yellow);
}

.blog-card-excerpt {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--blog-ink);
  margin: 0 0 22px;
  flex: 1;
}

.blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #000;
  text-decoration: none;
}

.blog-readmore svg {
  color: var(--blog-yellow);
  transition: transform .3s ease;
}

.blog-readmore:hover {
  color: #000;
}

.blog-readmore:hover svg {
  transform: translateX(5px);
}

/* --- Sayfalama ---------------------------------------------------------- */

.blog-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.blog-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  background: #1c1c1c;
  color: #fff;
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.blog-page:hover {
  background: #000;
  color: var(--blog-yellow);
}

.blog-page.is-active {
  background: var(--blog-yellow);
  color: #000;
}

/* --- Detay -------------------------------------------------------------- */

.blog-detail {
  /* .menu position:fixed ve 90px yüksekliğinde — içeriğin üstüne biner.
     XD'de menü altından ilk pill'e 118px var, o yüzden 90 + 118 = 208px. */
  padding: 208px 0 40px;
}

/* Başlık bloğu (pill'ler + başlık + meta satırı) kapak görselinden
   yanlardan 53px içeride durur — XD'de kapak 360px'ten, başlık 413px'ten başlıyor. */
.blog-detail-head {
  padding: 0 53px;
}

.blog-detail-title {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.3;
  color: var(--blog-ink);
  margin: 0 0 26px;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 16px;
  color: var(--blog-ink);
}

.blog-share {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.blog-share a {
  color: #000;
  display: inline-flex;
  transition: color .2s ease;
}

.blog-share a:hover {
  color: var(--blog-yellow);
}

.blog-cover {
  width: 100%;
  aspect-ratio: 1201 / 558;
  object-fit: cover;
  image-orientation: from-image;
  display: block;
  margin-bottom: 44px;
}

/* --- Detay içeriği (TinyMCE çıktısı) ------------------------------------ */

.blog-content {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--blog-ink);
}

.blog-content p {
  margin: 0 0 22px;
}

.blog-content h2,
.blog-content h3 {
  font-weight: 600;
  color: var(--blog-ink);
  margin: 34px 0 16px;
}

.blog-content h2 { font-size: 26px; }
.blog-content h3 { font-size: 20px; }

.blog-content ul,
.blog-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.blog-content li {
  margin-bottom: 8px;
}

.blog-content a {
  color: #000;
  text-decoration: underline;
}

.blog-content img {
  max-width: 100%;
  height: auto;
}

.blog-content blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blog-yellow);
  color: var(--blog-muted);
}

/* --- Galeri bloğu ------------------------------------------------------- */

.blog-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 30px 0 40px;
}

.blog-gallery--single {
  grid-template-columns: 1fr;
}

.blog-gallery img {
  width: 100%;
  aspect-ratio: 576 / 438;
  object-fit: cover;
  image-orientation: from-image;
  display: block;
}

/* --- İlgili yazılar ----------------------------------------------------- */

.blog-related-section {
  padding: 40px 0 90px;
}

.blog-related-title {
  font-family: "Bai Jamjuree", sans-serif;
  font-weight: 600;
  font-size: 34px;
  color: var(--blog-ink);
  text-align: center;
  margin: 0 0 44px;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1199px) {
  .blog-section,
  .blog-detail,
  .blog-related-section {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 991px) {
  .blog-banner-title { font-size: 34px; }
  .blog-section { padding-top: 60px; padding-bottom: 60px; }
  #blog-list { scroll-margin-top: 50px; }
  .blog-col { margin-bottom: 32px; }
  .blog-card-body { padding: 26px 22px 26px; }
  .blog-filter { margin-bottom: 34px; gap: 10px; }
  .blog-card-title { font-size: 22px; }
  .blog-detail { padding-top: 160px; padding-bottom: 30px; }
  .blog-detail-head { padding: 0 20px; }
  .blog-detail-title { font-size: 26px; }
  .blog-related-title { font-size: 26px; }
  .blog-related-section { padding-top: 20px; padding-bottom: 60px; }
}

@media (max-width: 767px) {
  .blog-meta { flex-direction: column; align-items: flex-start; }
  .blog-gallery { grid-template-columns: 1fr; gap: 16px; }
  .blog-pills { flex-wrap: wrap; }
  .blog-filter-item { min-width: 0; padding: 0 16px; height: 32px; font-size: 13px; }
  .blog-cover { margin-bottom: 28px; }
  .blog-detail-head { padding: 0; }
}

@media (max-width: 575px) {
  .blog-pagination { flex-wrap: wrap; }
}