/*=============================================================================================================
    MEDYA SORGULARI (RESPONSIVE DÜZENLEME)
    Masaüstü İlk (Desktop First) yaklaşımı kullanılmıştır.
===============================================================================================================*/
@media (min-width: 768px) {
    #anasayfa {
        height: 820px; /* Masaüstü Yüksekliği */

    }
    .menu-toggle, .arama {
        display: none !important;
    }
}

@media (max-width: 1024px) {
   
    /* Bölümler: 3 yerine 2 sütuna düşürüldü */
    .grid111 { /* Index.cshtml'deki kapsayıcı */
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 auto;
    }

    #section-header h2 {
        text-align: center;
    }

    #hakkinda ul, #uzmanliklar ul, #sektorler ul, #yetkinlikler ul {
        padding-left: 0;
        margin: 0 auto;
        max-width: 95%; /* Kapsayıcı genişliğinin bir yüzdesini kullan */
    }

    #hakkinda li, #uzmanliklar li, #sektorler li, #yetkinlikler li {
        max-width: 100%; /* UL genişliğini kullan */
        width: 40vw;
        text-align: left; /* Madde işaretlerinin düzgün başlaması için */
        padding-left: 5px; /* Opsiyonel: Hafif iç dolgu */
        margin-bottom: 5px; /* Opsiyonel: Öğeler arasına biraz boşluk koy */
    }
    .navbar {
        max-width: 100vw;
        width: 100%;
    }
    .hero-section {
        background: url('../images/main-image-1500x1500.jpg') no-repeat center;
        
    }
    .hero-section h1 {
        padding:0;
        position: absolute;
        top: 20vh;
    }
    .hero-section img {
        width: 70vw;
        height: auto;

    }
    #logogrsl img {
        width: 10vw;
        height: auto;
        
        
    }
    #sss h1 {
        margin: 0 auto;
        padding: 0;
        font-size: 6vw;
    }

    #sss h3 {
        font-size: 3vw;
    }

}

/* Tablet ve Küçük Masaüstü Düzeni (992px ve altı) */
@media (max-width: 992px) {
    .hero-section {
        background: url('../images/main-image-990x330.jpg') no-repeat center ;        
    }
    .menu {
        width: 100%;
    }
        .menu a {
            font-weight: 600;
            display: inline-block;
            width: auto;
            margin-right: 1vw;
            padding: 10;
        }
    .menu a:hover {
        font-weight: 600;
        color: #48452a;
        background-color: rgb(178,136,1);
        margin-right: 1vw;
        padding: 10; /* 10px 5px olan değeri normal haliyle (10px 0px) aynı yapın */
        border-radius: 5px;
    }
   
}

/* Tablet ve Mobil Yatay Düzeni (768px ve altı) */
@media (max-width: 768px) {
    .section {
        font-size: 1em;
    }
    #logogrsl img {
        width: 13vw;
        height: auto;
    }

    .arama {
        display: block; /* Change from 'none' to 'block' */
        visibility: visible; /* Override the style.css hidden state */
        
    }
    .hero-section h1 {
        position: absolute;
        top: 10vh;
        font-size: 6vw;
    }
    .grid11 {
        display: block;
        width: 90%;
        margin: 0 auto;
        padding: 0;
        
    }
    /* Make the search button visible */
    .arama {
        display: block !important;
        visibility: visible !important;
        position: fixed;
        left: 50%;
        top: 20px;
        z-index: 1001;
    }

    /* Make the hamburger menu visible */
    .menu-toggle {
        display: block !important;
        position: absolute;
        top: 10%;
        right: 10px; /* Adjusted to not overlap with arama button */
    }

    /* Ensure the main horizontal menu is hidden until toggled */
    .menu {
        display: none;
    }

        /* Styling for the active mobile menu */
        .menu.active {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            font-size: 4vw; /* Your requested font size */
            position: absolute;
            top: 125px; /* Matches navbar height  */
            left: 0;
            width: 100%;
            background-color: rgba(48, 53, 41, 0.95);
            z-index: 1500;
            padding: 10px;
        }

            .menu.active a {
                display: flex !important;
                align-items: center;
                justify-content: center;
                gap: 10px;
                font-size: 3vw; /* Ensures font size takes effect  */
                width: 30vw;
                padding: 10px;
                text-align: center;
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 5px;
                margin-bottom: 5px;
            }
   
    .border {
        border: none;
    }
    .gray {
        background-color: transparent;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    #sss .konular li {
        align-items: center;
    }
    #sss .konular a {
        font-size: 3vw;
        padding: 10px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        justify-content: space-around;
    }
    
    /* --- Mobile-Friendly Design for Navbar/Sections --- */

    .foot-grid {
        display: flex;
    }
    
    .answer-content {
        max-height: 150px; /* Mobil cihazlar için daha kısa kaydırıcı yüksekliği */
    }
}

