/* Header Tailwind Responsive Styles */

/* Header component'i için Tailwind utility classes ile responsive tasarım */

.header {
  @apply fixed left-0 right-0 z-[9999] w-full transition-all duration-300 ease-in-out;
  top: 50px;
  /* Banner yüksekliği */
  padding: 16px 24px;
  box-sizing: border-box;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .header {
    @apply px-4 pt-6 pb-0;
  }
}

/* Normal state - transparent header */
.header.normal {
  @apply bg-transparent shadow-none;
}

/* Scrolled state - transparent header with shadow */
.header.scrolled {
  @apply bg-transparent shadow-none;
}

.header-container {
  @apply flex justify-between items-center gap-6 max-w-screen-xl mx-auto;
}

/* Mobile header container */
@media (max-width: 768px) {
  .header-container {
    @apply justify-between items-center gap-6;
  }

  .header.scrolled .header-container {
    @apply justify-between;
  }
}

.header-navigation {
  @apply flex items-center gap-6 px-6 py-3 transition-all duration-300 ease-in-out;
}

/* Normal state navigation */
.header.normal .header-navigation {
  @apply bg-white rounded-2xl shadow-rafinera;
}

/* Scrolled state navigation */
.header.scrolled .header-navigation {
  @apply bg-white rounded-2xl shadow-rafinera mx-auto justify-between items-center px-6 py-2;
}

/* Mobile navigation hidden */
@media (max-width: 768px) {
  .header-navigation {
    @apply hidden;
  }

  .header.scrolled .header-navigation {
    @apply bg-transparent rounded-none shadow-none mx-0 justify-start;
  }
}

/* Scrolled state navigation text */
.header.scrolled .nav-text {
  @apply text-rafinera-dark;
}


/* Scrolled state - center the entire header container */
.header.scrolled .header-container {
  @apply justify-center;
}

/* Hide auth buttons when scrolled */
.header.scrolled .header-actions .auth-button {
  @apply hidden;
}

/* Hide logo and CTA button from their original positions when scrolled */
.header.scrolled>.header-container>.logo {
  @apply hidden;
}

.header.scrolled>.header-container>.header-actions {
  @apply hidden;
}

/* Mobile specific - ensure logo and mobile menu are always visible */
@media (max-width: 768px) {
  .header-actions {
    @apply hidden;
  }

  .logo,
  .mobile-menu-toggle {
    @apply flex opacity-100 visible;
  }
}

/* Add logo and CTA to navigation when scrolled */
.header.scrolled .scrolled-logo {
  @apply flex w-[120px] h-[26px] flex-shrink-0 cursor-pointer transition-opacity duration-200 ease-in-out;
}

.header.scrolled .scrolled-logo:hover {
  @apply opacity-80;
}

.header.scrolled .scrolled-logo .logo-image {
  @apply w-[120px] h-[26px] object-contain transition-transform ease-out duration-300;
}

.header.scrolled .scrolled-logo:hover .logo-image {
  @apply transform -translate-y-0.5 scale-[1.03];
}

@media (prefers-reduced-motion: reduce) {
  .header.scrolled .scrolled-logo .logo-image {
    @apply transition-none;
  }
}

/* Unutulan pseudo-element silindi */

.header-actions {
  @apply flex items-center gap-1.5;
}

.nav-item {
  @apply flex items-center gap-2 px-2.5 py-2.5 rounded-lg no-underline transition-colors duration-200 ease-in-out;
}

.nav-item:hover {
  @apply bg-rafinera-gray bg-opacity-10;
}

.nav-item.active {
  @apply bg-rafinera-gray bg-opacity-10;
}

.nav-item.active .nav-text {
  @apply text-rafinera-dark font-semibold;
}

.nav-item.logo {
  @apply justify-start;
}

.nav-item.auth-button {
  @apply px-3 py-2 bg-rafinera-beige;
}

.nav-item.auth-button .nav-text {
  @apply text-rafinera-dark;
}

.nav-item.cta {
  @apply justify-end px-0.5;
}

.logo-container {
  @apply flex flex-col justify-end gap-2 h-[14px];
}

.logo-image {
  @apply w-[120px] h-[26px] object-contain;
}

/* Mobile logo adjustments */
@media (max-width: 768px) {
  .logo-image {
    @apply w-[110px] h-6;
  }
}

.nav-text {
  @apply font-fira font-medium text-sm leading-tight tracking-wider uppercase text-rafinera-gray whitespace-nowrap;
  letter-spacing: 2%;
}

.header .cta-button {
  @apply flex justify-center items-center gap-2 p-2 bg-rafinera-dark rounded-lg no-underline transition-colors duration-200 ease-in-out;
}

.header .cta-button:hover {
  @apply bg-rafinera-green;
}

.header .cta-inner {
  @apply flex justify-center items-center gap-2 px-1.5;
}

.header .cta-text {
  @apply font-fira font-medium text-sm leading-tight tracking-wider uppercase text-white whitespace-nowrap;
  letter-spacing: 2%;
}

/* Mobile Menu Styles */
.mobile-menu-toggle {
  @apply hidden bg-transparent border-none cursor-pointer p-2 rounded transition-colors duration-300 ease-in-out relative z-[10000];
}

.mobile-menu-toggle:hover {
  @apply bg-rafinera-dark bg-opacity-10;
}

.mobile-menu-toggle.active {
  @apply bg-rafinera-dark bg-opacity-10;
}

/* Mobile menu toggle visible on mobile */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    @apply flex items-center justify-center w-6 h-6 bg-white rounded p-0;
  }
}

.mobile-menu-icon {
  @apply w-[18.75px] h-[14.25px] transition-transform duration-300 ease-in-out fill-rafinera-dark;
}

.mobile-menu-toggle.active .mobile-menu-icon {
  @apply rotate-90;
}

/* Mobile Menu Overlay */
.mobile-menu {
  @apply hidden fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-[9998] opacity-0 invisible transition-all duration-300 ease-in-out;
}

.mobile-menu.active {
  @apply opacity-100 visible;
}

/* Mobile menu visible on mobile */
@media (max-width: 768px) {
  .mobile-menu {
    @apply block;
  }
}

.mobile-menu-content {
  @apply absolute top-0 right-0 w-[280px] h-full bg-white pt-20 px-6 pb-6 shadow-lg transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto;
}

.mobile-menu.active .mobile-menu-content {
  @apply translate-x-0;
}

.mobile-nav-item {
  @apply flex items-center py-4 no-underline border-b border-gray-100 transition-colors duration-300 ease-in-out;
}

.mobile-nav-item:hover {
  @apply bg-rafinera-dark bg-opacity-5;
}

.mobile-nav-item .nav-text {
  @apply font-inter text-base font-medium text-rafinera-dark;
}

.mobile-nav-item.auth-button {
  @apply bg-rafinera-beige rounded-lg my-2 px-4 py-3 border-none;
}

.mobile-nav-item.auth-button .nav-text {
  @apply text-rafinera-dark;
}

.mobile-menu-actions {
  @apply mt-6 pt-6 border-t border-gray-100;
}

.mobile-cta-button {
  @apply flex items-center justify-center bg-rafinera-dark text-white p-4 rounded-lg no-underline mt-4 transition-colors duration-300 ease-in-out;
}

.mobile-cta-button:hover {
  @apply bg-opacity-90;
}

.mobile-cta-button .cta-text {
  @apply font-inter text-base font-semibold text-white;
}