@media(max-width:1100px){

    .hero-grid,
    .map-grid,
    .why-grid,
    .district-hero-inner{
        grid-template-columns:1fr;
    }

    .popular-grid,
    .numbers-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(min-width:769px) and (max-width:1100px){
    .cards-grid,
    .engage-grid,
    .latest-grid,
    .district-info-grid,
    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cards-grid > *,
    .engage-grid > *,
    .latest-grid > *,
    .district-info-grid > *,
    .footer-grid > *{
        min-width:0;
    }
}

@media(min-width:769px) and (max-width:1024px){
    body.home #site-content > section > .container,
    .site-footer .footer-grid,
    .container,
    .header-inner,
    .footer-bottom,
    .hero-grid,
    .cards-grid{
        width:min(calc(100% - 40px),var(--ia-container-max,1280px));
    }

    .hero h1{
        font-size:54px;
    }

    .stats-grid,
    .regions-grid,
    .popular-grid,
    .latest-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .archive-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:768px){

    body{
        overflow-x:hidden;
    }

    body.home #site-content > section > .container,
    .site-footer .footer-grid,
    .container,
    .header-inner,
    .footer-bottom,
    .hero-grid,
    .cards-grid{
        width:min(calc(100% - 28px),var(--ia-container-max,1280px));
    }

    .site-header{
        position:sticky;
        top:0;
    }

    .header-inner{
        height:auto;
        padding:14px 0;
        gap:12px;
    }

    .site-logo{
        font-size:20px;
    }

    .logo-icon{
        width:38px;
        height:38px;
    }

    .main-menu{
        display:none;
    }

    .login-btn{
        height:42px;
        padding:0 16px;
        font-size:14px;
    }

    .circle-btn{
        width:40px;
        height:40px;
    }

    .hero{
        padding:60px 0 50px;
    }

    .hero h1,
    .district-hero h1{
        font-size:42px;
    }

    .hero p,
    .district-hero p{
        font-size:17px;
    }

    .hero-search{
        flex-direction:column;
    }

    .hero-search button{
        width:100%;
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
        gap:14px;
    }

    .popular-grid,
    .gallery-grid,
    .latest-grid,
    .numbers-grid,
    .district-info-grid{
        grid-template-columns:1fr;
    }

    .gallery-item.big{
        grid-row:auto;
    }

    .map-content h2,
    .section-head h2,
    .why-content h2,
    .footer-cta h2{
        font-size:34px;
    }

    .map-preview{
        min-height:260px;
    }

    .map-shape{
        height:160px;
        font-size:22px;
    }

    .engage-card,
    .footer-cta-inner{
        padding:34px 24px;
    }
}

@media(max-width:480px){

    .hero h1,
    .district-hero h1{
        font-size:36px;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .stat-card,
    .number-box{
        padding:26px 18px;
    }

    .feature-card,
    .popular-content,
    .latest-content,
    .district-summary-card,
    .district-info-card{
        padding:24px;
    }
}

@media(max-width:430px){
    body.home #site-content > section > .container,
    .site-footer .footer-grid,
    .container,
    .header-inner,
    .footer-bottom,
    .hero-grid,
    .cards-grid{
        width:min(calc(100% - 24px),var(--ia-container-max,1280px));
    }

    .hero{
        padding:52px 0 44px;
    }

    .hero h1,
    .district-hero h1{
        font-size:34px;
        line-height:1.12;
    }

    .hero p,
    .district-hero p{
        font-size:16px;
        line-height:1.7;
    }

    .hero-search input,
    .hero-search button{
        height:56px;
        border-radius:16px;
    }

    .section-head h2,
    .map-content h2,
    .why-content h2,
    .footer-cta h2{
        font-size:30px;
    }
}

@media(max-width:390px){
    body.home #site-content > section > .container,
    .site-footer .footer-grid,
    .container,
    .header-inner,
    .footer-bottom,
    .hero-grid,
    .cards-grid{
        width:min(calc(100% - 20px),var(--ia-container-max,1280px));
    }

    .hero h1,
    .district-hero h1{
        font-size:31px;
    }

    .hero-badge,
    .district-label{
        font-size:13px;
    }

    .stat-card strong{
        font-size:32px;
    }

    .popular-image,
    .latest-image{
        height:168px;
    }
}

@media(max-width:360px){
    .hero h1,
    .district-hero h1{
        font-size:29px;
    }

    .hero-search input{
        padding:0 16px;
        font-size:15px;
    }

    .feature-card,
    .popular-content,
    .latest-content,
    .district-summary-card,
    .district-info-card,
    .district-text-card{
        padding:20px;
    }
}

/* v1.6.5 Paket 1 responsive polish */
@media(min-width:641px) and (max-width:1100px){
    .footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .footer-brand{
        grid-column:1 / -1;
    }
}

@media(max-width:768px){
    .site-header.is-menu-open .main-menu{
        display:grid;
    }
}

/* v1.8.0 Paket 5 — district detail responsive compatibility */
@media(min-width:641px) and (max-width:1024px){
    .district-page-v170 .district-info-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .district-page-v170 .district-quick-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .district-page-v170 .district-quick-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .district-page-v170 .district-info-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:390px){
    .district-page-v170 .district-quick-grid{
        grid-template-columns:1fr;
    }
}