/*
 * HANGİCİHAZ - Özel Stil ve Animasyon Kuralları (styles.css)
 * Tailwind CSS ile birlikte çalışır; adım geçişlerini, çekmece (drawer)
 * animasyonlarını ve kaydırma çubuğu (scrollbar) görünümünü düzenler.
 */

:root {
  --step-transition: 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

/* Adım geçiş animasyonu */
.step-panel {
  animation: stepFadeSlideIn var(--step-transition) forwards;
}

@keyframes stepFadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apple Sekmesi Özel Vurgusu */
.apple-tab-btn {
  position: relative;
  overflow: hidden;
}

.apple-tab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Detay Paneli (Masaüstünde sağdan, mobilde alttan açılır) */
.drawer-backdrop {
  transition: opacity 260ms ease;
}

.drawer-panel {
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 767px) {
  .drawer-panel-closed {
    transform: translateY(100%);
  }
  .drawer-panel-open {
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .drawer-panel-closed {
    transform: translateX(100%);
  }
  .drawer-panel-open {
    transform: translateX(0);
  }
}

/* İnce ve modern kaydırma çubuğu */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

/* Yatay kaydırılabilir kategori menüsünde scrollbar gizleme */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}