/* ════════════════════════════════════════════════════════════════════════════
   LAPISAN GERAK & INTERAKSI — Bumi Emas
   Ditulis terpisah dari markup desain supaya tampilan dasarnya tak berubah:
   semua efek menempel lewat atribut data-* yang dipasang site.js.

   Prinsip:
   • Tanpa JS / JS gagal → halaman tampil UTUH (kelas .gerak baru dipasang
     setelah skrip jalan; sebelum itu tidak ada yang disembunyikan).
   • Hanya transform & opacity yang dianimasikan — properti yang tidak memicu
     perhitungan tata letak ulang, jadi tetap mulus di ponsel kelas menengah.
   • prefers-reduced-motion dihormati penuh: gerak mati, isi tetap lengkap.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Muncul saat masuk layar ─────────────────────────────────────────────
   Dipasang HANYA ketika .gerak aktif (skrip hidup), sehingga tak ada risiko
   konten tak terlihat permanen. */
.gerak [data-muncul] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .68s cubic-bezier(.22,.61,.36,1), transform .68s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.gerak [data-muncul].tampil { opacity: 1; transform: none; }
/* Deretan kartu muncul berurutan — jeda kecil, tidak sampai terasa lambat */
.gerak [data-muncul][data-jeda="1"] { transition-delay: .07s; }
.gerak [data-muncul][data-jeda="2"] { transition-delay: .14s; }
.gerak [data-muncul][data-jeda="3"] { transition-delay: .21s; }
.gerak [data-muncul][data-jeda="4"] { transition-delay: .28s; }
.gerak [data-muncul][data-jeda="5"] { transition-delay: .35s; }

/* ── 2. Kartu terangkat saat disentuh kursor ─────────────────────────────── */
[data-angkat] {
  transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s ease, border-color .34s ease;
  will-change: transform;
}
@media (hover: hover) {
  [data-angkat]:hover,
  /* elemen yang juga "muncul saat digulir" memakai transform:none setelah
     tampil; aturan hover harus lebih spesifik agar tidak kalah */
  .gerak [data-muncul].tampil[data-angkat]:hover {
    transform: translateY(-7px);
    box-shadow: 0 26px 54px rgba(124,87,45,.20) !important;
    border-color: rgba(196,154,100,.55) !important;
  }
}

/* ── 3. Foto & logam mulia: membesar halus di dalam bingkainya ──────────────
   Bingkai diberi overflow tersembunyi oleh skrip, gambar yang membesar jadi
   tidak menabrak elemen sebelahnya. */
[data-bingkai] { overflow: hidden; }
[data-zoom] { transition: transform .62s cubic-bezier(.22,.61,.36,1); will-change: transform; }
@media (hover: hover) {
  [data-bingkai]:hover [data-zoom], [data-zoom]:hover { transform: scale(1.065); }
}

/* Keping logam mulia: sedikit terangkat + miring — memberi kesan benda fisik */
@media (hover: hover) {
  [data-keping] { transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .5s ease; will-change: transform; }
  [data-keping]:hover,
  .gerak [data-muncul].tampil[data-keping]:hover {
    transform: translateY(-10px) rotate(-1.6deg) scale(1.04);
    filter: drop-shadow(0 18px 26px rgba(124,87,45,.28));
  }
}

/* ── 4. Tombol: kilau menyapu + tekanan ─────────────────────────────────── */
[data-tombol] { position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .3s ease; }
[data-tombol]::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%;
  width: 45%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  [data-tombol]:hover,
  .gerak [data-muncul].tampil[data-tombol]:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(124,87,45,.26); }
  [data-tombol]:hover::after { animation: kilauSapu .85s ease; }
}
[data-tombol]:active { transform: translateY(0) scale(.985); }
@keyframes kilauSapu {
  from { left: -60%; opacity: 0; }
  25%  { opacity: 1; }
  to   { left: 120%; opacity: 0; }
}

