/* Header/navigation responsive rules are handled by navigation.css.
   Do not override .main-nav here: doing so hides the desktop navigation
   and conflicts with the mobile menu toggle. */
@media (max-width: 768px) {
    .header-wrap {
        flex-direction: column;
    }
}

.mobile-bottom-nav{

position:fixed;

bottom:0;

left:0;

width:100%;

background:#fff;

display:flex;

justify-content:space-around;

padding:10px 0;

box-shadow:
0 -2px 10px rgba(0,0,0,.1);

z-index:999;

}

.mobile-bottom-nav a{

display:flex;

flex-direction:column;

align-items:center;

font-size:12px;

text-decoration:none;

color:#333;

}

@media(min-width:769px){

.mobile-bottom-nav{
display:none;
}

}

@media (max-width:768px){

    .entry-title,
    .single-title,
    .post-title,
    article h1{
        font-size:32px !important;
        line-height:1.25 !important;
        margin-bottom:15px;
    }

}

@media (max-width:768px){

    .site-logo img{
        max-width:220px;
        height:auto;
    }

    .header-search{
        margin-top:10px;
    }

    .mobile-toggle{
        margin:10px auto;
    }

}

@media (max-width:768px){

    .breadcrumb{
        font-size:14px;
        line-height:1.5;
        margin-bottom:15px;
    }

}

@media (max-width:768px){

    .content,
    .single-content,
    .post-content{
        width:100%;
        max-width:100%;
        padding:0 15px;
        box-sizing:border-box;
    }

}

@media (max-width:768px){

    .site-main{
        display:block;
    }

    .content{
        width:100%;
    }

    .sidebar{
        width:100%;
        margin-top:30px;
    }

}

@media(max-width:768px){

    .entry-title{
        font-size:42px !important;
        line-height:1.2 !important;
        word-break:normal !important;
        overflow-wrap:break-word;
        margin-bottom:15px;
    }

    .entry-meta{
        font-size:13px;
        line-height:1.5;
    }

    .featured-image img{
        width:100%;
        height:auto;
        border-radius:8px;
    }

    .entry-content{
        font-size:18px;
        line-height:1.8;
    }

}

@media (max-width:768px){

    h1.entry-title{
        font-size:32px !important;
        line-height:1.25 !important;
        font-weight:700;
        margin-bottom:15px;
    }

}

@media (max-width:768px){

.content-area,
.site-main,
.primary,
.primary-content,
.single-content,
.post-content,
.single-post-content,
article,
.single-post article{
    width:100% !important;
    max-width:100% !important;
    float:none !important;
}

.entry-content{
    width:100% !important;
    max-width:100% !important;
}

.entry-title{
    font-size:34px !important;
    line-height:1.2 !important;
    word-break:normal !important;
}

.entry-content p{
    font-size:18px !important;
    line-height:1.8 !important;
}

.sidebar{
    width:100% !important;
    max-width:100% !important;
    margin-top:30px;
}

}

@media (max-width: 768px){

article.single-post{
    width:100% !important;
    max-width:100% !important;
    display:block !important;
}

article.single-post .entry-content{
    width:100% !important;
    max-width:100% !important;
}

article.single-post .entry-content p{
    display:block !important;
    width:100% !important;
    margin-bottom:20px !important;
}

}

@media (max-width: 900px){

    .site-main{
        display:block !important;
    }

    .content{
        width:100% !important;
        max-width:100% !important;
    }

    article.single-post{
        width:100% !important;
        max-width:100% !important;
        padding:20px !important;
        margin:0 !important;
    }

    .entry-title{
        font-size:32px !important;
        line-height:1.25 !important;
    }

    .entry-content{
        max-width:100% !important;
        width:100% !important;
        font-size:18px !important;
        line-height:1.8 !important;
    }

    .entry-content p{
        margin-bottom:18px !important;
    }

    .sidebar{
        width:100% !important;
        max-width:100% !important;
        margin-top:30px !important;
    }

}

@media screen and (max-width: 900px){

    .site-main{
        display:block !important;
    }

    main.content{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
    }

    article.single-post{
        width:100% !important;
        max-width:100% !important;
        padding:15px !important;
        margin:0 !important;
    }

    .entry-title{
        font-size:32px !important;
        line-height:1.25 !important;
        width:100% !important;
    }

    .entry-content{
        width:100% !important;
        max-width:100% !important;
    }

    .entry-content p{
        width:100% !important;
        display:block !important;
    }

    .sidebar{
        width:100% !important;
        max-width:100% !important;
        margin-top:30px !important;
    }
}

