/* ============================================================
   AI destekli rezervasyon — sohbet penceresi
   ============================================================
   Bu dosya render-blocking DEĞİL (bkz. inc/ai_rezervasyon.php) ve panel
   ancak düğmeye basılınca kuruluyor; bu yüzden burada yorum tutmak
   serbest — imr-min.css'in yorumsuz tutulma kuralı bu dosyaya uygulanmaz.

   Ölçü ve renkler mekan sayfasındaki saat modalıyla (inc/rez_saat_modal.php)
   aynı token setinden: aynı mor skalası, aynı yarıçap basamakları, aynı
   geçiş süreleri. İki katman yan yana açıldığında tek sistem gibi durmalı.
   ============================================================ */

.imr-airez {
  --mor: #402766;
  --mor-acik: #884ce3;
  --mor-koyu: #2f1b52;
  --zemin: #faf8fd;
  --cizgi: #ece7f5;
  --gri: #6f6885;
  --yesil: #157f4c;
  --kirmizi: #b3261e;

  position: fixed;
  inset: 0;
  z-index: 99991;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;
}

/* Perde yalnızca mobilde: masaüstünde pencere köşede duruyor ve arkadaki
   sayfayla çalışmaya devam edilebiliyor (mekan listesine bakmak gibi). */
.imr-airez-perde {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 36, .5);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.imr-airez[data-acik] { pointer-events: auto; }
.imr-airez[data-acik] .imr-airez-perde { pointer-events: auto; }

.imr-airez-kutu {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  height: min(640px, calc(100vh - 40px));
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 28px 70px -22px rgba(20, 10, 36, .6);
  overflow: hidden;
  /* Tetikleyiciden büyüyormuş hissi; çıkış girişten kısa. */
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .18s ease-in, opacity .18s ease-in;
  pointer-events: auto;
}

.imr-airez[data-acik] .imr-airez-kutu {
  transform: none;
  opacity: 1;
  transition: transform .26s cubic-bezier(.2, .8, .3, 1), opacity .2s ease-out;
}

/* ---------------------------------------------------------------- başlık */

.imr-airez-bas {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px 13px 16px;
  background: linear-gradient(135deg, var(--mor) 0%, var(--mor-acik) 140%);
  color: #fff;
  flex: 0 0 auto;
}

.imr-airez-bas .rozet {
  display: flex;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.imr-airez-bas h2 {
  margin: 0;
  font-size: 15.5px !important;
  font-weight: 800;
  line-height: 1.25;
  color: #fff !important;
  letter-spacing: -.15px;
}

.imr-airez-bas p {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}

.imr-airez-bas .bilgi { flex: 1 1 auto; min-width: 0; }

.imr-airez-kapat {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  transition: background .18s ease;
}

.imr-airez-kapat:hover { background: rgba(255, 255, 255, .26); }

/* ---------------------------------------------------- adım göstergesi */
/* Çok adımlı akış nerede olduğunu söylemezse kullanıcı her ekranda
   "daha ne kadar var" diye soruyor; ilerleme çubuğu o soruyu kapatıyor. */

.imr-airez-ilerleme {
  flex: 0 0 auto;
  height: 3px;
  background: var(--cizgi);
}

.imr-airez-ilerleme span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mor), var(--mor-acik));
  transition: width .3s cubic-bezier(.2, .8, .3, 1);
}

/* ---------------------------------------------------------------- gövde */

.imr-airez-govde {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 14px 6px;
  background: var(--zemin);
  overscroll-behavior: contain;
}

.imr-airez-satir {
  display: flex;
  margin-bottom: 10px;
  animation: imr-airez-gir .26s ease-out both;
}

.imr-airez-satir.kullanici { justify-content: flex-end; }

@keyframes imr-airez-gir {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.imr-airez-balon {
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mor-koyu);
  background: #fff;
  border: 1px solid var(--cizgi);
  border-bottom-left-radius: 6px;
}

.imr-airez-satir.kullanici .imr-airez-balon {
  background: var(--mor);
  border-color: var(--mor);
  color: #fff;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 6px;
}

.imr-airez-balon strong { font-weight: 800; }
.imr-airez-balon a { color: var(--mor-acik); text-decoration: underline; }
.imr-airez-balon .ek {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--gri);
}

.imr-airez-satir.kullanici .imr-airez-balon .ek { color: rgba(255, 255, 255, .8); }