/* ── 5. Header: memadat saat halaman digulir ─────────────────────────────── */
header {
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, padding .35s ease;
}
header.padat {
  background-color: rgba(124,87,45,.94) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 10px 30px rgba(58,42,22,.18);
}
/* Menu: garis emas tumbuh dari kiri */
header nav a, header a[href$=".html"] { position: relative; }
header a[href$=".html"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; opacity: .75;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
@media (hover: hover) {
  header a[href$=".html"]:hover::after { transform: scaleX(1); }
}

/* ── 6. Baris tabel harga: sorotan lembut ────────────────────────────────── */
@media (hover: hover) {
  [data-tabel="karat"]:hover, [data-tabel="lm"]:hover { background: #FCF7EE; }
}
[data-tabel] { transition: background-color .25s ease; }

/* ── 7. Angka harga saat diperbarui ──────────────────────────────────────── */
[data-angka-baru] { animation: angkaMasuk .55s cubic-bezier(.22,.61,.36,1); }
@keyframes angkaMasuk {
  from { opacity: .35; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── 8. Tombol naik ke atas ──────────────────────────────────────────────── */
#ke-atas {
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 999px; border: none;
  background: #7C572D; color: #fff; font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: 0 14px 30px rgba(124,87,45,.34);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,.61,.36,1);
  z-index: 60;
}
#ke-atas.tampak { opacity: 1; transform: none; pointer-events: auto; }
#ke-atas:hover { background: #3A2A16; }

/* ── 9. Pita judul & gambar hero: gerak sangat halus ─────────────────────── */
.gerak [data-hero-foto] { animation: heroNafas 18s ease-in-out infinite alternate; }
@keyframes heroNafas {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}

/* ── 10. Hormati pengguna yang meminta gerak dikurangi ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gerak [data-muncul] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-angkat]:hover, [data-keping]:hover, [data-tombol]:hover { transform: none !important; }
  [data-zoom], [data-keping], [data-angkat], [data-tombol] { transition: none !important; }
  .gerak [data-hero-foto] { animation: none !important; }
  [data-tombol]:hover::after { animation: none !important; }
  #ke-atas { transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════════════
   MENU PONSEL — di bawah 900px daftar menu asli disembunyikan dan diganti
   tombol tiga garis + panel geser. Sebelumnya menu memanjang keluar layar:
   lima item terakhir (termasuk Kontak) tak pernah bisa disentuh.
   ════════════════════════════════════════════════════════════════════════════ */
#tombol-menu { display: none; }

@media (max-width: 900px) {
  header .menu-asli { display: none !important; }

  #tombol-menu {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-left: auto;
    background: transparent; border: none; cursor: pointer; flex-shrink: 0;
  }
  #tombol-menu span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: currentColor; transition: transform .3s ease, opacity .25s ease;
  }
  #tombol-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #tombol-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #tombol-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  #panel-menu {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    background: #FFFFFF; z-index: 90;
    box-shadow: -18px 0 50px rgba(58,42,22,.22);
    transform: translateX(102%); transition: transform .38s cubic-bezier(.22,.61,.36,1);
    display: flex; flex-direction: column; padding: 88px 26px 34px; gap: 4px;
    overflow-y: auto;
  }
  #panel-menu.buka { transform: none; }
  #panel-menu a {
    display: flex; align-items: center; min-height: 52px;
    font-size: 17px; font-weight: 600; color: #3A2A16; text-decoration: none;
    border-bottom: 1px solid rgba(124,87,45,.12);
  }
  #panel-menu a:last-of-type { border-bottom: none; }
  #panel-menu a[aria-current="page"] { color: #7C572D; }
  #panel-menu a[aria-current="page"]::before {
    content: ""; width: 3px; align-self: stretch; margin: 10px 12px 10px 0;
    border-radius: 2px; background: #7C572D;
  }
  #panel-menu .panel-cta {
    margin-top: 18px; justify-content: center; background: #7C572D; color: #fff;
    border-radius: 999px; min-height: 52px; font-weight: 700; border-bottom: none;
  }
  #tirai-menu {
    position: fixed; inset: 0; background: rgba(26,21,18,.42); z-index: 80;
    opacity: 0; pointer-events: none; transition: opacity .3s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  #tirai-menu.tampak { opacity: 1; pointer-events: auto; }
  body.menu-terbuka { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #panel-menu, #tirai-menu, #tombol-menu span { transition: none !important; }
}