@media screen and (max-width:768px){

    .entry-title,
    h1.entry-title,
    .single-post .entry-title{

        font-size:25px !important;
        line-height:1.25 !important;
        font-weight:700;
        margin-bottom:15px;

    }

}

@media screen and (max-width:768px){

    .breadcrumb{

        font-size:14px;
        line-height:1.5;
        margin-bottom:12px;

    }

}

@media screen and (max-width:768px){

    .content{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 !important;
    }

    article.single-post{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:0 10px !important;
        box-sizing:border-box;
    }

    .entry-content,
    .entry-header{
        width:100% !important;
        max-width:100% !important;
    }

    .featured-image img,
    .post-thumbnail img{
        width:100% !important;
        height:auto !important;
    }

}

@media screen and (max-width:768px){

    .container{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    .content{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 !important;
    }

    article.single-post{
        width:100% !important;
        max-width:100% !important;
        padding:0 12px !important;
        margin:0 !important;
        box-sizing:border-box;
    }

    .entry-header,
    .entry-content{
        padding:0 !important;
        margin:0 !important;
        width:100% !important;
        max-width:100% !important;
    }

    .featured-image,
    .featured-image img,
    .post-thumbnail img{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
    }
}

@media screen and (max-width:768px){

    .single-post{
        padding:15px !important;
    }

}

@media (max-width:768px){

    .header-search{
        display:flex;
        gap:8px;
        padding:0 15px;
    }

    .header-search input{
        flex:1;
        min-width:0;
    }

    .header-search button{
        width:80px;
        flex-shrink:0;
    }

}

@media (max-width:768px){

    .related-grid{
        display:grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap:15px !important;
    }

    .related-item{
        width:100% !important;
        margin:0 !important;
    }

    .related-item img{
        width:100% !important;
        height:auto !important;
        display:block;
    }

    .related-item h4{
        font-size:14px !important;
        line-height:1.4 !important;
        margin:10px;
    }

}

@media (max-width:768px){

    .related-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
    }

    .related-item{
        display:flex;
        flex-direction:column;
        height:100%;
    }

    .related-item h4{
        flex-grow:1;
    }

}

@media (max-width:768px){

.breaking-news{
    display:block;
    overflow:hidden;
}

.breaking-label{
    width:100%;
    text-align:center;
    padding:12px;
}

.breaking-content{
    display:flex;
    overflow-x:auto;
    gap:10px;
    padding:15px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
}

.breaking-content::-webkit-scrollbar{
    display:none;
}

.breaking-item{
    min-width:280px;
    flex:0 0 auto;
    scroll-snap-align:start;
    background:#d80000;
    color:#fff;
    padding:12px;
    border-radius:8px;
    text-decoration:none;
    line-height:1.5;
}

}

@media (max-width:768px){

    .latest-news .news-grid{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px !important;
    }

    .latest-news .news-card{
        width:100% !important;
        margin:0 !important;
    }

    .latest-news .news-card img{
        width:100%;
        aspect-ratio:4/3;
        object-fit:cover;
    }

    .latest-news .news-card h3{
        font-size:14px;
        line-height:1.4;
        padding:10px;
    }

}

@media (max-width:768px){

    .latest-news .news-card{
        display:flex;
        flex-direction:column;
        height:100%;
    }

    .latest-news .news-card h3{
        flex-grow:1;
    }

}

