body {
            overflow-x: hidden;
            background-color: #ffffff;
            color: #1F2937;
        }

        /* Loader */
        #loader {
            position: fixed;
            inset: 0;
            z-index: 10000;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.8s ease-out;
        }

        .loader-spinner {
            width: 60px;
            height: 60px;
            border: 3px solid #E5E7EB;
            border-top-color: #1E3A8A;
            border-radius: 50%;
            animation: spin 1s infinite linear;
        }

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

        /* Navbar Initial State (Melted Gradient Design) */
        #navbar:not(.scrolled) {
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.70) 30%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0) 100%);
            backdrop-filter: none; /* Blending için blur'u kaldırdık */
            -webkit-backdrop-filter: none;
            border-bottom: none;
            box-shadow: none;
        }
        
        #navbar:not(.scrolled) .nav-link,
        #navbar:not(.scrolled) .top-text {
            color: #000000 !important; /* Pure Black */
            text-shadow: none;
            transition: all 0.3s ease;
            font-weight: 700;
        }

        #navbar:not(.scrolled) .nav-link:hover {
            color: #3B82F6 !important; /* Vibrant Blue */
            transform: translateY(-1px);
        }

        #navbar:not(.scrolled) .nav-divider {
            background-color: rgba(30, 58, 138, 0.1) !important;
        }

        #navbar:not(.scrolled) .top-icon {
            color: #000000 !important;
        }
        
        #navbar:not(.scrolled) .top-icon:hover {
            color: #3B82F6 !important;
        }

        #navbar:not(.scrolled) .mobile-menu-btn {
            color: #000000 !important;
        }

        #navbar:not(.scrolled) #top-bar-wrapper {
            border-bottom-color: rgba(0, 0, 0, 0.03);
        }

        #navbar:not(.scrolled) .randevu-btn {
            background: #1E3A8A;
            border-color: #1E3A8A;
            color: white;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #navbar:not(.scrolled) .randevu-btn:hover {
            background: #3B82F6 !important; /* Vibrant Blue hover */
            color: white !important;
            border-color: #3B82F6 !important;
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
            transform: translateY(-2px);
        }

        #navbar.scrolled {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
        }

        #navbar.scrolled .nav-link,
        #navbar.scrolled .top-text {
            color: #1E3A8A !important;
            text-shadow: none;
        }

        #navbar.scrolled .nav-link:hover {
            color: #10B981 !important; /* Emerald hover on light bg */
            transform: translateY(-1px);
        }

        #navbar.scrolled .nav-divider {
            background-color: rgba(0, 0, 0, 0.1) !important;
        }

        #navbar.scrolled .mobile-menu-btn {
            color: #1E3A8A !important;
        }

        #navbar.scrolled .randevu-btn {
            border-color: #1E3A8A;
            color: #1E3A8A;
            background: rgba(30, 58, 138, 0.05);
            transition: all 0.4s ease;
        }

        #navbar.scrolled .randevu-btn:hover {
            background: #1E3A8A !important;
            color: white !important;
            border-color: #1E3A8A !important;
        }

        #navbar.scrolled #top-bar-wrapper {
            max-height: 0 !important;
            opacity: 0;
            padding: 0;
            margin: 0;
        }

        /* Tabs */
        .tab-btn {
            position: relative;
            padding-bottom: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .tab-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 3px;
            background: linear-gradient(to right, #1E3A8A, #10B981);
            transition: all 0.3s;
            transform: translateX(-50%);
            border-radius: 3px;
        }

        .tab-btn.active {
            color: #1E3A8A;
        }

        .tab-btn.active::after {
            width: 40px;
        }

        /* Project Cards */
        .project-card {
            border: 1px solid rgba(0, 0, 0, 0.05);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.15);
            border-color: rgba(30, 58, 138, 0.1);
        }

        .project-img-container {
            overflow: hidden;
        }

        .project-img {
            transition: transform 1s ease;
        }

        .project-card:hover .project-img {
            transform: scale(1.1);
        }

        /* SSS Premium Accordion */
        .faq-item {
            border: 1px solid rgba(0, 0, 0, 0.03);
            border-radius: 2rem;
            margin-bottom: 20px;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            background: #ffffff;
            box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.03);
        }

        .faq-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08);
            border-color: rgba(30, 58, 138, 0.1);
        }

        .faq-item.active {
            border-color: rgba(30, 58, 138, 0.15);
            box-shadow: 0 25px 50px -12px rgba(30, 58, 138, 0.15);
            transform: translateY(-2px);
        }

        .faq-question {
            cursor: pointer;
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem 2rem;
            background: transparent;
            border: none;
            outline: none;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            transform: translateY(-10px);
        }

        .faq-item.active .faq-answer {
            max-height: 600px;
            opacity: 1;
            transform: translateY(0);
        }

        .faq-answer-inner {
            padding: 0 2rem 2rem 2rem;
        }

        .faq-divider {
            height: 1px;
            width: 100%;
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.05), transparent);
            margin-bottom: 1.5rem;
        }

        .faq-icon-container {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1E3A8A;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.02);
        }

        .faq-item.active .faq-icon-container {
            background: #1E3A8A;
            color: #ffffff;
            transform: rotate(45deg);
            box-shadow: 0 10px 20px -5px rgba(30, 58, 138, 0.3);
        }

        .faq-icon {
            font-size: 0.75rem;
            transition: transform 0.4s;
        }

        /* Video overlay */
        .video-overlay {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 1) 100%);
        }

        /* Cam panel (soft glass) */
        .glass-panel {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(30, 58, 138, 0.1);
            box-shadow: 0 10px 30px -10px rgba(30, 58, 138, 0.1);
        }

        /* Modül kartları */
        .module-card {
            background: #ffffff;
            border: 1px solid #E5E7EB;
            border-radius: 16px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .module-card:hover {
            transform: translateY(-6px);
            border-color: #1E3A8A;
            box-shadow: 0 20px 30px -10px rgba(30, 58, 138, 0.15);
        }

        .module-icon {
            transition: transform 0.3s ease;
        }

        .module-card:hover .module-icon {
            transform: scale(1.1);
            color: #1E3A8A;
        }

        /* Neden Biz kartları */
        .why-card {
            background: #ffffff;
            border: 1px solid #E5E7EB;
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .why-card:hover {
            transform: translateY(-4px);
            border-color: #10B981;
            box-shadow: 0 20px 30px -10px rgba(16, 185, 129, 0.15);
        }

        .why-number {
            position: absolute;
            right: 10px;
            bottom: 0;
            font-size: 6rem;
            font-weight: 800;
            color: rgba(0, 0, 0, 0.03);
            line-height: 1;
            font-family: 'Montserrat', sans-serif;
            pointer-events: none;
            transition: all 0.3s;
        }

        .why-card:hover .why-number {
            color: rgba(16, 185, 129, 0.1);
            transform: translateY(-5px);
        }

        /* Form inputları */
        .premium-input {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(30, 58, 138, 0.1);
            color: #1F2937;
            border-radius: 16px;
            padding: 1rem 1.25rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
        }

        .premium-input:focus {
            background: #ffffff;
            border-color: #1E3A8A;
            outline: none;
            box-shadow: 0 10px 20px -10px rgba(30, 58, 138, 0.15), 0 0 0 4px rgba(30, 58, 138, 0.05);
            transform: translateY(-2px);
        }

        /* imza rengi */
        .font-signature {
            color: #1E3A8A;
        }

        /* Hero Slider Controls */
        .slider-nav-container {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 20px;
            z-index: 1000;
            /* Extremely high to ensure clickability */
            padding: 10px 25px;
            border-radius: 100px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
        }

        .slider-nav-item {
            width: 50px;
            height: 3px;
            background: rgba(255, 255, 255, 0.15);
            cursor: pointer;
            position: relative;
            border-radius: 10px;
            transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        .slider-nav-item.active {
            width: 100px;
            background: rgba(255, 255, 255, 0.05);
        }

        .slider-progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #3B82F6, #10B981);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.8);
            border-radius: 10px;
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 54px;
            height: 54px;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.9rem;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .slider-arrow:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: #10B981;
            transform: translateY(-50%) scale(1.1);
            box-shadow: 0 0 40px rgba(16, 185, 129, 0.5);
        }

        .slider-arrow.prev {
            left: 4%;
        }

        .slider-arrow.next {
            right: 4%;
        }

        .hero-video-item {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            object-fit: cover;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        .hero-video-item.active {
            opacity: 0.7;
            /* Keep a bit dark for better text readability */
            z-index: 1;
        }

        @media (max-width: 1024px) {
            .slider-nav-container {
                bottom: 30px;
                gap: 12px;
                padding: 8px 16px;
                width: auto;
            }

            .slider-nav-item {
                width: 30px;
            }

            .slider-nav-item.active {
                width: 50px;
            }

            .slider-arrow {
                display: none !important;
            }
        }

        /* Mobile Menu Open State */
        body.menu-open .slider-arrow,
        body.menu-open .sticky-contact-container {
            display: none !important;
        }

        /* scroll reveal */
        .reveal {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.8s ease;
        }
        
        /* Only hide if JS has initialized it */
        .reveal.ready-to-reveal {
            opacity: 0;
            transform: translateY(20px);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Video Gallery */
        .video-thumb {
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            border: 2px solid transparent;
            aspect-ratio: 16/9;
        }

        @media (min-width: 1024px) {
            .video-thumb {
                border-radius: 12px;
            }
        }

        .video-thumb.active {
            border-color: #10B981;
            box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.2);
            transform: scale(1.05);
        }

        .video-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(1);
            transition: all 0.5s;
        }

        .video-thumb:hover img,
        .video-thumb.active img {
            filter: grayscale(0);
            transform: scale(1.1);
        }

        .video-thumb::after {
            content: '\f04b';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(30, 58, 138, 0.4);
            color: white;
            font-size: 1rem;
            opacity: 0;
            transition: all 0.3s;
        }

        @media (min-width: 1024px) {
            .video-thumb::after {
                font-size: 1.5rem;
            }
        }

        .video-thumb:hover::after,
        .video-thumb.active::after {
            opacity: 1;
        }

        .video-transition-overlay {
            position: absolute;
            inset: 0;
            background: white;
            z-index: 20;
            display: none;
            opacity: 0;
        }

        /* Sticky Contact Buttons */
        .cert-modal-box {
            width: 90vw;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .cert-modal-box.portrait {
            max-width: 480px;
        }
        .cert-modal-box.landscape {
            max-width: 960px;
        }
        #modalImage {
            max-height: 85vh;
            width: 100%;
            object-fit: contain;
            display: block;
        }

        .sticky-contact-container {
            position: fixed;
            left: 20px;
            bottom: 30px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .sticky-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
            position: relative;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-decoration: none;
        }

        .sticky-btn:hover {
            transform: scale(1.15) translateX(5px);
            background: rgba(255, 255, 255, 0.25);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .sticky-btn .tooltip {
            position: absolute;
            left: 65px;
            background: white;
            color: #1E3A8A;
            padding: 6px 15px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.3s;
            white-space: nowrap;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .sticky-btn:hover .tooltip {
            opacity: 1;
            visibility: visible;
            left: 60px;
        }

        /* Platform specific hover colors */
        .sticky-whatsapp:hover {
            color: #25D366 !important;
        }

        .sticky-phone:hover {
            color: #3B82F6 !important;
        }

        .sticky-mail:hover {
            color: #10B981 !important;
        }

        /* Scrolled state for buttons */
        #navbar.scrolled ~ .sticky-contact-container .sticky-btn {
            background: rgba(30, 58, 138, 0.8);
            border-color: rgba(255, 255, 255, 0.1);
        }

        #navbar.scrolled ~ .sticky-contact-container .sticky-btn:hover {
            background: #1E3A8A;
        }

        @media (max-width: 1024px) {
            .sticky-contact-container {
                left: 10px;
                gap: 10px;
            }
            .sticky-btn {
                width: 42px;
                height: 42px;
                font-size: 1rem;
            }
            .sticky-btn .tooltip {
                display: none;
            }
        }

        /* Scrollbar Hiding Utility */
        .hide-scrollbar::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            background: transparent !important;
        }

        .hide-scrollbar {
            -ms-overflow-style: none !important;
            scrollbar-width: none !important;
            scrollbar-color: transparent transparent !important;
        }

/* ==========================================================================
   SUMMERNOTE & RICH TEXT CONTENT STYLES
   Fixes bullet points, numbering and paragraph spacing for CMS content
   ========================================================================== */
.summernote-content, .prose, .page-content {
    color: #4b5563 !important; /* slate-600 */
    line-height: 1.7 !important;
}

/* Fix paragraph margins - User requested less space */
.summernote-content p, .prose p, .page-content p {
    margin-top: 0 !important;
    margin-bottom: 1rem !important; 
}

/* Collapse empty paragraphs that Summernote sometimes creates */
.summernote-content p:empty, .prose p:empty, .page-content p:empty,
.summernote-content p > br:only-child, .prose p > br:only-child, .page-content p > br:only-child {
    margin-bottom: 0.5rem !important;
}

/* Fix Unordered Lists (Bullets) */
.summernote-content ul, .prose ul, .page-content ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
    padding-left: 2.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}

