/* Popup Overlay */ .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; visibility: hidden; opacity: 0; transition: opacity 0.3s ease-in-out; } /* Active Popup */ .popup-overlay.active { visibility: visible; opacity: 1; } /* Popup Content */ .popup-content { background: white; padding: 20px; border-radius: 10px; width: 90%; max-width: 500px; text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); overflow: hidden; /* İçeriğin taşmasını engeller */ position: relative; display: flex; flex-direction: column; align-items: center; max-height: 80vh; /* Popup içeriğinin yüksekliğini sınırlayarak ekranın dışına taşmasını engeller */ box-sizing: border-box; /* padding ve border'ların genişlik içinde hesaplanmasını sağlar */ } /* Close Button */ .close-btn { position: absolute; top: -10px; right: 2px; font-size: 35px; cursor: pointer; } /* Popup Image */ .popup-content img { width: 100%; max-height: 450px; /* Görselin maksimum yüksekliği */ object-fit: contain; /* Görselin kutuya sığmasını sağlar */ border-radius: 10px; margin-bottom: 20px; max-width: 100%; /* Görselin genişliği %100 olacak */ } /* Popup Text */ .popup-content .popup-text { font-size: 18px; line-height: 1.6; color: #333; margin-top: 10px; text-align: center; } /* Tamam Butonu (MetinMat renkleri) */ .popup-content button { background: linear-gradient(to right, #1b4aa7, #1a50ad); /* MetinMat renkleri */ border: none; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-size: 16px; color: white; transition: background 0.3s ease; margin-top: 20px; } .popup-content button:hover { background: linear-gradient(to right, #1e5ad1, #2067e1); } @media only screen and (max-width: 768px) { #discord4 { display: none !important; } }