/* KATEGORİ BUTONLARI */
.category-filter{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:15px;
  margin:40px 0 60px;
  padding:0;
  list-style:none;
}

.category-filter li{
  padding:10px 22px;
  border-radius:30px;
  background:#f4f4f4;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  transition:.3s;
}

.category-filter li.active,
.category-filter li:hover{
  background:#b58e4a;
  color:#fff;
}

/* GRID YAPISI (FLEXBOX İLE GÜNCELLENDİ)
   justify-content: center -> Son satırdaki öğeleri ortalar.
   gap: 30px -> Kartlar arası boşluk.
*/
.product-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  gap: 30px;
  margin-bottom: 50px;
}

/* KART AYARLARI */
.product-card{
  /* Varsayılan (Mobil): Her satırda 1 ürün */
  width: 100%; 
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  transition:.35s ease;
  display:flex;
  flex-direction:column;
}

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 60px rgba(0,0,0,.15);
}

/* RESPONSIVE (MEDYA SORGULARI) */

/* Tablet (768px ve üzeri): Yan yana 2 ürün */
@media (min-width: 768px) {
  .product-card {
    /* %50 genişlikten gap payını (30px) düşüyoruz */
    width: calc(50% - 30px);
  }
}

/* Geniş Ekran (1200px ve üzeri): Yan yana 4 ürün */
@media (min-width: 1200px) {
  .product-card {
    /* %25 genişlikten gap payını düşüyoruz. 
       Böylece tam 4 tane sığar ve taşma yapmaz. */
    width: calc(25% - 30px);
  }
}

/* GÖRSEL */
.product-image img{
  width:100%;
  height:300px;
  object-fit:cover;
}

/* ALT BİLGİ */
.product-info{
  padding:18px 16px 22px;
  text-align:center;
}

.product-info h4{
  font-size:16px;
  font-weight:600;
  color:#222;
  margin:0;
  position:relative;
  display:inline-block;
}

.product-info h4::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#b58e4a;
  transition:.35s ease;
}

.product-card:hover h4{
  color:#b58e4a;
}

.product-card:hover h4::after{
  width:100%;
}


.funfacts-section .count-text {
    /* 1. Titremeyi Önleme: Rakamların hepsini eşit genişlikte yapar */
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";

    /* 2. Kaymayı Önleme: Pixel yerine 'ch' birimi kullanıyoruz. 
       6ch = 6 karakterlik (000000) yer ayırır. Bu en büyük sayıya yeter.
       Böylece 140px gibi çok geniş bir alan kaplamaz, tasarımı bozmaz. */
    display: inline-block;
    min-width: 6.5ch; 
    
    /* Dikey hizalama */
    vertical-align: middle;
    line-height: 1;
}

/* 3. Hizalama Kuralları */

/* Varsayılan olarak (Sola yaslı sütunlar için) içindeki yazı sola yaslanır */
.funfacts-section .count-text {
    text-align: left;
}

/* EĞER üst kapsayıcıda 'text-right' varsa (İlk 2 sütun), yazı sağa yaslanır.
   Böylece kutu geniş olsa bile sayı sağ kenara yapışık durur, 
   yerinden oynamış gibi görünmez. */
.inner.text-right .count-text {
    text-align: right;
}


.news-section {
    padding: 100px 0 80px;
    background-color: #ffffff;
}

/* Başlık Stili */
.sec-title.centered-title {
    margin-bottom: 50px;
}
.sec-title .sub-title {
    display: block;
    font-size: 13px;
    color: #b58e4a; /* Gold Renk */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.sec-title h2 {
    font-size: 36px;
    color: #222;
    font-weight: 700;
    margin: 0;
}
.separator {
    width: 60px;
    height: 3px;
    background: #b58e4a;
    margin: 20px auto 0;
}

/* Haber Kartı Bloğu */
.news-block {
    margin-bottom: 30px;
}

.news-block .inner-box {
    position: relative;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid #eee;
    height: 100%; /* Kartların eşit boyda olması için */
    display: flex;
    flex-direction: column;
}

