@media (min-width: 1200px) {
    .content-area {
        margin-left: 260px;
    }

    .sidebar.collapsed ~ .content-area,
    body.sidebar-collapsed .content-area {
        margin-left: 70px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .content-area {
        margin-left: 70px;
    }

    .sidebar {
        width: 70px;
    }

    .sidebar .logo-text,
    .sidebar .menu-text,
    .sidebar .menu-arrow,
    .sidebar .sidebar-menu-label,
    .sidebar .sidebar-submenu,
    .sidebar .btn-text {
        display: none;
    }

    .sidebar-menu-link {
        justify-content: center;
        padding: 12px;
    }

    .sidebar-menu-link .menu-icon {
        margin: 0;
    }

    .sidebar-logo {
        justify-content: center;
        padding: 16px;
    }

    .sidebar-bottom .glass-btn {
        padding: 12px;
    }

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

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

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

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

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

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

@media (max-width: 767px) {
    .content-area {
        margin-left: 0 !important;
        padding-top: 70px;
    }

    .sidebar {
        transform: translateX(-100%);
        width: 260px !important;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .sidebar.mobile-open .logo-text,
    .sidebar.mobile-open .menu-text,
    .sidebar.mobile-open .menu-arrow,
    .sidebar.mobile-open .sidebar-menu-label,
    .sidebar.mobile-open .sidebar-submenu,
    .sidebar.mobile-open .btn-text {
        display: initial;
    }

    .sidebar.mobile-open .sidebar-submenu {
        display: block;
    }

    .sidebar.mobile-open .sidebar-menu-link {
        justify-content: initial;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

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

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

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

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

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

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

    .section-title {
        font-size: 22px;
    }

    .glass-card {
        padding: 18px;
    }

    .glass-stat-card {
        padding: 16px;
    }

    .glass-pricing-card {
        padding: 24px;
    }

    .topbar {
        padding: 0 16px;
    }

    .topbar-search {
        display: none;
    }

    .topbar-search.mobile-show {
        display: flex;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        padding: 12px 16px;
        background: var(--glass-bg);
        backdrop-filter: blur(24px);
        border-bottom: var(--glass-border);
        z-index: 998;
    }

    .topbar-cta {
        display: none;
    }

    .content-section {
        padding: 20px 16px;
    }

    .glass-btn-lg {
        padding: 14px 24px;
        font-size: 14px;
    }

    .glass-modal {
        padding: 20px;
        margin: 16px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .stats-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

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

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

    .hero-buttons .glass-btn {
        width: 100%;
    }

    .glass-stat-card {
        padding: 14px;
    }

    .glass-stat-icon {
        width: 44px;
        height: 44px;
        font-size: 18px;
        border-radius: 12px;
    }

    .section-title {
        font-size: 20px;
    }
}

@media (min-width: 1400px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

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

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

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

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }

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

@media print {
    .sidebar,
    .topbar,
    .whatsapp-float,
    .sidebar-overlay {
        display: none !important;
    }

    .content-area {
        margin-left: 0 !important;
        padding-top: 0 !important;
    }

    .glass-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}