/* ═══════════════════════════════════════════════════════════
   REZERVASYON SİHİRBAZI
   Yalnız rezervasyon sayfasında yükleniyor. sultan.css 108 KB ve yirmi iki
   sayfanın hepsinde yükleniyor, sihirbaz iki sayfada çalışıyor.

   Yeni renk üretilmiyor, sultan.css içindeki değişkenler kullanılıyor. İki
   istisna var, ikisi de erişilebilirlik zorunluluğu.

   --cizgi değeri beyaz üstünde #D8DADC değerine çöküyor ve 1,40 veriyor.
   WCAG 2.2 başarım ölçütü 1.4.11 tıklanabilir denetimin sınırı için 3,00
   istiyor. Bu yüzden denetim sınırları --cizgi-kontrol kullanıyor.

   Altın (--altin) beyaz zeminde 2,18 veriyor, sihirbazda METİN olarak hiç
   kullanılmıyor. Yalnız şeridin tamamlanmış adımındaki çizgide ve öğün
   başlığının altındaki ayraçta geçiyor, ikisi de dekor.
   ═══════════════════════════════════════════════════════════ */

.rez-kok{
  --cizgi-kontrol:#8F959E;   /* beyazda 3,02 */
  --hata:#8C2F29;            /* beyazda 8,22 */
  max-width:44rem;
  margin-top:2rem;
}

/* ── yan kart ──
   Masaüstünde sihirbaz 704 piksel, sarmalayıcı 1170. Sağda 466 piksel boş
   duruyordu. Yan kart oraya giriyor ve sihirbaz genişliği değişmiyor.
   Bütün adımlar aynı ızgara gözünde, aynı anda yalnız biri görünür.
   Telefonda tek sütun, kart adımların altında. */
