<style>
        @import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Amiri:wght@400;700&display=swap');
        
        body { font-family: 'Inter', sans-serif; transition: background-color 0.3s, color 0.3s; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
        .card { border-radius: 1.5rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); transition: background-color 0.3s, border-color 0.3s; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-active { display: block; }
        
        @keyframes fadeIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
        @keyframes popUp { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
        
        .animate-slide-in { animation: slideInRight 0.3s ease-out forwards; }
        .animate-pop-up { animation: popUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        
        input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .zikir-btn:active { transform: scale(0.95); }
        input[type="text"], input[type="number"], select, textarea { font-size: 16px !important; }
        .pb-safe { padding-bottom: env(safe-area-inset-bottom); }
        .quran-text { font-family: 'Amiri Quran', 'Amiri', serif; font-size: 2.25rem; line-height: 4.5rem; direction: rtl; text-align: right; color: #0f172a; }
        .dark .quran-text { color: #f8fafc; }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .custom-scrollbar::-webkit-scrollbar { width: 4px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #475569; }
        
        :root {
            --color-primary: 79, 70, 229; --color-primary-hover: 67, 56, 202; 
            --color-accent: 16, 185, 129; --color-accent-hover: 4, 120, 87; 
            --color-gradient-start: 49, 46, 129; --color-gradient-end: 30, 27, 75; 
        }
        
        .theme-emerald { --color-primary: 16, 185, 129; --color-primary-hover: 4, 120, 87; --color-accent: 217, 119, 6; --color-accent-hover: 180, 83, 9; --color-gradient-start: 6, 78, 59; --color-gradient-end: 2, 44, 34; }
        .theme-kaaba { --color-primary: 245, 158, 11; --color-primary-hover: 217, 119, 6; --color-accent: 251, 191, 36; --color-accent-hover: 245, 158, 11; --color-gradient-start: 17, 24, 39; --color-gradient-end: 3, 7, 18; }
        .theme-rose { --color-primary: 225, 29, 72; --color-primary-hover: 190, 24, 74; --color-accent: 13, 148, 136; --color-accent-hover: 15, 118, 110; --color-gradient-start: 136, 19, 55; --color-gradient-end: 76, 5, 26; }
        .theme-desert { --color-primary: 217, 119, 6; --color-primary-hover: 180, 83, 9; --color-accent: 13, 148, 136; --color-accent-hover: 15, 118, 110; --color-gradient-start: 120, 53, 4; --color-gradient-end: 69, 26, 3; }
        
        .bg-theme-primary { background-color: rgb(var(--color-primary)) !important; }
        .bg-theme-primary-hover:hover { background-color: rgb(var(--color-primary-hover)) !important; }
        .text-theme-primary { color: rgb(var(--color-primary)) !important; }
        .border-theme-primary { border-color: rgb(var(--color-primary)) !important; }
        .bg-theme-accent { background-color: rgb(var(--color-accent)) !important; }
        .text-theme-accent { color: rgb(var(--color-accent)) !important; }
        .bg-theme-gradient { background: linear-gradient(135deg, rgb(var(--color-gradient-start)), rgb(var(--color-gradient-end))) !important; }
        
        .dark body { background-color: #0f172a; color: #f8fafc; }
        .dark .card { background-color: #1e293b; border-color: #334155; }
        .dark .bg-slate-50 { background-color: #0f172a !important; border-color: #334155; }
        .dark .bg-white { background-color: #1e293b !important; }
        .dark .text-slate-800, .dark .text-slate-700 { color: #f8fafc !important; }
        .dark .text-slate-600, .dark .text-slate-500 { color: #cbd5e1 !important; }
        .dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }

        .compass-dial { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="48" fill="none" stroke="%2394a3b8" stroke-width="1"/><line x1="50" y1="2" x2="50" y2="8" stroke="%2394a3b8" stroke-width="2"/><line x1="50" y1="92" x2="50" y2="98" stroke="%2394a3b8" stroke-width="2"/><line x1="2" y1="50" x2="8" y2="50" stroke="%2394a3b8" stroke-width="2"/><line x1="92" y1="50" x2="98" y2="50" stroke="%2394a3b8" stroke-width="2"/></svg>') no-repeat center; background-size: contain; transition: transform 0.1s ease-out; }
        
        /* --- GÜVENLİ MODAL YÖNETİMİ --- */
        
        /* Eğer bir modal hidden sınıfına sahipse kesinlikle gizle */
        [id$="Modal"].hidden {
            display: none !important;
        }

        /* Konum Modalı Taban Ayarları */
        #locationModal {
            background-color: rgba(0, 0, 0, 0.75) !important;
            backdrop-filter: blur(8px);
            z-index: 999999 !important;
        }

        /* Konum Modalı sadece hidden değilken aktif olsun */
        #locationModal:not(.hidden) {
            display: flex !important;
        }

        #locationModal > div {
            background-color: #1e293b !important;
            border: 1px solid #334155;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            z-index: 1000000;
        }

        /* Sistem Ayarları Modalı Taban Ayarları */
        #settingsModal {
            z-index: 9999999 !important;
            background-color: rgba(0, 0, 0, 0.85) !important;
        }

        /* Sistem Ayarları sadece hidden değilken aktif olsun */
        #settingsModal:not(.hidden) {
            display: flex !important;
        }

        #settingsModal > div {
            z-index: 99999999;
            max-height: 90vh;
            overflow-y: auto;
        }
        /* Menü ve etkileşimli tüm öğeler için hızlı tıklama ayarı */
#floatingMenuContainer, 
#menuToggleBtn, 
.tab-btn, 
button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; /* Mobildeki o gri tıklama izini de yok eder */
}
.toast-message-class {
    position: fixed;
    z-index: 9999; /* Tüm modalların üstünde durmasını sağlar */
    /* ... diğer ayarlar ... */
}
		
    </style>