@media screen and (max-width: 1400px) {
  #profile {
    min-height: 83vh;
    padding-bottom: 6rem;
  }
  .about-containers { flex-wrap: wrap; }
  #contact, #projects { height: fit-content; }
}

/* Responsif untuk Layar Laptop Kecil & Tablet */
@media screen and (max-width: 1200px) {
  #desktop-nav { display: none; }
  #hamburger-nav { display: flex; } /* Tampilkan menu HP melayang */
  
  #experience, .experience-details-container { margin-top: 2rem; }
  
  /* PERBAIKAN HERO SECTION: FOTO DI ATAS, TEKS DI BAWAH */
  #profile {
    display: flex;
    flex-direction: column-reverse; 
    height: auto;
    gap: 3rem;
    padding: 120px 5% 5rem 5%; 
  }
  .section-container { display: block; }
  .arrow { display: none; }
  section, .section-container { height: fit-content; }
  
  /* Kunci ukuran wrapper foto di tablet agar tidak gepeng */
  .hero-image-wrapper { width: 320px; height: 320px; margin: 0 auto; }
  .section__pic-container { width: auto; height: auto; margin: 0 auto 2rem; }
  .about-containers { margin-top: 0; }
}

@media screen and (max-width: 1024px) {
  .skills-grid-modern { gap: 2rem; }
  .skill-card { padding: 2.5rem 2rem; }
  .portfolio-card { flex: 0 0 calc(50% - 10px); }
}

/* PERBAIKAN LAYAR TABLET (ABOUT, PENGALAMAN & PORTOFOLIO) */
@media screen and (max-width: 900px) {

  /* --- PERBAIKAN FOOTER & TOMBOL (ANTI-BENGKAK) --- */
  #kontak {
    height: auto !important; 
    padding: 60px 0 40px 0 !important;
  }

  /* Judul footer dikecilkan sedikit */
  #kontak h2, .footer-title { 
    font-size: 2rem !important; 
    line-height: 1.3 !important;
  }

  /* Deskripsi footer */
  .footer-description, #kontak p {
    font-size: 0.95rem !important;
    padding: 0 5% !important;
    margin-bottom: 2rem !important;
  }

  /* Wadah tombol diberi jarak aman dari tepi layar */
  .footer-btn-container, .footer-btn-group {
    display: flex !important;
    flex-direction: column !important; 
    gap: 12px !important;
    padding: 0 10% !important; /* Membuat tombol tidak terlalu kepanjangan ke ujung layar */
  }

  /* KOREKSI TOMBOL HANYA UNTUK FOOTER: Memaksa ramping dan satu baris */
  #kontak .btn-wa, 
  #kontak .btn-email {
    width: 100% !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: center !important; 
    align-items: center !important;
    padding: 14px 20px !important; 
    font-size: 1.05rem !important; 
    white-space: nowrap !important; 
    box-sizing: border-box !important;
  }

  /* Pengaturan Section Pengalaman (Slider Cerah) di Tablet */
  .exp-slide-header { flex-direction: column; gap: 1rem; }
  .exp-slide { padding: 3rem; }
  .edu-modern-block { 
    flex-direction: column; 
    text-align: center; 
    border-left: 1px solid var(--grey-light); 
    border-top: 6px solid var(--navy-base); 
  }

  /* Pengaturan Section About di Tablet */
  .about-intro { flex-direction: column; gap: 2rem; }
  .about-modern-container { gap: 3rem; }
  .skills-headline { font-size: 1.8rem; margin-bottom: 1.5rem; }
  .big-number { font-size: 6rem; }
  .experience-left {
    border-right: none;
    border-left: 4px solid var(--red-accent); 
    padding-left: 1.5rem;
    padding-right: 0;
  }
  
  /* Pengaturan Section Pengalaman di Tablet */
  .exp-grid { 
    grid-template-columns: 1fr; /* Berubah jadi tumpuk atas bawah */
    gap: 2rem;
    padding: 3rem;
  }
  .exp-col-left {
    border-right: none;
    border-bottom: 1px solid var(--grey-light);
    padding-right: 0;
    padding-bottom: 2rem;
  }
  .edu-badges { justify-content: center; } /* Memusatkan lencana di tablet */

  /* --- PERBAIKAN PORTOFOLIO DI TABLET --- */
  .portfolio-main-title { font-size: 3rem; margin-bottom: 2rem; }
  .port-card-navy { flex: 0 0 340px; padding: 2rem; }
  .port-num { font-size: 2.8rem; }

  /* Tablet: Gallery & Achievement */
  .masonry-grid { column-count: 2; }
  /* Tablet: Achievement Slider */
  .achieve-card-navy { 
    flex: 0 0 85vw; /* Lebar card menyusut di tablet */
    grid-template-columns: 1fr; /* Tumpuk atas bawah */
    padding: 4rem; gap: 3rem; text-align: center; 
  }
  .achieve-stats { justify-content: center; }
}