/* ------------------------------------------------------------- düşünüyor */
/* "AI çalışıyor" hissi burada üretiliyor: üç nokta + değişen durum yazısı.
   Beklemenin ne kadar süreceği bilinmediği için ilerleme çubuğu değil
   belirsiz gösterge kullanılıyor; yazı ise ne YAPILDIĞINI söylüyor. */

.imr-airez-dusun {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border-radius: 16px;
  border-bottom-left-radius: 6px;
  background: #fff;
  border: 1px solid var(--cizgi);
  font-size: 13.5px;
  color: var(--gri);
}

.imr-airez-nokta {
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}

.imr-airez-nokta i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mor-acik);
  animation: imr-airez-zipla 1.1s infinite ease-in-out;
}

.imr-airez-nokta i:nth-child(2) { animation-delay: .16s; }
.imr-airez-nokta i:nth-child(3) { animation-delay: .32s; }

@keyframes imr-airez-zipla {
  0%, 70%, 100% { transform: translateY(0); opacity: .45; }
  35%           { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------- mekan kartı */

.imr-airez-kart {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 9px;
  margin-bottom: 8px;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--cizgi);
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.imr-airez-kart:hover {
  border-color: var(--mor-acik);
  box-shadow: 0 8px 20px -12px rgba(64, 39, 102, .5);
}

.imr-airez-kart:focus-visible { outline: 3px solid var(--mor-acik); outline-offset: 2px; }

.imr-airez-kart img {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 11px;
  background: var(--cizgi);
}

/* Kart gövdesi <button> içinde olduğu için hepsi <span>: buton içine blok
   element koymak geçersiz işaretleme. Blok davranışı display ile veriliyor —
   verilmezse ad, kategori ve rozetler tek satırda birbirine yapışıyor. */
.imr-airez-kart .ic {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.imr-airez-kart .ad {
  display: block;
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--mor-koyu);
}

.imr-airez-kart .alt {
  display: block;
  margin: 0;
  font-size: 12px;
  color: var(--gri);
  line-height: 1.4;
}

.imr-airez-kart .seritler {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.imr-airez-etiket {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  background: #f3ecfd;
  color: var(--mor);
  white-space: nowrap;
}

.imr-airez-etiket.puan { background: #fff5da; color: #8a6100; }
.imr-airez-etiket.acik { background: #e4f6ec; color: var(--yesil); }
.imr-airez-etiket.kapali { background: #f4f1f7; color: var(--gri); }
.imr-airez-etiket.indirim { background: #fdeaea; color: #a32626; }

/* -------------------------------------------------------------- çipler */
/* Daraltma çipleri sohbetin "sayfalama" yerine geçen aracı: kullanıcı
   sayfa 2'ye gitmiyor, soruyu daraltıyor. */

.imr-airez-cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 2px 0 12px;
}

.imr-airez-cip {
  min-height: 38px;
  padding: 8px 13px;
  border: 1.5px solid rgba(64, 39, 102, .22);
  border-radius: 999px;
  background: #fff;
  color: var(--mor);
  /* Kısayol kullanılmıyor: `inherit` font shorthand içinde geçersiz ve
     bildirimin tamamını düşürüyor (bkz. inc/ai_rezervasyon.php). */
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.imr-airez-cip:hover { background: #f3ecfd; border-color: var(--mor-acik); }
.imr-airez-cip:focus-visible { outline: 3px solid var(--mor-acik); outline-offset: 2px; }
.imr-airez-cip[aria-pressed="true"] { background: var(--mor); border-color: var(--mor); color: #fff; }
.imr-airez-cip[disabled] { opacity: .45; cursor: not-allowed; }

.imr-airez-cip .adet {
  margin-left: 4px;
  font-weight: 700;
  opacity: .62;
  font-variant-numeric: tabular-nums;
}

.imr-airez-cip.vurgu {
  background: linear-gradient(135deg, var(--mor) 0%, var(--mor-acik) 100%);
  border-color: transparent;
  color: #fff;
}

.imr-airez-cip.sessiz { border-style: dashed; color: var(--gri); }

/* Saat ızgarası: çip listesinden farklı olarak eşit genişlikte, çünkü
   saatler aynı uzunlukta ve ızgara taranması listeden hızlı. */
.imr-airez-saatler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 12px;
}

@media (max-width: 380px) {
  .imr-airez-saatler { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.imr-airez-saatler .imr-airez-cip {
  padding: 8px 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- form */

.imr-airez-form {
  margin: 2px 0 12px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
}

.imr-airez-alan { margin-bottom: 11px; }
.imr-airez-alan:last-of-type { margin-bottom: 14px; }

.imr-airez-alan label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mor-koyu);
}

.imr-airez-alan input,
.imr-airez-alan textarea {
  width: 100%;
  /* 16px altına inince iOS Safari alanı odaklanınca sayfayı yakınlaştırıyor. */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mor-koyu);
  background: var(--zemin);
  border: 1.5px solid var(--cizgi);
  border-radius: 11px;
  padding: 11px 12px;
  min-height: 46px;
  box-sizing: border-box;
  transition: border-color .16s ease;
}

.imr-airez-alan textarea { min-height: 66px; resize: vertical; }

.imr-airez-alan input:focus,
.imr-airez-alan textarea:focus {
  outline: none;
  border-color: var(--mor-acik);
  box-shadow: 0 0 0 3px rgba(136, 76, 227, .16);
}

.imr-airez-alan input[aria-invalid="true"] { border-color: var(--kirmizi); }

.imr-airez-alan .hata {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--kirmizi);
}

.imr-airez-alan .ipucu {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--gri);
}

/* Bal küpü: ekran dışında ama DOM'da; bkz. inc/form_koruma.php. */
.imr-airez-bal {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.imr-airez-onay {
  display: block;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--mor) 0%, var(--mor-acik) 100%);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity .18s ease, transform .12s ease;
}

.imr-airez-onay:hover { opacity: .93; }
.imr-airez-onay:active { transform: scale(.99); }
.imr-airez-onay:focus-visible { outline: 3px solid var(--mor-acik); outline-offset: 3px; }
.imr-airez-onay[disabled] { opacity: .5; cursor: not-allowed; }

/* Kod alanı: altı hane, geniş harf aralığı, ortalanmış. */
.imr-airez-kod input {
  text-align: center;
  letter-spacing: 9px;
  font-size: 22px !important;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- özet */

.imr-airez-ozet {
  margin: 2px 0 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 16px;
}

.imr-airez-ozet dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 12px;
  margin: 0;
}

.imr-airez-ozet dt {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gri);
}

.imr-airez-ozet dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mor-koyu);
  text-align: right;
}

.imr-airez-ozet .basarili {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 14.5px;
  font-weight: 800;
  color: var(--yesil);
}

/* --------------------------------------------------------------- alt */

.imr-airez-alt {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 11px 14px;
  padding-bottom: calc(11px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--cizgi);
}

.imr-airez-alt input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 46px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mor-koyu);
  background: var(--zemin);
  border: 1.5px solid var(--cizgi);
  border-radius: 999px;
  padding: 0 16px;
}

