/* UZAIRDESK 2026 - FLIGHTBAR CAPSULE CLEAN (iOS-safe)
   6 hücre: c1 icon | c2 icon | c3 from | c4 to | c5 date | c6 search
   SCOPE: sadece .uad-flightbar.uad-fbh
*/

/* Status message — sits below results, must clear sticky header */
#uadStatus {
  padding-top: 72px;       /* 64px mobile header + 8px gap */
  margin-top: -60px;       /* pull back so empty state takes no space */
  scroll-margin-top: 80px; /* smooth-scroll lands below header */
  min-height: 0;
  font-size: .78rem;
  color: rgba(237,244,250,.7);
  text-align: center;
}
#uadStatus:empty {
  padding-top: 0;
  margin-top: 0;
}
@media (min-width: 768px) {
  #uadStatus { padding-top: 88px; } /* 80px desktop header + 8px gap */
}

.uad-flightbar.uad-fbh{
  --fbh-h: 38px;
  --fbh-gap: 2px;

  --c-icon: 0px;     /* c1 / c2 */
  --c-search: 52px;   /* c6 */

  --capsule-left: calc(var(--c-icon) + var(--c-icon)*2); /* c1+c2 */
  --capsule-radius: 18px;

  --brand: #67f8d4;
  --ink: #000000;
}

/* 1) ANA GRID */
.uad-flightbar.uad-fbh .uad-fbh-grid{
  /* all: unset;  <-- bunu kullanma; iOS'ta beklenmedik yan etkiler yaratabiliyor */
  display: grid !important;
  grid-template-columns: var(--c-icon) var(--c-icon) 1.2fr 1.2fr 0.9fr var(--c-search) !important;

  width: 96% !important;
  max-width: 520px !important;

  /* header altına yapışık hissi */
  margin: 8px auto 4px !important;

  position: relative !important;
  align-items: center !important;
  gap: var(--fbh-gap) !important;

  box-sizing: border-box !important;
  isolation: isolate !important;
}

/* 2) ÖZBEKİSTAN HOLOGRAM KAPSÜLÜ */
.uad-flightbar.uad-fbh .uad-fbh-grid::before{
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;

  left: var(--capsule-left) !important;
  right: -4px !important;
  top: -5px !important;
  bottom: -5px !important;

  border-radius: var(--capsule-radius) !important;

  /* Özbekistan Bayrağı Renk Akışı */
  background: linear-gradient(110deg, 
    #0099b5 0%,    /* Gök Mavisi */
    #ffffff 35%,   /* Beyaz Şerit */
    #1eb443 50%,   /* Yeşil */
    #ffffff 65%,   /* Işık Süzülmesi */
    #0099b5 100%
  ) !important;

  background-size: 200% 100% !important;
  animation: uad-hologram 4s linear infinite !important;

  /* Bayrak Neonu (Mavi/Beyaz Parlama) */
  box-shadow: 0 0 25px rgba(0, 153, 181, 0.6), 0 15px 35px rgba(0, 0, 0, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

/* Hologram animasyonu */
@keyframes uad-hologram{
  0%   { background-position: 0% 50% !important; }
  100% { background-position: 200% 50% !important; }
}

/* 3) HÜCRELER (genel) */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell{
  position: relative !important;
  height: var(--fbh-h) !important;

  display: flex !important;
  align-items: center !important;

  z-index: 2 !important;
  box-sizing: border-box !important;
}

/* c1/c2 ikon hücreleri */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c1,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c2{
  justify-content: center !important;
  background: transparent !important;
}

/* 3) TIKLAT BENİ TITRET BENİ HÜCRELERİ (C3-C4-C5) */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c3,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c5 {
  background: #ffffff !important;
  z-index: 10 !important;
  margin: 1px !important; 
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 1px solid rgba(0, 153, 181, 0.4) !important;
  display: flex !important;
  padding: 0 !important;
  box-shadow: 0 4px 15px rgba(0, 153, 181, 0.15) !important;
  /* Animasyonları bozma, onlar kalsın */
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  animation: cell-vibrate 1.5s infinite ease-in-out !important;
}

/* İÇ YANARDAĞ ETKİSİ */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c3::before,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4::before,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c5::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, 
    rgba(0, 153, 181, 0.1) 0%, 
    rgba(30, 180, 67, 0.05) 50%,
    rgba(0, 153, 181, 0.1) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  animation: inner-glow 2s infinite alternate !important;
}

/* Üzerine Gelince - PATLAMA HİSSİ */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c3:hover,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4:hover,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c5:hover {
  transform: translateY(-6px) scale(1.05) !important;
  background: #ffffff !important;
  border-color: #0099b5 !important;
  border-width: 4px !important;
  box-shadow: 0 20px 40px rgba(0, 153, 181, 0.4),
              0 0 30px rgba(0, 153, 181, 0.3),
              0 0 0 2px rgba(255, 255, 255, 0.9) inset !important;
  animation: hover-pulse 0.8s infinite ease-in-out !important;
}

/* Tıklandığında - ELEKTRİK ÇARPMASI */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c3:active,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4:active,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c5:active {
  transform: translateY(2px) scale(0.96) !important;
  border-color: #1eb443 !important;
  box-shadow: 0 5px 15px rgba(30, 180, 67, 0.4),
              0 0 20px rgba(30, 180, 67, 0.3),
              0 0 0 3px rgba(255, 255, 255, 0.95) inset !important;
  transition: all 0.05s !important;
}

/* Titreme Animasyonu - ZİL GİBİ */
@keyframes cell-vibrate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(0.2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(1px) rotate(-0.2deg); }
}