/* Hover Efekti: Kart yukarı kalkar */
.news-block .inner-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-color: transparent;
}

/* Resim Alanı */
.news-block .image-box {
    position: relative;
    overflow: hidden;
    height: 240px; /* Sabit yükseklik */
}

.news-block .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resmi kutuya sığdırır, uzatmaz */
    transition: transform 0.6s ease;
}

/* Hover'da Resim Zoom */
.news-block .inner-box:hover .image-box img {
    transform: scale(1.1);
}

/* İçerik Alanı */
.news-block .lower-content {
    padding: 25px;
    text-align: left;
    flex-grow: 1; /* İçeriğin kutuyu doldurmasını sağlar */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.news-block .lower-content h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4em;
    margin-bottom: 15px;
}

.news-block .lower-content h4 a {
    color: #222;
    transition: all 0.3s ease;
    text-decoration: none;
}

.news-block .lower-content h4 a:hover {
    color: #b58e4a;
}

/* Devamını Oku Butonu */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #b58e4a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: auto; /* En alta iter */
}

.read-more-btn svg {
    width: 18px;
    height: 18px;
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.news-block .inner-box:hover .read-more-btn {
    color: #222;
}

.news-block .inner-box:hover .read-more-btn svg {
    transform: translateX(5px); /* Ok işareti sağa kayar */
}

/* Responsive Ayarlar */
@media (max-width: 768px) {
    .sec-title h2 {
        font-size: 28px;
    }
    .news-block .image-box {
        height: 200px;
    }
}

/* GENEL KART */
.modern-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.image-wrap{position:relative;height:100%}
.image-wrap img{width:100%;height:100%;object-fit:cover}

.badge{
  position:absolute;
  top:20px;left:20px;
  background:#b58e4a;
  color:#fff;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
}

.content-wrap{padding:40px 30px}
.desc{margin:15px 0 30px;color:#555}

/* GÖRSEL CTA KARTLARI */
.catalog-cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.cta-card{
  position:relative;
  height:160px;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  transition:.45s cubic-bezier(.4,0,.2,1);
}

.cta-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;

  transition:.6s ease;
}

.cta-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.65));
}

.cta-content{
  position:relative;
  z-index:2;
  padding:25px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.cta-tag{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  opacity:.85;
}

.cta-content h4{
  margin:6px 0 4px;
  font-size:20px;
  font-weight:600;
}

.cta-content p{
  font-size:14px;
  opacity:.9;
}

/* HOVER */
.cta-card:hover{
  transform:translateY(-6px);
}

.cta-card:hover .cta-bg{
  transform:scale(1.08);
  filter:brightness(.8);
}

/* INSTAGRAM */
.instagram-card{
  background:linear-gradient(135deg,#fdfbfb,#ebedee);
  border-radius:16px;
  padding:35px 25px;
  text-align:center;
  height:100%;
  box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.instagram-cta{
  display:inline-block;
  margin-top:25px;
  padding:14px 30px;
  border-radius:30px;
  background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(253,29,29,.35);
  transition:.35s ease;
}

.instagram-cta:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 45px rgba(253,29,29,.45);
}

/* MOBİL */
@media(max-width:768px){
  .catalog-cta{
    grid-template-columns:1fr;
  }
}

.cta-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  text-decoration:none;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  transition:.45s cubic-bezier(.4,0,.2,1);
}

/* CTA KART UZUN */
.cta-card.tall{
  height:260px; /* aşağı uzuyor */
}

/* METİNLER ÜSTTE */
.cta-content.top{
  justify-content:flex-start;
padding: 25px 15px;
}

/* ALT KISIM LOGO İÇİN SERBEST */
.cta-bg{
background-position: bottom;
}

/* Hover aynen kalsın */
.cta-card:hover{
  transform:translateY(-6px);
}

.cta-card:hover .cta-bg{
  transform:scale(1.08);
}

/* Mobil */
@media(max-width:768px){
  .cta-card.tall{
    height:220px;
  }
}

.news-block-one .inner-box {

  margin-bottom: 0px;
}

@media only screen and (max-width: 991px) {
  .funfacts-section .image {
    display: block;
  }
}