/* =====================================================================================================
 *  kingstur-arama-ozet.css  —  Sonuç sayfalarında arama alanını mobilde katlar
 * -----------------------------------------------------------------------------------------------------
 *  Otel, uçak ve otobüs SONUÇ sayfalarında (oteller / ucuslar / seferler) üstteki arama
 *  formu mobilde ekranın yarısını yiyordu. Burada tek satırlık bir özete katlanıyor:
 *
 *      [ 📍 İstanbul → Ankara                     ] [ 🗺 Harita ]
 *      [    12 Eyl - 15 Eyl · 2 Yolcu             ]
 *
 *  Özete basılınca form alttan "Aramayı Düzenle" panelinde açılıyor.
 *  Ana sayfa ve ürün tanıtım sayfaları (/ucak-bileti, /otel-ara ...) ETKİLENMEZ:
 *  bu dosya yalnızca sonuç sayfalarında yükleniyor (bkz. arama-ozet.php).
 *
 *  Kapsam: html.kt-ozet-sayfa  +  .kt-arama-kap  (ürün kapsayıcısına JS ekliyor)
 *
 *  1  Yedek düzen (JS çalışmazsa 2x2 ızgara)
 *  2  Üst özet çubuğu + "Aramayı Düzenle" paneli
 * ===================================================================================================== */

/* ============ 1  YEDEK DÜZEN — 2x2 IZGARA ==============================================
 *  NORMALDE bu form mobilde hiç görünmez: JS onu üstteki özet çubuğuna katlar (bölüm 9).
 *  Bu ızgara YEDEKTİR — JS çalışmazsa form yerinde kalır ve hiç değilse 2x2 durur,
 *  alt alta dizilip (yenistil.min.css -> flex-direction:column) ekranı kaplamaz.
 *
 *  Kapsam iki kere daraltıldı:
 *    html.kt-ozet-sayfa  -> sadece otel LİSTE sayfası (sınıfı otel-harita.php ekliyor)
 *    .kt-arama-kap -> sadece otel arama sekmesi
 *  Yani ana sayfadaki otel sekmesi ve diğer ürünler bundan etkilenmez.
 *
 *  Yerleşim:            [ Nereye        ] [ Misafir  ]
 *                       [ Tarih Aralığı ] [ Otel Bul ]
 * ======================================================================================== */