/* Hover Pulse - TİTREŞİM ARTAR */
@keyframes hover-pulse {
  0%, 100% { transform: translateY(-6px) scale(1.05) rotate(0deg); }
  50% { transform: translateY(-8px) scale(1.06) rotate(0.5deg); }
}

/* İç Glow - YANARDAĞ ETKİSİ */
@keyframes inner-glow {
  0% { opacity: 0.3; }
  100% { opacity: 0.7; }
}

/* c6 buton alanı */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c6{
  justify-content: center !important;
}

/* 4) INPUT (iOS dikey hizalama FIX) */
.uad-flightbar.uad-fbh input#uadFrom,
.uad-flightbar.uad-fbh input#uadTo,
.uad-flightbar.uad-fbh input#uadDate,
.uad-flightbar.uad-fbh #uadDate{
  width: 100% !important;
  height: var(--fbh-h) !important;

  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;

  /* iOS baseline/caret için kritik */
  display: block !important;
  line-height: var(--fbh-h) !important;

  padding: 0 2px !important;

  font-weight: 500 !important;
  font-size: 9px !important;
  color: #000000 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;

  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100% !important;
  z-index: 2 !important;
  position: relative !important;
}

/* iPhone'da To input'u (c4) bazen daha aşağı oturur: minik düzeltme */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4 input#uadTo{
  padding-top: 1px !important;
}

/* Placeholder - DAHA BELİRGİN */
.uad-flightbar.uad-fbh input#uadFrom::placeholder,
.uad-flightbar.uad-fbh input#uadTo::placeholder,
.uad-flightbar.uad-fbh input#uadDate::placeholder{
  color: rgba(0, 0, 0, 0.7) !important;
  font-weight: 500 !important;
  font-size: 10px !important;
}

/* iOS date input sade görünüm */
.uad-flightbar.uad-fbh input[type="date"]{
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 5) SEARCH BUTTON - DAHA PARLAK */
.uad-flightbar.uad-fbh .uad-fbh-btn--search{
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  outline: none !important;

  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;

  transition: all 0.2s ease !important;
  animation: search-glow 2s infinite alternate !important;
}

.uad-flightbar.uad-fbh .uad-fbh-btn--search:hover{
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.8) !important;
  transform: scale(1.1) rotate(5deg) !important;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.6) !important;
}

.uad-flightbar.uad-fbh .uad-fbh-btn--search:active{
  transform: scale(0.9) rotate(-5deg) !important;
  filter: brightness(1.2) !important;
}

.uad-flightbar.uad-fbh .uad-fbh-btn--search svg{
  width: 24px !important;
  height: 24px !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.uad-flightbar.uad-fbh .uad-fbh-btn--search svg circle,
.uad-flightbar.uad-fbh .uad-fbh-btn--search svg path{
  stroke: #ffffff !important;
  stroke-width: 2.5px !important;
}

@keyframes search-glow {
  0% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); }
  100% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.6); }
}

/* 6) FOCUS GLOW - ELEKTRİK ÇARPMASI */
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c3:focus-within,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c4:focus-within,
.uad-flightbar.uad-fbh .uad-fbh-grid .uad-fbh-cell.c5:focus-within{
  border-color: #1eb443 !important;
  box-shadow:
    0 0 0 6px rgba(30, 180, 67, 0.25),
    0 15px 35px rgba(30, 180, 67, 0.3),
    0 0 30px rgba(0, 153, 181, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.9) inset !important;
  animation: focus-shake 0.3s ease-in-out !important;
}

@keyframes focus-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.uad-flightbar.uad-fbh .uad-fbh-btn--search:focus-visible{
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5) !important;
}

