body {
    font-family: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background: #000; /* Arka planın siyah olarak görünmesi */
    position: relative; /* Pozisyon ayarı */
    overflow: hidden; /* Taşan içerikleri gizle */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/background.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: blur(0px); /* Yalnızca arka plana blur filtresi uygulanır */
    z-index: 0;
}

/* Popup stil */
.popup {
    display: none; /* Başlangıçta gizli */
    position: fixed;
    top: 43%; /* Yükseklik ortalaması için üstten %50 */
    left: 50%; /* Genişlik ortalaması için soldan %50 */
    transform: translate(-50%, -50%); /* Kendi genişlik ve yüksekliğinin yarısı kadar geri kaydır */
    width: 50%; /* Genişlik */
    height: 50%; /* Yükseklik */
    background-color: Darkblue !important; /* İç popup siyah zemin */
    color: white; /* Yazı rengi beyaz */
    border: 2px solid #ffffff;
    border-radius: 20px;
    z-index: 1000; /* Diğer içeriklerin üstünde görünmesi için */
    display: flex; /* Flexbox ile içerik hizalaması */
    justify-content: center; /* İçerikleri yatayda ortalar */
    align-items: center; /* İçerikleri dikeyde ortalar */
    padding: 20px; /* İçerik için dolgu */
    box-sizing: border-box; /* İçerik kutusunun boyutunu kontrol et */
    flex-direction: column; /* İçerikleri dikeyde hizala */
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    cursor: pointer;
    background-color: red;
    color: white;
    border: none;
    font-size: 16px;
}

/* Logo için yeni stil */
.logo {
    position: absolute; /* Mutlak konumlandırma */
    top: 20px; /* Sayfanın üstünden 20px mesafe */
    left: 20px; /* Sayfanın solundan 20px mesafe */
    width: auto; /* Genişlik otomatik ayar */
    height: 170px; /* Logo yüksekliği, istediğiniz gibi ayarlayın */
    z-index: 2; /* Üstte görünmesi için */
}

/* Mobil Uyum için */
@media (max-width: 768px) {
    .logo {
        display: none; /* Mobil cihazda logoyu gizle */
    }
}

.container {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    position: relative; 
    z-index: 1; /* Blur uygulamasının önünde olacak şekilde */
}

.header {
    margin-bottom: 30px;
}

.key-form {
    display: flex;
    flex-direction: column; /* Dikey olarak hizalama */
    align-items: center; /* Ortaya hizalama */
}

#keyInput {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ffffff;
    border-radius: 5px;
    width: 100%; /* Mobil uyumluluk için tam genişlik */
    max-width: 300px; /* Maksimum genişlik belirleme */
    margin-bottom: 10px; /* Aşağıda boşluk bırakma */
}

.submit-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #00C0FF; /* Koyu mavi */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%; /* Mobil uyumluluk için tam genişlik */
    max-width: 300px; /* Maksimum genişlik belirleme */
}

/* Input alanı */
input[type="text"] {
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ffffff;
    border-radius: 5px;
    width: calc(100% - 20px);
    margin: 10px 0;
}

/* Kod al buton stili */
.action-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #00C0FF; /* Koyu mavi */
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    width: 100%; /* Mobil uyumluluk için tam genişlik */
}

/* Alt köşe yazıları */
.footer {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    color: #ffffff;
}

.footer-left {
    float: left; /* Sol tarafa yasla */
}

.footer-right {
    float: right; /* Sağ tarafa yasla */
}

/* Responsive tasarım için */
@media (max-width: 768px) {
    .footer-left, .footer-right {
        float: none; /* Float kaldır */
        text-align: center; /* Ortaya hizala */
    }
}

.konturlu-yazi {
    color: DodgerBlue;
    font-size: 40px;
    font-weight: bold;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.konturlu-yazi2 {
    color: DodgerBlue;
    font-size: 20px;
    font-weight: bold;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

.konturlu-yazi3 {
    color: DodgerBlue;
    font-size: 15px;
    font-weight: bold;
    text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}

a {
    text-decoration: none;
}

.container {
    text-align: center;
    margin-top: 50px;
}

.header {
    margin-bottom: 20px;
}

.key-form {
    margin-top: 20px;
}

.submit-button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: DodgerBlue;
    color: white;
    border: 2px solid #ffffff;
    cursor: pointer;
}

.footer-right {
    margin-top: 40px;
}