/*!
 * tk_fx.css — gaya lapisan "rasa aplikasi" etalase.
 * ===========================================================================
 * Semua elemen di sini dibuat oleh tk_fx.js dan hidup sebagai LAPISAN
 * MENGAMBANG langsung di bawah <body>. Tidak satu pun menyentuh tata letak
 * halaman: nol reflow, nol pergeseran, aman dinyalakan di halaman mana pun.
 *
 * Setiap animasi memakai HANYA transform + opacity supaya berjalan di
 * compositor (GPU) dan tidak pernah memicu layout ulang — inilah bedanya
 * "halus seperti aplikasi" dengan "tersendat".
 */

/* ==========================================================================
   1. BARANG TERBANG KE KERANJANG
   ========================================================================== */
.tkfx-ghost {
  position: fixed;
  z-index: 2147482000;         /* di atas isi & bilah menu, di bawah layar boot */
  pointer-events: none;
  border-radius: 16px;
  background-color: #e2e8f0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 14px 34px -10px rgba(15, 23, 42, .45), 0 0 0 3px rgba(255, 255, 255, .85);
  will-change: transform, opacity;
  contain: layout paint style;
}
/* Produk tanpa gambar tetap punya sesuatu yang terbang — bulatan merek,
   bukan kotak abu kosong yang terlihat seperti gambar gagal dimuat. */
