/* ============================================================
   responsive.css — Update Final: Experience 2 Kolom & Tab Center
   ============================================================ */

/* ── Navbar & Header ─────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: rgba(31, 28, 70, 0.95);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    z-index: 200;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    margin: 10px 0;
  }

  .nav-links li a {
    color: #f5f5f5;
    font-size: 1rem;
  }

  .hamburger {
    display: flex;
  }
}

/* ── Home Section ────────────────────────────────────────── */
@media (max-width: 768px) {
  .home {
    flex-direction: column-reverse;
    text-align: center;
    padding-top: 120px;
  }

  .home .content {
    padding-left: 0;
  }

  .home .btn-group {
    justify-content: center;
    flex-wrap: wrap;
  }

  .quick-stats {
    justify-content: center;
  }

  .home .profile-container {
    margin-bottom: 2rem;
  }
}

/* ── Skills Section (Default: 1 Kolom di Mobile) ─────────── */
@media (max-width: 992px) {
  .skills-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .skill-category {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .skills-images {
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 0.75rem;
  }

  .skill-image {
    width: 36px;
    height: 36px;
  }

  .skill-icon {
    font-size: 1.8rem;
    height: 36px;
    line-height: 36px;
  }
}

/* ── Experience / Portfolio Section (Paksa 2 Kolom & Tab Center) ── */
@media (max-width: 768px) {
  .tab-nav {
    display: flex;
    justify-content: center; /* Menu Tab di tengah */
    flex-wrap: wrap;         /* Agar aman jika menu bertambah */
    gap: 10px;
    margin-bottom: 30px;
    padding: 10px 0;
  }

  .tab-btn {
    white-space: nowrap;
    padding: 8px 18px;
    font-size: 0.85rem;
    flex-shrink: 0;
    border-radius: 25px;
  }

  /* Grid Kartu dipaksa 2 kolom */
  .portfolio-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .portfolio-card {
    border-radius: 10px;
  }

  .card-image, .card-image-static {
    height: 110px; /* Tinggi gambar disesuaikan */
  }

  .card-body {
    padding: 10px;
  }

  .card-title {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .card-subtitle {
    font-size: 0.65rem;
  }

  .card-date {
    font-size: 0.6rem;
    margin-bottom: 5px;
  }

  .card-text {
    font-size: 0.7rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi teks agar rapi */
    line-clamp: 2;         /* Standar properti modern */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
  }

  .card-tag {
    padding: 2px 6px;
    font-size: 0.6rem;
  }

  .card-link {
    font-size: 0.7rem;
  }

  .card-badge {
    font-size: 0.5rem;
    padding: 2px 5px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* ── About Section ───────────────────────────────────────── */
@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .timeline {
    padding-left: 18px;
  }

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

  .btn {
    justify-content: center;
  }
}

/* ── Contact Section ─────────────────────────────────────── */
@media (max-width: 768px) {
  .contact {
    padding: 2rem 1rem;
  }

  .contact h2 {
    font-size: 1.75rem;
  }
}

/* ── Footer ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .social-links {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .contact-item a,
  .contact-item span {
    font-size: 1rem;
    left: 0; /* Reset posisi di layar sangat kecil */
  }
}

/* ── Modal ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .modal-content {
    max-width: 95%;
  }

  .close-modal {
    font-size: 30px;
    top: 15px;
    right: 20px;
  }
}

/* ============================================================
   ANDROID / HP KECIL (≤ 480px) — ikon & teks lebih kecil, tidak padat
   ============================================================ */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Navbar */
  .logo { font-size: 1.1rem; }
  .nav-links { right: 12px; top: 62px; }
  .nav-links li a { font-size: 0.9rem; }

  /* Section umum */
  .section { padding: 60px 14px; }
  #about, #skills { padding: 50px 14px; }
  .section-title { font-size: 1.5rem; margin-bottom: 1rem; }
  .section-subtitle { font-size: 0.85rem; margin-bottom: 1.5rem; }

  /* Home */
  .home { padding-top: 100px; margin-top: 60px; gap: 1rem; }
  .home h1 { font-size: 1.6rem; }
  .typing-text { font-size: 0.95rem; }
  .home p { font-size: 0.9rem; line-height: 1.55; }
  .home .profile-pic { width: 140px; height: 140px; border-width: 4px; }
  .home .btn-group { gap: 0.5rem; }
  .home .btn-group a { font-size: 0.8rem; padding: 8px 12px; }
  .quick-stats { gap: 0.4rem; }
  .quick-stats span { font-size: 0.7rem; padding: 4px 9px; }

  /* About */
  .about-text h3 { font-size: 1.2rem; }
  .about-text p { font-size: 0.9rem; line-height: 1.6; }
  .timeline-year { font-size: 0.9rem; }
  .timeline-title { font-size: 0.95rem; }
  .timeline-desc { font-size: 0.8rem; }

  /* Skills — 3 kolom, ikon & teks kecil */
  .skills-grid { gap: 1rem; margin-top: 1.5rem; }
  .skill-category { padding: 1rem; border-radius: 14px; }
  .skill-category h3 { font-size: 1rem; gap: 8px; margin-bottom: 1rem; text-align: center; }
  .skills-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .skill-image-item { padding: 0.6rem 0.25rem; border-radius: 10px; }
  .skill-image { width: 28px; height: 28px; margin-bottom: 0.4rem; }
  .skill-icon { font-size: 1.4rem; height: 28px; line-height: 28px; margin-bottom: 0.4rem; }
  .skill-name { font-size: 0.65rem; line-height: 1.25; margin-bottom: 4px; }
  .skill-level { font-size: 0.5rem; padding: 2px 6px; letter-spacing: 0.2px; }

  /* Experience */
  .tab-btn { padding: 6px 12px; font-size: 0.75rem; }
  .card-image, .card-image-static { height: 90px; }

  /* Contact */
  .contact h2 { font-size: 1.4rem; }
  input, textarea { font-size: 0.9rem; }
  button { font-size: 0.9rem; padding: 9px 16px; }

  /* Footer */
  .footer-description { font-size: 0.85rem; }
  .footer-title { font-size: 1rem; }
  .footer-links a, .contact-info { font-size: 0.85rem; }
  .social-link span { font-size: 0.75rem; }
}

/* HP sangat kecil (≤ 360px) */
@media (max-width: 360px) {
  .home h1 { font-size: 1.4rem; }
  .skill-name { font-size: 0.6rem; }
  .skill-icon { font-size: 1.25rem; }
}