/* =====================================================
   Tahtabacak Kiralama - Page CSS
   (Tailwind üstüne küçük dokunuşlar)
===================================================== */

:root{
  --enb-radius: 16px;
  --enb-shadow: 0 12px 30px rgba(2, 6, 23, .10);
}

/* Slider dots (hero içindeki .slider-dots) */
.slider-dots button,
.slider-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.6);
  cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
  opacity: .85;
}

.slider-dots .dot.is-active{
  transform: scale(1.35);
  opacity: 1;
  background: rgba(255,255,255,.95);
}

/* Paket kartı hover */
.package-card{
  box-shadow: 0 1px 0 rgba(2,6,23,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.package-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--enb-shadow);
  border-color: rgba(99,102,241,.35);
}

/* Paket seçili state (JS ekler) */
.package-card.is-selected{
  outline: 2px solid rgba(16,185,129,.45);
  border-color: rgba(16,185,129,.45);
}

/* Ekstra item seçili state (JS ekler) */
.extra-item.is-selected{
  outline: 2px solid rgba(245,158,11,.45);
  border-color: rgba(245,158,11,.45);
  transform: translateY(-1px);
}

/* Video modal - daha yumuşak açılış */
#videoModal{
  animation: enbFadeIn .18s ease;
}
@keyframes enbFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* Confetti wrapper (istersen daha sonra confetti JS koyarsın) */
#confettiWrapper{
  opacity: .9;
}

/* Küçük ekranlarda swipe hint daha net */
@media (max-width: 640px){
  #swipeHint{
    font-size: 12px;
    letter-spacing: .2px;
  }
}