/* =====================================================================
   TOYA — perbaikan responsif (tanpa mengubah desain)
   Dimuat setelah bundle Vite.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Foto meluber di layar 1400-1519px
   Pengukuran pada viewport 1425px:
       .container  = 1425px, padding 80+80  ->  ruang dalam 1265px
       kartu 458 + gap 16 + foto 884        =  1358px   (meluber 93px)
   Angka min-width itu berasal dari @media (min-width:1400px) dan
   dirancang untuk .container yang penuh 1600px (ruang 1440px). Pada
   1400-1519px ruangnya belum cukup, jadi foto didorong keluar layar.
   Itu sebabnya zoom 90% terlihat benar: viewport jadi 1583px, ruang
   1423px, dan 1358px muat.

   Di bawah 1520px ukuran paksa dilepas dan proporsi desain dijaga
   lewat flex: kartu 34%, foto sisanya -- rasio yang sama dengan
   458:884 pada desain asli. Di 1520px ke atas tidak ada yang diubah.
   --------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1519.98px) {
  .container .service-image {
    min-width: 0;
    width: auto;
    flex: 1 1 auto;
  }
  .container .card-primary,
  .container .card-secondary {
    min-width: 0;
  }
  .service-cards {
    flex: 0 0 34%;
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------
   2. Scrollbar horizontal di sebagian laptop
   .header-divider memakai width:100vw + calc(-50vw + 50%). Satuan vw
   menghitung lebar layar TERMASUK scrollbar vertikal, jadi di komputer
   yang scrollbar-nya memakan ruang elemen ini ~15px lebih lebar dari
   area terlihat; di layar dengan scrollbar melayang tidak kelihatan.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .header-divider {
    width: 100%;
    margin: 20px 0 30px;
  }
}

/* ---------------------------------------------------------------------
   3. Navbar di 769-991px
   Situs hanya punya satu titik ganti di 768px, padahal pada lebar ini
   menu desktop sudah tidak muat dan tombol Call Us menimpa menu.
   Properti disalin dari blok mobile yang sudah ada supaya tombol
   hamburger tampil utuh.
   --------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 991.98px) {
  .main-navigation { padding: 0 20px; justify-content: space-between; }
  .logo { width: auto; margin-right: auto; }
  .nav-content { width: 100%; justify-content: space-between; }
  .nav-links,
  .nav-separator,
  .call-button { display: none !important; }
  .btn-hamburger {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 8px;
    width: 40px;
    height: 40px;
    background: #3C3D3E;
    border: 1px solid #6D6E71;
    border-radius: 12px;
    position: relative;
    margin-left: auto;
    order: 2;
    z-index: 10;
    transition: all 0.3s ease;
  }
  .hamburger-icon { width: 16px; height: 16px; object-fit: contain; }
}

/* ---------------------------------------------------------------------
   4-5. Animasi footer

   Dua hal yang terpisah, dikendalikan dua class berbeda dari JavaScript:

   .footer-anim   -> animasi isi (alamat) dan huruf TOYA. Aktif di SEMUA
                     ukuran layar: HP, tablet, maupun desktop.
   .footer-reveal -> efek tersingkap, yaitu .footer-2 dibuat fixed di
                     dasar layar dan konten menggulung di atasnya. Hanya
                     dipasang bila blok itu MUAT di layar (JS mengukur).
                     Di HP yang layarnya pendek, blok TOYA bisa lebih
                     tinggi dari layar - kalau dipaksa fixed, ia akan
                     menutupi konten. Di kasus itu footer mengalir normal
                     dan animasinya mengikuti saat footer masuk layar.

   Keduanya baru dipasang kalau JavaScript jalan, jadi tanpa JS footer
   tampil apa adanya dan tidak ada yang tersembunyi.
   --------------------------------------------------------------------- */

/* ---- efek tersingkap ---- */
body.footer-reveal main {
  padding-bottom: var(--tinggi-footer, 0px);
}

body.footer-reveal main > footer {
  position: relative;
  z-index: 0;
}

body.footer-reveal main > footer .footer {
  position: relative;
  z-index: 2;
}

