@import "tailwindcss";

@theme {
  --color-dark: #0a0b0c;
  --color-accent: #c5a358;
  --color-luxuryGray: #f8f9fa;
  --color-sliderBg: #f9f9f9;
  --font-sans: Poppins, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Playfair Display, ui-serif, Georgia, serif;
}

body {
  font-family: var(--font-sans);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans) !important;
}

#page-loader {
  /* ... eski kodların ... */
  will-change: opacity, transform;
  /* 🚀 Tarayıcıya bu elementin optimize edileceğini söyler */
}

#main-nav {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#main-nav.sticky-active {
  position: fixed !important;
  top: 0;
  left: 0;
  animation: slideDown 0.4s ease-out forwards;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(0);
  }
}

.lang-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.lang-container:hover .lang-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.slide {
  opacity: 0;
  transition: all 1s ease-in-out;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.slide.active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

.oval-divider {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(0deg);
  z-index: 20;
}

.oval-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 100px;
}

.oval-divider .shape-fill {
  fill: #FFFFFF;
}

/* 🚀 MOBİL MENÜ KATMAN, GÖRÜNÜRLÜK VE AKICI ANİMASYON KURALLARI */
#mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: white;
  z-index: 999;
  display: flex;
  /* Başlangıçta flex yapıyoruz çünkü görünürlüğü opacity ve transform ile yöneteceğiz */
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* İlk başta tamamen görünmez ve yukarıda saklı duracak */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);

  /* Süzülme hızı ve yumuşaklığı (cubic-bezier premium bir akıcılık katar) */
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Menü açıldığında JS bu sınıfı ekleyecek ve menü süzülerek gelecek */
#mobile-menu.active-flex {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.soft-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease;
}

.blog-shadow {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  transition: all 0.4s ease;
}

.blog-shadow:hover {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
  transform: translateY(-8px);
}

.cta-gradient {
  background: linear-gradient(135deg, #0a0b0c 0%, #1a1c1e 100%);
}

/* Scrollbar çubuğunu gizleme kuralları */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}