/* Fix Ordered Lists (Numbers) */
.summernote-content ol, .prose ol, .page-content ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
    padding-left: 2.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    display: block !important;
}

.summernote-content li, .prose li, .page-content li {
    margin-bottom: 0.5rem !important;
    display: list-item !important; /* Ensure it's not hidden by list-none */
}

/* Disable Tailwind Typography pseudo markers */
.prose ul > li::before, .prose ol > li::before {
    content: none !important;
}

/* Secondary list support */
.summernote-content ul ul, .prose ul ul,
.summernote-content ol ol, .prose ol ol {
    margin-bottom: 0 !important;
}

/* Headings within content */
.summernote-content h1, .prose h1, .page-content h1,
.summernote-content h2, .prose h2, .page-content h2,
.summernote-content h3, .prose h3, .page-content h3,
.summernote-content h4, .prose h4, .page-content h4 {
    color: #111827 !important; /* slate-900 */
    font-weight: 800 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    display: block !important;
}

.summernote-content h1, .prose h1 { font-size: 2.25rem !important; }
.summernote-content h2, .prose h2 { font-size: 1.875rem !important; }
.summernote-content h3, .prose h3 { font-size: 1.5rem !important; }

/* Links */
.summernote-content a, .prose a, .page-content a {
    color: #3b82f6 !important; /* brand-light / blue-500 */
    text-decoration: underline !important;
    font-weight: 600 !important;
}

.summernote-content a:hover, .prose a:hover, .page-content a:hover {
    color: #10b981 !important; /* brand-emerald */
}

/* Tables */
.summernote-content table, .prose table, .page-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 1.5rem !important;
}

.summernote-content table td, .prose table td, .page-content table td,
.summernote-content table th, .prose table th, .page-content table th {
    border: 1px solid #e5e7eb !important;
    padding: 0.75rem !important;
}

/* Images */
.summernote-content img, .prose img, .page-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    margin: 1.5rem 0 !important;
}