/* =========================
   GENEL OVERRIDE (en son)
   ========================= */

/* --- Slider numaraları: her zaman görünür --- */
#blogSlider .carousel-indicators.numbered{
  position: static;
  margin: .5rem 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
}
#blogSlider .carousel-indicators.numbered li{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.22) !important;
  color: #111 !important;
  text-indent: 0 !important;
  font-weight: 700;
  opacity: 1 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: background .15s ease, border-color .15s ease;
}
#blogSlider .carousel-indicators.numbered li.active{
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255,59,48,.35);
}

/* --- Masaüstünde slider başlık boyutu dengeli kalsın --- */
#blogSlider .slider-title{
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2.15rem) !important;
  line-height: 1.2 !important;
}

/* --- Tekil yazı ana başlık: esnek boyut (masaüstü) --- */
.article-title{
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2rem) !important;
  line-height: 1.2 !important;
  margin: .75rem 0 .5rem !important;
}

/* =========================
   MOBİL (≤576px)
   ========================= */
@media (max-width:576px){

  /* Header ile içerik arası nefes boşluğu (liste ve tekil) */
  .blog-top-gap{ margin-top: 14px !important; }
  .article-top-gap{ margin-top: 14px !important; }

  /* Slider yüksekliği ve numaralar tek satıra sığsın */
  #blogSlider .slider-img{ height: 360px !important; }
  #blogSlider .carousel-indicators.numbered{ gap: 4px !important; }
  #blogSlider .carousel-indicators.numbered li{
    width: 24px !important; height: 24px !important; font-size: .75rem !important;
  }

  /* Slider başlığı daha küçük */
  #blogSlider .slider-title{
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
  }

  /* *** KRİTİK: .article-title’ı küçült (önceki 2rem’i ezer) *** */
  .container-article .article-title,
  .article-title{
    font-size: 1.05rem !important;
    line-height: 1.22 !important;
    margin: .35rem 0 .45rem !important;
  }

  /* Alt başlıklar ve gövde */
  .container-article h2, h2{ font-size: .98rem !important; line-height: 1.25 !important; }
  .container-article h3, h3{ font-size: .92rem !important; line-height: 1.3 !important; }
  .article-body{ font-size: .96rem !important; line-height: 1.6 !important; }
}

/* =========================
   Küçük Tablet (577–768px)
   ========================= */
@media (min-width:577px) and (max-width:768px){
  .container-article .article-title, .article-title{
    font-size: 1.35rem !important;
    line-height: 1.24 !important;
  }
  .container-article h2, h2{ font-size: 1.12rem !important; line-height: 1.28 !important; }
  .container-article h3, h3{ font-size: 1rem !important; line-height: 1.32 !important; }
}

/* ======= HOME BLOG SLIDER (masaüstü + mobil) ======= */
#homeBlogSlider{ position:relative; margin-top:6px; }
#homeBlogSlider .carousel-item{ max-height:520px; position:relative; }
#homeBlogSlider .slider-img{ width:100%; height:520px; object-fit:cover; }
#homeBlogSlider .carousel-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
  pointer-events:none;
}
#homeBlogSlider .carousel-caption{
  position:absolute; left:1.25rem; right:1.25rem; bottom:1rem;
  text-align:left; padding:0; margin:0;
}
#homeBlogSlider .slider-title{
  color:#fff; font-weight:900; line-height:1.15; letter-spacing:.2px;
  font-size:clamp(1.2rem,1rem + .9vw,2rem); text-shadow:0 3px 14px rgba(0,0,0,.55); margin:0;
}
#homeBlogSlider .ctrl{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease; border:1px solid rgba(255,255,255,.25);
}
#homeBlogSlider .ctrl:hover{ background:rgba(0,0,0,.65); }
#homeBlogSlider .ctrl.prev{ left:10px; }  #homeBlogSlider .ctrl.next{ right:10px; }

/* numaralı göstergeler – her zaman görünür */
#homeBlogSlider .carousel-indicators.numbered{
  position:static; margin:.5rem 0 0 0; display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center;
}
#homeBlogSlider .carousel-indicators.numbered li{
  width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:#fff !important; border:1px solid rgba(0,0,0,.22) !important; color:#111 !important;
  text-indent:0 !important; font-weight:700; opacity:1 !important; box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .15s ease, border-color .15s ease;
}
#homeBlogSlider .carousel-indicators.numbered li.active{
  background:#ff3b30 !important; border-color:#ff3b30 !important; color:#fff !important;
  box-shadow:0 3px 10px rgba(255,59,48,.35);
}

/* Mobil */
@media (max-width:576px){
  .home-blog-top-gap{ margin-top:14px; }        /* header ile nefes boşluğu */
  #homeBlogSlider .slider-img{ height:340px; }
  #homeBlogSlider .slider-title{ font-size:1.05rem; line-height:1.2; }
  #homeBlogSlider .ctrl{ width:36px; height:36px; }
  #homeBlogSlider .carousel-indicators.numbered{ gap:4px; }
  #homeBlogSlider .carousel-indicators.numbered li{ width:24px; height:24px; font-size:.75rem; }
}
/* === HOME BLOG SLIDER — Mobilde 10 sayı + “+” tek satıra sığsın === */
@media (max-width:576px){
  #homeBlogSlider .carousel-indicators.numbered{
    gap: 2px !important;          /* aralık küçülsün   */
    padding: 0 2px !important;    /* sağ-sol boşluk    */
    margin-top: .35rem !important;
    flex-wrap: nowrap !important; /* asla alta sarmasın */
    justify-content: center !important;
  }
  #homeBlogSlider .carousel-indicators.numbered li{
    width: 22px !important;       /* daha küçük buton  */
    height: 22px !important;
    font-size: .70rem !important; /* rakam yazısı      */
    line-height: 22px !important; /* tam ortalama      */
  }
  /* “+” butonunun yazısı da küçülsün */
  #homeBlogSlider .carousel-indicators.numbered li.more a{
    font-size: .90rem !important;
    line-height: 22px !important;
  }

  /* İstersen slider yüksekliğini de biraz düşür (opsiyonel) */
  #homeBlogSlider .slider-img{ height: 320px !important; }
}