body { font-family: 'Inter', sans-serif; }
        h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }
        html { scroll-behavior: smooth; }

        body { background-color: #fafaf9; color: #44403c; }
        .dark body { background-color: #0a0a0a; color: #d6d3d1; }

        ::-webkit-scrollbar { width: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d4af37; }

        /* Animated Gradient Text - Light Mode (koyu altın tonları) */
        .gradient-text {
            background: linear-gradient(
                135deg,
                #8b6914 0%,
                #a67c00 25%,
                #c9a227 50%,
                #a67c00 75%,
                #8b6914 100%
            );
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientFlow 4s ease infinite;
        }

        /* Animated Gradient Text - Dark Mode (parlak altın) */
        .dark .gradient-text {
            background: linear-gradient(
                135deg,
                #d4af37 0%,
                #f5e6a3 25%,
                #d4af37 50%,
                #f5d742 75%,
                #d4af37 100%
            );
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientFlow 4s ease infinite;
        }

        /* gold-text - Light mode: Koyu altın */
        .gold-text {
            color: #7a5f00;
            -webkit-text-fill-color: #7a5f00;
        }

        /* gold-text - Dark mode: Animasyonlu parlak altın */
        .dark .gold-text {
            background: linear-gradient(135deg, #d4af37, #f5e6a3, #d4af37, #f5d742);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientFlow 4s ease infinite;
        }

        @keyframes gradientFlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* İkon Hover Efektleri - Card üzerinde thin → solid geçişi */
        .card-icon {
            transition: font-weight 0.3s ease, transform 0.3s ease;
        }
        .service-card:hover .card-icon,
        .card-hover:hover .card-icon,
        .group:hover .card-icon {
            font-weight: 900 !important;
        }
        /* FontAwesome light → solid geçişi */
        .icon-hover {
            font-family: "Font Awesome 7 Pro";
            font-weight: 300; /* fa-light */
            transition: font-weight 0.3s ease;
        }
        .service-card:hover .icon-hover,
        .card-hover:hover .icon-hover,
        .group:hover .icon-hover {
            font-weight: 900; /* fa-solid */
        }

        /* Hero gradient - Light mode: beyaz overlay TAMAMINDA */
        html:not(.dark) .hero-gradient {
            background: rgba(255,255,255,0.75) !important;
        }
        /* Hero gradient - Dark mode: siyah overlay TAMAMINDA */
        html.dark .hero-gradient {
            background: rgba(0,0,0,0.75) !important;
        }


        .reveal { opacity: 0; transform: translateY(15px); }

        /* Border Radius System: 8px (küçük), 12px (orta/card), 16px (büyük) */

        /* Küçük elementler & Butonlar: 8px */
        input, select, textarea,
        .badge, .tag, .chip,
        .btn-sm, [class*="py-2"][class*="px-4"],
        [class*="bg-gold-"],
        [class*="bg-gradient-to-r"][class*="gold"],
        a[class*="bg-gold-"],
        button[class*="bg-gold-"],
        a[class*="from-gold-"],
        button[class*="from-gold-"] {
            border-radius: 8px !important;
        }

        /* Orta elementler (cardlar): 12px */
        .border,
        [class*="border-stone"],
        [class*="border-gold"],
        [class*="border-zinc"],
        .card-hover,
        .card, .service-card,
        .mega-dropdown > div {
            border-radius: 12px !important;
        }

        /* Birleşik card'lar: Fotoğraf üstte, içerik altta */
        /* Fotoğraf kısmı: sadece üst köşeler yuvarlatılmış */
        [class*="aspect-"]:has(+ .border-t-0),
        [class*="aspect-"]:has(+ [class*="border-t-0"]) {
            border-radius: 12px 12px 0 0 !important;
        }
        /* İçerik kısmı: sadece alt köşeler yuvarlatılmış */
        .border-t-0,
        [class*="border-t-0"] {
            border-radius: 0 0 12px 12px !important;
        }

        /* Büyük elementler: 16px */
        .modal, .dialog,
        .mega-dropdown,
        .contact-form {
            border-radius: 16px !important;
        }

        .card-hover {
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }
        .dark .card-hover:hover {
            border-color: rgba(212, 175, 55, 0.3);
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
        }
        .card-hover:hover { border-color: rgba(212, 175, 55, 0.4); }

        .img-mode-aware { transition: filter 0.3s ease; }
        .img-mode-aware { filter: brightness(1.05) saturate(0.95); }
        .dark .img-mode-aware { filter: brightness(1) saturate(1); }



        .mega-dropdown {
            opacity: 0;
            visibility: hidden;
            transform: translateX(-50%) translateY(10px);
            transition: all 0.3s ease;
        }
        .mega-dropdown.active {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        a:focus, button:focus { outline: none; }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* Alpine.js cloak */
        [x-cloak] { display: none !important; }

        /* Contact Form Override - Dark Mode Fix */
        input, select, textarea {
            background-color: #fafaf9 !important;
            border-color: #d6d3d1 !important;
            color: #1c1917 !important;
        }
        .dark input, .dark select, .dark textarea {
            background-color: #1c1917 !important;
            border-color: #44403c !important;
            color: #fafaf9 !important;
        }
        input::placeholder, textarea::placeholder {
            color: #a8a29e !important;
        }
        .dark input::placeholder, .dark textarea::placeholder {
            color: #78716c !important;
        }
        input:focus, select:focus, textarea:focus {
            border-color: #d4af37 !important;
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
        }
        select option {
            background-color: #fafaf9;
            color: #1c1917;
        }
        .dark select option {
            background-color: #1c1917;
            color: #fafaf9;
        }

        /* Content Styles - Blog & Page */
        .blog-content, .page-content {
            line-height: 1.8;
        }
        .blog-content a, .page-content a {
            color: #d4af37;
            text-decoration: none;
            transition: color 0.2s;
        }
        .blog-content a:hover, .page-content a:hover {
            color: #f5c542;
        }
        .blog-content h2, .page-content h2 {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 2rem 0 1rem;
        }
        .blog-content h3, .page-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 1.5rem 0 0.75rem;
        }
        .blog-content ul, .blog-content ol,
        .page-content ul, .page-content ol {
            margin: 1.5rem 0;
            padding-left: 1.5rem;
        }
        .blog-content ul { list-style-type: disc; }
        .blog-content ol { list-style-type: decimal; }
        .blog-content li, .page-content li {
            margin-bottom: 0.5rem;
        }
        .blog-content li::marker, .page-content li::marker {
            color: #d4af37;
        }
        .blog-content blockquote, .page-content blockquote {
            border-left: 2px solid #d4af37;
            padding-left: 1rem;
            margin: 1.5rem 0;
            font-style: italic;
        }