<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Günlük Tarot Falı</title>
    <style>
        :root {
            --gold: #d4af37;
            --dark-blue: #0b1325;
            --purple: #1c1a27;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, var(--dark-blue), var(--purple));
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            text-align: center;
        }

        h1 {
            color: var(--gold);
            margin-bottom: 5px;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }

        p.subtitle {
            color: #aaa;
            margin-bottom: 30px;
        }

        .card-container {
            perspective: 1000px;
            width: 200px;
            height: 320px;
            cursor: pointer;
            margin-bottom: 30px;
        }

        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 15px;
            border: 3px solid var(--gold);
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 15px;
        }

        /* Kartın Arkası (Kapalı Hali) */
        .card-back {
            background: radial-gradient(circle, #2c1930 0%, #0f0a1c 100%);
            background-image: 
                radial-gradient(var(--gold) 1px, transparent 0),
                radial-gradient(var(--gold) 1px, transparent 0);
            background-size: 20px 20px;
            background-position: 0 0, 10px 10px;
        }

        .card-back::after {
            content: "🔮";
            font-size: 3rem;
            filter: drop-shadow(0 0 10px var(--gold));
        }

        /* Kartın Önü (Açık Hali) */
        .card-front {
            background: #111;
            transform: rotateY(180deg);
            justify-content: space-between;
        }

        .card-emoji {
            font-size: 4rem;
            margin-top: 20px;
        }

        .card-title {
            color: var(--gold);
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        /* Sonuç ve Buton Alanı */
        #result-box {
            max-width: 400px;
            opacity: 0;
            transition: opacity 0.5s ease;
            background: rgba(255, 255, 255, 0.05);
            padding: 20px;
            border-radius: 10px;
            border-left: 4px solid var(--gold);
        }

        #result-box.show {
            opacity: 1;
        }

        #meaning {
            font-style: italic;
            color: #ddd;
            line-height: 1.6;
        }

        button {
            margin-top: 20px;
            background: transparent;
            border: 2px solid var(--gold);
            color: var(--gold);
            padding: 10px 20px;
            font-size: 1rem;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        button:hover {
            background: var(--gold);
            color: var(--dark-blue);
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
        }
    </style>
</head>
<body>

    <h1>Mistik Tarot</h1>
    <p class="subtitle">Karta tıklayarak günün mesajını açın</p>

    <div class="card-container" onclick="drawCard()">
        <div class="card" id="tarot-card">
            <div class="card-face card-back"></div>
            <div class="card-face card-front">
                <div class="card-emoji" id="card-emoji">🃏</div>
                <div class="card-title" id="card-title">Kart Adı</div>
            </div>
        </div>
    </div>

    <div id="result-box">
        <div id="meaning">Kartın anlamı burada görünecek...</div>
        <button onclick="resetDeck(event)">Yeni Kart Seç</button>
    </div>

    <script>
        // Örnek Tarot Kartı Havuzu
        const tarotDeck = [
            { title: "Deli (The Fool)", emoji: "🏃‍♂️", meaning: "Yeni başlangıçlar, risk alma ve inançla adım atma zamanı. Önünüzde temiz bir sayfa var." },
            { title: "Büyücü (The Magician)", emoji: "🧙‍♂️", meaning: "İsteklerinizi gerçeğe dönüştürecek güce ve yeteneğe sahipsiniz. Odaklanın ve harekete geçin." },
            { title: "Azize (The High Priestess)", emoji: "🌙", meaning: "Sezgilerinize güvenin. Mantığınızın göremediği sırları şu an iç sesiniz size söylüyor." },
            { title: "İmparatoriçe (The Empress)", emoji: "👑", meaning: "Bolluk, bereket, yaratıcılık ve büyüme dönemi. Kendinizi ve çevrenizi şefkatle besleyin." },
            { title: "İmparator (The Emperor)", emoji: "🏛️", meaning: "Disiplin, otorite ve düzen kurma ihtiyacı. Hayatınızın kontrolünü elinize alıyorsunuz." },
            { title: "Kader Çarkı (Wheel of Fortune)", emoji: "🎡", meaning: "Şans dönüyor! Hayatınızda kontrolünüz dışındaki değişimlere ayak uydurma zamanı." },
            { title: "Yıkılan Kule (The Tower)", emoji: "⚡", meaning: "Ani bir değişim veya aydınlanma. Eski ve çürük olan yıkılıyor, yerine daha sağlamı gelecek." },
            { title: "Yıldız (The Star)", emoji: "✨", meaning: "Umut, şifa, yenilenme ve ruhsal huzur. Karanlık dönemin ardından gelen parlak ışık." },
            { title: "Dünya (The World)", emoji: "🌍", meaning: "Bir döngünün başarıyla tamamlanması, bütünlük ve hedeflere ulaşmanın getirdiği tatmin." }
        ];

        let isFlipped = false;

        function drawCard() {
            if (isFlipped) return; // Kart zaten açılmışsa tekrar tetikleme

            const card = document.getElementById('tarot-card');
            const resultBox = document.getElementById('result-box');
            
            // Rastgele bir kart seç
            const randomIndex = Math.floor(Math.random() * tarotDeck.length);
            const selectedCard = tarotDeck[randomIndex];

            // Kartın ön yüzünü güncelle
            document.getElementById('card-emoji').innerText = selectedCard.emoji;
            document.getElementById('card-title').innerText = selectedCard.title;
            document.getElementById('meaning').innerText = selectedCard.meaning;

            // Animasyonları başlat
            card.classList.add('flipped');
            isFlipped = true;

            setTimeout(() => {
                resultBox.classList.add('show');
            }, 400);
        }

        function resetDeck(event) {
            // Butona basıldığında kartın drawCard fonksiyonunu tetiklemesini engelle
            event.stopPropagation(); 
            
            const card = document.getElementById('tarot-card');
            const resultBox = document.getElementById('result-box');

            card.classList.remove('flipped');
            resultBox.classList.remove('show');
            isFlipped = false;
        }
    </script>
</body>
</html>