@media (min-width:1024px){
  .rez-kok{max-width:none}
  .rez-sihirbaz{
    display:grid;
    grid-template-columns:minmax(0,44rem) minmax(16rem,20rem);
    column-gap:clamp(2rem,4vw,3.5rem);
    align-items:start;
  }
  /* Şerit yalnız sihirbaz sütununda. Bütün ızgarayı kaplayınca son adım
     yan kartın altına kayıyor ve takvimle hizası kopuyor. */
  .rez-serit{grid-area:1 / 1 / 2 / 2}
  .rez-adim{grid-area:2 / 1 / 3 / 2}
  .rez-yan{
    grid-area:2 / 2 / 3 / 3;
    position:sticky;top:calc(var(--ust-bar-inik,72px) + 1.5rem);
  }
  .rez-yan .rez-bilgi{margin-top:0}
}
.rez-yan{margin-top:1.5rem}
.rez-yan .rez-yedek-eylem{margin-top:1.2rem}
/* Onay ekranında kart gereksiz, iş bitti. */
.rez-sihirbaz:has(#rez-adim-5:not([hidden])) .rez-yan{display:none}

/* Yalnız ekran okuyucuya giden metin. Child temada böyle bir yardımcı sınıf
   yoktu, burada tanımlanıyor. display:none kullanılmıyor, o metni ekran
   okuyucudan da siliyor. */
.rez-kok .gorsel-gizli{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* .rez-serit display:grid taşıyor, hidden özniteliği tek başına onu
   gizlemiyordu. Başarı ekranında şerit ekranda kalıyordu. */
.rez-kok [hidden]{display:none !important}

/* ── Telefon yolu. JavaScript kapalıyken, Arapça ve Rusça sayfada,
   sistem kapalıyken ekranda kalan tek çıkış. */
.rez-yedek{
  border:1px solid var(--cizgi-kontrol);
  padding:clamp(1.2rem,4vw,2rem);
}
.rez-yedek h3{
  font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kehribar-metin);margin:0 0 .7rem;
}
.rez-yedek p{margin:0 0 1rem;color:var(--metin-2)}
.rez-yedek-eylem{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.2rem 0 0}

/* ── Adım şeridi */
.rez-serit{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  list-style:none;margin:0 0 clamp(1.5rem,4vw,2.5rem);padding:0;
  border-top:1px solid var(--cizgi);
}
.rez-serit-adim{border-top:2px solid transparent;margin-top:-1px}
.rez-serit-adim.tamam{border-top-color:var(--altin)}
.rez-serit-adim.etkin{border-top-color:var(--murekkep)}
.rez-serit-dugme{
  display:flex;flex-direction:column;gap:.15rem;align-items:flex-start;
  width:100%;min-height:56px;padding:.8rem .5rem .8rem 0;
  background:none;border:0;text-align:start;cursor:pointer;
  font-family:var(--govde);
}
.rez-serit-dugme[disabled]{cursor:default;opacity:.55}
.rez-serit-ad{
  font-weight:500;font-size:.68rem;line-height:1.3;letter-spacing:.16em;
  text-transform:uppercase;color:var(--kehribar-metin);
}
.rez-serit-adim.ileride .rez-serit-ad{color:var(--metin-3)}
.rez-serit-deger{font-weight:400;font-size:.82rem;line-height:1.3;color:var(--murekkep)}
.rez-serit-deger.rez-bos{color:var(--metin-3)}

@media (max-width:359px){
  .rez-serit{grid-template-columns:repeat(2,1fr)}
  .rez-serit-adim:nth-child(-n+2){border-bottom:1px solid var(--cizgi)}
}

/* ── Adım paneli */
.rez-adim h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,1.1rem + 1.6vw,2.25rem);
  line-height:1.15;margin:0 0 .6rem;color:var(--murekkep);
}
.rez-adim h2:focus{outline:none}
.rez-adim h2:focus-visible{outline:2px solid var(--murekkep);outline-offset:4px}
.rez-yardim{color:var(--metin-2);margin:0 0 1.6rem;max-width:34rem}
.rez-yardim.kucuk{font-size:.86rem;color:var(--metin-3)}
.rez-uyari{
  border:1px solid var(--cizgi-kontrol);padding:1.1rem 1.2rem;
  color:var(--metin-2);margin:0;
}
.rez-alt{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:2rem 0 0}
.rez-alt-gonder{justify-content:space-between}
.rez-geri{
  background:none;border:0;padding:.6rem 0;cursor:pointer;
  font-family:var(--govde);font-size:.86rem;color:var(--metin-2);
  text-decoration:underline;text-underline-offset:.3em;
  min-height:44px;
}
.rez-geri:hover{color:var(--murekkep)}

/* ── Takvim */
.rez-takvim-baslik{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1rem;
}
.rez-ay{
  font-family:var(--display);font-weight:400;font-size:1.15rem;
  margin:0;color:var(--murekkep);text-align:center;flex:1;
}
.rez-ok{
  width:44px;height:44px;flex:0 0 44px;
  background:none;border:1px solid var(--cizgi-kontrol);
  color:var(--murekkep);cursor:pointer;font-size:1.4rem;line-height:1;
  transition:background-color .2s var(--e-out);
}
.rez-ok:hover:not([disabled]){background:var(--kagit-2)}
.rez-ok[disabled]{opacity:.35;cursor:default}

/* repeat(7,1fr) aslında minmax(auto,1fr) demek ve sütun içeriğinin altına
   inemiyor. Gün kutusundaki ekran okuyucu metni sütunu 136 piksele şişiriyordu,
   yedi sütun 290 piksellik kutuya sığmıyordu. minmax(0,1fr) o tabanı kaldırıyor. */
/* Izgara artık iki katmanlı, gunler kapsayıcısı satırları diziyor,
   her satır kendi içinde yedi sütun. */
.rez-gun-adlari,.rez-hafta{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;
}
.rez-gunler{display:grid;gap:4px}
.rez-gun-adlari{margin-bottom:4px}
.rez-gun-adlari span{
  text-align:center;font-size:.68rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--metin-3);padding:.4rem 0;
}
.rez-gun{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0;
  background:none;border:1px solid var(--cizgi-kontrol);
  font-family:var(--govde);font-weight:500;font-size:1rem;
  font-variant-numeric:tabular-nums;
  color:var(--murekkep);cursor:pointer;
  transition:background-color .2s var(--e-out);
}
.rez-gun:hover:not([aria-disabled]){background:var(--kagit-2)}

