/* --- GLOBAL SMM AGENCY STYLES (MODERN LIGHT THEME) --- */
:root {
    --primary-color: #ea580c; 
    --primary-dark: #0f172a;
    --black: #0f172a;
    --white: #ffffff;
    --gray-bg: #f8fafc;
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    scroll-behavior: smooth; 
    background-color: var(--gray-bg); 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
    width: 100%;
    color: var(--black);
}

/* --- PREMIUM SPLIT LOADER --- */
#loader-wrapper { 
    position: fixed; inset: 0; background: #0f172a; 
    z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; 
    transition: opacity 0.5s ease, visibility 0.5s; gap: 20px;
}
.loader {
    width: 64px;
    height: 48px;
    position: relative;
    animation: split 1s ease-in infinite alternate;
}
.loader::before, .loader::after {
    content: '';
    position: absolute;
    height: 48px;
    width: 48px;
    border-radius: 50%;
    left: 0;
    top: 0;
    transform: translateX(-10px);
    background: #FFFFFF;
    opacity: 0.75;
    backdrop-filter: blur(20px);
}
.loader::after {
    left: auto;
    right: 0;
    background: #FFF;
    transform: translateX(10px);
}
@keyframes split {
    0%, 25% { width: 64px; }
    100% { width: 148px; }
}

.reveal { opacity: 0; transform: translateY(20px); transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* --- GLASS NAVBAR --- */
.glass { 
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
}

.nav-item .dropdown-menu { display: none; }
.nav-item:hover .dropdown-menu { display: block; animation: slideDown 0.2s ease forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

#notif-sidebar { 
    position: fixed; right: -100%; top: 0; bottom: 0; width: 100%; max-width: 330px; 
    z-index: 3000; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    background: white; box-shadow: -5px 0 30px rgba(0,0,0,0.05); border-left: 1px solid #f1f5f9;
}
#notif-sidebar.open { right: 0; }
.notif-trigger { position: fixed; right: 20px; bottom: 20px; z-index: 1000; cursor: pointer; transition: transform 0.2s; }
.notif-trigger:hover { transform: scale(1.05); }

.modal-overlay { 
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(5px); z-index: 3100; display: none; 
}
.slide-up { animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.modern-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 16px; background: transparent; border: none; cursor: pointer; position: relative; z-index: 2100; }
.modern-hamburger .bar { width: 100%; height: 2px; background-color: var(--black); border-radius: 10px; transition: all 0.3s; }
.modern-hamburger.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); background-color: var(--primary-color); }
.modern-hamburger.open .bar:nth-child(2) { opacity: 0; }
.modern-hamburger.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background-color: var(--primary-color); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }

.shimmer-canvas { 
    position: absolute; inset: 0; 
    background: radial-gradient(circle at 10% 20%, rgba(234, 88, 12, 0.05) 0%, transparent 40%), 
                radial-gradient(circle at 90% 80%, rgba(15, 23, 42, 0.03) 0%, transparent 50%); 
    pointer-events: none; z-index: -1;
}

/* --- 3D FLIP CARD PHYSICS --- */
.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
.group:hover .group-hover\:rotate-y-180 { transform: rotateY(180deg); }

/* --- SMOOTH FLOATING ICONS (FULL SCREEN HOME BACKGROUND) --- */
.floating-icons-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    pointer-events: none; /* Allows clicking through icons to the search bar */
    z-index: 0;
}
.float-icon {
    position: absolute;
    bottom: -100px;
    opacity: 0;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
    animation: floatUpward linear infinite;
}

/* Super Smooth Timing */
.icon-1 { left: 10%; color: #000000; font-size: 2.5rem; animation-duration: 14s; animation-delay: 0s; } 
.icon-2 { left: 85%; color: #e1306c; font-size: 3rem; animation-duration: 17s; animation-delay: 2s; } 
.icon-3 { left: 30%; color: #ea580c; font-size: 2rem; animation-duration: 12s; animation-delay: 4s; } 
.icon-4 { left: 70%; color: #2563eb; font-size: 2.5rem; animation-duration: 16s; animation-delay: 1s; } 
.icon-5 { left: 55%; color: #ff0000; font-size: 4rem; animation-duration: 18s; animation-delay: 3s; } 
.icon-6 { left: 20%; color: #10b981; font-size: 2.2rem; animation-duration: 15s; animation-delay: 5s; } 
.icon-7 { left: 80%; color: #ea580c; font-size: 1.8rem; animation-duration: 11s; animation-delay: 1.5s; } 

@keyframes floatUpward {
    0% { transform: translateY(50px) scale(0.8) rotate(-10deg); opacity: 0; }
    15% { opacity: 0.25; transform: translateY(-50px) scale(1.1) rotate(15deg); } /* Low opacity for background feel */
    85% { opacity: 0.25; transform: translateY(-700px) scale(1) rotate(-10deg); }
    100% { transform: translateY(-900px) scale(0.8) rotate(0deg); opacity: 0; }
}