/* ==========================================================================
   Toko Naca — Motion Layer v2 (DESKTOP)
   ADDITIVE. Tidak mengubah layout/ukuran/posisi. Hanya gerak.
   Palet tetap earthy: #fbf9f6 / #75593b / #151616.
   Dimuat SETELAH animations.css supaya bisa menyempurnakan.
   ========================================================================== */

/* ==========================================================================
   1. ENTRANCE — konten muncul bertahap saat halaman dibuka
   ========================================================================== */

.tn-reveal {
  animation: tnFadeUpV2 .5s var(--tn-ease) both;
}
@keyframes tnFadeUpV2 {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   2. HEADER — bayangan halus saat discroll
   ========================================================================== */

header {
  transition: box-shadow .25s var(--tn-ease), background-color .25s var(--tn-ease);
}
header.tn-scrolled {
  box-shadow: 0 4px 20px -8px rgba(19, 27, 46, .16);
}

/* ==========================================================================
   3. SIDEBAR — item aktif diberi penanda bergerak
   ========================================================================== */

#tnSidebar nav a.tn-aktif {
  position: relative;
}
#tnSidebar nav a.tn-aktif::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  transform: translateY(-50%);
  animation: tnBarTumbuh .34s var(--tn-ease) both;
}
@keyframes tnBarTumbuh {
  from { height: 0; opacity: 0; }
  to   { height: 62%; opacity: 1; }
}

/* ==========================================================================
   4. KARTU — angkat halus (desktop hanya; layar sentuh diatur terpisah)
   ========================================================================== */

.tn-kartu {
  transition: transform var(--tn-base) var(--tn-ease),
              box-shadow var(--tn-base) var(--tn-ease);
  will-change: transform;
}
.tn-kartu:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(19, 27, 46, .2),
              0 4px 10px -4px rgba(19, 27, 46, .06);
}
.tn-kartu:active { transform: translateY(-1px) scale(.994); }

/* Gambar di dalam kartu: zoom pelan */
.tn-kartu img { transition: transform .65s var(--tn-ease); }
.tn-kartu:hover img { transform: scale(1.04); }
.tn-kartu { overflow: hidden; }

/* ==========================================================================
   5. TOMBOL — tekan berasa + kilau untuk tombol utama
   ========================================================================== */

.tn-cta {
  position: relative;
  overflow: hidden;
  transition: transform var(--tn-fast) var(--tn-ease),
              box-shadow var(--tn-base) var(--tn-ease);
}
.tn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.28) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .7s var(--tn-ease);
  pointer-events: none;
}
.tn-cta:hover::after { transform: translateX(130%); }
.tn-cta:hover { box-shadow: 0 10px 26px -10px rgba(117, 89, 59, .4); }
.tn-cta:active { transform: scale(.975); }

/* ==========================================================================
   6. LINK NAVIGASI — garis bawah tumbuh dari tengah
   ========================================================================== */

.tn-link { position: relative; }
.tn-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.18em;
  width: 0;
  height: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: width var(--tn-base) var(--tn-ease);
}
.tn-link:hover::after { width: 100%; }

/* Ikon geser saat hover */
.tn-panah .material-symbols-outlined {
  transition: transform var(--tn-base) var(--tn-ease);
}
.tn-panah:hover .material-symbols-outlined { transform: translateX(4px); }

/* ==========================================================================
   7. TABEL — baris masuk bertahap (stok, penjualan, absensi)
   ========================================================================== */

.tn-baris {
  animation: tnBarisMasuk .38s var(--tn-ease) both;
}
@keyframes tnBarisMasuk {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   8. SCROLL REVEAL — bagian bawah muncul saat masuk layar
   ========================================================================== */

.tn-muncul {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--tn-ease), transform .6s var(--tn-ease);
}
.tn-muncul.tn-terlihat {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   9. GAMBAR — fade-in lembut begitu termuat
   ========================================================================== */

.tn-img {
  opacity: 0;
  transition: opacity .55s var(--tn-ease);
}
.tn-img.tn-siap { opacity: 1; }

/* ==========================================================================
   10. LAYAR SENTUH — hover tidak cocok di HP
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .tn-kartu:hover { transform: none; box-shadow: none; }
  .tn-kartu:active { transform: scale(.984); }
  .tn-kartu:hover img { transform: none; }
  .tn-kartu:active img { transform: scale(1.03); }
  .tn-cta:hover::after { transform: translateX(-130%); }
  .tn-cta:active::after { transform: translateX(130%); }
  .tn-link:hover::after { width: 0; }
  .tn-link:active::after { width: 100%; }
}

/* ==========================================================================
   11. AKSESIBILITAS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tn-muncul { opacity: 1 !important; transform: none !important; }
  .tn-reveal, .tn-baris { animation: none !important; }
  .tn-kartu:hover, .tn-cta:active { transform: none; }
  .tn-kartu:hover img { transform: none; }
  .tn-link:hover::after { width: 0; }
}