/* PERBAIKAN TOTAL LAYAR HP (AGAR TIDAK PENYOK / BENGKAK) */
@media screen and (max-width: 600px) {

  /* MEMBUAT CONTAINER FULL WIDTH DI HP AGAR SWIPE LEBIH LUAS */
  .exp-container, .portfolio-container { 
    padding: 0; 
    max-width: 100%;
  }
  .exp-subtitle, .exp-main-title, 
  .portfolio-subtitle, .portfolio-main-title { 
    padding: 0 5%; /* Menjaga judul tetap punya jarak aman di kiri-kanan */
  }
  .exp-slider-track, .portfolio-track {
    padding: 0 5% 20px 5%; /* Memberi jarak di dalam track agar ujung card tidak menabrak layar */
  }
  
  /* HERO SECTION DI HP */
  #profile {
    flex-direction: column-reverse; 
    gap: 1.5rem; 
    padding: 100px 5% 4rem 5%; 
  }
  
  .hero-image-wrapper { width: 260px; height: 260px; margin: 0 auto; padding: 10px; }
  .profile-img { width: 100%; height: 100%; object-fit: cover; }

  .hero-text-left {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .greeting-text { font-size: 1.2rem; margin-bottom: 0; }
  h1.hero-title { font-size: 2.5rem; margin-bottom: 0.5rem; } 
  .hero-divider { margin: 1.2rem auto; width: 50px; height: 3px; }
  .typewriter-left { font-size: 1.2rem; margin-bottom: 1rem; }
  
  .desc-left { 
    font-size: 0.95rem; 
    text-align: center; 
    margin: 0 auto 2rem auto; 
    max-width: 100%; 
    line-height: 1.6;
  }

  .btn-container { flex-wrap: wrap; justify-content: center !important; gap: 0.8rem; }
  .btn { padding: 0.8rem 1.8rem; font-size: 0.95rem; }
  .socials-left { justify-content: center !important; margin-top: 1.5rem; gap: 1.5rem; }
  .icon { font-size: 1.4rem; }

  /* SECTION ABOUT DI HP */
  .about-modern { padding: 60px 0; }
  .about-intro { flex-direction: column; gap: 1.5rem; }
  .experience-left {
    border-left: none;
    border-right: none;
    border-bottom: 2px solid var(--red-accent); 
    padding-left: 0;
    padding-bottom: 1rem;
    text-align: center;
    width: 100%;
  }
  .big-number { font-size: 5rem; } 
  .plus-sign { font-size: 3rem; }
  .skills-headline { text-align: center; font-size: 1.6rem; }
  .about-description { text-align: center; font-size: 0.95rem; }

  /* KARTU KEAHLIAN DI HP */
  .skills-grid-modern { grid-template-columns: 1fr; gap: 1.5rem; }
  .skill-card { padding: 1.5rem; border-radius: 12px; }
  .skill-card-header { margin-bottom: 1rem; padding-bottom: 1rem; gap: 0.8rem; }
  .skill-icon { font-size: 1.5rem; } 
  .skill-card h3 { font-size: 1.2rem; }
  .skill-tags { gap: 8px; }
  .skill-tag { font-size: 0.85rem; padding: 6px 14px; }

  /* --- PERBAIKAN SECTION PENGALAMAN DI HP --- */
  .exp-modern-section { padding: 80px 0; }
  .exp-main-title { font-size: 2.5rem; margin-bottom: 1rem; color: var(--white-smooth); }
  
  /* Kunci efek mengintip kiri kanan di HP */
  .exp-slider-track {
    gap: 1rem;
    padding: 10px 5vw 50px 5vw; 
  }
  .exp-slide { 
    flex: 0 0 85vw; 
    scroll-snap-align: center; 
    padding: 0;
  } 
  
  .exp-grid { 
    padding: 2.5rem 1.5rem; 
    border-radius: 16px; 
    gap: 1.5rem; 
    height: 100%; 
  }
  
  .exp-col-left { padding-bottom: 1.5rem; }
  .exp-col-left h3 { font-size: 1.4rem; }
  .exp-col-right p, .exp-col-right li { font-size: 1rem; }

  /* MENGEMPESKAN EDUKASI DI HP & MENCEGAH LUBER */
  .edu-modern-block {
    width: 85%; /* Lebar aman di HP */
    margin: 3rem auto 0 auto;
    padding: 1.5rem; 
    gap: 1rem;
    border-radius: 12px;
  }
  .edu-icon {
    width: 60px; height: 60px; 
    font-size: 1.8rem;
  }
  .edu-details h3 { font-size: 1.25rem; }
  .edu-details p { font-size: 0.95rem; }
  .edu-badges { 
    flex-direction: column; 
    gap: 10px; 
    align-items: center; 
  }

  /* --- PERBAIKAN PORTOFOLIO NAVY DI HP --- */
  .portfolio-modern-section { padding: 80px 0; }
  .portfolio-main-title { font-size: 2.5rem; margin-bottom: 2rem; }
  
  .portfolio-track { 
    gap: 1rem; 
    /* KUNCI HP: Padding kiri 12.5vw dan kanan 12.5vw. 
       Ini memaksa card berada di tengah dan membiarkan card lain mengintip */
    padding: 10px 12.5vw 50px 12.5vw; 
  }
  
  .port-card-navy { 
    flex: 0 0 75vw; /* Card mengambil 75% layar, sisa 25% dibagi ke kiri & kanan */
    scroll-snap-align: center; /* Selalu fokus di tengah */
    padding: 1.8rem; 
    border-radius: 24px;
  }
  
  .port-card-top { margin-bottom: 1.5rem; padding-bottom: 1rem; }
  .port-num { font-size: 2.5rem; }
  .port-category { font-size: 0.85rem; }
  .port-card-body { margin-bottom: 2rem; }
  .port-card-body h3 { font-size: 1.4rem; }
  .port-card-body p { font-size: 0.95rem; }
  
  .port-view-btn {
    opacity: 1; transform: translate(0, 0) scale(1);
    width: 40px; height: 40px; font-size: 1rem;
    bottom: 15px; right: 15px;
  }
  
  /* Tombol panah dibuat selalu muncul di HP agar mudah diklik */
  .port-view-btn {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    width: 40px; height: 40px; font-size: 1rem;
    bottom: 15px; right: 15px;
  }

  /* Lain-lain */
  article { font-size: 1rem; }
  footer nav { height: fit-content; margin-bottom: 2rem; }
  .contact-info-container p, .nav-links li a { font-size: 1rem; }

  /* HP: Gallery & Achievement */
  .gallery-modern-section { padding: 60px 0; }
  .gallery-main-title { font-size: 2.5rem; margin-bottom: 2rem; }
  .masonry-grid { column-count: 1; /* 1 baris ke bawah di HP */ }
  .masonry-item { margin-bottom: 1rem; }
  .masonry-overlay { opacity: 1; transform: translateY(0); padding: 1.5rem 1rem 1rem 1rem; } /* Selalu muncul di HP */

  /* --- PERBAIKAN ACHIEVEMENT (MILESTONE) DI HP --- */
  .achievement-section { padding: 60px 0 80px 0; }
  
  .achieve-track { gap: 1.5rem; padding: 10px 12.5vw 50px 12.5vw; }

  .achieve-card-navy { 
    flex: 0 0 80vw; 
    padding: 1.8rem; /* Padding dikurangi agar tidak terlalu tinggi */
    border-radius: 24px; 
    gap: 1.5rem; /* Jarak elemen dirapatkan */
  }

  .achieve-visual {
    aspect-ratio: 16/9; /* KUNCI: Ubah foto jadi horizontal agar super hemat ruang vertikal! */
  }
  
  .achieve-text h2 { font-size: 1.8rem; margin-bottom: 1rem; } /* Font dikecilkan */
  .achieve-desc { font-size: 0.95rem; margin-bottom: 1.5rem; }
  
  .achieve-stats { 
    flex-direction: row; /* Jejerkan statistik menyamping di HP agar hemat ruang */
    justify-content: space-between;
    gap: 1rem; 
    padding-top: 1.5rem;
  }
  .stat-item h3 { font-size: 1.5rem; }
  .stat-item p { font-size: 0.8rem; }
}