* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      height: 100%;
    }

    body {
      min-height: 100vh;
      background: #d9d9d9;
      overflow: hidden; /* default: scroll YOK, mobilde JS açacak */
    }

    #main-container {
      position: sticky;
      top: 0;
      width: 100%;
      height: var(--main-container-height, 100vh);
      background: #1a1a1a;
      color: white;
      overflow: hidden;

      /* safe area – sadece sol/sağ */
      padding-top: 0;
      padding-bottom: 0;
      padding-right: env(safe-area-inset-right, 0);
      padding-left: env(safe-area-inset-left, 0);
    }

    #application-canvas,
    #ui-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100% !important;
      height: 100% !important;
    }

    #application-canvas {
      z-index: 0;
      display: block;
      background: #444; /* test için */
    }

    #ui-layer {
      z-index: 1;
		pointer-events: none;
		 
    }


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


		

	.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-popup { 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; }


	/* Başlangıçta uyarıyı gizle */
	.orientation-warning-popup {
		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-popup {
			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 */
		}

	}