/* =====================================================================
   style.css — Syaika Gilang Portfolio
   Semua warna di bawah DIUKUR LANGSUNG dari PDF asli.
   Mau ganti warna? Ubah di blok :root ini saja.
   ===================================================================== */
:root {
  --red:        #D92200;  /* oranye-merah utama PDF   */
  --ink:        #00040C;  /* hitam kebiruan PDF       */
  --paper:      #F7F7F7;  /* off-white PDF            */
  --bar:        #F2F2F2;  /* bar abu-abu atas PDF     */
  --tab-active: #304254;  /* teks tab yang aktif      */
  --tab-idle:   #7D8893;  /* teks tab yang tidak aktif */

  /* Latar sementara halaman 1 (muncul hanya sebelum gambar PDF selesai dimuat).
     Dibuat dari warna tepi PDF, jadi tidak ada kilatan putih saat loading. */
  --placeholder-1: linear-gradient(to bottom,#D92200 0.00% 5.89%,#00040C 5.89% 11.77%,#F7F7F7 11.77% 17.66%,#00040C 17.66% 23.54%,#1D1D1D 23.54% 24.15%,#2B2B2B 24.15% 24.77%,#3A3A3A 24.77% 25.32%,#484849 25.32% 25.87%,#575757 25.87% 26.42%,#656565 26.42% 26.97%,#737373 26.97% 27.58%,#828282 27.58% 28.26%,#909090 28.26% 29.42%,#D92200 29.42% 33.10%,#E03610 33.10% 33.90%,#E74721 33.90% 34.69%,#EE5535 34.69% 35.30%,#F35E42 35.30% 36.10%,#EC512D 36.10% 36.90%,#E4411B 36.90% 37.69%,#DD2F09 37.69% 41.19%,#00040C 41.19% 48.60%,#3D0401 48.60% 49.03%,#040201 49.03% 52.95%,#D92200 52.95% 58.83%,#F7F7F7 58.83% 64.72%,#2C0002 64.72% 67.11%,#580602 67.11% 69.92%,#2F0101 69.92% 70.60%,#F7F7F7 70.60% 82.36%,#D92200 82.36% 86.10%,#E03510 86.10% 86.90%,#E74721 86.90% 87.69%,#EE5634 87.69% 89.59%,#E74620 89.59% 90.39%,#E0350F 90.39% 91.19%,#D92200 91.19% 94.13%,#00040C 94.13% 100.00%);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  font-family: "Century Gothic", "CenturyGothic", "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- BAR ATAS (42pt dari 1024,5pt lebar PDF = 4,1% dari lebar layar) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: clamp(40px, 4.1vw, 84px);
  padding-right: clamp(12px, 1.17vw, 28px);
  background: var(--bar);
}

.tabs {
  display: flex;
  align-self: stretch;          /* setinggi bar, jadi mudah disentuh di HP */
  gap: 0.9em;
  font-size: clamp(14px, 1.95vw, 38px);
  font-weight: 300;
  line-height: 1;
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--tab-idle);
  text-decoration: none;
  white-space: nowrap;
}
/* Memperlebar area sentuh ke samping (tanpa menggeser teks) */
.tab::after { content: ""; position: absolute; inset: 0 -0.45em; }
.tab[aria-current="page"] { color: var(--tab-active); }
.tab:hover { color: var(--tab-active); }
.tab:focus-visible { outline: 2px solid var(--tab-active); outline-offset: 4px; }

/* ---------- AREA PDF ---------- */
.view[hidden], .fallback[hidden] { display: none; }

.pdf-page {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
}
/* Tinggi dihitung dari ukuran PDF (setelah bar 42pt dipotong), jadi halaman tidak "melompat" saat dimuat. */
#page-1 { aspect-ratio: 1024.5 / 9792; background: var(--placeholder-1); }
#page-2 { aspect-ratio: 1024.5 / 576;  background: var(--ink); }

.strip {
  position: absolute;
  left: 0;
  width: 100%;
}
.strip canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- AREA KLIK TAK TERLIHAT (telepon, email, LinkedIn) ---------- */
.hs {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 2px;
}
.hs:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--red); }
/* Di HP, teks kontak terlalu kecil untuk disentuh. Area sentuh diperluas tanpa mengubah tampilan. */
@media (max-width: 700px) {
  .hs::after { content: ""; position: absolute; inset: -5px -8px; }
}

/* Halaman Data Penjualan di HP: dibuat lebih lebar dari layar supaya tabel terbaca; geser ke samping untuk melihat semuanya. */
@media (max-width: 760px) {
  #view-data { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #view-data .pdf-page { width: 760px; }
}

/* ---------- INDIKATOR LOADING ---------- */
.loader {
  position: fixed;
  left: 50%;
  top: 42%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
body.is-loading .loader { opacity: 1; }
.loader-track {
  display: block;
  width: 160px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.loader-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(var(--progress, 0.05));
  transition: transform 0.25s ease;
}
.loader.is-indeterminate .loader-bar { animation: slide 1.1s ease-in-out infinite; transform: none; width: 40%; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------- PESAN CADANGAN ---------- */
.fallback {
  min-height: 60vh;
  padding: 18vh 24px 24px;
  text-align: center;
  background: var(--red);
  color: #fff;
}
.fallback h2 { margin: 0 0 12px; font-size: clamp(22px, 3vw, 36px); }
.fallback p  { margin: 0 0 20px; }
.fallback-btn {
  display: inline-block;
  padding: 12px 22px;
  background: #fff;
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
}
.fallback-btn:hover { background: var(--paper); }

/* ---------- TEKS TAK TERLIHAT (screen reader & mesin pencari) ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hormati pengaturan "kurangi animasi" milik pengunjung ---------- */
@media (prefers-reduced-motion: reduce) {
  .loader, .loader-bar { transition: none; }
  .loader.is-indeterminate .loader-bar { animation: none; width: 100%; }
}