.imr-airez-alt input:focus {
  outline: none;
  border-color: var(--mor-acik);
  box-shadow: 0 0 0 3px rgba(136, 76, 227, .16);
}

.imr-airez-gonder {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--mor);
  color: #fff;
  cursor: pointer;
  transition: background .16s ease, opacity .16s ease;
}

.imr-airez-gonder:hover { background: var(--mor-acik); }
.imr-airez-gonder:focus-visible { outline: 3px solid var(--mor-acik); outline-offset: 2px; }
.imr-airez-gonder[disabled] { opacity: .45; cursor: not-allowed; }

.imr-airez-alt[hidden] { display: none !important; }

/* --------------------------------------------------------------- mobil */
/* Telefonda pencere tam ekran: 420px'lik bir kutu 375px ekranda zaten
   kenardan kenara gidiyor, yuvarlak köşeler ve perde boşuna yer yiyor. */

@media (max-width: 600px) {
  .imr-airez { padding: 0; align-items: stretch; justify-content: stretch; }
  .imr-airez[data-acik] .imr-airez-perde { opacity: 1; }
  .imr-airez-kutu {
    max-width: none;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    transform: translateY(100%);
  }
  .imr-airez[data-acik] .imr-airez-kutu { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .imr-airez-kutu,
  .imr-airez-perde,
  .imr-airez-ilerleme span,
  .imr-airez-satir { transition: none !important; animation: none !important; }
  .imr-airez-nokta i { animation: none; opacity: .7; }
}