@media (max-width: 1100px) {

    .container {
        width: min(
            calc(100% - 36px),
            1000px
        );
    }

    .main-nav {
        gap: 0;
    }

    .main-nav a {
        padding-inline: 7px;
        font-size: 8px;
    }

    .header-actions {
        gap: 4px;
    }

    .order-check {
        padding-inline: 7px;
    }

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

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

    .footer-grid {
        grid-template-columns:
            1.3fr
            1fr
            1fr;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .header-inner {
        min-height: 68px;
    }

    .main-nav,
    .header-actions {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }


    /* -----------------------------------------------------
       GENERAL HERO
    ----------------------------------------------------- */

    .hero,
    .contact-hero,
    .faq-hero,
    .product-page-hero,
    .data-hero,
    .game-hero,
    .pln-hero,
    .ewallet-hero,
    .order-guide-hero,
    .check-order-hero {

        padding: 70px 0;

    }


    .hero-grid,
    .contact-hero-grid,
    .faq-hero-grid,
    .product-page-hero-grid,
    .data-hero-grid,
    .game-hero-grid,
    .pln-hero-grid,
    .ewallet-hero-grid,
    .order-guide-hero-grid,
    .check-order-hero-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    .hero-content,
    .contact-hero-content,
    .faq-hero-content,
    .product-page-content,
    .data-hero-content,
    .game-hero-content,
    .pln-hero-content,
    .ewallet-hero-content,
    .order-guide-content,
    .check-order-intro {

        text-align: center;

    }


    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1,
    .product-page-content h1,
    .data-hero-content h1,
    .game-hero-content h1,
    .pln-hero-content h1,
    .ewallet-hero-content h1,
    .order-guide-content h1,
    .check-order-intro h1 {

        margin-left: auto;
        margin-right: auto;

    }


    .hero-content > p,
    .contact-hero-content > p,
    .faq-hero-content > p,
    .product-page-content > p,
    .data-hero-content > p,
    .game-hero-content > p,
    .pln-hero-content > p,
    .ewallet-hero-content > p,
    .order-guide-content > p,
    .check-order-intro > p {

        margin-left: auto;
        margin-right: auto;

    }


    .hero-actions,
    .contact-hero-actions,
    .faq-hero-actions,
    .product-hero-actions {

        justify-content: center;

    }


    .hero-image,
    .contact-hero-image,
    .faq-hero-image,
    .game-hero-visual,
    .pln-hero-visual,
    .ewallet-hero-visual {

        max-width: 700px;

        width: 100%;

        margin-inline: auto;

    }


    /* -----------------------------------------------------
       CATALOG
    ----------------------------------------------------- */

    .catalog-hero-inner {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .catalog-hero-content {

        text-align: center;

    }

    .catalog-hero-content h1,
    .catalog-hero-content p {

        margin-inline: auto;

    }

    .catalog-actions {

        justify-content: center;

    }

    .catalog-filter {

        flex-direction: column;

        align-items: flex-start;

    }

    .category-pills {

        justify-content: flex-start;

    }

    .catalog-product-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .catalog-info-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }


    /* -----------------------------------------------------
       PRODUCT / STARLINK
    ----------------------------------------------------- */

    .operator-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .nominal-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .pulsa-information-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    /* -----------------------------------------------------
       DATA / INTERNET
    ----------------------------------------------------- */

    .data-category-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .data-operator-grid,
    .data-product-grid {

        grid-template-columns: 1fr;

    }

    .data-tips-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }


    /* -----------------------------------------------------
       ORDER
    ----------------------------------------------------- */

    .order-guide-hero-grid,
    .order-tips-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .order-guide-content {

        text-align: center;

    }

    .order-guide-content h1,
    .order-guide-content > p {

        margin-left: auto;
        margin-right: auto;

    }

    .order-guide-content .product-hero-actions {

        justify-content: center;

    }

    .order-guide-stat {

        justify-content: center;

    }

    .order-step-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    /* -----------------------------------------------------
       CHECK ORDER
    ----------------------------------------------------- */

    .check-order-hero-grid,
    .how-check-grid {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .check-order-intro {

        text-align: center;

    }

    .check-order-intro h1,
    .check-order-intro > p {

        margin-left: auto;
        margin-right: auto;

    }


    /* -----------------------------------------------------
       CATEGORY / FEATURE
    ----------------------------------------------------- */

    .category-grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }

    .feature-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .contact-info-grid,
    .quick-help-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .contact-form-wrapper {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .footer-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .final-cta-inner {

        align-items: flex-start;

        flex-direction: column;

    }

}


/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 900px) {

    .mobile-nav {

        position: fixed;

        top: 68px;

        left: 0;

        right: 0;

        z-index: 999;

        display: flex;

        flex-direction: column;

        max-height:
            calc(100vh - 68px);

        overflow-y: auto;

        padding: 12px;

        border-bottom:
            1px solid
            rgba(214, 168, 79, .20);

        background:
            rgba(13, 11, 9, .98);

        box-shadow:
            0 20px 45px
            rgba(0, 0, 0, .45);

        backdrop-filter:
            blur(14px);

        -webkit-backdrop-filter:
            blur(14px);

        opacity: 0;

        visibility: hidden;

        transform:
            translateY(-10px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

    }


    .mobile-nav.is-open {

        opacity: 1;

        visibility: visible;

        transform:
            translateY(0);

    }


    .mobile-nav a {

        padding:
            13px 14px;

        border-radius:
            9px;

        color:
            #eadcc3;

        font-size:
            10px;

        font-weight:
            600;

        text-decoration:
            none;

        transition:
            background-color .25s ease,
            color .25s ease,
            transform .25s ease;

    }


    .mobile-nav a:hover {

        background:
            rgba(214, 168, 79, .10);

        color:
            #f2d27a;

        transform:
            translateX(3px);

    }


    .mobile-nav a.active {

        background:
            rgba(214, 168, 79, .12);

        color:
            #f2d27a;

    }


    .mobile-nav-divider {

        height:
            1px;

        margin:
            7px 0;

        background:
            rgba(214, 168, 79, .18);

    }

}


/* =========================================================
   FAQ TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .faq-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }

    .faq-hero-content {

        text-align:
            center;

    }

    .faq-hero-content h1,
    .faq-hero-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .faq-hero-actions {

        justify-content:
            center;

    }

    .faq-category-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 700px) {

    .container {

        width:
            calc(100% - 30px);

    }


    .section {

        padding:
            65px 0;

    }


    .hero,
    .contact-hero,
    .faq-hero,
    .product-page-hero,
    .data-hero,
    .game-hero,
    .pln-hero,
    .ewallet-hero,
    .order-guide-hero,
    .check-order-hero {

        padding:
            60px 0;

    }


    h1 {

        font-size:
            38px;

    }


    h2 {

        font-size:
            28px;

    }


    /* -----------------------------------------------------
       GENERAL GRIDS
    ----------------------------------------------------- */

    .product-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .feature-grid {

        grid-template-columns:
            1fr;

    }

    .contact-info-grid,
    .quick-help-grid {

        grid-template-columns:
            1fr;

    }

    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            32px;

    }


    /* -----------------------------------------------------
       CATALOG
    ----------------------------------------------------- */

    .breadcrumb-section {

        padding:
            14px 0;

    }

    .catalog-hero {

        padding:
            60px 0;

    }

    .catalog-hero-content h1 {

        font-size:
            36px;

    }

    .catalog-actions {

        flex-direction:
            column;

    }

    .catalog-actions .btn {

        width:
            100%;

    }

    .catalog-main-card {

        width:
            290px;

        min-height:
            330px;

    }

    .catalog-card-body {

        min-height:
            250px;

    }

    .catalog-filter-title h2 {

        font-size:
            20px;

    }

    .category-pills {

        width:
            100%;

    }

    .category-pill {

        flex:
            1 1 auto;

        text-align:
            center;

    }

    .catalog-products-section {

        padding:
            65px 0;

    }

    .catalog-section-heading {

        display:
            block;

    }

    .catalog-section-heading .section-link {

        display:
            inline-block;

        margin-top:
            12px;

    }

    .catalog-product-grid {

        grid-template-columns:
            1fr;

    }

    .catalog-product-card {

        min-height:
            auto;

    }

    .catalog-info-section {

        padding:
            65px 0;

    }


    /* -----------------------------------------------------
       STARLINK / PRODUCT
    ----------------------------------------------------- */

    .product-page-content h1 {

        font-size:
            36px;

    }

    .product-hero-actions {

        flex-direction:
            column;

    }

    .product-hero-actions .btn {

        width:
            100%;

    }

    .phone-card {

        width:
            280px;

        min-height:
            380px;

    }

    .phone-screen {

        min-height:
            285px;

    }

    .operator-section,
    .nominal-section {

        padding:
            65px 0;

    }

    .section-heading-center h2,
    .section-heading-row h2 {

        font-size:
            27px;

    }

    .operator-grid {

        grid-template-columns:
            1fr;

    }

    .nominal-grid {

        grid-template-columns:
            1fr 1fr;

    }

    .nominal-card {

        padding:
            17px;

    }

    .operator-detail-section {

        padding:
            50px 0;

    }

    .operator-detail-card {

        grid-template-columns:
            1fr;

        gap:
            20px;

        padding:
            25px;

    }

    .operator-detail-icon {

        width:
            70px;

        height:
            70px;

        border-radius:
            18px;

    }

    .pulsa-information {

        padding:
            65px 0;

    }

    .pulsa-information-content h2 {

        font-size:
            30px;

    }


    /* -----------------------------------------------------
       DATA
    ----------------------------------------------------- */

    .data-hero {

        padding:
            60px 0;

    }

    .data-hero-content h1 {

        font-size:
            36px;

    }

    .data-hero-content .product-hero-actions {

        flex-direction:
            column;

    }

    .data-hero-content .product-hero-actions .btn {

        width:
            100%;

    }

    .data-device {

        width:
            280px;

    }

    .data-category-section,
    .data-operator-section,
    .data-product-section {

        padding:
            65px 0;

    }

    .data-category-grid {

        grid-template-columns:
            1fr;

    }

    .data-operator-card {

        padding:
            20px;

    }

    .data-info-section {

        padding:
            60px 0;

    }

    .data-info-card {

        grid-template-columns:
            1fr;

        gap:
            18px;

        padding:
            24px;

    }

    .data-tips-section {

        padding:
            65px 0;

    }

    .data-tips-content h2 {

        font-size:
            30px;

    }


    /* -----------------------------------------------------
       ORDER
    ----------------------------------------------------- */

    .order-guide-hero,
    .order-step-section,
    .order-product-guide,
    .order-tips-section,
    .order-flow-section,
    .order-faq-section {

        padding:
            65px 0;

    }

    .order-guide-content h1 {

        font-size:
            35px;

        letter-spacing:
            -1px;

    }

    .order-guide-content .product-hero-actions {

        flex-direction:
            column;

    }

    .order-guide-content .product-hero-actions .btn {

        width:
            100%;

    }

    .order-guide-stat {

        gap:
            20px;

    }

    .order-step-grid,
    .order-product-grid {

        grid-template-columns:
            1fr;

    }

    .order-tips-content h2 {

        font-size:
            30px;

    }

    .order-flow {

        flex-direction:
            column;

        gap:
            15px;

    }

    .order-flow-line {

        width:
            1px;

        height:
            35px;

    }


    /* -----------------------------------------------------
       CHECK ORDER
    ----------------------------------------------------- */

    .check-order-hero,
    .order-status-section,
    .how-check-section,
    .order-security-section,
    .check-faq-section {

        padding:
            65px 0;

    }

    .check-order-intro h1 {

        font-size:
            36px;

        letter-spacing:
            -1px;

    }

    .order-check-card {

        padding:
            23px;

    }

    .status-card-grid {

        grid-template-columns:
            1fr;

    }

    .security-box {

        flex-direction:
            column;

        padding:
            25px;

    }

    .security-content h2 {

        font-size:
            25px;

    }

    .security-points {

        display:
            grid;

    }


    /* -----------------------------------------------------
       FAQ
    ----------------------------------------------------- */

    .faq-hero,
    .faq-category-section,
    .faq-main-section {

        padding:
            65px 0;

    }

    .faq-hero-content h1 {

        font-size:
            36px;

        letter-spacing:
            -1px;

    }

    .faq-category-grid,
    .help-grid {

        grid-template-columns:
            1fr;

    }

    .faq-section-title h2 {

        font-size:
            27px;

    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .final-cta {

        padding:
            55px 0;

    }

    .final-cta-actions {

        width:
            100%;

        flex-direction:
            column;

    }

    .final-cta-actions .btn {

        width:
            100%;

    }


    /* -----------------------------------------------------
       FAQ ITEM
    ----------------------------------------------------- */

    .faq-item summary {

        padding-right:
            35px;

        font-size:
            10px;

    }

    .faq-item p {

        padding-right:
            25px;

        font-size:
            9px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .container {

        width:
            calc(100% - 24px);

    }

    .header-inner {

        min-height:
            62px;

    }

    .mobile-nav {

        top:
            62px;

        max-height:
            calc(100vh - 62px);

    }

    .brand-mark {

        width:
            38px;

        height:
            38px;

    }

    .brand-text strong {

        font-size:
            13px;

    }

    .brand-text small {

        font-size:
            7px;

    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero,
    .contact-hero,
    .faq-hero {

        padding:
            50px 0;

    }

    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1 {

        font-size:
            34px;

        letter-spacing:
            -1.3px;

    }

    .hero-content > p,
    .contact-hero-content > p,
    .faq-hero-content > p {

        font-size:
            10px;

    }

    .hero-actions,
    .contact-hero-actions,
    .faq-hero-actions {

        flex-direction:
            column;

    }

    .hero-actions .btn,
    .contact-hero-actions .btn,
    .faq-hero-actions .btn {

        width:
            100%;

    }


    /* -----------------------------------------------------
       PRODUCT
    ----------------------------------------------------- */

    .product-grid {

        grid-template-columns:
            1fr;

    }


    /* -----------------------------------------------------
       CATEGORY
    ----------------------------------------------------- */

    .category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

    .category-card {

        padding:
            18px 12px;

    }


    /* -----------------------------------------------------
       CHECK ORDER
    ----------------------------------------------------- */

    .order-check-card {

        padding:
            24px 18px;

    }

    .order-check-card h1 {

        font-size:
            27px;

    }


    /* -----------------------------------------------------
       CONTACT
    ----------------------------------------------------- */

    .contact-form {

        padding:
            20px 16px;

    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .final-cta {

        padding:
            55px 0;

    }

}


/* =========================================================
   VERY SMALL DEVICE
   ========================================================= */

@media (max-width: 360px) {

    .container {

        width:
            calc(100% - 20px);

    }

    .category-grid {

        grid-template-columns:
            1fr;

    }

    .brand-text {

        display:
            none;

    }

    .hero-content h1,
    .contact-hero-content h1,
    .faq-hero-content h1 {

        font-size:
            30px;

    }

}


/* =========================================================
   STARLINK MOBILE OPTIMIZATION
   ========================================================= */

@media (max-width: 600px) {

    .starlink-hero,
    .installation-hero,
    .advantages-hero {

        padding:
            58px 0;

    }

    .starlink-hero-grid,
    .installation-hero-grid,
    .advantages-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }

    .starlink-hero-content,
    .installation-hero-content,
    .advantages-hero-content {

        text-align:
            center;

    }

    .starlink-hero-content h1,
    .installation-hero-content h1,
    .advantages-hero-content h1 {

        font-size:
            34px;

        line-height:
            1.12;

        letter-spacing:
            -1px;

    }

    .starlink-hero-content p,
    .installation-hero-content p,
    .advantages-hero-content p {

        margin-left:
            auto;

        margin-right:
            auto;

    }

    .starlink-actions,
    .installation-actions,
    .advantages-actions {

        flex-direction:
            column;

        width:
            100%;

    }

    .starlink-actions .btn,
    .installation-actions .btn,
    .advantages-actions .btn {

        width:
            100%;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}