/* 7) DAR EKRAN */
@media (max-width: 480px){
  /* Hide decorative icon cells on all mobile sizes — they squeeze inputs */
  .uad-flightbar.uad-fbh .uad-fbh-cell.c1,
  .uad-flightbar.uad-fbh .uad-fbh-cell.c2{
    display: none !important;
  }

  .uad-flightbar.uad-fbh .uad-fbh-grid{
    grid-template-columns: 1.2fr 1.2fr 0.9fr var(--c-search) !important;
  }
}

@media (max-width: 360px){
  .uad-flightbar.uad-fbh{
    --fbh-h: 42px;
    --c-search: 50px;
  }

  .uad-flightbar.uad-fbh .uad-fbh-grid{
    max-width: 340px !important;
    grid-template-columns: 1fr 1fr 1.2fr var(--c-search) !important;
  }

  .uad-flightbar.uad-fbh input#uadFrom,
  .uad-flightbar.uad-fbh input#uadTo,
  .uad-flightbar.uad-fbh input#uadDate,
  .uad-flightbar.uad-fbh #uadDate{
    font-size: 9px !important;
    padding: 6px !important;
  }
}

/* =========================================================
   8) UÇUŞ ANİMASYONLARI (RESTORED FROM BACKUP)
   ========================================================= */

/* Uçak genel ayarları */
.uad-fbh-fly {
    position: absolute !important;
    width: 55px !important;
    height: 55px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: center !important;
    left: 0 !important;
    top: 0 !important;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)) !important;
}

/* KALKIŞ (C3): Xiva -> Andijon yolcusu kalmasın */
.uad-fbh-cell.c3 .uad-fbh-fly {
    background-image: url("/static/img/icons/kalkis.webp") !important;
    animation: takeoff_inside 8s linear infinite !important;
}

/* İNİŞ (C4): Varış noktası */
.uad-fbh-cell.c4 .uad-fbh-fly {
    background-image: url("/static/img/icons/varis.webp") !important;
    animation: landing_inside 10s linear infinite !important;
    animation-delay: 2s !important;
}

/* Uçuş Rotaları (Keyframes) */
@keyframes takeoff_inside {
    0%   { transform: translate(-120px, 15px) rotate(-10deg); opacity: 0 }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translate(120px, -30px) rotate(-30deg); opacity: 0; }
}

@keyframes landing_inside {
    0%   { transform: translate(-35px, -15px) rotate(15deg); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 0.7; }
    100% { transform: translate(120px, 25px) rotate(5deg); opacity: 0; }
}

/* 1. Modal Arka Planı (Karartma) */
.uad-ap-modal {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px); /* Arkayı hafif bulanıklaştırır, premium his verir */
}

/* 2. Açılan Panel (Sheet) */
.uad-ap-sheet {
    background: #ffffff !important;
    border-top: 4px solid #0099b5 !important; /* Özbekistan Mavisi üst çizgi */
    border-radius: 20px 20px 0 0 !important;
}

/* 3. Başlık ve Kapat Butonu */
.uad-ap-title {
    color: #000000 !important;
    font-weight: 700 !important;
    font-family: sans-serif;
}

.uad-ap-close {
    color: #000 !important;
    background: #f1f3f4 !important;
    border-radius: 50% !important;
    padding: 5px 10px !important;
}

/* 4. Arama Kutusu (Search Input) */
.uad-ap-search {
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
}

.uad-ap-search:focus {
    border-color: #0099b5 !important; /* Odaklanınca mavi olur */
    outline: none;
}

/* 5. Liste Elemanları (Havalimanı Satırları) */
.uad-ap-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f5f5f5 !important;
    padding: 12px 15px !important;
    transition: background 0.2s;
}

.uad-ap-item:hover, .uad-ap-item:active {
    background-color: rgba(0, 153, 181, 0.05) !important; /* Hafif mavi hover */
}

/* 6. Havalimanı Kodu (IST, TAS - En Sağdaki Kutu) */
.uad-ap-code {
    background: #0099b5 !important; /* Arka plan Özbek mavisi */
    color: #ffffff !important;      /* Yazı beyaz */
    font-weight: bold !important;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* 7. Bayrak İkonları */
.uad-ap-flag img {
    border-radius: 12px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 8. Şehir ve Havalimanı İsimleri */
.uad-ap-city {
    color: #333 !important;
    font-weight: 600 !important;
}

.uad-ap-sub {
    color: #777 !important;
    font-size: 12px !important;
}

/* Sonuçlar flightbar'ın ALTINDA, ayrı container'da */
#uadResultsContainer {
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    z-index: 5 !important;
}

#uadResults {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Flightbar sabit kalır */
.uad-flightbar.uad-fbh {
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    position: relative !important;
    z-index: 10 !important;
}