/* BLOG — 3'ER 3'ER CAROUSEL
   Kart yapısı: görsel → başlık → kısa açıklama → "Tamamını Oku" butonu.
   Carousel altyapısı .ap-tab-carousel'den gelir; buradaki tek iş kart genişliğini
   3'e sabitlemek ve kart görünümünü kurmak. */
.ap-blog{
  background:#ffffff;
  padding:96px 24px 62px;
}

.ap-blog-inner{
  width:min(1500px,100%);
  margin:0 auto;
}

/* BAŞLIK BLOĞU — üstteki bölümlerle aynı dil: altın eyebrow + koyu başlık */
.ap-blog-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:52px;
}

.ap-blog-eyebrow{
  margin-bottom:12px;
  color:#8a6a1f;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.ap-blog-title{
  margin:0;
  color:#171717;
  font-size:42px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.035em;
}

.ap-blog-subtitle{
  max-width:680px;
  margin:16px 0 0;
  color:#6d6560;
  font-size:16px;
  line-height:1.7;
}

/* KART */
.ap-blog .ap-tab-carousel-track{
  align-items:stretch;
}

/* Ortak carousel viewport'u overflow:hidden + 10px alt boşlukla geliyor; gölge tam
   sönmeden kesiliyor ve kartın altında keskin bir çizgi bırakıyordu. Dikeyde yer aç.
   Yatayda 0 kalmalı: kartlar üstteki 6'lı banner ızgarasıyla aynı hizada dursun. */
.ap-blog .ap-tab-carousel-viewport{
  padding:12px 0 56px !important;
}

.ap-blog-card{
  flex:0 0 calc((100% - 48px) / 3);
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(36,27,28,.08);
  border-radius:22px;
  background:#ffffff;
  /* Yumuşama rampası + yanlara sıfır taşma.
     Kural: yatay taşma = blur/2 - |spread|. Spread'i blur'un yarısı seçtiğimiz için
     gölge kartın yan kenarlarında zaten sönmüş oluyor; carousel'in overflow:hidden'ı
     yarı yolda kesecek bir şey bulamıyor, dolayısıyla yanlarda kesik kenar çıkmıyor.
     Aşağıda ise 12px (hover'da 26px) uzanıyor; viewport'un alt boşluğu bunu karşılar. */
  box-shadow:
    0 2px 3px -2px rgba(36,27,28,.10),
    0 12px 22px -11px rgba(36,27,28,.14);
  transition:transform .3s ease,box-shadow .3s ease;
}

.ap-blog-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 3px 5px -3px rgba(36,27,28,.10),
    0 26px 44px -22px rgba(36,27,28,.20);
}

.ap-blog-media-link{
  position:relative;
  display:block;
  overflow:hidden;
}

.ap-blog-media{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}

.ap-blog-card:hover .ap-blog-media{
  transform:scale(1.05);
}

.ap-blog-tag{
  position:absolute;
  top:16px;
  left:16px;
  padding:7px 14px;
  border-radius:999px;
  color:#ffffff;
  background:rgba(54,85,71,.92);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* GÖVDE — buton her kartta aynı hizada dursun diye kolon + margin-top:auto */
.ap-blog-body{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:26px 28px 28px;
}

.ap-blog-date{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6f6863;
  font-size:13px;
  font-weight:600;
}

.ap-blog-date svg{
  width:15px;
  height:15px;
  flex:0 0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
}

.ap-blog-card-title{
  display:-webkit-box;
  overflow:hidden;
  margin:12px 0 0;
  color:#171717;
  font-size:20px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.02em;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.ap-blog-card-title a{
  color:inherit;
  transition:color .2s ease;
}

.ap-blog-card-title a:hover{
  color:#365547;
}

.ap-blog-card-title a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
  border-radius:4px;
}

.ap-blog-excerpt{
  display:-webkit-box;
  overflow:hidden;
  margin:10px 0 22px;
  color:#5f5854;
  font-size:14px;
  line-height:1.7;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}

.ap-blog-more{
  align-self:flex-start;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 22px;
  border:1px solid rgba(54,85,71,.22);
  border-radius:999px;
  color:#365547;
  background:#ffffff;
  font-size:13px;
  font-weight:800;
  transition:.25s ease;
}

.ap-blog-more svg{
  width:16px;
  height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  transition:transform .25s ease;
}

.ap-blog-more:hover{
  color:#ffffff;
  background:#365547;
  border-color:#365547;
  box-shadow:0 12px 26px rgba(54,85,71,.22);
}

.ap-blog-more:hover svg{
  transform:translateX(3px);
}

.ap-blog-more:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

/* BÖLÜM CTA'SI — sitedeki kırmızı buton dili: 145deg kırmızı degrade + beyaz yazı */
.ap-blog-all{
  display:flex;
  justify-content:center;
}

.ap-blog-all-link{
  display:inline-flex;
  align-items:center;
  gap:11px;
  min-height:56px;
  padding:0 40px;
  border-radius:999px;
  color:#ffffff;
  background:linear-gradient(145deg,var(--red),var(--red-dark));
  font-size:15px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 14px 30px -14px rgba(151,9,20,.65);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.ap-blog-all-link svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  transition:transform .25s ease;
}

.ap-blog-all-link:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 22px 38px -16px rgba(151,9,20,.7);
}

.ap-blog-all-link:hover svg{
  transform:translateX(4px);
}

.ap-blog-all-link:focus-visible{
  outline:2px solid var(--red-dark);
  outline-offset:3px;
}

@media (max-width:1180px){
  .ap-blog-card{
    flex-basis:calc((100% - 24px) / 2);
  }
}

@media (max-width:980px){
  .ap-blog{
    padding:72px 20px 84px;
  }

  .ap-blog-title{
    font-size:34px;
  }

  .ap-blog-head{
    margin-bottom:40px;
  }
}

@media (max-width:680px){
  .ap-blog{
    padding:60px 18px 72px;
  }

  .ap-blog-card{
    flex-basis:100%;
  }

  .ap-blog-title{
    font-size:28px;
  }

  .ap-blog-subtitle{
    font-size:15px;
  }

  .ap-blog-body{
    padding:22px 22px 24px;
  }

  .ap-blog-card-title{
    font-size:18px;
  }

  .ap-blog-all-link{
    min-height:52px;
    padding:0 30px;
    font-size:14px;
  }
}