@media(min-width:320px) and (max-width:480.98px) {
    .logo {
        width: 14rem;
    }

    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-none {
        display: none;
    }

    #heroSliderMobile img {
        height: 30rem;
        object-fit: cover;

    }

    .title-area h2 {
        font-size: 1.85rem;
    }

    .title-area p {
        font-size: .9rem;
    }

    .donat-area,
    .aboutus-area,
    .references-area {
        margin-top: 3rem;
    }

    .aboutus-area .col-lg-5 {
        display: none;
    }

    .splide__arrows {
        opacity: 0;
    }

    .footer-top h2 {
        font-size: 2rem;
    }

    .footer-top {
        padding: 3rem;
        border-radius: 2rem;
    }

    .footer-top .col-md-6:nth-child(2) {
        display: none;
    }

    .footer-logo {
        width: 12rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .site-footer small {
        text-align: center;
    }

    .site-footer .col-lg-2,
    .site-footer .col-lg-3 {
        text-align: center;
    }
}

@media(min-width:481px) and (max-width:575.98px) {

    .footer-logo {
        width: 12rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .logo {
        width: 14rem;
    }

    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
    }

    .mobile-none {
        display: none;
    }

    #heroSliderMobile img {
        height: 30rem;
        object-fit: cover;
    }

    .title-area h2 {
        font-size: 1.85rem;
    }

    .title-area p {
        font-size: .9rem;
    }

    .donat-area,
    .aboutus-area,
    .references-area {
        margin-top: 3rem;
    }

    .aboutus-area .col-lg-5 {
        display: none;
    }

    .splide__arrows {
        opacity: 0;
    }

    .footer-top h2 {
        font-size: 2rem;
    }

    .footer-top {
        padding: 3rem;
        border-radius: 2rem;
    }

    .footer-top .col-md-6:nth-child(2) {
        display: none;
    }

    .site-footer img {
        width: 15rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .site-footer small {
        text-align: center;
    }

    .site-footer .col-lg-2,
    .site-footer .col-lg-3 {
        text-align: center;
    }
}

@media(min-width:576px) and (max-width:767.98px) {
    .footer-logo {
        width: 12rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #heroSliderMobile img {
        height: 30rem;
        object-fit: cover;
    }

    .logo {
        width: 16rem;
    }

    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
    }

    .donat-area,
    .aboutus-area,
    .references-area {
        margin-top: 3.5rem;
    }

    .aboutus-area .col-lg-5 {
        display: none;
    }

    .splide__arrows {
        opacity: 0;
    }

    .footer-top h2 {
        font-size: 2rem;
    }

    .footer-top {
        padding: 3rem;
        border-radius: 2rem;
    }

    .footer-top .col-md-6:nth-child(2) {
        display: none;
    }

    .site-footer img {
        width: 18rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    .site-footer small {
        text-align: center;
    }

    .site-footer .col-lg-2,
    .site-footer .col-lg-3 {
        text-align: center;
    }
}

@media(min-width:768px) and (max-width:991.98px) {
    .site-footer .col-1 {
        display: none;
    }

    .site-footer ul li a,
    .site-footer ul li p {
        font-size: .9rem;
    }

    .footer-social a {
        font-size: 1.1rem;
    }

    .site-footer .col-lg-3,
    .site-footer .col-lg-2 {
        width: 25%;
    }

    .footer-logo {
        width: 9rem;
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    #heroSliderDesktop img {
        height: 16rem;
    }

    .navbar-toggler {
        border: none !important;
        box-shadow: none !important;
    }

    .donat-area,
    .aboutus-area,
    .references-area {
        margin-top: 3.5rem;
    }

    .aboutus-area .col-lg-5 {
        display: none;
    }

    .splide__arrows {
        opacity: 0;
    }

    .footer-top h2 {
        font-size: 2rem;
    }

    .footer-top {
        padding: 3rem 4rem;
    }
}

