/* ============================================================
   responsive.css — Mobile First Responsive Design
   ============================================================ */

/* ------------------------------------------------------------
   Tablet (max 991px)
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .section { padding: 80px 0; }

    /* Navbar */
    .nav-menu { display: none; }
    .hamburger { display: flex; }
    .nav-actions .btn-neon { display: none; }

    /* Hero */
    .hero { padding-top: calc(var(--nav-height) + 30px); }
    .hero-visual { margin-bottom: 2rem; }
    .code-window { bottom: -20px; left: 50%; transform: translateX(-50%); }
    .profile-badge.badge-code { left: 0; }
    .profile-badge.badge-project { right: 0; }

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

    /* Masonry 2 kolom */
    .portfolio-grid-masonry { columns: 2; }

    /* Timeline mobile (garis di kiri) */
    .timeline-wrap::before { left: 18px; transform: none; }
    .timeline-item, .timeline-item.timeline-right {
        width: 100%;
        left: 0;
        padding: 0 0 2.4rem 3rem;
    }
    .timeline-dot, .timeline-right .timeline-dot { left: 0; right: auto; }

    /* Blog sticky sidebar hilang */
    .blog-sidebar { position: static; }

    /* Project sidebar sticky hilang */
    .project-sidebar { position: static; }
}

/* ------------------------------------------------------------
   Mobile (max 767px)
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .section { padding: 65px 0; }
    .section-header { margin-bottom: 2.5rem; }

    /* Hero */
    .hero-title { font-size: 2rem; }
    .hero-buttons .btn { width: 100%; max-width: 280px; }
    .hero-roles { justify-content: flex-start; }
    .floating-icons { display: none; }
    .profile-badge { padding: .5rem .7rem; }
    .profile-badge strong { font-size: .78rem; }
    .profile-badge i { font-size: 1.1rem; }

    /* Stats */
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
    .stat-card { padding: 1.5rem .8rem; }
    .stat-number { font-size: 1.9rem; }

    /* Portfolio toolbar */
    .portfolio-toolbar { flex-direction: column; align-items: stretch; }
    .search-box { width: 100%; min-width: 0; }
    .filter-buttons { justify-content: center; }

    /* Masonry 1 kolom */
    .portfolio-grid-masonry { columns: 1; }

    /* Blog post */
    .blog-post-thumb { min-height: 140px; }
    .blog-post-body { padding: 1.1rem; }
    .blog-article { padding: 1.4rem; }

    /* Contact */
    .contact-form-wrap, .contact-side { padding: 1.6rem; }

    /* CTA */
    .cta-box { padding: 2.6rem 1.2rem; }

    /* Footer */
    .footer-bottom p { text-align: center; }
}

/* ------------------------------------------------------------
   Mobile kecil (max 480px)
   ------------------------------------------------------------ */
@media (max-width: 479.98px) {
    .stats-row { grid-template-columns: 1fr 1fr; }
    .brand-text { display: none; }
    .hero-visual { transform: scale(.95); }
    .code-window { display: none; }
    .profile-badge.badge-project { right: 4%; }
    .profile-badge.badge-code { left: 4%; }
    .article-share { flex-wrap: wrap; }
}

/* ------------------------------------------------------------
   Height kecil (landscape mobile)
   ------------------------------------------------------------ */
@media (max-height: 600px) {
    .scroll-indicator { display: none; }
    .hero { min-height: auto; }
}