/* ==========================================
   NUBIKIT v3 - RESPONSIVE.CSS
   Mobile First Responsive Layout
========================================== */

/* ==========================================
   1400px - Desktop Besar
========================================== */

@media (max-width:1400px){

    .container{
        max-width:1200px;
    }

}

/* ==========================================
   1200px - Laptop
========================================== */

@media (max-width:1200px){

    .container{
        max-width:1000px;
        padding:0 20px;
    }

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

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

    .tool-grid,
    .category-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

/* ==========================================
   1024px - Tablet Landscape
========================================== */

@media (max-width:1024px){

    /* Header */
    .navbar,
    .header-search,
    .lang-switch,
    .dark-btn,
    .login-btn{
        display:none;
    }

    .mobile-menu{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Hero */

    .hero{
        padding:70px 0;
    }

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-btn{
        justify-content:center;
    }

    .hero-search{
        margin-top:20px;
    }

    /* Grid */

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

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

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

    .dashboard-grid{
        grid-template-columns:220px 1fr;
    }

}

/* ==========================================
   768px - Tablet Portrait
========================================== */

@media (max-width:768px){

    .container{
        padding:0 16px;
    }

    /* Logo */

    .logo-icon{
        width:42px;
        height:42px;
        font-size:20px;
    }

    .logo-nubikit{
        font-size:26px;
    }

    .logo-text small{
        display:none;
    }

    /* Hero */

    .hero h1{
        font-size:36px;
        line-height:1.3;
    }

    .hero p{
        font-size:16px;
    }

    .badge{
        font-size:13px;
    }

    .hero-btn{
        flex-direction:column;
        gap:15px;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
        text-align:center;
    }

    .hero-search{
        padding:25px;
    }

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

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

    /* Section */

    .section{
        padding:60px 0;
    }

    .section h2{
        font-size:28px;
    }

    /* Cards */

    .tool-grid,
    .category-grid,
    .feature-grid{
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .card,
    .tool-card,
    .category-card{
        padding:20px;
    }

    /* Stats */

    .stats{
        padding:40px 25px;
    }

    .stats-grid{
        gap:20px;
    }

    .stats h2{
        font-size:32px;
    }

    /* Dashboard */

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

    .sidebar{
        margin-bottom:25px;
    }

    /* Footer */

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:25px;
    }

}

/* ==========================================
   576px - Mobile Besar
========================================== */

@media (max-width:576px){

    .header{
        height:68px;
    }

    .hero{
        padding:55px 0;
    }

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

    .hero p{
        font-size:15px;
    }

    .tool-grid,
    .category-grid,
    .feature-grid{
        grid-template-columns:1fr;
    }

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

    .footer-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-grid ul{
        padding:0;
    }

    .footer-grid li{
        list-style:none;
    }

    .footer-bottom{
        font-size:13px;
    }

}

/* ==========================================
   420px - Mobile Kecil
========================================== */

@media (max-width:420px){

    .container{
        padding:0 14px;
    }

    .logo-nubikit{
        font-size:22px;
    }

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

    .hero p{
        font-size:14px;
    }

    .section h2{
        font-size:24px;
    }

    .category-card,
    .tool-card{
        padding:18px;
        border-radius:18px;
    }

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

    .stats h2{
        font-size:28px;
    }

    .cta h2{
        font-size:26px;
    }

    .cta p{
        font-size:15px;
    }

}

/* ==========================================
   Utility Responsive
========================================== */

/* Gambar Responsive */

.responsive-img{
    width:100%;
    height:auto;
    display:block;
}

/* Table Responsive */

.table-responsive{
    overflow-x:auto;
    width:100%;
}

/* Video Responsive */

.video-responsive{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
}

.video-responsive iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

/* Scroll Horizontal */

.scroll-x{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:10px;
}

.scroll-x::-webkit-scrollbar{
    height:6px;
}

.scroll-x::-webkit-scrollbar-thumb{
    background:#CBD5E1;
    border-radius:10px;
}