/* =========================================================
   Home Blog — Section 05
   File: assets/css/pages/home-blog.css
   Background: default (site bg)
========================================================= */

.top-homeBlog{
  padding: clamp(42px, 5.6vw, 86px) 0;
  background: var(--top-bg);
}

.top-homeBlog__head{
  max-width: 860px;
  margin: 0 auto clamp(16px, 2.6vw, 26px);
  text-align: center;
}

.top-homeBlog__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(209,18,31,.22);
  background: rgba(209,18,31,.06);
  font-weight: 800;
}

.top-homeBlog__title{
  margin:0 0 10px;
  font-size: clamp(24px, 2.4vw, 40px);
  line-height: 1.1;
}

.top-homeBlog__lead{
  margin:0;
  color: var(--top-muted);
  font-size: 15px;
}

/* Rail wrapper + nav */
.top-homeBlog__wrap{
  position: relative;
  margin-top: clamp(16px, 2.4vw, 24px);
}

.top-homeBlog__rail{
  display:flex;
  gap: 16px;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior:smooth;
  padding: 6px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.top-homeBlog__rail:focus{
  outline: 3px solid rgba(209, 18, 31, .25);
  outline-offset: 4px;
  border-radius: 16px;
}

/* Desktop: 3 card görünümü */
.top-bCard{
  flex: 0 0 calc((100% - 32px) / 3);
  scroll-snap-align: start;
  border-radius: 16px;
  overflow:hidden;
  background:#fff;
  border: 1px solid var(--top-border);
  box-shadow: var(--top-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.top-bCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(2,6,23,.14);
}

.top-bCard__link{ display:block; height:100%; }

.top-bCard__media{
  aspect-ratio: 1 / 1;          /* kare görsel */
  overflow:hidden;
  background:#f2f2f2;
}

.top-bCard__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .5s ease;
}

.top-bCard:hover .top-bCard__media img{
  transform: scale(1.07);
}

.top-bCard__body{
  padding: 14px 14px 16px;
}

.top-bCard__title{
  margin:0 0 8px;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.1px;
}

.top-bCard__text{
  margin:0 0 12px;
  color: rgba(15,23,42,.76);
  font-size: 14px;
  line-height: 1.55;
}

.top-bCard__more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  color: var(--top-red);
}

/* Nav buttons (desktop) */
.top-homeBlog__nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width:44px;
  height:44px;
  border-radius: 999px;
  border:1px solid var(--top-border);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(2,6,23,.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 2;
}

.top-homeBlog__nav--prev{ left: -8px; }
.top-homeBlog__nav--next{ right: -8px; }

/* =========================================================
   Home Blog — excerpt 3 satır limiti
   File: assets/css/pages/home-blog.css
   ========================================================= */
.top-homeBlog .top-bCard__text{
  /* mevcut tipografi kalsın */
  margin: 0 0 12px;
  color: rgba(15,23,42,.76);
  font-size: 14px;
  line-height: 1.55;

  /* 3 satır clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  /* desteklemeyen yerler için güvenli limit */
  max-height: calc(1.55em * 3);
}


@media (max-width: 992px){
  .top-bCard{ flex-basis: calc((100% - 16px) / 2); }
  .top-homeBlog__nav{ display:none; } /* tablet+ mobil swipe */
}

@media (max-width: 560px){
  .top-bCard{ flex-basis: 85%; }
}

/* CTA */
.top-homeBlog__cta{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.top-homeBlog__empty{
  padding: 14px 0;
  color: var(--top-muted);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .top-bCard,
  .top-bCard__media img{ transition:none; }
  .top-bCard:hover{ transform:none; }
}