/* Orta ve Küçük Mobil Düzeni (600px ve altı) */
@media (max-width: 600px) {
    .section {
        font-size: 3vw;
    }
    
    .hero-section {
        background: url('../images/main-image-990x330.jpg') no-repeat center;
        margin-top: 0px;
    }
        .hero-section h1 {
            top: 7vh;
            
        }

    #logogrsl img {
        height: 90px; /* Logo Yüksekliği */
        width: auto;
    }
    #hakkinda ul, #uzmanliklar ul, #sektorler ul, #yetkinlikler ul {
        list-style-position: inside;
        padding-left: 0; /*iç dolguyu kaldır*/
        margin: 0 auto; /*içeriği ortala*/
        max-width: 90%; /*Kapsayıcı genişliğin yüzdesi*/
    }
    #hakkinda li, #uzmanliklar li, #sektorler li, #yetkinlikler li {
        max-width: 100%; /*UL genişliği*/
        width: 100%;
        text-align: left;
        padding-left: 5px;
        margin-bottom: 5px;
    }
    #vekaletname {
        overflow-y: scroll;
    }
  
    /* Footer: Bilgileri dikey sırala */
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-info, .footer-links, .footer-social {
        margin-bottom: 20px;
    }

        .footer-links ul {
            text-align: center;
        }

   
    #sss .konular a {
        font-size: 2vw;
    }
}


/* Çok Küçük Mobil Düzeni (420px ve altı) */
@media (max-width: 420px) {
    /* Logo boyutu (daha küçük cihazlar için) */
    .hero-section {
        background: url('../images/main-image-400x400.jpg') no-repeat center;
        max-width: 100vw;
        height: auto;
        overflow: unset;
    }
    
    
    h2 {
        font-size: 6vw;
    }
    h3 {
        font-size: 4vw;
    }
    

    
}

@media screen and (min-width: 320px) and (max-width:768px) {
    .arama {
        position: fixed;
        visibility: visible;
        margin: 0 auto;
        padding-top: 0.5rem;
        font-size: 0.8rem;
        font-weight: 200;
    }

        .arama button {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: none;
            outline: none;
            background-color: rgba(46,102,48,0.9);
            color: white;
            cursor: pointer;
            box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
        }

    .randevu {
        font-size: 0.57rem;
        font-weight: 300;
        margin: auto;
        padding: 0;
        display: block;
    }
}
/* 5. 320px ve altı */
@media (max-width: 320px) {
    .hero-section {
        background: url('../images/main-image-227x227.jpg') no-repeat center;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 1rem;
        text-align: center;
        padding-bottom: 10px;
    }

    #section-header i {
        font-size: 1rem;
    }
    #section-header h2 {
    margin-bottom: 0;
    }
    #logogrsl img {
        width: 25vw;
        height: auto; /* Logo Yüksekliği */
    }
    .arama {
        padding-right: 0;
        
    }
    /* Genel Grid Container Stili */
    .content-grid {
        display: grid;
        gap: 30px; /* Sütunlar ve satırlar arasındaki boşluk */
        margin-top: 20px;
    }
    .foot-grid {
        display: block;
    }
    #sss .grid {
        display: grid;
        gap: 30px;
        grid-template-columns: 1fr 1fr; /* Masaüstünde 2 eşit sütun (1fr = 1 parçalık alan) */
        align-items: start; /* Sütun içeriklerini yukarı hizalar */
    }
    
    /* 2. UZMANLIK ALANLARI BÖLÜMÜ GRID STİLİ (3 SÜTUN) */

    /* .uzmanlik-grid {
        Tüm 6 uzmanlık alanını tek bir grid container'da topla
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(3, 1fr); /* Masaüstünde 3 eşit sütun 
        text-align: center;
        border:2px solid white;
    }
    .uzmanlik-item {
        padding: 10px;
        border: 1px solid white;
        border-radius: 8px;
        /* Uzmanlık kartlarının eşit yükseklikte olmasını sağlar 
    }
    .uzmanlik-item ul {
    text-align: left;  İçindeki listeyi tekrar sola yasla 
    }*/
}