/* ==========================================================================
   RESPONSIVE — dimuat paling akhir. Hanya mengatur layout & ukuran, bukan warna.
   Tujuan: tampilan konsisten di laptop, tablet, dan HP Android/iPhone
   dengan lebar layar yang berbeda-beda (320px sampai desktop).
   ========================================================================== */

/* 0. DASAR ---------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;      /* cegah Chrome Android memperbesar teks sendiri */
}
/* Catatan: jangan pasang overflow di html/body di sini. Itu membuat sidebar admin (sticky) rusak. */
img, video, iframe { max-width: 100%; }

/* Lebar minimum kolom grid tidak boleh melebihi lebar layar (mencegah overflow di 320px) */
.project-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.stack-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.contact-meta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.work-grid > *, .project-grid > *, .stack-grid > *, .value-grid > *, .contact-meta > *,
.row > * { min-width: 0; }

/* Input di bawah 16px membuat iOS Safari melakukan zoom saat fokus */
@media (max-width: 767.98px) {
  input, select, textarea { font-size: 16px; }
}

/* Area aman layar (notch iPhone, dsb.) */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.site-nav { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }

/* 1. NAVBAR --------------------------------------------------------------- */
/* Di HP: menu dibuka sebagai panel sendiri di bawah baris logo, bukan kapsul bulat */
@media (max-width: 991.98px) {
  .site-nav .nav-shell {
    flex-wrap: wrap;
    align-items: center;
    border-radius: 24px;
    padding: .5rem .55rem .5rem .9rem;
  }
  .site-nav .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    margin-top: .6rem;
    padding: .4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    max-height: calc(100svh - var(--nav-h) - 40px);
    overflow-y: auto;
  }
  .site-nav .navbar-collapse .navbar-nav {
    margin: 0 !important;
    gap: 4px;
    align-items: stretch;
  }
  .site-nav .navbar-collapse .nav-link {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 12px;
    font-size: .98rem;
    text-align: left;
  }
  .site-nav .navbar-collapse .nav-link.active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .site-nav .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
  }
}

/* Layar sangat kecil: logo dan jarak dirapatkan supaya bar tetap muat satu baris */
@media (max-width: 389.98px) {
  .site-nav .brand { font-size: 1rem; gap: .45rem; }
  .site-nav .brand-mark { display: none; }
  .site-nav .lang-switch a { padding: .28rem .45rem; }
  .site-nav .d-flex { gap: .35rem !important; }
}

/* 2. HERO ----------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .hero2 {
    min-height: 0;
    min-height: auto;
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 72px;
  }
  .hero2 .row { min-height: 0; }
  .hero2 .hero-title {
    font-size: clamp(3.2rem, 15vw, 6.5rem);
    overflow-wrap: anywhere;
  }
}
@media (max-width: 767.98px) {
  .hero2 .hero-actions { flex-direction: column; width: 100%; }
  .hero2 .hero-actions .btn-lg { width: 100%; min-width: 0; }
  .hero2-sub { max-width: none; }
}

/* 3. PROYEK --------------------------------------------------------------- */
/* Gambar selalu mengisi kotak cover dan tidak ikut menentukan lebar kartu */
.project-cover { min-width: 0; width: 100%; }
.project-cover img,
.cert-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.cert-thumb { position: relative; }

@media (max-width: 991.98px) {
  .project-card.is-lead { grid-template-columns: minmax(0, 1fr); }
  .project-card.is-lead .project-cover { min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .project-card.is-lead .project-body { padding: 1.7rem 1.6rem 1.8rem; }
  .project-card.is-lead .project-title { font-size: clamp(1.6rem, 5vw, 2rem); }
}
@media (max-width: 767.98px) {
  .project-body { padding: 1.4rem 1.3rem 1.5rem; }
  .project-title { font-size: 1.4rem; }
}

/* 4. KONTAK --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .contact-band { padding: 2.25rem 1.4rem; border-radius: 26px; }
  .contact-big { font-size: clamp(2.1rem, 10vw, 3rem); max-width: none; }
  .contact-band .hero-actions { flex-direction: column; align-items: stretch; }
  .contact-band .hero-actions .btn { width: 100%; min-width: 0; }
  .contact-v { overflow-wrap: anywhere; }
}

/* 5. FOOTER --------------------------------------------------------------- */
.footer-mail {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(1.15rem, 4.6vw, 3.2rem);
}
@media (max-width: 767.98px) {
  .footer-cta { padding: 3rem 0 2.25rem; gap: 1.25rem; }
  .footer-bottom-bar {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
  }
}

/* 6. CHATBOT -------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .chat-panel { height: min(520px, 72svh); bottom: 84px; }
  .chat-form input { font-size: 16px; }
}

/* 7. SECTION & BAHASA SEMPIT ---------------------------------------------- */
@media (max-width: 767.98px) {
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .section { padding: 3.5rem 0; }
  .section-title { font-size: clamp(2rem, 9vw, 2.8rem); overflow-wrap: anywhere; }
  .section-split { margin-bottom: 2.25rem; }
  .section-split-end { max-width: none; }
}