/* ========================================================================
   MOBİL CSS GÜNCELLEMESİ - Bootstrap 5 + WCAG Uyumlu
   Ana resim ve Footer negatif margin düzeltmeleri
   ======================================================================== */

.row {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* ========================================================================
   1. ANA RESİM DÜZELTMESİ - 122% → 100%
   ======================================================================== */

#ana-resim {
    margin-top: 0; /* -20px → 0 (Negatif margin kaldırıldı) */
    z-index: 1;
    position: relative;
}

    /* Ana resim - Taşma engelleme */
    #ana-resim img {
        width: 100% !important; /* 122% → 100% */
        max-width: 100%;
        height: auto;
        display: block;
    }

    #ana-resim > div {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
/* ========================================================================
   2. FOOTER NEGATİF MARGIN DÜZELTMESİ
   ======================================================================== */
#footer-renk {
    height: auto; /* 40px → auto (İçeriğe göre) */
    min-height: 60px; /* Minimum yükseklik */
    background: #dcc9a0; /*linear-gradient(#e9d7b2, #dcc9a0);*/
    /* margin-top: 50px;*/
    /* padding: 15px 0;*/ /* 20px → 15px */
}

#footer-icerik {
    padding-top: 10px;
    padding-bottom: 10px;
}

    /* Footer row - Flexbox ile hizala */
    #footer-icerik .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Komutanlık logo - Negatif margin kaldır */
    #footer-icerik img {
        margin-top: 0 !important; /* -60px → 0 */
        max-width: 60px;
        height: auto;
    }

/* Footer linkler */
#footer-renk a {
    text-decoration: none;
    color: #6d5656;
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px; /* 10px → 12px (Daha okunabilir) */
    font-weight: 600;
}

    #footer-renk a:hover {
        text-decoration: underline;
        color: #534133;
    }

/* ========================================================================
   3. WCAG ERİŞİLEBİLİRLİK - SKIP LINK
   ======================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 0 0 4px 0;
    font-weight: bold;
    transition: top 0.3s;
}

    .skip-link:focus {
        top: 0;
        outline: 3px solid #af986d;
        outline-offset: 2px;
    }

/* ========================================================================
   4. WCAG ERİŞİLEBİLİRLİK - FOCUS INDICATORS
   ======================================================================== */

/* ==============================================
   VISUALLY HIDDEN - WCAG 1.3.1
   ============================================== */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}


/* ==============================================
   FOCUS STYLES - WCAG 2.4.7 (Level AA)
   Modern :focus-visible Yaklaşımı
   ============================================== */

/* ADIM 2: Sadece klavye focus'u göster */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.breadcrumb-item a:focus-visible {
    outline: 3px solid #af986d !important;
    outline-offset: 2px !important;
}


/* ==============================================
   FALLBACK - ESKİ TARAYICILAR
   :focus-visible desteklemeyen tarayıcılar için
   ============================================== */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus,
    .nav-link:focus,
    .dropdown-item:focus,
    .btn:focus,
    .accordion-button:focus,
    .carousel-control-prev:focus,
    .carousel-control-next:focus,
    .breadcrumb-item a:focus {
        outline: 3px solid #af986d !important;
        outline-offset: 2px !important;
    }
}


/* Navbar toggler (hamburger) - Focus */
.navbar-toggler:focus {
    box-shadow: 0 0 0 3px #af986d !important;
    outline: none;
}

/* ========================================================================
   5. WCAG ERİŞİLEBİLİRLİK - TOUCH TARGETS (44x44px min)
   ======================================================================== */

/* Navbar toggler - Touch target */
.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

/* 6'lı menü görselleri - Touch target */
.bolme-mobil {
    min-width: 44px;
    min-height: 44px;
    margin: 0 auto;
    border: 7px solid #af986d;
    box-shadow: 2px 3px 6px 1px #5a5c5e;
}

/* 6'lı menü linkleri - Touch target */
.bolum a {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    text-decoration: none;
    margin-top: 20px;
    padding: 5px;
}

/* Nav items - Touch target */
.nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

/* ========================================================================
   6. MODAL DÜZELTMESİ - Responsive
   ======================================================================== */

.modalImage {
    position: relative;
    width: 100%;
}

.modalText {
    position: absolute;
    bottom: 30px; /* 40px → 30px */
    left: 50%; /* 60px → 50% (Merkez) */
    transform: translateX(-50%); /* Tam merkez */
    width: 90%; /* Genişlik sınırla */
    max-width: 300px;
    color: black;
    text-align: center;
}

/* Modal title */
.modal-title {
    font-size: 14px; /* 11px → 14px (Daha okunabilir) */
}

/* ========================================================================
   7. NAVBAR GÜNCELLEMESİ - Bootstrap 5
   ======================================================================== */