body.footer-reveal main > footer .footer-2 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

/* Konten halaman menutupi blok TOYA. Tanpa latar solid, blok itu akan
   tembus terlihat di belakang teks.
   CATATAN: <footer> diberi z-index 0, BUKAN 1. Dengan 1 ia menjadi
   konteks penumpukan baru sehingga .footer-2 di dalamnya ikut terangkat
   ke atas seluruh konten dan menutupi hero. */
body.footer-reveal main > *:not(footer) {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
}


/* ---- efek tersingkap versi layar pendek (HP/tablet) ----
   Kalau blok TOYA lebih tinggi daripada layar, ia tidak bisa dibuat
   fixed: bagian atasnya (alamat) akan berada di luar layar dan tidak
   pernah terlihat. Di kondisi itu blok digerakkan naik mengikuti
   guliran, sehingga tetap terasa tersingkap tanpa ada isi yang hilang.
   Nilai transform-nya diatur JavaScript lewat --geser. */
body.footer-anim:not(.footer-reveal) main > footer .footer-2 {
  transform: translateY(var(--geser, 0px));
  will-change: transform;
}

/* ---- isi blok alamat ---- */
body.footer-anim .footer-2 .address-section {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1),
              transform .55s cubic-bezier(.22,.7,.3,1);
}

body.footer-anim .footer-2.tersingkap .address-section {
  opacity: 1;
  transform: none;
}

body.footer-anim .footer-2.tersingkap .address-section:nth-child(2) { transition-delay: .09s; }
body.footer-anim .footer-2.tersingkap .address-section:nth-child(3) { transition-delay: .18s; }

/* ---- wordmark TOYA, huruf demi huruf mengikuti guliran ----
   Sengaja TIDAK memakai transition-delay: delay membuat animasi jalan
   sendiri begitu dipicu, lepas dari posisi guliran.
   transform dipasang pada <g> pembungkus, BUKAN pada <path>, karena
   tiap path sudah punya atribut transform sendiri untuk menempatkan
   hurufnya - menimpanya lewat CSS akan menggeser huruf dari posisinya. */
body.footer-anim .footer-2 .logo-toya .huruf {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .32s ease,
              transform .42s cubic-bezier(.22,.7,.3,1);
}

body.footer-anim .footer-2 .logo-toya .huruf.tampil {
  opacity: 1;
  transform: none;
}


/* ---- bagian .footer (kolom link, sertifikasi, hak cipta) ----
   Bagian ini TIDAK ikut efek tersingkap - ia menggulung normal. Yang
   ditambahkan hanya animasi masuk, dipicu saat bagian itu mulai
   terlihat di layar. Berlaku di semua ukuran layar. */
body.footer-anim .footer .footer-section,
body.footer-anim .footer .box-box,
body.footer-anim .footer .footer-bottom {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1),
              transform .55s cubic-bezier(.22,.7,.3,1);
}

body.footer-anim .footer.tampil .footer-section,
body.footer-anim .footer.tampil .box-box,
body.footer-anim .footer.tampil .footer-bottom {
  opacity: 1;
  transform: none;
}

/* masuk berurutan dari kiri ke kanan */
body.footer-anim .footer.tampil .footer-section:nth-child(2) { transition-delay: .07s; }
body.footer-anim .footer.tampil .footer-section:nth-child(3) { transition-delay: .14s; }
body.footer-anim .footer.tampil .footer-section:nth-child(4) { transition-delay: .21s; }
body.footer-anim .footer.tampil .box-box:nth-child(1) { transition-delay: .20s; }
body.footer-anim .footer.tampil .box-box:nth-child(2) { transition-delay: .27s; }
body.footer-anim .footer.tampil .box-box:nth-child(3) { transition-delay: .34s; }
body.footer-anim .footer.tampil .footer-bottom { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
  body.footer-anim .footer-2 .address-section,
  body.footer-anim .footer-2 .logo-toya .huruf,
  body.footer-anim .footer .footer-section,
  body.footer-anim .footer .box-box,
  body.footer-anim .footer .footer-bottom {
    opacity: 1;
    transform: none;
    transition: none;
  }
}