/* 1. GENEL TİPOGRAFİ VE ARKA PLAN (Biçimsellik) */
body {
    background-color: #0b132b; /* Koyu uzay mavisi */
    color: #ffffff; /* Beyaz yazı */
    font-family: 'Segoe UI', Tahoma, sans-serif;
    margin: 0;
}


/* 2. ÜST BİLGİ VE MENÜ TASARIMI */
.ust-kisim {
    background-color: #1c2541; /* Biraz daha açık mavi */
    text-align: center;
    padding: 20px;
    border-bottom: 3px solid #ff4500; /* Mars turuncusu çizgi */
}


h1 {
    margin-top: 0;
    letter-spacing: 2px; /* Harfler arası boşluk */
    color: #ff4500;
}


/* MENÜ LİNKLERİ İŞLEVSELLİĞİ */
.menu a {
    color: white;
    text-decoration: none; /* Linklerin altındaki çizgiyi siler */
    margin: 0 15px; /* Yanlardan boşluk bırakır */
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s; /* Animasyon süresi */
}


/* Fare menünün üzerine gelince ne olsun? */
.menu a:hover {
    color: #ff4500; /* Yazı Mars rengine dönsün */
}


/* 3. ANA İÇERİK KUTUSU TASARIMI (Tasarım/Layout) */
.kutu {
    background-color: #1c2541;
    max-width: 700px; /* Kutunun maksimum genişliği */
    margin: 40px auto; /* Yukarıdan 40px boşluk bırakıp kutuyu ortalar */
    padding: 30px;
    border-radius: 10px; /* Köşeleri yuvarlar */
    box-shadow: 0px 0px 20px rgba(255, 69, 0, 0.2); /* Etrafına hafif turuncu ışık/gölge verir */
    text-align: center;
}


/* RESİMLERİN AYARI */
img {
    width: 90%; /* Resimler kutudan taşmasın */
    border-radius: 8px;
    margin-top: 20px;
    border: 2px solid #ff4500;
}


/* 4. BUTON TASARIMI */
.buton {
    display: inline-block;
    background-color: #ff4500;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    font-weight: bold;
}
.buton:hover {
    background-color: #cc3700;
}


/* 5. ALT BİLGİ (FOOTER) */
.alt-bilgi {
    text-align: center;
    padding: 20px;
    color: #5bc0be;
    font-size: 14px;
}