// soz.php


<!-- Header Menu -->
<div class="header">
    <div class="left-buttons">
        <div class="menu-icon" onclick="toggleMenu()">☰</div>
        <a href="/m" class="home-button">🏠</a>
    </div>
    <div class="header-buttons">
        <button onclick="changeFontSize('increase')">A+</button>
        <button onclick="changeFontSize('decrease')">A-</button>
        <button onclick="toggleDarkMode()">🌙</button>
    </div>
</div>

<!-- Side Menu -->
<div id="side-menu" class="side-menu">
    <a href="javascript:void(0)" class="close-btn" onclick="toggleMenu()">×</a>
    <div class="menu-links">
        <a href="sozler.php">Kelimeler</a>
        <a href="movzular.php">Konular</a>
        <a href="quran-lugeti.php">Kuran Sözlüğü</a>
        <a href="sesli-quran.php">Sesli Kuran</a>
        <a href="save.php" id="saved-verses-link">Kaydedilmiş Ayetler</a>
		<a href="javascript:void(0);" id="go-to-pinned-verse-link">Sabitlenmiş Ayete Git</a>
		<a href="javascript:void(0);" id="addToHomeScreenBtn" style="display: none;">Uygulamalara Ekle</a>

		<a href="https://www.bilinmeyenheqiqetler.com/">Bilinmeyen Hakikatler</a>
				
    </div>
    <div class="search-container">
        <form class="search-form" accept-charset="utf-8" action="arama.php" method="get" onsubmit="return search(event)">
            <input class="inputbox" type="text" id="aranankelime" name="aranankelime" maxlength="255">
            <input type="submit" value="Ara" name="submit">
        </form>
    </div>
</div>

<div id="alert" class="custom-alert"></div>

<style>
/* Header Stilleri */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f1f1f1;
}

.left-buttons {
    display: flex;
    align-items: center;
}

.menu-icon {
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
}

.home-button {
    font-size: 24px;
    text-decoration: none;
    color: #333;
    margin-left: 10px;
}

.header-buttons button {
    font-size: 16px;
    padding: 5px 10px;
    margin-left: 5px;
    cursor: pointer;
}

/* Side Menu Stilleri */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #333;
    color: white;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    padding: 20px;
    overflow-y: auto;
	display: none;
}

.side-menu.active {
    transform: translateX(0);
	display: block;  /* Active olduğunda menü göstərilir */
}

.close-btn {
    font-size: 30px;
    color: red;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    text-decoration: none;
}

.menu-links {
    margin-top: 50px;
}

.menu-links a {
    display: block;
    padding: 15px;
    color: white;
    font-size: 18px;
    text-decoration: none;
    border-bottom: 1px solid #444;
    transition: background-color 0.3s ease;
}

.menu-links a:hover {
    background-color: #993333;
}

.menu-links a:last-child {
    border-bottom: none;
}

.pinned {
    background-color: #ffeb3b; /* Sarı fon */
    border: 2px solid #fbc02d; /* Sarı çərçivə */
    padding: 5px;
    border-radius: 5px;
}


/* Arama Kutusu */
.search-container {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.search-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 20px;
}

