/* GENEL AYARLAR */
        body {
            font-family: 'Times New Roman', serif;
            margin: 0;
            padding: 0;
            background-image: url('arkaplan1.png');
            /*background-attachment: fixed; foto tek defa ve sabit kalır, satırlar bunun üzerinde akar*/
            color: #333;
        }

        .main-wrapper {
            max-width: 1200px;
            margin: 20px auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 20px;
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* 1. ÜST ALAN: BAŞLIK VE ATATÜRK */
        header {
            width: 100%;
            height: 150px;
            background-image: url('baslik3.png');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .ataturk-header-img {
            position: absolute;
            left: 50px;
            top: 40px;
            height: 100px;
            width: auto;
        }

        .city-title {
            color: #FF0000;
            font-size: 60pt;
            font-weight: bold;
            text-shadow: 2px 2px 4px #fff;
            margin: 0;
           position: absolute;
            left: center;
            top: 40px;


        }

        /* 2. BUTONLAR: MASAÜSTÜ AYARLARI */
        .nav-buttons {
            position: absolute;
            right: 30px;
            top: 60px;
            display: flex;
            gap: 20px;
            z-index: 1000;
            align-items: flex-start;
        }

        .nav-item {
            text-align: center;
            text-decoration: none;
            color: #000080;
            font-size: 11px;
            font-weight: bold;
        }

        .nav-item img {
            display: block;
            margin: 0 auto 3px;
            width: 35px;
            height: auto;
        }

        /* Paylaş Grubu Ayarı */
        .share-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .share-icons {
            display: flex;
            gap: 8px;
            margin-bottom: 3px;
        }

        .share-icons img {
            width: 32px; /* İkonlar yan yanayken biraz daha kibar dursun */
            height: auto;
        }

        /* 3. HARİTA */
        /*.map-container { margin-bottom: 20px; }
        .map-container iframe { width: 100%; height: 400px; border: 2px solid #ddd; } */

.map-container { 
    margin-bottom: 20px; 
    display: flex;          /* İçindeki öğeyi esnek kutu yapar */
    justify-content: center; /* Yatayda ortalar */
}

.map-container iframe { 
    width: 60%;             /* Genişliği buradan ayarlayabilirsin (Örn: %50 veya 500px) */
    height: 300px;          /* Yüksekliği biraz azalttık */
    border: 2px solid #ddd; 
}


        /* 4. TARİH LİNKLERİ */
        .date-links {
            background: rgba(255, 255, 255, 0.5);
           /*background: #fdfdfd; (arka fonu kapatmak için)*/
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .date-links ul { 
            list-style: none; 
            padding: 0; 
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .date-links li { width: 100%; max-width: 600px; }

        .date-links a { 
            display: block;
            text-decoration: none; 
            color: #000066; 
            font-size: 1.1rem; 
            font-weight: bold;
            padding: 12px 20px;
            background: #f0f0f0;
            border-left: 5px solid #FF0000;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        

        .date-links a::before { content: '*'; color: #FF0000; margin-right: 10px }

        .date-links a:hover { 
            background: #FF0000; 
            color: #fff; 
            transform: translateX(10px);
        }

        /* 5. METİNLER VE FOTOĞRAFLAR */
        .content-area { line-height: 1; text-align: justify; font-size: 1.1rem; }
        .section-title {
            text-align: center;
            color: #000066;
            border-top: 2px solid #eee;
            padding-top: 15px;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .in-text-img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 10px auto;
            border: 5px solid #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .photo-gallery { margin-top: 40px; text-align: center; }
        .sources { font-size: 0.9rem; border-top: 1px solid #ccc; padding-top: 20px; margin-top: 20px; }
        
        .alt-iletisim { margin-top: 0px; text-align: center; }
.alt-iletisim img { width: 65px; }

/* Görsellerin Mobilde Taşmasını Engelleyen Kesin Kod */
.content-area img {
    max-width: 100% !important; /* Kutusundan asla dışarı çıkamaz */
    height: auto !important;    /* Oranı bozmadan küçülür */
    display: block !important;
    margin: 15px auto !important; /* Otomatik ortalar */
    border: 5px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* align="center" div'lerinin mobilde sorun çıkarmaması için */
div[align="center"] {
    width: 100% !important;
    overflow: hidden;
}
  .sources p {
    line-height: 0.75;
}  
        /* MOBİL UYUMLULUK */
@media only screen and (max-width: 768px) {
    /* 1. Başlık ve Atatürk Görseli Düzenlemesi */
    header { height: 100px; }
    .city-title { 
        font-size: 30pt; 
        top: -5px; 
        position: relative; /* Mobilde ortalamayı kolaylaştırır */
        text-align: center;
        width: 100%;
        left: 0;
    }
    .ataturk-header-img { 
        height: 45px; 
        top: 30px; 
        left: 20px; 
    }

    /* 2. Harita Düzenlemesi (Mobilde daha izlenebilir olması için) */
    .map-container iframe { 
        width: 65%; 
        height: 100px; 
    }

    /* 3. Butonlar (Sayfa Altındaki Ana Sayfa ve Paylaş Kısmı) */
    .nav-buttons {
        position: static;
        display: flex;
        flex-direction: row; /* Yan yana diz */
        justify-content: space-around; /* Eşit boşluk bırak */
        align-items: center;
        border-top: 1px solid #ddd;
        margin-top: 20px;
        padding: 15px 0;
        background: #f9f9f9;
        width: 100%;
    }

    /* 4. İçerik Metinleri */
    .content-area { 
        font-size: 1rem; 
        padding: 0 5px; 
    }
    
    .main-wrapper {
        margin: 5px;
        padding: 10px;
    }
    .content-area img {
        border-width: 2px !important;
        width: 95% !important;
    }
    .sources {
    padding: 15px;
    background-color: #f9f9f9; /* Hafif bir arka plan belirginleştirir */
    border-top: 1px solid #ddd;
    
    /* Taşmayı engelleyen kritik komutlar */
    overflow-wrap: break-word;  /* Uzun kelimeleri alt satıra böler */
    word-wrap: break-word;      /* Eski tarayıcılar için destek */
    word-break: break-word;     /* Kelime bazlı kırılma sağlar */
}

.sources p {
    font-size: 14px;            /* Mobilde daha okunabilir bir boyut */
    line-height: 1.5;           /* Satır aralığını açar */
    margin-bottom: 8px;
    text-align: left;           /* Kaynakçada justify (iki yana yasla) önerilmez */
}

.sources a {
    /* Özellikle linklerin taşmasını engellemek için */
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;    /* Çok uzunsa sonuna üç nokta koyar veya alt satıra atar */
    white-space: normal;        /* Linkin tek satırda kalmaya zorlanmasını engeller */
    word-break: break-all;      /* Linkleri harf harf bölebilir (taşmayı kesin durdurur) */
}
.date-links ul {
        display: flex;
        flex-wrap: wrap; /* Sığmayanları alt satıra atar */
        justify-content: center;
        padding: 0;
        gap: 15px; /* Butonlar arasındaki boşluğu daralttık */
    }

    .date-links li {
        width: 100%; /* Her link bir satırı kaplasın ama sığmazsa bölmesin */
    }

    .date-links a {
        font-size: 15px; /* Yazı boyutunu mobilde küçülttük */
        padding: 10px 10px; /* Buton iç boşluğunu daralttık */
        white-space: nowrap; /* Yazının satır içinde bölünmesini (kırılmasını) engeller */
        overflow: hidden;
        text-overflow: clip; /* Eğer çok çok dar bir ekransa taşanı keser ama bölmez */
        display: block;
        text-align: center;
    }
    
      
    }