/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('background.jpg'); /* Arka plan resmi */
    background-size: cover; /* Resmi ekranı tamamen kaplayacak şekilde ayarla */
    background-position: center; /* Resmi ortala */
    background-repeat: no-repeat; /* Resmin tekrarlamasını önle */
    color: #c0baba;
}
/* General Styles */


/* Header Style */
.header {
    text-align: center;
    padding: 20px;
}

.hat {
    max-width: 100px;
}

/* Content Area */
.content {
    padding: 20px;
    text-align: center;
}

/* Responsive List */
ol {
    padding-left: 20px;
    text-align: left;
}

ol li {
    margin-bottom: 10px;
}

/* Container */
.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #c2c2c2;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn {
    display: block;
    width: 80%;
    max-width: 300px;
    padding: 15px;
    margin: 10px auto;
    background-color: #2b2b33;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #8f2d24;
}

/* Link */
a {
    color: #efefef;
    /* text-decoration: none; */
    /* margin-top: 20px; */
    /* display: block; */
}

a:hover {
    text-decoration: underline;
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .hat {
        max-width: 80px;
    }

    h1 {
        font-size: 1.5em;
    }

    ol {
        font-size: 1em;
    }

    .btn {
        padding: 12px;
    }
    
    
}

/* Footer Styles */
.footer {
    background-color: #333; /* Koyu arka plan rengi */
    color: #fff; /* Beyaz metin rengi */
    padding: 15px 0; /* Üst ve alt kısımlara padding */
    text-align: center; /* Metni ortalar */
    /* position: fixed; */ /* Footer'ı ekranın altına sabitler */
    width: 100%; /* Footer genişliğini tam sayfa yapar */
    bottom: 0; /* Footer'ın ekranın en altında olmasını sağlar */
    z-index: 1000; /* Footer'ın her zaman üstte kalmasını sağlar */
}

.footer a {
    color: #fff; /* Beyaz bağlantı rengi */
    margin: 0 15px; /* Bağlantılar arasında boşluk */
    text-decoration: none; /* Alt çizgiyi kaldırır */
    font-weight: bold; /* Kalın metin */
}

.footer a:hover {
    color: #ffcc00; /* Üzerine gelince renk değişimi */
    text-decoration: underline; /* Üzerine gelince alt çizgi */
}