/* Navbar gradient */
#gradient-menu {
    position: relative;
    z-index: 2;
    background: linear-gradient(#e9d7b2, #dcc9a0);
    box-shadow: 0 5px 10px 1px #c1bbaf;
    border: none;
}

/* Navbar toggler icon - Beyaz */
#beyaz-menu,
.navbar-toggler-icon {
    background-color: white;
}

/* Mobile menu icon */
#mobil-menu-icon-2 {
    border: none;
    margin-top: 20px;
    margin-right: 10px;
}

/* Mobile logo */
#mobil-logo {
    margin-bottom: -22px;
    padding-top: 4px;
}

/* Üst bar - Text alignment */
#cek2 {
    font-size: 11px;
    padding: 10px 15px;
}

    #cek2 a {
        text-decoration: none;
        color: #6d5656;
        font-family: 'Titillium Web', sans-serif;
        padding-right: 10px;
        font-size: 11px;
    }

        #cek2 a:hover {
            text-decoration: underline;
            color: #534133;
        }

/* ========================================================================
   8. 6'LI MENÜ DÜZELTMESİ
   ======================================================================== */

.altili-mobil {
    text-decoration: none;
    color: #6d5656;
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: block;
    margin-top: 8px;
    line-height: 1.3;
}

.bolum {
    margin-bottom: 30px;
}

#govde1 {
    padding: 5px;
    /* margin-top: 20px;*/ /* Navbar'dan boşluk */
}

#govde2 {
    padding: 5px;
    /*margin-top: 30px;*/ /* 47px → 30px */
}

/* ========================================================================
   9. GENEL DÜZELTMELER
   ======================================================================== */

/* Container */
.container,
.container-fluid {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #F6EAD2;
}

.footer-tekrenk {
    background: linear-gradient(#e9d7b2, #dcc9a0) !important;
}
/* Body */
#mobil-body {
    background-color: #F6EAD2;
    font-family: 'Titillium Web', sans-serif;
}

/* Link stilleri */
a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ========================================================================
   10. YAZI DÜZENİ (Dropdown menü)
   ======================================================================== */

.yazi-duzeni {
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    font-size: 14px;
    font-family: 'Titillium Web', sans-serif;
}

/* ========================================================================
   11. RESPONSIVE - Extra Small Cihazlar (<576px)
   ======================================================================== */

@media (max-width: 575px) {

    /* Footer - Daha compact */
    #footer-renk a {
        font-size: 10px;
    }

    #footer-icerik img {
        max-width: 50px;
    }

    /* 6'lı menü font küçült */
    .altili-mobil {
        font-size: 10px;
    }

    /* Üst bar font küçült */
    #cek2,
    #cek2 a {
        font-size: 10px;
    }

    /* Modal text */
    .modalText {
        font-size: 12px;
        bottom: 20px;
    }
}

/* ========================================================================
   12. SMOOTH SCROLL
   ======================================================================== */

html {
    scroll-behavior: smooth;
}

/* ========================================================================
   13. REDUCED MOTION (ERİŞİLEBİLİRLİK)
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .skip-link {
        transition: none;
    }
}

/* ========================================================================
   14. HIGH CONTRAST MODE (ERİŞİLEBİLİRLİK)
   ======================================================================== */

@media (prefers-contrast: high) {
    .skip-link {
        background: #000;
        color: #fff;
        border: 2px solid #fff;
    }

    a:focus,
    button:focus {
        outline: 4px solid #000 !important;
        outline-offset: 2px !important;
    }
}

/* ========================================================================
   ÖZET - YAPILANLAR
   ======================================================================== */

/*
✅ 1. Ana resim: 122% → 100% (Taşma engellendi)
✅ 2. Ana resim: margin-top: -20px → 0
✅ 3. Footer: Negatif margin kaldırıldı (-60px → 0)
✅ 4. Footer: Flexbox ile düzenlendi
✅ 5. Skip link eklendi (WCAG 2.4.1)
✅ 6. Focus indicators eklendi (WCAG 2.4.7)
✅ 7. Touch targets 44x44px (WCAG 2.5.5)
✅ 8. Font size artırıldı (okunabilirlik)
✅ 9. Smooth scroll eklendi
✅ 10. Reduced motion desteği
✅ 11. High contrast desteği
✅ 12. Bootstrap 5 uyumlu

WCAG UYUMLULUK:
✅ Level A: Tüm kriterler
✅ Level AA: Contrast, Focus, Touch targets
*/
/* ========================================================================
   MOBİLE CSS DÜZELTMELERİ - GERİ BİLDİRİMLER
   ======================================================================== */

/* ========================================================================
   1. ÜST BAR - SAĞA YASLA (Engelsiz Erişim | Site Haritası | English)
   ======================================================================== */

