/* Gün şeridinin devam ettiğini sağ kenardaki solma anlatır. */
.bolum-randevu .gunler{
  position:relative;
}
.bolum-randevu .gunler::after{
  content:"";
  position:sticky;
  right:0;
  z-index:1;
  align-self:stretch;
  flex:0 0 28px;
  margin-left:-38px;
  background:linear-gradient(to right, transparent, var(--kok));
  pointer-events:none;
  opacity:1;
  transition:opacity .2s ease;
}
.bolum-randevu .gunler.gunler-sonunda::after{
  opacity:0;
}

/* ————————————————————————— Yüzen WhatsApp ————————————————————————— */

/* Yeşil bilerek: WhatsApp'ın kendi rengi tanınırlığın yarısı. Sitenin
   --yesil belirteci zaten bu rol için ayrılmış (randevu gönder düğmesi de
   onu kullanıyor), yani palete yabancı bir renk girmiyor. */
.wa-yuzen{
  position:fixed;
  right:clamp(16px, 3vw, 28px);
  bottom:clamp(16px, 3vw, 28px);
  z-index:24;                      /* eylem çubuğu 25, üst çubuk 30 */
  display:grid; place-items:center;
  width:54px; height:54px;
  border-radius:50%;
  background:var(--yesil);
  color:#FFFFFF;
  /* Gölge YÜKSEKLİK içindir, süs için değil. Eskiden düğmenin altında kendi
     renginde yeşil bir parlama vardı; renkli glow düğmeyi zeminden ayırmıyor,
     yalnız "yapay ışık" hissi veriyordu. Nötr gölge işi doğru yapıyor. */
  box-shadow:0 8px 20px -10px rgba(36,26,29,.55);
  transition:transform .22s cubic-bezier(.2,.8,.25,1), background .22s;
}
.wa-yuzen svg{ width:27px; height:27px; }
.wa-yuzen:hover{ background:#17643E; transform:translateY(-3px); }
.wa-yuzen:active{ transform:translateY(0); }
body.dip-gorunur .wa-yuzen{ visibility:hidden; pointer-events:none; }
body.dip-gorunur .eylem-cubugu{ transition:none; }

.eylem-cubugu{
  display:none;
}

@media (max-width:860px){
  /* Alt boşluk KOŞULA BAĞLI: yalnız çubuk gerçekten açıkken veriliyor
     (sınıfı eylem.js yazıyor). Koşulsuz verilseydi çubuğun gizli olduğu her
     durumda — sayfanın tepesinde, 4. adımda, ya da JS hiç çalışmazsa —
     sayfanın dibinde 72 piksellik ölü bir boşluk kalırdı. Böylece olası bir
     aksilik hiçbir iz bırakmadan yok oluyor. */
  body.eylem-acik{
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }

  .eylem-cubugu{
    position:fixed;
    right:0;
    bottom:0;
    left:0;
    z-index:25;
    display:flex;
    align-items:center;
    gap:8px;
    box-sizing:border-box;
    height:calc(72px + env(safe-area-inset-bottom));
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--cizgi);
    background:var(--kat);
    opacity:0;
    visibility:hidden;
    transform:translateY(100%);
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
  }

  .eylem-cubugu.eylem-gorunur{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:0s;
  }

  /* .eylem-durum 10 Eylül 2026'da kaldırıldı — kahramandaki çalışma durumu
     satırı gidince onu besleyen kaynak da gitti ve kap sonsuza kadar boş
     kalıyordu. Çubuk artık yalnız iki düğme taşıyor: .eylem-cubugu'nun
     justify-content'i YOK, o yüzden düğmeler `flex:1 1 0` ile çubuğu eşit
     paylaşıyor. Telefon numarası yoksa .eylem-ara zaten hidden olduğundan
     "Randevu al" tek başına tam genişliğe yayılıyor. */
  .eylem-dugme{
    flex:1 1 0;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:8px 12px;
    border:1px solid var(--cizgi);
    border-radius:10px;
    background:var(--kat);
    color:var(--tebesir);
    font-family:var(--govde);
    font-size:.82rem;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background .18s, border-color .18s, color .18s, transform .18s;
  }

  .eylem-dugme:hover{
    border-color:var(--altin);
    color:var(--altin);
    transform:translateY(-2px);
  }
  .eylem-dugme:active{ transform:translateY(0); }

  .eylem-randevu{
    border-color:var(--altin);
    background:var(--altin);
    color:var(--kat);
  }
  .eylem-randevu:hover{
    background:var(--gul);
    border-color:var(--gul);
    color:var(--kat);
  }

  body:has(.bolum-randevu[data-aktif-adim="4"]) .eylem-cubugu,
  body.eylem-adim-dort .eylem-cubugu{
    opacity:0;
    visibility:hidden;
    transform:translateY(100%);
    pointer-events:none;
  }

  /* Yüzen düğme dar ekranda küçülüyor ve eylem çubuğu açıkken onun ÜSTÜNE
     çıkıyor; aksi hâlde çubuğun üzerine biner ve ikisi de tıklanamaz hâle
     gelirdi. Çubuk kapalıyken normal yerinde duruyor. */
  .wa-yuzen{ width:48px; height:48px; }
  .wa-yuzen svg{ width:24px; height:24px; }
  body.eylem-acik .wa-yuzen{
    bottom:calc(72px + env(safe-area-inset-bottom) + 14px);
  }

  /* ÜST ÇUBUKTAKİ "Randevu al" ALT ÇUBUK AÇIKKEN GİZLENİYOR.
     İkisi aynı anda ekrandayken aynı düğme iki kez görünüyordu; sahnenin
     finali ve kahramanla birlikte telefonda tek ekranda dört tane
     "Randevu al" oluyordu. Alt çubuk zaten kalıcı hızlı eylem, üstteki
     gereksiz kalıyor. Çubuk kapalıyken (sayfanın tepesi) geri geliyor. */
  body.eylem-acik .ust .dugme-dolu{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .eylem-cubugu,
  .bolum-randevu .gunler::after{
    transition:none;
  }
}