/* =======================================
 * 1. TEMEL HTML/BODY (Daha Agresif Kaydırma Tetikleyicisi)
 * ======================================= */
html {
    margin: 0;
    padding: 0;
    /* Kaydırma yeteneğini koruyun */
    overflow-y: scroll; 
    /* iOS'ta kaydırma performansını artırır */
    -webkit-overflow-scrolling: touch;   
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    
    /* Yüksekliği 100svh'den 50 piksel DAHA FAZLA yapın.
       Bu, tarayıcıya "burada kesinlikle kaydırılabilir içerik var" sinyalini gönderir. */
    height: 100svh; 
    height: calc(100svh + 50px); /* <-- Taşma miktarını artırdık */
}


/* =======================================
 * 2. UI KATMANI ve MENÜ (FIXED ile görünüm alanına sabitleme)
 * ======================================= */
#ui-layer {
    /* FIXED konumlandırma ile body'nin kaymasından etkilenmez */
    position: fixed; 
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh; /* Hala taşmayı önlemek için tam svh kullanır */
    z-index: 10;
    pointer-events: none;
}

.test-menu {
    /* FIXED konumlandırma ile kaydırmadan etkilenmez */
    position: fixed; 
    bottom: 0;
    left: 0;
    pointer-events: auto;
    padding: 5px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 20; 
}


		  #application-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1a1a1a; z-index: 0; }

        .app-btn { 
            color: white; text-decoration: none; padding: 8px 12px; 
            background: #007bff; border-radius: 4px; font-size: 12px; text-align: center; cursor: pointer;
        }
        .app-btn:hover { background: #0056b3; }
        .app-btn.red { background: #dc3545; }

       
		/* --- POPUP ANIMASYONLARI --- */
        
        /* 1. FADE IN (Genel Geçiş) */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 2. SLIDE IN RIGHT (Sağdan Kayma - Drawer İçin) */
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* 3. ZOOM IN (Modal İçin) */
        @keyframes zoomIn {
            from { transform: scale(0.9); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* --- POPUP TEMEL YAPISI --- */
        .popup-wrapper { 
            display: none; 
            position: fixed; 
            z-index: 100; 
            pointer-events: auto;
            /* Açıldığı an genel bir fade-in uygula */
        }
        
        .popup-wrapper.active { 
            display: flex; 
            animation: fadeIn 0.3s ease-out forwards; /* Patlamayı önleyen sihirli satır */
        }

        .close-btn { cursor: pointer; margin-top: 10px; padding: 5px 10px; }

        /* --- TİPLERE GÖRE STİLLER --- */

        /* 1. Modal (Ortada - Zoom Efektiyle gelsin) */
        #modal_popup { top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center; }
        #modal_popup.active .popup-box {
            animation: zoomIn 0.3s ease-out forwards; /* Kutu büyüyerek gelir */
        }
        #modal_popup .popup-box { background:white; color:#333; padding:20px; border-radius:8px; width:300px; text-align:center; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

        /* 2. Content (Sağdan Açılan Drawer - Kayma Efektiyle gelsin) */
        #content_popup { top:0; right:0; width:100%; height:100%; justify-content:flex-end; }
        #content_popup .popup-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }
        
        /* Drawer Kutusu */
        #content_popup .popup-box { 
            position:relative; 
            background:#f4f4f4; 
            color:#333; 
            width:400px; 
            height:100%; 
            padding:20px; 
            box-shadow: -5px 0 15px rgba(0,0,0,0.2); 
            overflow-y: auto; 
            /* Varsayılan hali (görünmezken) sağda dursun ki patlama olmasın */
            transform: translateX(100%); 
        }

        /* Sadece active olduğunda kayarak gelsin */
        #content_popup.active .popup-box {
            animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; /* Havalı bir kayma efekti */
        }

        /* 3. Info (Sağ Alt Toast) */
        #info_popup { bottom:20px; right:20px; }
        #info_popup.active { animation: fadeIn 0.5s ease; }
        #info_popup .popup-box { background:#333; color:#fff; padding:15px 25px; border-radius:50px; border: 1px solid #555; }
		

        /* Loader */
        #global-loader { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); color:white; z-index:9999; display:none; justify-content:center; align-items:center; font-size: 20px; }


		#application-canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			height: 100vh !important;
			margin: 0 !important;
			width: 100vw !important;
		}


			/* Başlangıçta uyarıyı gizle */
			.orientation-warning {
				display: none;
			}

			/* @media Query: Sadece 'portrait' (dikey) yönde uygulansın */
			@media screen and (orientation: portrait) {

				/* Tüm ekranı kaplayacak ve ortalayacak stiller */
				.orientation-warning {
					display: flex; /* İçeriği ortalamak için */
					justify-content: center; /* Yatayda ortala */
					align-items: center; /* Dikeyde ortala */

					position: fixed; 
					top: 0;
					left: 0;
					width: 100vw; 
					height: 100vh; 

					background-color: #000000;
					z-index: 9999; 
				}

				/* Mesaj kutusu ve yazı stilleri */
				.message-box {
					text-align: center;
					color: #ffffff;
					padding: 20px;
					
					max-width: 80%;
					border-radius: 10px;
					background-color: rgba(0, 0, 0, 0.8);
					font-family: Arial, sans-serif;
					line-height: 1.5;
				}

				.message-box p:first-child {
					font-size: 1.5em; /* İkon boyutu */
				}

			}