/* css/index.css 
   ==========================================
   Bu dosya SADECE index.php için geçerli olacak ve 
   mobilde top-bar, navbar, hero, search-card
   öğelerinin üst üste binmesini engelleyecek.
   ========================================== */

/* 1) Tablet & Mobil (≤768px) için Özel Kurallar: */
@media (max-width: 768px) {

  /* ————————————————————————————————————————
     1.1) ÜST BİLGİ ÇUBUĞU (TOP-BAR) AYARLARI
     ———————————————————————————————————————— */
  .top-bar {
    padding: 6px 0;
    font-size: 12px;
  }
  .top-bar .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .top-bar .left-info,
  .top-bar .right-info {
    width: 100%;
    justify-content: center;
    margin: 3px 0;
  }

  /* ————————————————————————————————————————
     1.2) NAVBAR (main-nav) AYARLARI
     ———————————————————————————————————————— */
  .main-nav {
    position: fixed;
    top: 32px;
    left: 0;
    right: 0;
    padding: 6px 0;
    z-index: 150;
    background-color: #fff;
    overflow-x: auto;
    white-space: nowrap;
  }
  .main-nav .navbar-toggle { margin-top: 4px; }
  .main-nav .navbar-nav {
    display: inline-flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .main-nav .navbar-nav > li { display: inline-flex; flex-shrink: 0; }
  .main-nav .nav > li > a {
    padding: 8px 6px;
    font-size: 14px;
    white-space: nowrap;
  }
  .btn-login {
    margin-left: 8px;
    padding: 5px 12px;
    flex: 0 0 auto;
  }

  /* ————————————————————————————————————————
     1.3) BODY PADDING-TOP (TOP-BAR + NAVBAR)
     ———————————————————————————————————————— */
  body {
    padding-top: 76px !important;
  }

  /* ————————————————————————————————————————
     1.4) HERO BÖLÜMÜ (hero) AYARLARI
     ———————————————————————————————————————— */
  .hero {
    margin-top: 0px;
    height: 5vh;
    min-height: 250px;
  }
  .hero .hero-inner h1 { font-size: 1.8rem; }
  .hero .hero-inner h2,
  .hero .hero-inner p.subtitle { font-size: 1rem; }

  /* ————————————————————————————————————————
     1.5) ARAMA KARTI (search-card) AYARLARI – GRİD TARİH/SAAT
     ———————————————————————————————————————— */
  .search-card .date-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100%;
  }
  .search-card .date-row .date-group,
  .search-card .date-row .time-group,
  .search-card .date-row .return-date-wrapper,
  .search-card .date-row .return-time-wrapper {
    width: 100% !important;
    max-width: none !important;
  }

  /* ————————————————————————————————————————
     1.7) MAP (harita) AYARLARI
     ———————————————————————————————————————— */
  #map {
    height: 30vh;
  }
}

/* =========================================================
   index.css (Sadece index.php için mobil düzenler)
   – Mobilde Tarih Alanlarının Her Zaman Üst Üste (Tek Sütun)
   – Hero Yazısını Net Göstermek İçin Arama Kartını Aşağı İndirme
   ========================================================= */
@media (max-width: 768px) {
  .hero .hero-inner { padding-top: 80px; }
  .search-card {
    margin: 0 auto 20px !important;
    width: 95%;
    padding: 14px 12px;
    z-index: 3;
  }
  .search-card .form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .search-card .trip-type-inline {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .search-card .location-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 10px;
    position: relative;
  }
  .search-card .location-row .swap-btn {
    position: absolute !important;
    right: -22px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg) !important;
    margin: 0 !important;
  }
  .search-card .location-row .field-group {
    flex: none !important;
    width: 100% !important;
    padding-right: 20px;
  }
  .search-card .date-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-bottom: 0;
  }
  .search-card .date-row .field-group {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
  }
  .search-card .btn-search {
    width: 100%;
    margin-left: 0;
    padding: 10px 0;
    font-size: 16px;
  }
}

/* =======================================================
   DÖNÜŞ ALANLARI – HER ZAMAN GÖRÜNÜR, İNPUTLAR DISABLED
   ======================================================= */
.return-date-wrapper,
.return-time-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

/* Toggle kapalıyken .has-return sınıfı yok, ama kutu hep görünüyor */
/* Toggle açıldığında .has-return JS ile eklenip input’lar enable olur */

/* Disabled input’lar için görsel ipucu */
.search-card input:disabled {
  background-color: #e9e9e9 !important;
  color: #777 !important;
  cursor: not-allowed !important;
}

/* ————————————————————————————————————————
   X (“clear”) ikonlarının stil ayarları
   ———————————————————————————————————————— */
.field-group {
  position: relative;
}
.field-group .clear-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #888;
  cursor: pointer;
  display: none;
  z-index: 1;
}
.field-group.show-clear .clear-icon {
  display: block;
}
.search-card .location-row .field-group .clear-icon {
  right: 34px;
}

/* Ek mobil esneklik (≥ max 768 altı) */
@media (max-width: 768px) {
  .date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .date-row .date-group,
  .date-row .time-group {
    flex: 1;
    min-width: 150px;
  }
  @media (max-width: 480px) {
    .date-row {
      flex-direction: column;
    }
  }
}

@media (max-width: 768px) {
  /* Adımları yatayda tek satır yap, taşınca kaydırılabilir olsun */
  .how-it-works .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem; /* isteğe bağlı: altta boşluk */
  }
  /* Her bir adımın sabit bir genişliği olsun, kendi içinde esneyip taşmasın */
  .how-it-works .how-step {
    flex: 0 0 180px; 
    min-width: 250px;  /* ihtiyacınıza göre oynayın */
    margin-right: 15px; /* adımlar arası boşluk */
  }
  /* Son adımın sağ kenar boşluğunu kaldırmak için */
  .how-it-works .how-step:last-child {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  /* Servis satırını yatay kaydırılabilir flex’e çevir */
  .service-row .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem;
  }
  /* Her bir servis kutusuna sabit/dar genişlik ver */
  .service-row .service-col {
    flex: 0 0 180px; 
    min-width: 180px;   /* ihtiyacınıza göre 160–200px arası deneyin */
    margin-right: 15px;
  }
  /* Son kutunun sağ boşluğunu kaldır */
  .service-row .service-col:last-child {
    margin-right: 0;
  }
}