/* Focus Optika - Premium Optik & Gözlük Deneyimi */
/* Custom Stylesheet */

/* Base Typography */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Custom Scrollbar - Brand Color Aligned */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f4f5fa;
}

::-webkit-scrollbar-thumb {
    background: rgba(39, 44, 102, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #272c66;
}

/* Utility Classes */
.h-22 {
    height: 5.5rem;
}

/* Product Slider Hide Scrollbar */
#productSlider {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#productSlider::-webkit-scrollbar {
    display: none;
}

/* Modal Transitions */
#bookingModal {
    transition: opacity 0.3s ease;
}

#bookingModalContainer {
    transition: transform 0.3s ease;
}

/* Mobile Menu Transitions */
#mobileMenu {
    transition: opacity 0.3s ease;
}

#mobileMenuContainer {
    transition: transform 0.3s ease-out;
}

/* Search Overlay Transitions */
#searchOverlay {
    transition: opacity 0.3s ease;
}

/* Hero Slider Animations */
.hero-slide {
    transition: opacity 1s ease-in-out;
}

.hero-dot {
    transition: all 0.3s ease;
}

/* Newsletter Popup Animation */
#newsletterSuccess {
    transition: all 0.3s ease;
}

/* Product Image Transition */
[id^="productImage"] {
    transition: opacity 0.15s ease;
}

/* Accordion Content */
[id^="accContent"] {
    transition: all 0.3s ease;
}

/* Group Hover Effects */
.group:hover .group-hover\:scale-105 {
    transform: scale(1.05);
}

.group:hover .group-hover\:scale-\[1\.02\] {
    transform: scale(1.02);
}

.group:hover .group-hover\:text-\[\#272c66\] {
    color: #272c66;
}

.group:hover .group-hover\:bg-\[\#272c66\]\/5 {
    background-color: rgba(39, 44, 102, 0.05);
}

.group:hover .group-hover\:bg-\[\#272c66\]\/10 {
    background-color: rgba(39, 44, 102, 0.1);
}

.group:hover .group-hover\:border-\[\#272c66\]\/30 {
    border-color: rgba(39, 44, 102, 0.3);
}

.group:hover .group-hover\:shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Focus Ring Styles */
.focus\:ring-2:focus {
    outline: none;
    ring: 2px;
}

.focus\:ring-\[\#272c66\]:focus {
    box-shadow: 0 0 0 2px #272c66;
}

/* Animation Utilities */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Active Scale Effect */
.active\:scale-95:active {
    transform: scale(0.95);
}

/* Hover Scale Effects */
.hover\:scale-\[1\.02\]:hover {
    transform: scale(1.02);
}

/* Backdrop Blur Support */
.backdrop-blur-md {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Aspect Ratio Utilities */
.aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
}

.aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
}

/* Snap Scroll */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

.snap-mandatory {
    scroll-snap-type: x mandatory;
}

/* Custom Shadow */
.shadow-\[\#272c66\]\/10 {
    box-shadow: 0 4px 6px -1px rgba(39, 44, 102, 0.1), 0 2px 4px -1px rgba(39, 44, 102, 0.06);
}

/* Text Size Utilities */
.text-\[10px\] {
    font-size: 10px;
}

/* Width Utilities */
.w-8 {
    width: 2rem;
}

.w-2\.5 {
    width: 0.625rem;
}

/* Selection Color */
::selection {
    background-color: #272c66;
    color: white;
}

/* Custom Max Width */
.max-w-custom {
    max-width: 1400px;
}