<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hutan Spiritual | Idealist Coach</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="https://idealistcoach.com/images/tree-logo1.png" type="image/png">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #0a1a0a;
            color: #e8f5e8;
            overflow-x: hidden;
            min-height: 100vh;
            cursor: none;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(46, 125, 50, 0.1) 0%, transparent 30%),
                radial-gradient(circle at 80% 70%, rgba(56, 142, 60, 0.1) 0%, transparent 30%),
                linear-gradient(to bottom, #0a1a0a, #0c220c, #0a1a0a);
        }

        /* Kabut tipis di background */
        .fog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJmb2ciIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoMzApIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMDMpIi8+PGNpcmNsZSBjeD0iMTAwIiBjeT0iMjAwIiByPSI4MCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA0KSIvPjxjaXJjbGUgY3g9IjMwMCIgY3k9IjEwMCIgcj0iNjAiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wMykiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZm9nKSIvPjwvc3ZnPg==');
            z-index: 1;
            pointer-events: none;
            opacity: 0.6;
            animation: fogMove 60s infinite linear;
        }

        @keyframes fogMove {
            0% { transform: translateX(0) translateY(0); }
            50% { transform: translateX(-50px) translateY(-20px); }
            100% { transform: translateX(0) translateY(0); }
        }

        /* Container utama */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 10;
        }

        /* Header */
        header {
            padding: 30px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            z-index: 100;
        }

        .logo {
            font-family: 'EB Garamond', serif;
            font-size: 2.2rem;
            font-weight: 600;
            color: #c8e6c9;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo i {
            color: #81c784;
        }

        nav ul {
            display: flex;
            list-style: none;
            gap: 30px;
        }

        nav a {
            color: #e8f5e8;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.3s ease;
            position: relative;
        }

        nav a:hover {
            background-color: rgba(129, 199, 132, 0.2);
            color: #a5d6a7;
        }

        nav a.active {
            background-color: rgba(76, 175, 80, 0.3);
            color: #a5d6a7;
        }

        nav a.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background-color: #81c784;
            border-radius: 50%;
        }

        /* Karakter siluet */
        .silhouette {
            position: fixed;
            width: 40px;
            height: 60px;
            background-color: #1b5e20;
            border-radius: 50% 50% 40% 40%;
            z-index: 1000;
            pointer-events: none;
            transition: transform 0.1s ease;
            box-shadow: 0 0 15px rgba(27, 94, 32, 0.5);
        }

        .silhouette::before {
            content: '';
            position: absolute;
            top: -10px;
            left: 5px;
            width: 30px;
            height: 15px;
            background-color: #1b5e20;
            border-radius: 50% 50% 0 0;
        }

        .silhouette::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 20px;
            background-color: #2e7d32;
            border-radius: 40% 40% 0 0;
        }

        /* Hero section */
        .hero {
            padding: 100px 0 150px;
            text-align: center;
            position: relative;
            z-index: 10;
        }

        .hero h1 {
            font-family: 'EB Garamond', serif;
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: #c8e6c9;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        }

        .hero p {
            font-size: 1.4rem;
            max-width: 800px;
            margin: 0 auto 40px;
            line-height: 1.6;
            color: #e8f5e8;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            background: linear-gradient(to bottom, #388e3c, #2e7d32);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-weight: 600;
            font-size: 1.2rem;
            box-shadow: 0 5px 15px rgba(46, 125, 50, 0.4);
            transition: all 0.3s ease;
            border: 2px solid #4caf50;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(46, 125, 50, 0.6);
            background: linear-gradient(to bottom, #43a047, #388e3c);
        }

        /* Sections umum */
        section {
            padding: 100px 0;
            position: relative;
            z-index: 10;
        }

        .section-title {
            font-family: 'EB Garamond', serif;
            font-size: 2.8rem;
            margin-bottom: 50px;
            text-align: center;
            color: #c8e6c9;
            position: relative;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(90deg, transparent, #81c784, transparent);
        }

        /* About section */
        #about {
            background-color: rgba(13, 32, 13, 0.7);
            border-radius: 20px;
            padding: 80px;
            margin-bottom: 100px;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(129, 199, 132, 0.2);
        }

        .about-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 50px;
        }

        .about-text {
            flex: 1;
            min-width: 300px;
            line-height: 1.8;
            font-size: 1.2rem;
        }

        .about-text p {
            margin-bottom: 25px;
        }

        .about-image {
            flex: 1;
            min-width: 300px;
            height: 400px;
            background: linear-gradient(45deg, #1b5e20, #2e7d32, #388e3c);
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .about-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj48cGF0aCBkPSJNMTUwIDgwIHE0MC00MCAxMDAgMCA0MCA0MCAwIDEwMC00MCA0MC0xMDAgMC00MC00MCAwLTEwMCA0MCA0MCAxMDAgMHoiIGZpbGw9IiM0M2EwNDciIG9wYWNpdHk9IjAuMyIvPjxwYXRoIGQ9Ik0yMDAgMTUwIHEzMC0zMCA3NSAwIDMwIDMwIDAgNzUtMzAgMzAtNzUgMC0zMC0zMCAwLTc1IDMwIDMwIDc1IDB6IiBmaWxsPSIjNjRiNTE2IiBvcGFjaXR5PSIwLjQiLz48L3N2Zz4=');
            opacity: 0.3;
        }

        /* Paths section */
        #paths {
            margin-bottom: 100px;
        }

        .paths-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
        }

        .path-card {
            background: rgba(19, 45, 19, 0.8);
            border-radius: 15px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.4s ease;
            border: 1px solid rgba(129, 199, 132, 0.2);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(5px);
        }

        .path-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(27, 94, 32, 0.3);
            border-color: rgba(129, 199, 132, 0.5);
        }

        .path-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(129, 199, 132, 0.1), transparent);
            transition: left 0.7s;
        }

        .path-card:hover::before {
            left: 100%;
        }

        .path-icon {
            font-size: 3.5rem;
            color: #81c784;
            margin-bottom: 25px;
        }

        .path-card h3 {
            font-family: 'EB Garamond', serif;
            font-size: 1.8rem;
            margin-bottom: 15px;
            color: #c8e6c9;
        }

        .path-card p {
            line-height: 1.7;
            color: #e8f5e8;
            margin-bottom: 25px;
        }

        .path-link {
            display: inline-block;
            color: #81c784;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.1rem;
            padding: 8px 20px;
            border: 1px solid rgba(129, 199, 132, 0.5);
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .path-link:hover {
            background-color: rgba(129, 199, 132, 0.2);
            padding: 8px 25px;
        }

        /* Practices section */
        .practices-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
        }

        .practice-item {
            background: rgba(19, 45, 19, 0.7);
            border-radius: 15px;
            padding: 30px;
            transition: all 0.3s ease;
            border-left: 4px solid #81c784;
        }

        .practice-item:hover {
            background: rgba(27, 94, 32, 0.3);
            transform: translateX(10px);
        }

        .practice-item h3 {
            font-family: 'EB Garamond', serif;
            font-size: 1.6rem;
            margin-bottom: 15px;
            color: #c8e6c9;
        }

        .practice-item p {
            line-height: 1.7;
            color: #e8f5e8;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 60px 0;
            border-top: 1px solid rgba(129, 199, 132, 0.2);
            margin-top: 100px;
            color: #a5d6a7;
            font-size: 1rem;
            position: relative;
            z-index: 10;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-links a {
            color: #a5d6a7;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #81c784;
        }

        /* Daun jatuh */
        .leaf {
            position: fixed;
            width: 30px;
            height: 30px;
            background-color: #81c784;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            opacity: 0.7;
            z-index: 5;
            pointer-events: none;
        }

        /* Responsif */
        @media (max-width: 992px) {
            .hero h1 {
                font-size: 3rem;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .hero p {
                font-size: 1.2rem;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .paths-container {
                grid-template-columns: 1fr;
            }
            
            #about {
                padding: 40px;
            }
        }

        /* Efek cahaya matahari */
        .sun-rays {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 10%, rgba(255, 255, 200, 0.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 2;
        }
    </style>
</head>
<body>
    <!-- Kabut tipis -->
    <div class="fog-overlay"></div>
    
    <!-- Cahaya matahari -->
    <div class="sun-rays"></div>
    
    <!-- Daun-daun akan dibuat dengan JavaScript -->
    
    <!-- Karakter siluet -->
    <div class="silhouette" id="silhouette"></div>
    
    <!-- Container utama -->
    <div class="container">
        <!-- Header -->
        <header>
            <a href="#" class="logo">
                <i class="fas fa-mountain"></i>
                Idealist Coach
            </a>
            
            <nav>
                <ul>
                    <li><a href="index.html" class="active">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="paths.html">Paths</a></li>
                    <li><a href="practices.html">Practices</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        
        <!-- Hero Section -->
        <section class="hero">
            <h1>Journey into the Spiritual Forest</h1>
            <p>Discover your inner path through guided meditation, mindful practices, and connection with nature's wisdom. Find peace and purpose in the depths of the spiritual woods.</p>
            <a href="#paths" class="cta-button">Begin Your Journey</a>
        </section>
        
        <!-- About Section -->
        <section id="about">
    <h2 class="section-title">The Forest Within</h2>
    <div class="about-content">
        <div class="about-text">
            <p>Welcome to the Spiritual Forest, a sanctuary where the ancient wisdom of nature meets modern mindfulness practices. Here, we believe that each person carries an internal landscape—a forest of thoughts, emotions, and spiritual connections waiting to be explored.</p>
            <p>Our approach combines traditional meditation techniques with nature-inspired rituals to help you navigate your inner wilderness. Just as a forest thrives through interconnected ecosystems, your spiritual growth flourishes through the balance of mind, body, and soul.</p>
            <p>Whether you're seeking clarity, peace, or deeper connection, the paths through this spiritual forest offer guidance for every step of your journey.</p>
        </div>

        <div class="about-image" 
             style="background-size: cover; background-repeat: no-repeat; background-image: url('https://idealistcoach.com/images/spiritual-forest.jpg');">
        </div>
    </div>
</section>
        
        <!-- Paths Section -->
        <section id="paths">
            <h2 class="section-title">Spiritual Paths</h2>
            <div class="paths-container">
                <div class="path-card">
                    <div class="path-icon">
                        <i class="fas fa-tree"></i>
                    </div>
                    <h3>Forest Meditation</h3>
                    <p>Guided journeys through mental landscapes, using forest imagery to deepen mindfulness and cultivate inner peace. Learn to listen to the quiet wisdom within.</p>
                    <a href="#" class="path-link">Walk This Path</a>
                </div>
                
                <div class="path-card">
                    <div class="path-icon">
                        <i class="fas fa-water"></i>
                    </div>
                    <h3>Stream of Consciousness</h3>
                    <p>Flow with your thoughts like a forest stream. This practice teaches non-attachment to mental patterns, allowing clarity to emerge from the movement of mind.</p>
                    <a href="#" class="path-link">Follow the Stream</a>
                </div>
                
                <div class="path-card">
                    <div class="path-icon">
                        <i class="fas fa-mountain"></i>
                    </div>
                    <h3>Mountain Stillness</h3>
                    <p>Develop unshakable presence and stability. Like ancient mountains, learn to observe changing circumstances while remaining centered in your true nature.</p>
                    <a href="#" class="path-link">Ascend the Peak</a>
                </div>
            </div>
        </section>
        
        <!-- Practices Section -->
        <section id="practices">
            <h2 class="section-title">Forest Practices</h2>
            <div class="practices-container">
                <div class="practice-item">
                    <h3>Rooted Breathing</h3>
                    <p>Connect with the earth through conscious breath, imagining roots extending from your body into the ground, drawing stability and nourishment.</p>
                </div>
                
                <div class="practice-item">
                    <h3>Canopy Awareness</h3>
                    <p>Expand your awareness upward like tree branches reaching for the sky, opening to broader perspectives and spiritual insights.</p>
                </div>
                
                <div class="practice-item">
                    <h3>Forest Bathing</h3>
                    <p>Immerse yourself in nature's healing presence, engaging all senses to absorb the therapeutic atmosphere of the woodland environment.</p>
                </div>
                
                <div class="practice-item">
                    <h3>Animal Guidance</h3>
                    <p>Learn from the wisdom of forest creatures, each representing different aspects of intuition, resilience, and natural intelligence.</p>
                </div>
            </div>
        </section>
        
        <!-- Contact Section -->
        <section id="contact">
            <h2 class="section-title">Find Your Trailhead</h2>
            <div style="text-align: center; max-width: 800px; margin: 0 auto;">
                <p style="font-size: 1.2rem; margin-bottom: 40px; line-height: 1.7;">Ready to begin your journey through the Spiritual Forest? Join our community of seekers or schedule a personal guidance session with one of our forest guides.</p>
                <a href="#" class="cta-button">Connect With a Guide</a>
            </div>
        </section>
        
        <!-- Footer -->
        <footer>
            <div class="footer-links">
                <a href="#">Privacy Policy</a>
                <a href="#">Terms of Journey</a>
                <a href="#">Forest Ethics</a>
                <a href="#">Guide Directory</a>
            </div>
            <p>&copy; 2026 Idealist Coach | Spiritual Forest. All paths lead inward.</p>
            <p style="margin-top: 15px; font-size: 0.9rem; color: #81c784;"><i class="fas fa-leaf"></i> Walk gently on your path</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const silhouette = document.getElementById('silhouette');
            const body = document.body;
            
            // Inisialisasi posisi siluet
            silhouette.style.left = '50%';
            silhouette.style.top = '50%';
            
            // Pergerakan siluet mengikuti kursor
            document.addEventListener('mousemove', function(e) {
                // Delay untuk efek smooth
                setTimeout(() => {
                    silhouette.style.left = (e.clientX - 20) + 'px';
                    silhouette.style.top = (e.clientY - 30) + 'px';
                }, 50);
            });
            
            // Animasi daun jatuh
            function createLeaf() {
                const leaf = document.createElement('div');
                leaf.classList.add('leaf');
                
                // Warna daun acak dalam nuansa hijau
                const greenHues = ['#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c'];
                const leafColor = greenHues[Math.floor(Math.random() * greenHues.length)];
                leaf.style.backgroundColor = leafColor;
                
                // Ukuran acak
                const size = 15 + Math.random() * 25;
                leaf.style.width = size + 'px';
                leaf.style.height = size + 'px';
                
                // Posisi awal acak di atas layar
                leaf.style.left = Math.random() * 100 + 'vw';
                leaf.style.top = '-50px';
                
                // Rotasi daun
                const rotation = Math.random() * 360;
                leaf.style.transform = `rotate(${rotation}deg)`;
                
                // Waktu jatuh acak
                const fallDuration = 10 + Math.random() * 20;
                
                // Animasi jatuh dengan efek melayang
                leaf.style.transition = `all ${fallDuration}s linear`;
                
                document.body.appendChild(leaf);
                
                // Trigger animation
                setTimeout(() => {
                    leaf.style.top = '100vh';
                    leaf.style.left = (parseFloat(leaf.style.left) + (Math.random() - 0.5) * 200) + 'px';
                    leaf.style.transform = `rotate(${rotation + 1080}deg)`;
                }, 10);
                
                // Hapus daun setelah jatuh
                setTimeout(() => {
                    leaf.remove();
                }, fallDuration * 1000);
            }
            
            // Buat daun secara berkala
            setInterval(createLeaf, 500);
            
            // Buat beberapa daun saat halaman dimuat
            for (let i = 0; i < 15; i++) {
                setTimeout(createLeaf, i * 200);
            }
            
            // Efek hover pada path cards
            const pathCards = document.querySelectorAll('.path-card');
            pathCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-15px)';
                });
                
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                });
            });
            
            // Smooth scroll untuk navigasi
            document.querySelectorAll('nav a').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    if (this.getAttribute('href').startsWith('#')) {
                        e.preventDefault();
                        
                        const targetId = this.getAttribute('href');
                        if (targetId === '#') return;
                        
                        const targetElement = document.querySelector(targetId);
                        if (targetElement) {
                            window.scrollTo({
                                top: targetElement.offsetTop - 80,
                                behavior: 'smooth'
                            });
                        }
                    }
                });
            });
            
            // Efek scroll untuk sections
            const sections = document.querySelectorAll('section');
            
            function checkScroll() {
                sections.forEach(section => {
                    const sectionTop = section.getBoundingClientRect().top;
                    const windowHeight = window.innerHeight;
                    
                    if (sectionTop < windowHeight * 0.85) {
                        section.style.opacity = '1';
                        section.style.transform = 'translateY(0)';
                    }
                });
            }
            
            // Set initial state
            sections.forEach(section => {
                section.style.opacity = '0';
                section.style.transform = 'translateY(30px)';
                section.style.transition = 'opacity 0.8s, transform 0.8s';
            });
            
            // Trigger initial check
            setTimeout(checkScroll, 300);
            
            // Check on scroll
            window.addEventListener('scroll', checkScroll);
            
            // Update navigasi aktif berdasarkan scroll
            function updateActiveNav() {
                const scrollPosition = window.scrollY;
                
                sections.forEach(section => {
                    const sectionTop = section.offsetTop - 100;
                    const sectionHeight = section.offsetHeight;
                    const sectionId = section.getAttribute('id');
                    
                    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                        document.querySelectorAll('nav a').forEach(link => {
                            link.classList.remove('active');
                            if (link.getAttribute('href') === `#${sectionId}`) {
                                link.classList.add('active');
                            }
                        });
                    }
                });
            }
            
            window.addEventListener('scroll', updateActiveNav);
            
            // Efek kabut bergerak
            const fog = document.querySelector('.fog-overlay');
            let fogX = 0;
            let fogY = 0;
            
            function moveFog() {
                fogX += 0.1;
                fogY += 0.05;
                
                fog.style.backgroundPosition = `${fogX}px ${fogY}px`;
                
                requestAnimationFrame(moveFog);
            }
            
            moveFog();
        });
    </script>
</body>
</html>