.tkfx-ghost[data-plain="1"] {
  border-radius: 999px;
  background-image: none;
  background-color: var(--nsh-accent, #0f766e);
}

/* ==========================================================================
   2. CINCIN DENYUT (mendarat di keranjang)
   ========================================================================== */
.tkfx-ring {
  position: fixed;
  z-index: 2147482001;
  pointer-events: none;
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 999px;
  border: 2.5px solid var(--nsh-accent, #0f766e);
  transform: translate(-50%, -50%) scale(.25);
  opacity: 0;
  will-change: transform, opacity;
}

/* ==========================================================================
   3. LEDAKAN KECIL DI IKON KERANJANG
   --------------------------------------------------------------------------
   Satu wadah + delapan percikan. Sengaja SATU ledakan hidup pada satu waktu:
   klik beruntun digabung oleh tk_fx.js, bukan ditumpuk. Dengan begitu jumlah
   simpul yang dianimasikan tetap sama entah pembeli menambah 1 barang atau
   500 - tidak ada jalur yang bisa membanjiri peramban.

   Hanya transform + opacity yang dianimasikan (GPU), nol tata letak ulang.
   ========================================================================== */
.tkfx-burst {
  position: fixed;
  z-index: 2147482002;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}
.tkfx-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: var(--nsh-accent, #0f766e);
  opacity: 0;
  will-change: transform, opacity;
}
/* Ukuran diselang-seling supaya ledakannya terbaca sebagai percikan, bukan
   titik-titik yang menyebar rata. */
.tkfx-spark:nth-child(2n) { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: .9; }

/* Kilau lembut di belakang ikon keranjang - memberi "berat" pada ledakan
   tanpa menambah satu pun elemen yang bergerak jauh. */
.tkfx-glow {
  position: fixed;
  z-index: 2147482000;
  pointer-events: none;
  width: 92px;
  height: 92px;
  margin: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  background: radial-gradient(circle, rgba(var(--nsh-accent-rgb, 15,118,110), .38) 0%, rgba(var(--nsh-accent-rgb, 15,118,110), 0) 68%);
  will-change: transform, opacity;
}

/* ==========================================================================
   4. RIAK SENTUH
   --------------------------------------------------------------------------
   Sengaja TIDAK berada di dalam tombol. Riak di dalam tombol menuntut
   `overflow:hidden`, dan itu akan memotong lencana diskon, sudut kartu yang
   meluber, serta bayangan tombol utama. Lapisan mengambang bebas dari semua
   itu dan biayanya sama.
   ========================================================================== */
.tkfx-ripple {
  position: fixed;
  z-index: 2147481000;
  pointer-events: none;
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  background: radial-gradient(circle closest-side,
              rgba(15, 23, 42, .20), rgba(15, 23, 42, .10) 62%, rgba(15, 23, 42, 0) 100%);
  will-change: transform, opacity;
}

/* ==========================================================================
   5. TOMBOL "SUDAH DITAMBAHKAN"
   --------------------------------------------------------------------------
   Hanya kilau di ATAS tombol. Teks aslinya tidak diganti, jadi lebar tombol
   tidak pernah melompat dan tidak ada label yang hilang saat efek berjalan.
   ========================================================================== */
.tkfx-added { position: relative; }
.tkfx-added::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(255, 255, 255, .38);
  animation: tkfxFlash .68s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes tkfxFlash {
  0%   { opacity: 0; transform: scale(.96); }
  22%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ==========================================================================
   6. TOMBOL MENGAMBANG YANG BISA DIGESER
   ========================================================================== */
[data-tkfx-drag] {
  touch-action: none;               /* seretan tidak boleh ikut menggulir halaman */
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              box-shadow .22s ease;
  will-change: transform;
}
[data-tkfx-drag][data-tkfx-dragging="1"] {
  transition: none;                 /* mengikuti jari 1:1 */
  transform: scale(1.06);
  cursor: grabbing;
}
[data-tkfx-drag] [data-tkfx-handle] { cursor: grab; }
[data-tkfx-drag][data-tkfx-dragging="1"] [data-tkfx-handle] { cursor: grabbing; }

/* Saat tombol berada di paruh ATAS layar, menu munculannya harus turun —
   kalau tidak, daftarnya keluar dari layar dan tidak bisa dibaca. */
[data-tkfx-drag][data-tkfx-top="1"] { flex-direction: column-reverse; }
[data-tkfx-drag][data-tkfx-top="1"] #waWidgetMenu { transform-origin: top center; }

/* Perataan silang mengikuti tepi tempat dok menempel.
   Dok LEBIH LEBAR daripada tombolnya (ia juga memuat menu munculan yang
   sedang tersembunyi), dan tombol duduk di salah satu ujungnya. Tanpa dua
   aturan ini, menempel ke tepi kiri hanya memindahkan KOTAK dok — tombolnya
   tetap tertinggal di tengah layar.
   Spesifisitas (0,2,0) sengaja lebih tinggi daripada kelas `items-end`
   bawaan (0,1,0), jadi tidak perlu !important. */
[data-tkfx-drag][data-tkfx-side="left"]  { align-items: flex-start; }
[data-tkfx-drag][data-tkfx-side="right"] { align-items: flex-end; }

/* Isyarat sekali-lihat bahwa tombol ini bisa dipindah. Muncul saat disentuh
   lama / diseret, lalu hilang sendiri. */
[data-tkfx-drag][data-tkfx-dragging="1"]::after {
  content: "Lepas untuk menempel";
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 700 10px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  background: rgba(15, 23, 42, .88);
  padding: 3px 9px;
  border-radius: 999px;
  pointer-events: none;
}

/* ==========================================================================
   7. BARIS YANG DIGESER MENDATAR (chip kategori, koleksi, kartu mendatar)
   --------------------------------------------------------------------------
   Tiga penyempurnaan kecil yang menentukan apakah sebuah baris terasa
   "aplikasi" atau "halaman web":

   1. `overscroll-behavior-x: contain` — tanpa ini, menggeser chip sampai
      mentok akan DITERUSKAN ke peramban dan memicu gestur "kembali" di
      Safari/Chrome. Pembeli yang menggeser deretan kategori tiba-tiba keluar
      dari toko. Ini bug nyata, bukan hiasan.
   2. `-webkit-overflow-scrolling: touch` — momentum di WebView iOS lama.
   3. `scroll-snap-type: x proximity` — berhenti rapi di awal sebuah chip,
      bukan memotong huruf di tengah. Sengaja `proximity`, bukan `mandatory`:
      `mandatory` merebut kendali dan terasa melawan jari.

   PEMILIHNYA `~=` (token utuh), BUKAN `*=`. Pemilih substring akan ikut kena
   pada kelas varian seperti `md:overflow-x-auto` atau `after:...`, dan itu
   persis jenis kesalahan yang pernah menaruh latar gelap di bawah baris chip.
   ========================================================================== */
[class~="overflow-x-auto"],
[class~="scrollbar-hide"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
[class~="scrollbar-hide"] { scroll-snap-type: x proximity; }
[class~="scrollbar-hide"] > .label-tab,
[class~="scrollbar-hide"] > a,
[class~="scrollbar-hide"] > button { scroll-snap-align: start; }

/* ==========================================================================
   8. GERAK DIKURANGI
   --------------------------------------------------------------------------
   Umpan baliknya tetap ada (pembeli harus tahu barangnya masuk), tetapi
   tidak ada yang bergerak melintasi layar.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tkfx-ghost, .tkfx-ring, .tkfx-ripple, .tkfx-burst, .tkfx-glow { display: none !important; }
  .tkfx-added::after { animation-duration: .01s; }
  [data-tkfx-drag] { transition: none; }
}