.inputbox {
    width: 80%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.search-form input[type="submit"] {
    width: 80%;
    padding: 10px;
    background-color: #993333;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.search-form input[type="submit"]:hover {
    background-color: #660000;
}

/* Custom Alert */
.custom-alert {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.custom-alert.show {
    display: block;
    opacity: 1;
}


.verse {
    position: relative; /* Genel kapsayıcı için */
}

.verse-header {
    display: flex;
    justify-content: space-between; /* Numara sola, menü sağa */
    align-items: center;
    margin-bottom: 0px;
    width: 100%; /* Satırın tam genişliğini kapla */
}

.verse-menu-container {
    position: relative; /* Menü bu kapsayıcıya göre konumlanacak */
}

.verse-number {
    font-weight: bold;
}

.verse-text {
    margin-top: 0px;
}

.menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
	color: #000;
}

body.dark-mode .menu-btn {
    color: #fff;
}

.verse-menu {
    position: absolute;
    top: 100%; /* Butonun hemen altı */
    right: 0; /* Sağ kenara sabitle */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    width: auto; /* Genişlik içeriğe göre otomatik */
    white-space: nowrap; /* Metin tek satırda kalsın, kırılmasın */
    padding: 5px 5px; /* İç boşluklar */
	
}

.copy-icon, .pin-icon .save-icon .delete-icon .share-icon{
    display: block;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 16px;
    border-bottom: 1px solid #ddd; /* Xətt əlavə edilir */
}

.copy-icon:not(:last-child), 
.pin-icon:not(:last-child), 
.save-icon:not(:last-child), 
.share-icon:not(:last-child), 
.delete-icon:not(:last-child) {
    border-bottom: 1px solid #ddd; /* Her öğeye çizgi eklenir, son öğeye eklenmez */
}


.copy-icon:hover .pin-icon:hover, .save-icon:hover .delete-icon:hover .share-icon:hover{
    background-color: #f0f0f0;
}

body.dark-mode .copy-icon:hover, 
body.dark-mode .pin-icon:hover, 
body.dark-mode .share-icon:hover, 
body.dark-mode .save-icon:hover {
    background-color: #555;
}

body.dark-mode .verse-menu {
    background-color: #444;
    border-color: #666;
    color: #f1f1f1;
}

.verse-menu span {
    display: block;
    padding: 5px;
    cursor: pointer;
}

.verse-menu span:hover {
    background: #eee;
}

.verse.pinned {
    font-weight: bold;
    color: red;
}

.surah.pinned {
    background-color: #4CAF50;
    color: white !important;
}

body.dark-mode .verse.pinned {
    color: #ff6347;
}

.saved-verse {
    margin-bottom: 10px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* Menü öğelerindeki boşlukları temizle ve düzgün hizalama sağla */
.menu-item {
    white-space: nowrap; /* Satır sonu veya boşluklar içerik bozulmasın diye engellenir */
    padding: 5px 10px;   /* Menü öğeleri arasındaki boşluğu ayarla */
    color: #ffffff;      /* Metin rengi, örneğin beyaz */
    text-align: left;     /* Metni sola hizala */
}

/* Menü öğesinde tıklanabilir öğe için renk değişimi */
.menu-item:hover {
    background-color: #333; /* Hover efekti: arka plan rengini değiştir */
}

/* Seçilen menü öğesi için stil */
.menu-item.selected {
    background-color: #666; /* Seçilen öğe arka plan rengini değiştir */
    color: #fff; /* Seçilen öğe için metin rengi beyaz */
}


/* Harfler için stil */
.letter-style {
    font-size: 33px; /* Harf boyutunu büyüttüm, ama çok büyük yapmadım */
    color: darkgreen; /* Koyu yeşil renk */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Gölgelendirme ekledim */
}

/* Kelimeler için sağa kaydırma */
.word {
    margin-left: 15px; /* Kelimeleri biraz sağa kaydırdım */
}

.letter {
    color: #4C8A2C; /* Koyu yeşil harfler */
    font-size: 34px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
}

.letter:hover {
    color: #6DBF3F; /* Hoverda daha açık yeşil */
}

.movzu-style {
    font-size: 16px; /* Harf boyutunu büyüttüm, ama çok büyük yapmadım */
    color: darkgreen; /* Koyu yeşil renk */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Gölgelendirme ekledim */
}

.movzu {
    color: #4C8A2C; /* Koyu yeşil harfler */
    font-size: 22px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
}

.movzu:hover {
    color: #6DBF3F; /* Hoverda daha açık yeşil */
}


.word a {
    color: #000; /* Siyah yazı */
    text-decoration: none; /* Alt çizgi yok */
    font-size: 18px;
}

.word a:hover {
    color: #6DBF3F; /* Hoverda yeşil renk */
}

body.dark-mode .letter {
    color: white !important; 
    font-size: 28px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .movzu {
    color: white !important; 
    font-size: 22px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .letter-style {
    color: white !important; 
    font-size: 28px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .movzu-style {
    color: white !important; 
    font-size: 16px; /* Harf boyutunu büyüt */
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Harfler için gölge */
}

body.dark-mode .letter:hover {
    color: white; 
}

body.dark-mode .movzu:hover {
    color: white; 
}



body.dark-mode .word a {
    color: #f0f0f0; /* Açık yazı rengi */
    text-decoration: none; /* Alt çizgi yok */
    font-size: 18px;
}

body.dark-mode .word a:hover {
    color: #6DBF3F; /* Hoverda yeşil renk */
}

body.dark-mode .verse {
    color: #f0f0f0; /* Açık yazı rengi */
}

body.dark-mode .icon-doc {
    width: 16px;
    margin-right: 10px;
}
</style>
<script>
        // Header ile ilgili temel fonksiyonlar
        function toggleMenu() {
            const sideMenu = document.getElementById('side-menu');
            sideMenu.classList.toggle('active');
        }

        let fontSize = 16;
        let darkMode = localStorage.getItem('darkMode') === 'true';

        if (darkMode) {
            document.body.classList.add('dark-mode');
        }

        function changeFontSize(action) {
            if (action === 'increase') {
                fontSize += 2;
            } else if (action === 'decrease') {
                fontSize = Math.max(12, fontSize - 2);
            }
            document.body.style.fontSize = fontSize + 'px';
        }

        function toggleDarkMode() {
            darkMode = !darkMode;
            document.body.classList.toggle('dark-mode', darkMode);
            localStorage.setItem('darkMode', darkMode);
            if (typeof applyPinnedVerse === 'function') applyPinnedVerse();
        }
    </script>
<script>


document.addEventListener("DOMContentLoaded", function() {
    let pinnedVerse = JSON.parse(localStorage.getItem('pinnedVerse')) || null;

    // Pinli ayetleri uygula
    function applyPinnedVerse() {
        if (pinnedVerse) {
            const verseElement = document.querySelector(`#verse-${pinnedVerse.surahIndex + 1}-${pinnedVerse.verseIndex}`);
            const surahElement = document.querySelector(`#surah-${pinnedVerse.surahIndex}`);
            if (verseElement) {
                verseElement.classList.add('pinned');
            }
            if (surahElement) {
                surahElement.classList.add('pinned');
            }
        }
    }
    applyPinnedVerse();

    // Menü açma/kapama
    document.querySelectorAll('.menu-btn').forEach(button => {
        button.addEventListener('click', function(event) {
            const menu = button.nextElementSibling; // Menü, butonun hemen sonraki kardeşi
            if (!menu) return;

            // Diğer açık menüleri kapat
            document.querySelectorAll('.verse-menu').forEach(dropdown => {
                if (dropdown !== menu) {
                    dropdown.style.display = 'none';
                }
            });

            // Tıklanan menüyü aç/kapat
            menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
            event.stopPropagation();
        });
    });

    // Menü dışı tıklama ile kapatma
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.verse-menu') && !event.target.classList.contains('menu-btn')) {
            document.querySelectorAll('.verse-menu').forEach(menu => {
                menu.style.display = 'none';
            });
        }
    });

    // Menü öğesi seçildiğinde menü otomatik kapanacak
    document.querySelectorAll('.copy-icon, .pin-icon, .save-icon').forEach(item => {
        item.addEventListener('click', function() {
            const menu = this.closest('.verse-menu');
            if (menu) {
                menu.style.display = 'none'; // Menüyü kapat
            }
        });
    });

    // Kopyalama işlevi
    document.querySelectorAll('.copy-icon').forEach(icon => {
        icon.addEventListener('click', function() {
            const ayet = icon.getAttribute('data-ayet');
            const sureadi = icon.getAttribute('data-sureadi');
            const satir = icon.getAttribute('data-satir');
            const formattedText = ayet.trim() + " (" + sureadi + ", " + satir + ")";
            navigator.clipboard.writeText(formattedText).then(() => {
                const alertBox = document.getElementById("alert");
                alertBox.textContent = formattedText;
                alertBox.classList.add("show");
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            });
        });
    });

    // Pinleme işlevi
    document.querySelectorAll('.pin-icon').forEach(icon => {
        icon.addEventListener('click', function() {
            const verseIndex = icon.getAttribute('data-satir');
            const surahIndex = icon.getAttribute('data-sureindex');

            if (pinnedVerse) {
                const prevVerse = document.querySelector(`#verse-${pinnedVerse.surahIndex + 1}-${pinnedVerse.verseIndex}`);
                const prevSurah = document.querySelector(`#surah-${pinnedVerse.surahIndex}`);
                if (prevVerse) prevVerse.classList.remove('pinned');
                if (prevSurah) prevSurah.classList.remove('pinned');
            }

            pinnedVerse = { surahIndex: parseInt(surahIndex) - 1, verseIndex: parseInt(verseIndex) };
            localStorage.setItem('pinnedVerse', JSON.stringify(pinnedVerse));
            applyPinnedVerse();

            const alertBox = document.getElementById("alert");
            alertBox.textContent = "Ayet sabitlendi!";
            alertBox.classList.add("show");
            setTimeout(() => alertBox.classList.remove("show"), 2000);
        });
    });

    // Kaydetme işlevi
    document.querySelectorAll('.save-icon').forEach(icon => {
        icon.addEventListener('click', () => {
            const ayet = icon.getAttribute('data-ayet');
            const sureAdi = icon.getAttribute('data-sureadi');
            const satir = icon.getAttribute('data-satir');
            const sureIndex = icon.getAttribute('data-sureindex');

            const savedVerse = { sureAdi, satir, ayet, sureIndex };
            let savedVerses = JSON.parse(localStorage.getItem('savedVerses')) || [];
            if (!savedVerses.some(v => v.sureAdi === sureAdi && v.satir === satir)) {
                savedVerses.push(savedVerse);
                localStorage.setItem('savedVerses', JSON.stringify(savedVerses));
                const alertBox = document.getElementById('alert');
                alertBox.textContent = `(${sureAdi}, ${satir}) Ayeti kaydedildi!`;
                alertBox.classList.add('show');
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            } else {
                const alertBox = document.getElementById('alert');
                alertBox.textContent = 'Bu ayet daha önce kaydedilmiş!';
                alertBox.classList.add('show');
                setTimeout(() => alertBox.classList.remove("show"), 2000);
            }
        });
    });

});

</script>

<script>


document.addEventListener("DOMContentLoaded", function() {
    const goToPinnedVerseLink = document.querySelector("#go-to-pinned-verse-link");
    const pinnedVerse = JSON.parse(localStorage.getItem('pinnedVerse'));

    goToPinnedVerseLink.addEventListener('click', function() {
        if (!pinnedVerse) {
            alert("Sabitlenmiş Ayet Yok!");
            return;
        }

        const surahIndex = pinnedVerse.surahIndex + 1; // Surə indeksini düzəldirik
        let verseIndex = pinnedVerse.verseIndex; // Ayə indeksini düzəldirik

        let url;
        if (verseIndex === 1) {
            url = `https://www.ayetbul.com/m/?sure=${surahIndex}#container`;
        } else {
            url = `https://www.ayetbul.com/m/?sure=${surahIndex}#verse-${surahIndex}-${verseIndex - 1}`;
        }

        window.location.href = url;
    });
});


</script>

<script>

// Paylaş düyməsi (Azerice UTF-8 desteği)
function shareContent(sureNo, ayetNo) {
    var sureElement = document.querySelector(`[data-sureindex="${sureNo}"]`);
    var ayetElement = document.querySelector(`[data-satir="${ayetNo}"]`);

    if (!sureElement || !ayetElement) {
        alert("Bilgi bulunmadı.");
        return;
    }

    var sureAdi = sureElement.getAttribute('data-sureadi');
    var ayetMetni = ayetElement.getAttribute('data-ayet');

    // Şu anki URL'yi UTF-8 olarak temizle
    var rawURL = window.location.href;
    var fixedURL = decodeURIComponent(rawURL); // URL içindeki UTF-8 karakterleri düzeltir

    var shareText = `${ayetMetni} (${sureAdi} Suresi, ${ayetNo})\n\n${fixedURL}`;

    if (navigator.share) {
        navigator.share({
            title: 'Paylaş',
            text: shareText
        }).then(() => {
            console.log('Paylaşıldı!');
        }).catch((error) => {
            console.log('Paylaşım hatası: ', error);
        });
    } else {
        alert("Paylaşım API desteklenmiyor.");
    }
}



</script>

<!-- Manifest'i səhifənin sonuna əlavə et -->
<script>
    window.addEventListener('load', () => {
        let link = document.createElement('link');
        link.rel = 'manifest';
        link.href = '/m/site.webmanifest';
        document.head.appendChild(link);
    });
	
	</script>
	
	
<script>
let deferredPrompt;  // Gecikdirilmiş "install" əmri

// Beforeinstallprompt olayını yakala
window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();  // Tarayıcının otomatik kurulum teklifini engelle
    deferredPrompt = e;  // Olayı sakla, daha sonra çağıracağız
    console.log("Beforeinstallprompt event triggered!");  // Hata ayıklamak için mesaj
    document.getElementById('addToHomeScreenBtn').style.display = 'block';  // Butonu göster
});