@media (max-width: 991.98px) {

  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list {
    display: grid !important;
    grid-template-columns: 1fr 0.74fr;
    grid-auto-rows: minmax(54px, auto);
    gap: 8px !important;
    height: auto !important;
    padding: 10px !important;
    align-items: stretch;
  }

  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list > * {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
  }

  /* Etiketin içindeki metin kutusu daralabilsin.
     Flex çocuklarının varsayılan `min-width:auto` değeri, uzun şehir/tarih yazısında
     hücreyi içeriği kadar şişirip sayfayı yatayda kaydırıyordu. */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label > label,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label > label > div,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__input,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__item__input {
    min-width: 0 !important;
    max-width: 100%;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label > label > div:last-child {
    flex: 1 1 auto;
    overflow: hidden;
  }

  /* --- yerleşim (DOM sırasından bağımsız) --- */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list > .custom-search-form__list__item--dep-arr {
    grid-area: 1 / 1;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list > .custom-search-form__list__item--passenger {
    grid-area: 1 / 2;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list > .custom-search-form__list__item--date {
    grid-area: 2 / 1;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list > .custom-search-form__list__btn {
    grid-area: 2 / 2;
  }

  /* "Oda Sayısı" alanı normalde misafir açılırına taşınmış oluyor (kt-gizli-alan).
     JS bir sebeple çalışmazsa misafir alanının üstüne binmesin diye kendi satırına düşsün. */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list
    > .custom-search-form__list__item--passenger ~ .custom-search-form__list__item--passenger {
    grid-area: 3 / 1 / auto / span 2;
  }

  /* --- kutular alçalsın, iç boşluklar daralsın --- */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label {
    min-height: 54px !important;
    height: 100%;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label > label {
    padding: 6px 10px !important;
    gap: 8px !important;
    height: 100%;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form-icon_div {
    width: 28px !important;
    min-width: 28px;
    height: 28px;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form-icon_div i { font-size: 13px !important; }

  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label__title {
    font-size: 11px !important;
    line-height: 1.2;
  }

  /* Değerler tek satırda kalsın, taşarsa üç nokta olsun (kutular kaymasın) */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label input,
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label__title {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item__label input {
    font-size: 13.5px !important;
  }

  /* --- "Otel Bul" butonu hücreyi doldursun --- */
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list .custom-search-form__list__btn {
    flex-basis: auto !important;
    padding: 0 !important;
    display: flex;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list .custom-search-form__list__btn .button {
    width: 100%;
    height: 100%;
    min-height: 54px;
    margin: 0 !important;
    border-radius: 12px;
    font-size: 15px;
  }
}

/* Dar ekranda tarih metni ("11 Eylül 2026 - 12 Eylül 2026") ikonla birlikte sığmıyor;
   o hücrede ikonu kaldırıp yazıya yer açıyoruz. */
@media (max-width: 640px) {
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item--date .custom-search-form-icon_div {
    display: none !important;
  }
  html.kt-ozet-sayfa .kt-arama-kap .custom-search-form__list__item--date input {
    font-size: 12px !important;
  }
}


/* ============ 2  ÜST ÖZET ÇUBUĞU + "ARAMAYI DÜZENLE" PANELİ ============================
 *  Arama formu mobilde tek satıra katlanır:
 *      [ 📍 Türkiye, Bursa                        ] [ 🗺 Harita ]
 *      [    11 Eyl - 12 Eyl · 1 Kişi · 1 Oda      ]
 *  Özete basılınca form alttan açılan panelde düzenlenir.
 *  Yükseklik ~296px -> ~64px.
 * ======================================================================================== */

.kt-ust { display: none; }

@media (max-width: 991.98px) {

  .kt-ust {
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    background: var(--kt-zemin);
    border-bottom: 1px solid var(--kt-cizgi);
    box-shadow: 0 2px 10px rgba(16, 24, 64, .05);
  }

  /* Katlanmış hâldeyken asıl arama alanı görünmez. */
  body.kt-ust-aktif .search_container_area { display: none !important; }


  .kt-ust__ozet {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    text-align: start;
    cursor: pointer;
  }

  .kt-ust__ozet:active { background: #f3f5fa; }

  .kt-ust__pin {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef2ff;
  }

  .kt-ust__pin svg { width: 16px; height: 16px; fill: var(--kt-lacivert); }

  .kt-ust__yazi {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
  }

  .kt-ust__baslik {
    font-size: 15px;
    font-weight: 700;
    color: var(--kt-lacivert);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kt-ust__alt {
    font-size: 11.5px;
    color: var(--kt-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .kt-ust__kalem {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
  }

  .kt-ust__kalem svg { width: 14px; height: 14px; fill: #9aa1b8; }

  .kt-ust__harita {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 5px 8px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--kt-mavi);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .kt-ust__harita:active { background: #eef4ff; }
  .kt-ust__harita svg { width: 20px; height: 20px; fill: currentColor; }

  /* --- "Aramayı Düzenle" paneli --- */

  /* Uçakta 5 alan var (gidiş + dönüş tarihi ayrı), otelde 3. Hepsi sığsın diye
     panel biraz daha yüksek; yine de taşarsa panelin kendisi kayar. */
  .kt-sayfa--arama .kt-sayfa__panel {
    max-height: 92vh;
    overflow-y: auto;
  }

  .kt-sayfa__ust--orta { justify-content: center; }

  /* Konum listesi ve misafir sayacı panelden taşabilmeli, kırpılmasın.
     (flatpickr takvimi zaten body'e ekleniyor, etkilenmiyor.) */
  .kt-sayfa--arama .kt-sayfa__govde {
    overflow: visible;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }

  /* Panele taşınan arama formu: kart gölgesi/çerçevesi olmadan, alt alta. */
  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 4px 0 0 !important;
    height: auto !important;
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list > * {
    width: 100% !important;
    grid-area: auto !important;
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__item__label {
    min-height: 56px !important;
    border: 1px solid var(--kt-cizgi);
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__item__label > label {
    padding: 8px 14px !important;
    gap: 10px !important;
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form-icon_div {
    display: flex !important;
    width: 34px !important;
    min-width: 34px;
    height: 34px;
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__item__label__title { font-size: 12px !important; }
  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__item__label input { font-size: 15px !important; }

  /* Büyük "Otel Bul" düğmesi */
  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__btn {
    padding: 10px 0 0 !important;
    flex-basis: auto !important;
  }

  html.kt-ozet-sayfa .kt-sayfa--arama .kt-arama-kap .custom-search-form__list__btn .button {
    width: 100%;
    min-height: 52px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
  }
}

/* --- sağdan sola --- */
[dir="rtl"] .kt-ust__ozet { text-align: start; }

/* --- hareketi azalt --- */
@media (prefers-reduced-motion: reduce) {
  .kt-ust__ozet, .kt-ust__harita { transition: none !important; }
}

/* ============ 3  ALTTAN AÇILAN PANEL — ORTAK İSKELET ===================================
 *  (kt-sayfa ailesi hem bu panelde hem otel filtre panelinde kullanılıyor.
 *   Otel sayfasında kingstur-harita.css de aynı kuralları tanımlıyor; ikisi de aynı
 *   değerleri verdiği için çakışma olmaz, tek başına yüklendiğinde de çalışır.)
 * ======================================================================================== */

.kt-sayfa[hidden] { display: none !important; }

.kt-sayfa {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: flex-end;
}

.kt-sayfa__perde {
  position: absolute;
  inset: 0;
  background: rgba(11, 16, 38, .48);
  opacity: 0;
  transition: opacity .24s ease;
}

.kt-sayfa.kt-acik .kt-sayfa__perde { opacity: 1; }

.kt-sayfa__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 82vh;
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(11, 16, 38, .26);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  will-change: transform;
}

.kt-sayfa.kt-acik .kt-sayfa__panel { transform: translateY(0); }

.kt-sayfa__tut {
  flex: 0 0 auto;
  padding: 9px 0 3px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}

.kt-sayfa__tut::before {
  content: "";
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #d7dbe7;
}

.kt-sayfa__ust {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 16px 12px;
  border-bottom: 1px solid #e6e8ef;
}

.kt-sayfa__ust--orta { justify-content: center; }

.kt-sayfa__baslik {
  font-size: 16px;
  font-weight: 600;
  color: #141b4d;
  margin: 0;
}

.kt-sayfa__govde {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 16px 12px;
  overscroll-behavior: contain;
}

body.kt-sayfa-acik { overflow: hidden !important; }