/* Ana sayfa slider'ı: sabit yükseklik (500px / 240px) yerine görsellerin kendi oranı (1500×600 = 5:2).
   Böylece görsel hiçbir ekranda kesilmez. Tablet ve mobilde başlık kutusu görselin altına iner; mobilde sadece başlık. */
.hm-slide .slider-wraper .sl-item .sl-img { background-position: center center; }
.hm-slide .slider-wraper .sl-item .sli-overlay { height: auto; aspect-ratio: 5 / 2; }

/* Tablet + mobil: kutu görselin altında, tam genişlik */
@media (max-width: 991px) {
  .hm-slide .slider-wraper .sl-item .sl-img { position: relative; height: auto; aspect-ratio: 5 / 2; }
  .hm-slide .slider-wraper .sl-item .sli-overlay { aspect-ratio: auto; }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 {
    position: static; display: block; max-width: none; margin: 0; padding: 16px 18px 18px;
    background: #fff; border-bottom: 3px solid #d37216;
  }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 h2 { margin-top: 0; font-size: 17px; line-height: 1.35; }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 hr { margin: 12px 0; }

  /* Noktalar görselin üstünde değil, altta koyu renkte */
  .hm-slide .owl-dots { position: static; padding: 14px 0 0; }
  .hm-slide .owl-dots .owl-dot { border-color: #161615; }
  .hm-slide .owl-dots .owl-dot.active::before { background-color: #d37216; }
}

/* Mobil: açıklama yok, sadece başlık */
@media (max-width: 767px) {
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 { padding: 14px 16px 14px; }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 hr,
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 h4 { display: none; }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 h2 { font-size: 15px; }
  .hm-slide .slider-wraper .sl-item .sli-overlay > a.fm04 h2 br { display: none; }
}

/* ===== Hero kartları (üst alandaki 4 hizmet kartı) =====
   Eskiden üst alan 1088px'e sabitti ve kartlar genişliğin %39'u kadar aşağı itiliyordu:
   büyük ekranda kartlar alanın dışına taşıp kayboluyordu, mobilde sadece ilk kart görünüyordu. */
.header { height: auto; min-height: 0; max-height: none; padding-bottom: 70px; }
.header .info { display: flex; flex-wrap: wrap; width: 100%; max-width: 1640px; margin: 0 auto; padding: min(39vw, 600px) 0 0; }
.header .info > [class*="col-"] { display: flex; float: none; }
.header .info .card { width: 100%; height: auto; min-height: 270px; margin: 0; }
.hero-noktalar { display: none; }

/* Tablet + mobil: kaydırılabilir kart slider'ı (yanda bir sonraki kart görünür) */
@media (max-width: 991px) {
  .header { padding-bottom: 34px; }
  .header .info {
    flex-wrap: nowrap; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 16px; padding: 39vw 16px 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .header .info::-webkit-scrollbar { display: none; }
  .header .info > [class*="col-"],
  .header .info > .hidden-xs { display: flex !important; flex: 0 0 calc(50% - 7px); max-width: calc(50% - 7px); padding: 0; scroll-snap-align: start; }
  .header .info .card { min-height: 0; }
  .hero-noktalar { display: flex; justify-content: center; gap: 8px; width: 100%; padding-top: 16px; }
  .hero-noktalar button { width: 9px; height: 9px; padding: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, transform .2s; }
  .hero-noktalar button.is-aktif { background: #d37216; border-color: #d37216; transform: scale(1.2); }
}
@media (max-width: 767px) {
  .header .info { padding-top: max(150px, 36vw); }
  .header .info > [class*="col-"],
  .header .info > .hidden-xs { flex-basis: 86%; max-width: 86%; }
  .header .info .card { padding: 24px 22px; }
}