/* ============================================================
   Transcreen — gaya bersama (dipakai seluruh halaman)
   Struktur halaman:
     index.html      halaman selamat datang (beranimasi)
     kategori.html · produk.html · spesifikasi.html
     keunggulan.html · tentang.html · faq.html · kontak.html
     produk-86.html · produk-75.html   (detail produk)
   Catatan: blok @theme Tailwind v4 tetap harus inline di setiap
   halaman karena Tailwind browser build hanya membaca tag
   <style type="text/tailwindcss"> di dalam dokumen.
   ============================================================ */

html { scroll-padding-top: 6rem; }
body { font-feature-settings: "cv11", "ss01"; }

/* --- Scroll reveal --- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* --- Header saat digulir --- */
#site-header .header-shell {
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease;
}
#site-header.is-scrolled .header-shell {
  background-color: rgb(255 255 255 / 0.94);
  border-color: rgb(16 26 44 / 0.10);
  box-shadow: 0 10px 30px -18px rgb(16 26 44 / 0.45);
}

/* --- FAQ --- */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .25s ease; }

/* --- Menu: penanda halaman yang sedang dibuka --- */
#site-header .nav-link[aria-current="page"] {
  color: var(--color-ink-900);
  background-color: var(--color-ink-50);
}

/* ============================================================
   Transisi antar halaman
   ============================================================ */
@keyframes page-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
main { animation: page-in .55s cubic-bezier(.22,.61,.36,1) both; }

/* ============================================================
   Halaman selamat datang (index.html)
   ============================================================ */

/* Cahaya latar yang bergerak perlahan */
@keyframes aurora-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -3%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
.aurora {
  animation: aurora-drift 22s ease-in-out infinite;
  will-change: transform;
}
.aurora-2 { animation-duration: 28s; animation-direction: reverse; }
.aurora-3 { animation-duration: 34s; }

/* Garis kisi yang bergeser sangat lambat */
@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}
.grid-pan { animation: grid-pan 24s linear infinite; }

/* Panel produk yang mengambang */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.float-soft { animation: float-soft 7s ease-in-out infinite; }

/* Judul: tiap kata muncul berurutan */
@keyframes word-in {
  from { opacity: 0; transform: translateY(34px) rotate(1.5deg); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.welcome-title .word {
  display: inline-block;
  opacity: 0;
  animation: word-in .9s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * .11s + .15s);
}

/* Elemen yang muncul setelah judul */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.rise-in {
  opacity: 0;
  animation: rise-in .8s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(var(--i, 0) * .1s + .55s);
}

/* Kilau yang menyapu tombol utama */
@keyframes sheen {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent);
  animation: sheen 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* Pita sektor yang berjalan terus */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
}
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

/* Kartu navigasi halaman */
.tile {
  position: relative;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}
.tile:hover { transform: translateY(-6px); }
.tile .tile-icon { transition: transform .35s cubic-bezier(.22,.61,.36,1), background-color .35s ease; }
.tile:hover .tile-icon { transform: scale(1.08) rotate(-4deg); }
.tile .tile-arrow { transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease; opacity: 0; transform: translateX(-6px); }
.tile:hover .tile-arrow { opacity: 1; transform: none; }

/* Angka statistik */
.count-value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  main,
  .aurora,
  .grid-pan,
  .float-soft,
  .welcome-title .word,
  .rise-in,
  .marquee-track,
  .btn-sheen::after {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .tile, .tile .tile-icon, .tile .tile-arrow { transition: none !important; }
}

/* ============================================================
   Menu mobile: penanda halaman yang sedang dibuka
   (dipakai bersama aria-current="page" pada tiap item)
   ============================================================ */
#mobile-menu .mobile-link[aria-current="page"] {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background-color: var(--color-brand-50);
  color: var(--color-brand-800);
  font-weight: 700;
  box-shadow: inset 3px 0 0 0 var(--color-brand-600);
}
#mobile-menu .mobile-link[aria-current="page"]:hover { background-color: var(--color-brand-100); }
#mobile-menu .mobile-link[aria-current="page"]::after {
  content: "Halaman ini";
  margin-left: auto;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-brand-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
