/* XS - Mobil küçük */
@media (min-width: 300px) and (max-width: 449px) {
 
    .navCapsule{
        padding: 0 1rem;
        margin: 18px 0;
        justify-content: center;
    }
    .navCapsule ul, .search{
        display: none;
    }
    .parent {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-column-gap:  0rem;
        grid-row-gap: 2rem;
        grid-auto-rows: auto; 
        aspect-ratio: 1 / 1;
        }
        
        .div1 { grid-area: 1 / 1 / 2 / 2; height: 500px;}
        .div2 { grid-area: 2 / 1 / 3 / 2; height: 180px;}
        .div3 { grid-area: 3 / 1 / 4 / 2; height: 260px;}
        .div4 { grid-area: 4 / 1 / 5 / 2; height: 260px;}
        .div5 { grid-area: 5 / 1 / 6 / 2; height: 260px;}
 
        .secondaryItem{
            width: 100%; 
        } 
        .dd{
            display: flex;
            justify-content: center;
            overflow: hidden;
            box-sizing: border-box;
            
        }
        .slider{
            height: auto;
        }
        .div1{
            height: 360px;
        }
        
        .secondaryItemTitle, .trendsTitle{
            font-size: 26px;
            line-height: 104%;
        }
        .heroWritersCapsule{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 16px;
            grid-row-gap: 16px;
            }
            
            .hwc1 { grid-area: 1 / 1 / 2 / 2; }
            .hwc2 { grid-area: 2 / 1 / 3 / 2; }
            .hwc3 { grid-area: 3 / 1 / 4 / 2; }

        .postList{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-column-gap: 2rem;
            grid-row-gap: 2rem;
        }
            .postIt1 { grid-area: 1 / 1 / 2 / 2; }
            .postIt2 { grid-area: 2 / 1 / 3 / 2; }
            .postIt3 { grid-area: 3 / 1 / 4 / 2; }
            .postListItem{
                width: 100%;
            }
            .postListItemTitle{
                font-size: 26px;
                line-height: 104%;
            }
        .singleCapsule {
            padding: 0 1rem;
        }
        .singleDetails .breadcrumb li{
            font-size: .8rem;
        }
        .singleDetails .breadcrumb li i{
            margin-left: .1rem;
        }
        .singleDetails .postDate{
            font-size: .8rem;
        }
        .inlineRelatedPost a{
            flex-direction: column;
        }
        .inlineRelatedPost img{
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
        }
        .inlineRelatedPostDetails{
            margin:1rem 0 0 0;
            width: 100%;
        }
        .quotation{
            padding: 1rem 2rem;
        }
        .quotation i{
            left: -1.4rem;
        }
        .newsTellerIn{
            display: block;
            box-sizing: border-box;
            padding: 1.2rem;
        }
        .newsTellerIn .right{
            width: 100%; 
            margin-top: 2rem;
        }
        .newsTellerIn .left{
            width: 100%; 
        }
        .newstellerTitle{
            font-size: 3rem;
        }
        .emailElement{
            width: 100%;
        }
        .emailElement input{
            width: 100%;
        }
        .capsule{
            padding: 0 1rem;
        }
        .writerCard p, .categoryTitle p{
            max-width: 100%;
        }
        .verticalPostListItem{
            display: flex;
            flex-direction: column;
        }
        .verticalPostListItem .postListItemImage{
            width: 100%;
            display: block;
        }
        .verticalPostListItem .postListItemDetails{
            margin-left: 0px;
            width: 100%;
        }
        .footerIn{
            display:flex;
            align-items: start;
        }
        .footerNav{
            display: block;
            margin-bottom: 0px;
        }
        .footerNavElement{
            display: flex;
            flex-direction: column;
            align-items: start;
            margin: 0 .4rem 2rem 0;
            font-size: 1.2rem;
        }
        .footerNavElement:last-child{
            margin-bottom: 0px;
        }
        .footerBottom{
            display: block;
            box-sizing: border-box;
        }
        .footerBottom ul{
            display: block;
        }
        .footerBottom li{
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
}   /* ~0–384px (0–24rem) */

/* SM - Mobil */
@media (min-width: 450px) and (max-width: 1082px) {
    .navCapsule{
        padding: 0 1rem;
        margin: 18px 0;
        justify-content: center;
    }
    .navCapsule ul, .search{
        display: none;
    }
    .parent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 2rem;
        grid-row-gap: 2rem; 
        }
        
        .div1 { grid-area: 1 / 1 / 3 / 3; }
        .div2 { grid-area: 3 / 1 / 4 / 2; }
        .div3 { grid-area: 3 / 2 / 4 / 3; }
        .div4 { grid-area: 4 / 1 / 5 / 2; }
        .div5 { grid-area: 4 / 2 / 5 / 3; }
        .slider{
            height: auto;
            width: 100%;
        }
        .secondaryItem{
            width: 100%;
        } 
        .div1{
            height: 360px;
        }
        .heroWritersCapsule{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 16px;
            grid-row-gap: 16px;
            }
            
            .hwc1 { grid-area: 1 / 1 / 2 / 2; }
            .hwc2 { grid-area: 1 / 2 / 2 / 3; }
            .hwc3 { grid-area: 2 / 1 / 3 / 3; }

        .postListCapsule .capsule{
            padding: 0 1rem;
        }
        .postList{
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 2rem;
            grid-row-gap: 2rem;
        }
            .postIt1 { grid-area: 1 / 1 / 2 / 2; }
            .postIt2 { grid-area: 1 / 2 / 2 / 3; }
            .postIt3 { grid-area: 2 / 1 / 3 / 2; }
            .postListItem{
                width: 100%;
            }
        .widgetCapsule{
            padding: 0 1rem;
        }
        .newsTellerIn{
            display: block;
            box-sizing: border-box;
        }
        .newsTellerIn .right{
            width: 100%; 
            margin-top: 2rem;
        }
        .newsTellerIn .left{
            width: 100%; 
        }
        .emailElement{
            width: 100%;
        }
        .emailElement input{
            width: 100%;
        }
        .capsule{
            padding: 0 1rem;
        }
        .writerCard p, .categoryTitle p{
            max-width: 100%;
        }
        .verticalPostListItem .postListItemImage{
            width: 40%;
        }
        .verticalPostListItem .postListItemDetails{
            margin-left: 1rem;
            width: 60%;
        }
        .footerIn{
            display:flex;
            align-items: start;
        }
        .footerNav{
            display: block;
            margin-bottom: 0px;
        }
        .footerNavElement{
            display: flex;
            flex-direction: column;
            align-items: start;
            margin: 0 .4rem 2rem 0;
            font-size: 1.2rem;
        }
        .footerNavElement:last-child{
            margin-bottom: 0px;
        }
        .footerBottom{
            display: block;
            box-sizing: border-box;
        }
        .footerBottom ul{
            display: block;
        }
        .footerBottom li{
            margin-bottom: 1rem;
            font-size: 1.2rem;
        }
}   /* 24rem–48rem */

/* MD - Tablet */
@media (min-width: 1083px) and (max-width: 1279px) {
    .mobileNavBtn{
        display: none;
   }
} /* 64rem–80rem */

/* XL - Büyük laptop / masaüstü */
@media (min-width: 1280px) and (max-width: 1535px) {
    .mobileNavBtn{
        display: none;
   }
} /* 80rem–96rem */

/* 2XL - Geniş ekran */
@media (min-width: 1536px) {
    .mobileNavBtn{
        display: none;
   }
}  /* 96rem ve üstü */