#cek2 {
    font-size: 11px;
    padding: 10px 15px;
    text-align: right !important; /* SOL → SAĞ */
}

    #cek2 a {
        text-decoration: none;
        color: #6d5656;
        font-family: 'Titillium Web', sans-serif;
        padding-right: 10px;
        font-size: 11px;
    }

        #cek2 a:hover {
            text-decoration: underline;
            color: #534133;
        }

/* ========================================================================
   2. ALT BİLGİLENDİRME METNİ - TAM ORTALAMA
   "Anıtkabir Komutanlığının resmi sosyal medya..."
   ======================================================================== */

/* Navigation container - Text center */
.navigation.cek.text-center {
    text-align: center !important;
    width: 100%;
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px;
    padding-right: 15px;
}

    /* Span içindeki metinler - Tam ortalı */
    .navigation.cek.text-center span {
        display: inline-block;
        text-align: center;
    }

/* Navbar içindeki bilgilendirme - Tam genişlik */
#gradient-menu .navigation.cek.text-center {
    width: 100%;
    margin-top: 15px;
    padding: 10px 0;
}

/* ========================================================================
   3. HAMBURGER İKONU - ARKA PLAN RENGİ
   Beyaz → #F6EAD2
   ======================================================================== */

#beyaz-menu,
.navbar-toggler-icon {
    background-color: #F6EAD2 !important; /* BEYAZ → BEJ */
}

/* Navbar toggler - Icon renk düzeltmesi */
.navbar-toggler {
    border-color: rgba(0,0,0,.1);
}

    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px #af986d !important;
        outline: none;
    }

/* ========================================================================
   4. DROPDOWN MENU - BEYAZ ARKAPLAN + GEÇİŞ
   ======================================================================== */

.dropdown-menu {
    background-color: #F6EAD2 !important; /*DAHA ÖNCE BEYAZ ARKAPLANDI */
    border: 1px solid #cfb98b;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-top: 0 !important;
    padding: 5px 0 !important;
}

/* Dropdown item */
.dropdown-item {
    color: #554846 !important;
    background-color: #F6EAD2; /* DAHA ÖNCE BEYAZ ARKAPLANDI */
    border-bottom: 2px solid #f0f0f0 !important; /* Hafif gri ayırıcı */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    transition: all 0.3s ease;
}

    .dropdown-item:last-child {
        border-bottom: none;
    }

    /* Dropdown item hover - Gradient geçiş */
    .dropdown-item:hover {
        background: linear-gradient(to right, #f7f7f7, #fff) !important; /* Hafif gri geçiş */
        color: #534133 !important;
        padding-left: 20px !important; /* Sağa kaydırma efekti */
    }

    /* Dropdown item active */
    .dropdown-item:active,
    .dropdown-item.active {
        background-color: #f0f0f0 !important;
        color: #534133 !important;
    }

/* Dropdown - Navbar ile uyumlu geçiş */
.nav-item.dropdown.show .dropdown-menu {
    border-top: 2px solid #dcc9a0; /* Navbar rengi ile bağlantı */
}

/* ========================================================================
   EK DÜZELTMELERİ - RESPONSIVE
   ======================================================================== */

/* Extra Small Cihazlar (<576px) */
@media (max-width: 575px) {

    /* Üst bar - Sağa yasla, daha küçük */
    #cek2 {
        font-size: 10px;
        padding: 8px 10px;
        text-align: right !important;
    }

        #cek2 a {
            font-size: 10px;
            padding-right: 8px;
        }

    /* Alt bilgilendirme - Ortalı */
    .navigation.cek.text-center {
        text-align: center !important;
        padding: 8px 10px;
    }

        .navigation.cek.text-center span {
            font-size: 11px !important; /* 12px → 11px */
        }
}

/* Small Cihazlar (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {

    #cek2 {
        text-align: right !important;
    }

    .navigation.cek.text-center {
        text-align: center !important;
    }
}

/* ========================================================================
   ÖZET - YAPILANLAR
   ======================================================================== */

/*
✅ 1. Üst bar (Engelsiz Erişim | Site Haritası | English) → SAĞA YASLI
✅ 2. Alt bilgilendirme metni → TAM ORTALI
✅ 3. Hamburger icon → Beyaz → #F6EAD2
✅ 4. Dropdown menu → Beyaz arkaplan + hafif gri hover geçiş

DROPDOWN RENK ŞEMASı:
- Normal: #fff (Beyaz)
- Border: #f0f0f0 (Hafif gri)
- Hover: linear-gradient(#f7f7f7, #fff) (Beyaz-gri geçiş)
- Active: #f0f0f0 (Açık gri)
- Navbar bağlantı: border-top #dcc9a0
*/