#mobile-menu .mobile-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--color-brand-500); }
#mobile-menu .mobile-cta[aria-current="page"]::after {
  content: "Halaman ini";
  display: block;
  margin-top: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brand-200);
}

/* ============================================================
   Pemberitahuan tahap pengembangan (halaman selamat datang)
   Ditempatkan di bagian bawah layar agar tidak menutupi konten,
   dan tidak menghalangi klik pada area lain di luar kartunya.
   ============================================================ */
.notice {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 60;
  width: min(46rem, calc(100% - 2rem));
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1), visibility .35s ease;
}
.notice.notice-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.notice.notice-gone { display: none; }

.notice-progress {
  height: 3px;
  background-color: rgb(16 26 44 / .08);
  overflow: hidden;
}
#dev-notice-bar {
  display: block;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(90deg, var(--color-brand-500), var(--color-accent-500));
}

@media (prefers-reduced-motion: reduce) {
  .notice { transition: none; }
  #dev-notice-bar { transition: none; }
}

/* ============================================================
   Fokus keyboard — ring yang konsisten untuk semua kontrol
   (hanya tampil saat pengunjung memakai keyboard, bukan saat klik)
   ============================================================ */
:where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--color-brand-500);
  outline-offset: 2px;
  border-radius: 0.625rem;
}

/* ============================================================
   Menu mobile: panel yang muncul dengan animasi halus
   ============================================================ */
.mobile-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.22,.61,.36,1), visibility .22s ease;
}
.mobile-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* ============================================================
   Tabel perbandingan di layar kecil → kartu bertumpuk
   Label kolom diisi otomatis oleh site.js dari atribut data-column
   ============================================================ */
@media (max-width: 639px) {
  .compare-table { min-width: 0 !important; }
  .compare-table thead { display: none; }
  .compare-table tbody { display: grid; gap: .5rem; padding: .75rem; }
  .compare-table tr {
    display: grid;
    gap: .375rem;
    padding: .875rem 1rem;
    border: 1px solid rgb(16 26 44 / .1);
    border-radius: .875rem;
    background-color: #fff !important;
  }
  .compare-table th[scope="row"] {
    padding: 0;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  .compare-table td { padding: 0; }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .125rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-ink-500);
  }
}

/* ============================================================
   Validasi formulir: kolom yang belum diisi ditandai merah
   ============================================================ */
.field-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 4px rgb(220 38 38 / .12) !important;
}

/* ============================================================
   Transisi antar halaman (View Transitions API)
   Aktif di Chrome/Edge/Safari terbaru; browser lain mengabaikan.
   ============================================================ */
@view-transition { navigation: auto; }

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

::view-transition-old(root) { animation: vt-fade-out .22s ease both; }
::view-transition-new(root) { animation: vt-fade-in .3s ease both; }

/* ============================================================
   Versi cetak — dipakai saat halaman spesifikasi atau detail
   produk dicetak untuk dokumen pengadaan.
   ============================================================ */
@media print {
  @page { margin: 14mm; }

  body { background: #fff !important; }

  #site-header,
  footer,
  .notice,
  .mobile-panel,
  [data-catalog],
  [aria-disabled="true"] { display: none !important; }

  /* Semua permukaan gelap menjadi putih agar hemat tinta dan terbaca */
  [class*="bg-ink"],
  [class*="bg-brand-"],
  [class*="bg-accent-"],
  [class*="bg-white/"] { background-color: transparent !important; }

  [class*="text-white"],
  [class*="text-ink-1"],
  [class*="text-ink-2"],
  [class*="text-ink-3"],
  [class*="text-ink-4"] { color: #111 !important; }

  [class*="shadow-"],
  [class*="backdrop-blur"] { box-shadow: none !important; backdrop-filter: none !important; }

  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  a { text-decoration: none; color: inherit; }

  section, article, details, figure, table, tr { break-inside: avoid; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }

  /* Tampilkan alamat email setelah tautan agar tetap terbaca di kertas */
  main a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #333;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}