// Butona tıklama işlemi
document.getElementById('addToHomeScreenBtn').addEventListener('click', (e) => {
    // Uygulama ana ekrana eklenip eklenmediğini kontrol et
    if (window.matchMedia('(display-mode: standalone)').matches) {
        alert('Daha önce eklenmiş!');
    } else {
        // Eğer deferredPrompt mevcutsa, prompt göster
        if (deferredPrompt) {
            console.log("Prompting install...");  // Hata ayıklamak için mesaj
            deferredPrompt.prompt();  // Ana ekrana eklemek için prompt göster

            // Kullanıcı seçimini kontrol et
            deferredPrompt.userChoice
                .then((choiceResult) => {
                    if (choiceResult.outcome === 'accepted') {
                        console.log('Uygulamalar Listesine Eklendi.');
                    } else {
                        console.log('Uygulamalar Listesine Eklenmedi.');
                    }
                    deferredPrompt = null;  // Prompt gösterildikten sonra sıfırlanır
                })
                .catch((error) => {
                    console.log('Error during prompt display:', error);  // Hata durumunda mesaj
                });
        } else {
            console.log("deferredPrompt is null!");  // Eğer deferredPrompt null ise, uyarı
        }
    }

    // Menü kapatmayı unutma
    toggleMenu();  // Menü kapatmak için toggleMenu fonksiyonunu çağır
});
</script>