@media(min-width:992px) and (max-width:1199.98px) {
    .logo {
        width: 13rem;
    }

    .nav-item .nav-link {
        font-size: .9rem;
    }

    .nav-item .nav-link {
        margin: 0;
    }

    #heroSliderDesktop img {
        height: 20rem;
    }

    .aboutus-area p {
        font-size: .9rem;
    }

    .aboutus-area .col-1 {
        display: none;
    }

    .aboutus-area .col-lg-5 {
        width: 50%;
    }

    .contact-box a,
    .contact-box p {
        font-size: .9rem;
    }
}

@media(min-width:1200px) and (max-width:1399.98px) {
    .logo {
        width: 14.5rem;
    }

    #heroSliderDesktop img {
        height: 24rem;
    }
}

@media(min-width:1400px) and (max-width:1599.98px) {
    .logo {
        width: 14.5rem;
    }

    #heroSliderDesktop img {
        height: 29rem;
    }
}

@media(min-width:1600px) and (max-width:1799.98px) {

    #heroSliderDesktop img {
        height: 32rem;
    }
}







/* Mobil offcanvas tarzı panel (HTML'i değiştirmeden) */
@media (max-width: 991.98px) {

    /* Bootstrap'in collapse davranışını devre dışı bırakıyoruz; görünürlüğü biz yöneteceğiz */
    .navbar .collapse {
        display: block !important;
    }

    .dropdown-menu img {
        display: none;
    }

    #mainNav {
        position: fixed;
        top: 0;
        left: 0;
        width: min(95vw, 375px);
        height: 100dvh;
        /* mobil güvenli yükseklik; destek yoksa 100vh kullanır */
        background: #fff;
        /* Dotted pattern (çok hafif) */
        background-image:
            radial-gradient(#e9eef5 1px, transparent 1px),
            linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .85));
        background-size: 12px 12px, auto;
        background-position: 0 0, 0 0;

        box-shadow: 2px 0 18px rgba(0, 0, 0, .15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .35s ease;
        z-index: 99999999 !important;
        padding: 0 1rem 1rem;
        /* üst başlık için padding'i JS ile ekleyeceğiz */
        will-change: transform;
    }

    #mainNav.active {
        transform: translateX(0);
    }

    /* Arkaplan karartma */
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .4);
        backdrop-filter: blur(2px);
        display: none;
    }

    .mobile-overlay.show {
        display: block;
    }

    /* Panel içinde mobil başlık (logo + kapat) */
    #mainNav .mobile-nav-head {
        position: sticky;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .85rem .25rem 1rem .25rem;
        background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .9));
        backdrop-filter: blur(4px);
        border-bottom: 1px solid #eef2f7;
        z-index: 2;
    }

    #mainNav .mobile-nav-head img {
        max-height: 50px;
        width: auto;
    }

    #mainNav .mobile-close {
        border: 0;
        background: transparent;
        font-size: 1.6rem;
        line-height: 1;
        color: #222;
    }

    /* Nav item’lar dikey listelensin */
    #mainNav .navbar-nav {
        padding-top: .5rem;
    }

    #mainNav .nav-link {
        display: block;
        padding: .7rem 0;
        border-bottom: 1px solid #f1f3f6;
        color: #1f2a37;
    }

    /* Dropdown’ları akordeon gibi gösterelim */
    #mainNav .dropdown-menu {
        position: static !important;
        float: none;
        display: none;
        margin: 0 0 .5rem 0;
        padding: .25rem 0 .75rem 0;
        border: 0 !important;
        box-shadow: none !important;
        background: transparent;
    }

    #mainNav .dropdown.show>.dropdown-menu {
        display: block;
    }

    #mainNav .dropdown-item {
        padding: .45rem 0 .45rem .75rem;
        border-left: 2px solid #e9eef5;
        color: #374151;
        font-size: .9rem;
    }

    /* Mega menu görselleri mobilde daralt */
    .mega-menu .container {
        padding: 0 !important;
    }

    .mega-menu img {
        max-height: 140px;
        object-fit: cover;
    }
}