@media(max-width:900px){
    .hero h1{
        font-size:52px;
    }
    .grid{
        grid-template-columns:1fr;
    }
    .category-grid{
        grid-template-columns:1fr;
    }
    .category-card{
        height:320px;
    }
    .featured-video{
        height:420px;
    }
    .featured-meta{
        grid-template-columns:1fr;
    }
    .masonry{
        column-count:2;
    }
}

@media(max-width:768px){
    .menu-toggle{
        display:flex;
    }
    nav{
        position:fixed;
        top:95px;
        left:20px;
        right:20px;
        display:flex;
        flex-direction:column;
        gap:24px;
        padding:32px;
        background:rgba(20,20,20,.65);
        backdrop-filter:blur(30px);
        border:1px solid rgba(255,255,255,.08);
        border-radius:28px;
        opacity:0;
        visibility:hidden;
        transform:translateY(-15px);
        transition:.35s;
    }
    nav.show{
        opacity:1;
        background:rgba(0, 0, 0, 0.836);
        -webkit-backdrop-filter:blur(30px);
        visibility:visible;
        transform:translateY(0);
    }
    .masonry{
        column-count:2;
    }
    .about{
        grid-template-columns:1fr;
    }
    .about-image{
        max-width:520px;
        margin:auto;
    }
    .about-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
    }
    .about-info{
        flex-wrap:wrap;
        gap:40px;
    }
    .services-grid{
        grid-template-columns:repeat(1,1fr);
    }
    .footer-grid{
        grid-template-columns:1fr;
        gap:40px;
    }
    .footer-bottom{
        flex-direction:column;
        gap:20px;
    }
    .chat-window{
        position:fixed;
        inset:0;
        width:100%;
        height:100dvh;
        max-height:none;
        border-radius:0;
    }
    .music-toggle{
        left:18px;
        bottom:18px;
        width:40px;
        height:40px;
    }
    .resume-grid {
        grid-template-columns: 1fr;
    }
    .resume-header h1 {
        font-size: 2.5rem;
    }
    .design-bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 320px;
    }
    .design-card.item-wide,
    .design-card.item-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .modal-content-grid {
        grid-template-columns: 1fr;
    }
    .modal-container {
        padding: 30px 20px;
    }
    .design-bento-grid {
        columns: 1 100%; /* Menjadi 1 kolom penuh yang mengalir ke bawah di HP */
    }
}



/* ==========================================
   HERO — MOBILE OPTIMIZATION
========================================== */
@media (max-width: 768px){
    .hero-footer-actions{
        flex-direction:column;
        align-items:flex-start;
        bottom:32px;
        gap:16px;
    }
    .hero-cta-group{
        width:100%;
        gap:10px;
    }
    .glass-btn{
        padding:11px 20px;
        font-size:12px;
        letter-spacing:1px;
    }
    .hero-side-group{
        width:100%;
        justify-content:space-between;
        align-items:center;
        gap:14px;
    }
    .glass-icon{
        width:36px;
        height:36px;
    }
    .glass-icon svg{
        width:15px;
        height:15px;
    }
    .hero-qr{
        padding:8px;
    }
    .hero-qr img{
        width:48px;
        height:48px;
    }
    .hero-qr span{
        font-size:8px;
    }
    .hero-overlay-text{
        letter-spacing:-6px;
    }
    

}

@media (max-width: 480px){
    .hero-footer-actions{
        bottom:22px;
        width:94%;
    }
    .hero-cta-group{
        flex-wrap:nowrap;
    }
    .hero-cta-group .glass-btn{
        flex:1;
        justify-content:center;
        text-align:center;
        white-space:nowrap;
        padding:10px 14px;
        font-size:11px;
    }
    .hero-side-group{
        gap:10px;
    }
    .social-links{
        gap:8px;
    }
    .glass-icon{
        width:34px;
        height:34px;
    }
    .hero-qr img{
        width:42px;
        height:42px;
    }
    .hero-overlay-text{
        font-size:28rem;
        letter-spacing:-4px;
    }
}


/* =========================================
   PERBAIKAN KATEGORI CARD UNTUK MOBILE
========================================= */
@media (max-width: 768px) {
    /* Ubah dari baris menyamping menjadi tumpukan ke bawah */
    .category-accordion {
        display: flex;
        flex-direction: column;
        gap: 16px; /* Jarak antar card */
        height: auto !important; 
    }

    /* Buat card memenuhi layar dan matikan efek melebar (flex-grow) */
    .category-card {
        width: 100% !important;
        height: 200px !important; /* Atur tinggi card, sesuaikan selera */
        flex: none !important;
        border-radius: 16px;
        position: relative;
        overflow: hidden;
    }

    /* Tampilkan teks permanen tanpa perlu di-hover */
    .category-card .card-content {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important; /* Reset animasi jika ada */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        /* Tambahkan gradien gelap agar teks selalu terbaca di atas gambar */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    /* Pastikan gambar/video background tidak penyok */
    .category-card .card-bg,
    .category-card .card-bg img,
    .category-card .card-bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}