/* Loader Container - Turquoise Brand Colors */
.webreta-loader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 50%, #006064 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.webreta-loader.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Logo Container */
.webreta-loader-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 35px !important;
    transform: translateY(0) !important;
    animation: webreta-float 0.5s ease !important;
}

.webreta-loader-content::before {
    content: '' !important;
    display: block !important;
    width: 300px !important;
    height: 300px !important;
    background-image: url('https://webretawork2.com.tr/rotamambalaj/wp-content/uploads/2026/02/Adsiz-tasarim40.png') !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    animation: webreta-logo-pulse 2s ease-in-out infinite !important;
}

@keyframes webreta-float {
    0% {
        transform: translateY(30px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes webreta-logo-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.95;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Modern Spinner - Turuncu */
/* Modern Spinner - Beyaz */
.webreta-spinner {
    width: 60px !important;
    height: 60px !important;
    position: relative !important;
    border: none !important;
    animation: webreta-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}

.webreta-spinner::before,
.webreta-spinner::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 5px solid transparent !important;
    border-top-color: white !important;
    border-right-color: white !important;
    border-radius: 50% !important;
    animation: webreta-spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4) !important;
}

.webreta-spinner::after {
    border: 5px solid transparent !important;
    border-top-color: rgba(255, 255, 255, 0.5) !important;
    border-right-color: rgba(255, 255, 255, 0.5) !important;
    animation-duration: 2s !important;
    animation-direction: reverse !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3) !important;
}

@keyframes webreta-spin {
    to { transform: rotate(360deg); }
}

/* Modern Dots - Turuncu */
.webreta-dots {
    display: flex !important;
    gap: 18px !important;
    align-items: center !important;
}

.webreta-dots span {
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(135deg, #ff9800, #ffb74d) !important;
    border-radius: 50% !important;
    animation: webreta-pulse 1.4s infinite ease-in-out both !important;
    box-shadow: 0 0 25px rgba(255, 152, 0, 0.7) !important;
}

.webreta-dots span:nth-child(1) { animation-delay: -0.32s !important; }
.webreta-dots span:nth-child(2) { animation-delay: -0.16s !important; }
.webreta-dots span:nth-child(3) { animation-delay: 0s !important; }

@keyframes webreta-pulse {
    0%, 80%, 100% { 
        transform: scale(0.3) !important;
        opacity: 0.4 !important;
    }
    40% { 
        transform: scale(1.4) !important;
        opacity: 1 !important;
    }
}

/* Modern Progress Bar - Turuncu */
.webreta-bar {
    width: 280px !important;
    height: 10px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15) !important;
}

.webreta-bar:after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        rgba(255, 152, 0, 0.4), 
        #ff9800,
        #ffb74d,
        rgba(255, 183, 77, 0.4)
    ) !important;
    border-radius: 20px !important;
    animation: webreta-slide 1.5s ease-in-out infinite !important;
    box-shadow: 0 0 25px #ff9800 !important;
}

@keyframes webreta-slide {
    0% { 
        left: -60%;
        transform: translateX(0);
    }
    100% { 
        left: 100%;
        transform: translateX(60%);
    }
}

/* Gradient Background Patterns */
.webreta-loader::before {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 200% !important;
    height: 200% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    animation: webreta-pattern 25s linear infinite !important;
    opacity: 0.5 !important;
}

@keyframes webreta-pattern {
    0% { transform: rotate(0deg) scale(1); }
    100% { transform: rotate(360deg) scale(1.2); }
}

/* Decorative Circles */
.webreta-loader::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 500px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: webreta-glow 3s ease-in-out infinite !important;
}

@keyframes webreta-glow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

/* Page Transitions */
html.webreta-transitioning {
    overflow: hidden !important;
}

html.webreta-transitioning body {
    overflow: hidden !important;
}

html.webreta-transition-fade body {
    animation: webreta-fadeOut 0.4s ease forwards !important;
}

html.webreta-transition-slide body {
    animation: webreta-slideOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

html.webreta-transition-zoom body {
    animation: webreta-zoomOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

@keyframes webreta-fadeOut {
    to { 
        opacity: 0 !important;
        filter: blur(5px) !important;
        transform: scale(1.02) !important;
    }
}

@keyframes webreta-slideOut {
    to { 
        transform: translateX(-50px) !important;
        opacity: 0 !important;
        filter: blur(3px) !important;
    }
}

@keyframes webreta-zoomOut {
    to { 
        transform: scale(0.92) !important;
        opacity: 0 !important;
        filter: blur(8px) !important;
    }
}

/* Mobil Optimizasyon */
@media (max-width: 768px) {
    .webreta-loader-content::before {
        width: 240px !important;
        height: 240px !important;
    }
    
    .webreta-loader-content {
        gap: 25px !important;
    }
    
    .webreta-spinner {
        width: 60px !important;
        height: 60px !important;
    }
    
    .webreta-spinner::before,
    .webreta-spinner::after {
        border-width: 4px !important;
    }
    
    .webreta-dots {
        gap: 12px !important;
    }
    
    .webreta-dots span {
        width: 16px !important;
        height: 16px !important;
    }
    
    .webreta-bar {
        width: 220px !important;
        height: 8px !important;
    }
    
    .webreta-loader::after {
        width: 350px !important;
        height: 350px !important;
    }
}

/* Tablet Optimizasyon */
@media (min-width: 769px) and (max-width: 1024px) {
    .webreta-loader-content::before {
        width: 170px !important;
        height: 170px !important;
    }
}

/* Admin Bar Fix */
html.webreta-transitioning #wpadminbar {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Flatsome Theme Overrides */
html.webreta-transitioning .header-wrapper,
html.webreta-transitioning .header {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}