/* Geçmiş ve dolu günler. Sekme sırasında kalıyorlar, disabled değiller,
   yoksa ekran okuyucu ayın yapısını kaybediyor. Üstlerindeki çapraz çizgi
   durumu renkten bağımsız da anlatıyor. */
.rez-gun[aria-disabled="true"]{
  cursor:default;color:var(--metin-3);border-color:var(--cizgi);
  background:var(--kagit-2);
}
.rez-gun[aria-disabled="true"]::after{
  content:"";position:absolute;left:22%;right:22%;top:50%;
  height:1px;background:var(--metin-3);opacity:.55;
}
.rez-bosluk{min-height:46px}

/* Telefonda takvim, kapsayıcının kendi yan dolgusunu geri alıyor.
   390 piksellik ekranda .wrap 20, temanın dış kutusu 30 piksel yiyordu, yedi
   sütuna 290 piksel kalıyor ve gün kutusu 38 piksele düşüyordu. Yalnız bizim
   verdiğimiz dolgu geri alınıyor, temanınki duruyor, yani takvim ekran kenarına
   yapışmıyor ve 30 piksellik kenar boşluğu korunuyor. */
@media (max-width:600px){
  .rez-takvim{margin-inline:calc(-1 * var(--pad))}
  .rez-gun-adlari,.rez-hafta,.rez-gunler{gap:3px}
}

/* Bugün ile seçili gün yalnız renkle ayrılmıyor. Bugünün altında nokta,
   seçili günün dolgusu mürekkep. */
.rez-gun.bugun::before{
  content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--murekkep);
}
.rez-gun.secili{
  background:var(--murekkep);color:#fff;border-color:var(--murekkep);
}
.rez-gun.secili.bugun::before{background:#fff}

/* ── Saat yuvaları */
.rez-ogun + .rez-ogun{margin-top:2rem}
.rez-ogun-ad{
  font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kehribar-metin);margin:0 0 .3rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--altin);
}
.rez-ogun-not{font-size:.86rem;color:var(--metin-3);margin:.6rem 0 1rem}
.rez-yuva-kume{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
}
.rez-yuva{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;min-height:56px;padding:.5rem .3rem;
  background:none;border:1px solid var(--cizgi-kontrol);
  font-family:var(--govde);cursor:pointer;
  transition:background-color .2s var(--e-out);
}
.rez-yuva:hover:not([disabled]){background:var(--kagit-2)}
.rez-yuva-saat{
  font-weight:500;font-size:1rem;font-variant-numeric:tabular-nums;
  color:var(--murekkep);
}
.rez-yuva-durum{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--metin-3)}
.rez-yuva[disabled]{
  cursor:default;background:var(--kagit-2);border-color:var(--cizgi);
}
.rez-yuva[disabled] .rez-yuva-saat{color:var(--metin-3);text-decoration:line-through}

/* ── Kişi sayısı */
.rez-kisiler{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
}
.rez-kisi{
  display:flex;align-items:center;justify-content:center;
  min-height:56px;background:none;border:1px solid var(--cizgi-kontrol);
  font-family:var(--govde);font-weight:500;font-size:1.05rem;
  font-variant-numeric:tabular-nums;color:var(--murekkep);cursor:pointer;
  transition:background-color .2s var(--e-out);
}
.rez-kisi:hover{background:var(--kagit-2)}
.rez-kisi.secili{background:var(--murekkep);color:#fff;border-color:var(--murekkep)}
.rez-kisi-fazla{
  grid-column:1 / -1;font-size:.86rem;letter-spacing:.06em;
}
.rez-kalabalik{
  margin-top:1.5rem;border:1px solid var(--cizgi-kontrol);
  padding:clamp(1.2rem,4vw,1.8rem);
}
.rez-kalabalik h3{
  font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kehribar-metin);margin:0 0 .7rem;
}
.rez-kalabalik p{margin:0;color:var(--metin-2)}