<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KATIR - AyetBul</title>
    <link rel="stylesheet" href="styles.css">
    <script>
        function copyText(element) {
            var ayet = element.getAttribute('data-ayet');
            var sureadi = element.getAttribute('data-sureadi');
            var satir = element.getAttribute('data-satir');
            var text = ayet + " (" + sureadi + ", " + satir + ")";
            navigator.clipboard.writeText(text).then(() => {
                alert("Kopyalandı: " + text);
            });
        }
    </script>
</head>
<body>

<div class="top-bar">KATIR</div>
<div class="container">
            <div class="container verses">
                                            
                <div class="verse" id="verse-16-8">
                    <div class="verse-header">
                        <span class="verse-number">1.</span>
                        <div class="verse-menu-container">
                            <button class="menu-btn" data-verse-id="verse-16-8">⋮</button>
                            <div class="verse-menu" style="display: none;">
                                <span class="copy-icon" data-ayet="Onlara binmeniz ve süs için atları, katırları ve merkebleri (yarattı). Ve daha sizlerin bilmediğiniz neleri yaratmaktadır?" data-sureadi="Nahl Suresi" data-satir="8">Kopyala</span>
                                <span class="pin-icon" data-sureadi="Nahl Suresi" data-satir="8" data-sureindex="16">Sabitle</span>
                                <span class="save-icon" data-ayet="Onlara binmeniz ve süs için atları, katırları ve merkebleri (yarattı). Ve daha sizlerin bilmediğiniz neleri yaratmaktadır?" data-sureadi="Nahl Suresi" data-satir="8" data-sureindex="16">Kaydet</span>
								<span class="share-icon" onclick="shareContent(16, 8)">Paylaş</span>
							</div>
                        </div>
                    </div>
                    <div class="verse-text">
                        Onlara binmeniz ve süs için atları, katırları ve merkebleri (yarattı). Ve daha sizlerin bilmediğiniz neleri yaratmaktadır?                        <span class="reference">(Nahl Suresi, 8)</span>
                    </div>
                </div>
                                    </div>
    </div>


</body>
</html>