@media (max-width:768px){

.widget-latest{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.widget-latest .widget-title{
    grid-column:1 / -1;
}

.sidebar-news-card{
    margin:0;
    border:none;
}

.sidebar-card-content h4{
    font-size:14px;
    line-height:1.4;
    margin:8px 0;
}

.sidebar-date{
    font-size:12px;
}

}

@media (max-width:768px){

.sidebar-news-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.sidebar-card-content{
    flex-grow:1;
}

}

@media (max-width:768px){

    .editors-choice .choice-grid{
        display:grid !important;
        grid-template-columns:repeat(2,1fr) !important;
        gap:15px !important;
    }

    .editors-choice .choice-card{
        width:100% !important;
        margin:0 !important;
        display:flex;
        flex-direction:column;
    }

    .editors-choice .choice-card img{
        width:100%;
        aspect-ratio:4/3;
        object-fit:cover;
        border-radius:8px;
    }

    .editors-choice .choice-card h3{
        font-size:14px;
        line-height:1.4;
        margin-top:8px;
        font-weight:600;
    }

}

/* ==========================
   STICKY HEADER MOBILE
========================== */

@media (max-width:768px){

    .mobile-sticky-header{
        position:fixed;
        top:0;
        left:0;
        z-index:99999;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        height:58px;
        padding:0 16px;
        box-sizing:border-box;
        background:#1747c9;
        box-shadow:0 2px 10px rgba(0,0,0,.16);
        transform:translateY(-110%);
        transition:transform .25s ease;
    }

    .mobile-sticky-header.is-visible{
        transform:translateY(0);
    }

}
.mobile-sticky-header{

    position:fixed !important;
    top:0;
    left:0;
    width:100%;
    background:red;
    z-index:99999;

}

@media(max-width:768px){

.mobile-sticky-header{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    background:#1544D9;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 15px;

    z-index:99999;

    transform:translateY(-100%);
    transition:.3s;

    box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.mobile-sticky-header.show{
    transform:translateY(0);
}

.sticky-logo{
    color:#fff;
    font-size:18px;
    font-weight:700;
}

.sticky-menu-btn{
    background:none;
    border:none;
    color:#fff;
    font-size:26px;
    cursor:pointer;
}

body.sticky-active{
    padding-top:55px;
}

}

@media (max-width:768px){

    .footer-col{
        text-align:center;
    }

    .footer-col p{
        font-size:15px;
        line-height:1.8;
        padding:0 20px;
        margin-top:15px;
        word-break:normal;
    }

}

@media (max-width:768px){

    .footer-col img{
        display:block;
        max-width:220px;
        height:auto;
        margin:0 auto 15px;
    }

}

@media (max-width:768px){

.site-main,
.home-content,
.main-content{

    padding-left:15px;

    padding-right:15px;

    }

}

/* =====================================
   MOBILE STICKY HEADER - FINAL
===================================== */

/* Tidak pernah tampil pada desktop */
.mobile-sticky-header{
    display:none;
}

/* Hanya aktif pada perangkat mobile */
@media (max-width:768px){

    .mobile-sticky-header{
        position:fixed;
        top:0;
        left:0;
        z-index:99999;
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        height:58px;
        padding:0 16px;
        background:#1544D9;
        box-shadow:0 2px 10px rgba(0,0,0,.16);
        box-sizing:border-box;
        transform:translateY(-110%);
        transition:transform .25s ease;
    }

    .mobile-sticky-header.is-visible{
        transform:translateY(0);
    }

    .mobile-sticky-header.menu-open{
        overflow:visible;
    }

    .sticky-logo{
        display:flex;
        align-items:center;
        max-width:210px;
        color:#fff;
        font-size:17px;
        font-weight:700;
        text-decoration:none;
    }

    .sticky-logo img{
        display:block;
        width:auto;
        max-width:190px;
        max-height:42px;
    }

    .sticky-menu-btn{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        padding:0;
        border:0;
        border-radius:5px;
        background:transparent;
        cursor:pointer;
    }

    .sticky-menu-btn span{
        display:block;
        width:23px;
        height:3px;
        margin:3px 0;
        border-radius:2px;
        background:#fff;
    }

    .sticky-menu-panel{
        position:absolute;
        top:58px;
        left:0;
        right:0;
        display:none;
        padding:8px 18px 16px;
        background:#0f2f97;
        box-sizing:border-box;
        box-shadow:0 8px 16px rgba(0,0,0,.18);
    }

    .mobile-sticky-header.menu-open .sticky-menu-panel{
        display:block;
    }

    .sticky-mobile-menu{
        margin:0;
        padding:0;
        list-style:none;
    }

    .sticky-mobile-menu li{
        margin:0;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .sticky-mobile-menu li:last-child{
        border-bottom:0;
    }

    .sticky-mobile-menu a{
        display:block;
        padding:15px 4px;
        color:#fff;
        font-size:16px;
        font-weight:700;
        text-decoration:none;
    }

    body.mobile-sticky-active{
        padding-top:58px;
    }

}

@media (max-width:768px){

    .progres-share-buttons{
    
        gap:6px;

    }

    .progres-share-buttons a,
    .progres-share-buttons button{
    
        flex:1 1 calc(50% - 6px);
    
        justify-content:center;

    }

}


/* =====================================
   STICKY MOBILE MENU - ROBUST FINAL FIX
===================================== */
@media (max-width:768px){
    .mobile-sticky-header.is-visible,
    .mobile-sticky-header.show{
        transform:translateY(0) !important;
    }

    .mobile-sticky-header.menu-open{
        z-index:100000 !important;
    }

    .mobile-sticky-header .sticky-menu-panel{
        position:absolute !important;
        top:58px !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        max-height:calc(100vh - 58px);
        overflow-y:auto;
        background:#0f2f97 !important;
        visibility:hidden;
        opacity:0;
        pointer-events:none;
        transform:none !important;
    }

    .mobile-sticky-header.menu-open .sticky-menu-panel{
        display:block !important;
        visibility:visible;
        opacity:1;
        pointer-events:auto;
    }

    .mobile-sticky-header .sticky-mobile-menu,
    .mobile-sticky-header .sticky-mobile-menu ul{
        display:block;
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
    }

    .mobile-sticky-header .sticky-mobile-menu li{
        display:block;
        width:100%;
    }

    .mobile-sticky-header .sticky-mobile-menu a{
        display:block !important;
        width:100%;
        box-sizing:border-box;
        color:#fff !important;
        background:transparent;
        text-decoration:none;
    }

    .sticky-menu-btn span{
        transition:transform .2s ease, opacity .2s ease;
    }

    .mobile-sticky-header.menu-open .sticky-menu-btn span:nth-child(1){
        transform:translateY(6px) rotate(45deg);
    }

    .mobile-sticky-header.menu-open .sticky-menu-btn span:nth-child(2){
        opacity:0;
    }

    .mobile-sticky-header.menu-open .sticky-menu-btn span:nth-child(3){
        transform:translateY(-6px) rotate(-45deg);
    }
}

/* =================================
   TRENDING WIDGET MOBILE FIX
   Keep the ranking badge circular and
   the card content in a horizontal row.
================================= */
@media (max-width:768px){

    .progres-trending-card{
        display:flex !important;
        flex-direction:row !important;
        align-items:flex-start !important;
        height:auto !important;
        min-height:0 !important;
        gap:12px !important;
    }

    .progres-trending-card .progres-trending-rank{
        flex:0 0 32px !important;
        width:32px !important;
        min-width:32px !important;
        max-width:32px !important;
        height:32px !important;
        min-height:32px !important;
        max-height:32px !important;
        aspect-ratio:1 / 1;
        padding:0 !important;
        box-sizing:border-box;
        border-radius:50% !important;
        line-height:1 !important;
    }

    .progres-trending-card .sidebar-card-content{
        flex:1 1 auto !important;
        min-width:0 !important;
    }

}


/* =================================
   LATEST POSTS WIDGET MOBILE FIX
   Keep compact articles horizontal:
   thumbnail left, title/date right.
================================= */
@media (max-width:768px){

    .progres-latest-post--compact{
        display:flex !important;
        flex-direction:row !important;
        align-items:flex-start !important;
        gap:10px !important;
        height:auto !important;
        min-height:0 !important;
    }

    .progres-latest-post--compact .progres-latest-post__thumb{
        flex:0 0 84px !important;
        width:84px !important;
        max-width:84px !important;
        margin:0 !important;
    }

    .progres-latest-post--compact .progres-latest-post__thumb img{
        display:block !important;
        width:84px !important;
        height:60px !important;
        max-width:84px !important;
        margin:0 !important;
        object-fit:cover !important;
        aspect-ratio:auto !important;
    }

    .progres-latest-post--compact .progres-latest-post__content{
        flex:1 1 auto !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .progres-latest-post--compact .progres-latest-post__content h4{
        margin:0 0 5px !important;
        font-size:14px !important;
        line-height:1.4 !important;
    }

    .progres-latest-post--compact .progres-latest-post__date{
        margin:0 !important;
    }

}