/* ── Form */
.rez-form2 .form-satir{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.rez-form2 .form-satir{grid-template-columns:1fr}}
.rez-form2 .alan{margin-bottom:1.1rem}
.rez-form2 label{
  display:block;font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;color:var(--kehribar-metin);margin-bottom:.45rem;
}
.rez-zor{
  font-size:.62rem;letter-spacing:.1em;text-transform:lowercase;
  color:var(--metin-3);font-weight:400;
}
.rez-form2 input[type=text],
.rez-form2 input[type=tel],
.rez-form2 input[type=email],
.rez-form2 textarea{
  width:100%;box-sizing:border-box;min-height:48px;
  padding:.7rem .9rem;background:#fff;
  border:1px solid var(--cizgi-kontrol);border-radius:0;
  font-family:var(--govde);font-size:1rem;color:var(--murekkep);
}
.rez-form2 textarea{min-height:96px;resize:vertical}
.rez-form2 input:focus-visible,
.rez-form2 textarea:focus-visible{
  outline:2px solid var(--murekkep);outline-offset:1px;border-color:var(--murekkep);
}
.rez-form2 input.hatali,.rez-form2 textarea.hatali{border-color:var(--hata);border-width:2px}
.rez-hata{margin:.4rem 0 0;font-size:.84rem;font-weight:500;color:var(--hata)}
.rez-ozet-hata{margin:1rem 0 0;font-size:.9rem;font-weight:500;color:var(--hata)}

/* Bal küpü. display:none kullanılmıyor, iyi botlar onu görüyor ve atlıyor. */
.rez-kupe{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.rez-riza{margin:1.4rem 0;padding:1rem 1.1rem;background:var(--kagit-2)}
.rez-kutu{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--murekkep);margin:0}
.rez-kutu input{margin-top:.2rem;width:20px;height:20px;flex:0 0 20px;accent-color:#272F3C}
.rez-riza .rez-yardim{margin:.6rem 0 0 1.9rem}

.rez-bilgi{margin:1.8rem 0;border-top:1px solid var(--cizgi);padding-top:1.4rem}
.rez-bilgi h3{
  font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kehribar-metin);margin:0 0 .8rem;
}
.rez-bilgi ul{list-style:none;margin:0;padding:0}
.rez-bilgi li{
  position:relative;padding-left:1.2rem;margin-bottom:.5rem;
  font-size:.92rem;color:var(--metin-2);
}
.rez-bilgi li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:1px;background:var(--altin);
}

.rez-veri-ozet{margin:1.4rem 0 0;font-size:.84rem;color:var(--metin-3)}
/* Bağlantı çevresindeki metinden yalnız renkle ayrılıyordu, ölçülen fark
   1,61 ve WCAG 1.4.1 en az 3 istiyor. Renk körü ziyaretçi aydınlatma metni
   bağlantısını hiç göremiyordu. Altı çizildi, renk şartı kalkıyor.
   16 Eylül 2026 denetimi. */
.rez-veri-ozet a{
  color:var(--metin-2);
  text-decoration:underline;
  text-underline-offset:.15em;
}

/* ── Başarı */
.rez-kod-etiket{
  font-family:var(--govde);font-weight:500;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--kehribar-metin);margin:2rem 0 .4rem;
}
.rez-kod{
  font-family:var(--display);font-size:clamp(2rem,1.4rem + 2.4vw,3rem);
  letter-spacing:.14em;color:var(--murekkep);margin:0 0 .5rem;
  font-variant-numeric:tabular-nums;
}
.rez-ozet{margin:2rem 0 0;border-top:1px solid var(--cizgi)}
.rez-ozet > div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--cizgi);
}
.rez-ozet dt{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--metin-3);margin:0;
}
.rez-ozet dd{margin:0;font-weight:500;color:var(--murekkep);text-align:end}

/* ── Hareket tercihi. Sihirbazda zaten yalnız opaklık geçişi var. */
@media (prefers-reduced-motion: reduce){
  .rez-gun,.rez-yuva,.rez-kisi,.rez-ok{transition:none}
}