/* ============================================================================
   sajoo.id — beranda.css : gaya sinematik "gaming premium" untuk halaman utama.
   Dipakai bersama premium.css (untuk ikon permata / kartu beraksen).
   Prinsip:
   - Latar hero memakai warna logo (biru + teal/hijau) dengan dasar gelap,
     bukan warna pucat.
   - Gerak memakai CSS murni (tanpa skrip) dan berhenti saat "kurangi gerak".
   - Semua kelas berawalan .gm- agar tidak bertabrakan dengan gaya situs lama.
   ============================================================================ */

:root {
  --gm-biru: #1d78ff;
  --gm-biru-2: #38bdf8;
  --gm-teal: #0fbfa4;
  --gm-teal-2: #34d399;
  --gm-gelap: #04182f;
  --gm-gelap-2: #072a4d;
  --gm-emas: #f2c57c;
}

/* ------------------------------------------------------------------ HERO --- */
.gm-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 6.4vw, 92px) 0 clamp(44px, 7vw, 104px);
  color: #e8f2ff;
  background:
    radial-gradient(120% 130% at 8% -12%, #0d4a86 0%, #072a4d 44%, var(--gm-gelap) 100%);
  isolation: isolate;
}
/* kisi teknologi yang bergerak pelan */
.gm-hero__kisi {
  position: absolute;
  inset: -10% -6% 0;
  background-image:
    linear-gradient(rgba(140, 200, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 200, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 74%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 74%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-hero__kisi { animation: gm-jalur 26s linear infinite; }
}
@keyframes gm-jalur {
  to { background-position: 56px 56px; }
}
/* dua bola cahaya: biru dan teal (warna logo) */
.gm-cahaya {
  position: absolute;
  border-radius: 50%;
  filter: blur(84px);
  opacity: .6;
  pointer-events: none;
}
.gm-cahaya--biru {
  width: 48vw; height: 48vw; max-width: 640px; max-height: 640px;
  left: -13vw; top: -18vw;
  background: radial-gradient(circle, var(--gm-biru) 0%, transparent 70%);
}
.gm-cahaya--teal {
  width: 44vw; height: 44vw; max-width: 580px; max-height: 580px;
  right: -11vw; bottom: -20vw;
  background: radial-gradient(circle, var(--gm-teal) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .gm-cahaya--biru { animation: gm-apung 21s ease-in-out infinite alternate; }
  .gm-cahaya--teal { animation: gm-apung 27s ease-in-out infinite alternate-reverse; }
}
@keyframes gm-apung {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(8%, 6%, 0) scale(1.18); }
}
/* --- latar hero (Paket 1 - Smart Tech): kisi + gelombang energi + garis pindai
   + partikel naik + cincin denyut. Tanpa balok kilau menyapu dan tanpa aurora,
   semua lapisan memakai transform/opacity agar ringan. --- */

/* 1. denyut tangkupan: dua cincin mengembang di kanan atas (di belakang frame) */
.gm-hero__denyut {
  position: absolute;
  right: -12%; top: -4%;
  width: min(620px, 88vw); height: min(620px, 88vw);
  pointer-events: none;
}
.gm-hero__denyut::before,
.gm-hero__denyut::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 189, 248, .34);
  background: radial-gradient(circle, rgba(52, 211, 153, .14), transparent 58%);
}
/* 2. partikel naik: titik cahaya bergerak ke atas sambil berkedip */
.gm-hero__partikel {
  position: absolute; left: 0; right: 0; top: -300px; height: calc(100% + 300px);
  background-image:
    radial-gradient(2px 2px at 34px 44px, rgba(255, 255, 255, .9), transparent 62%),
    radial-gradient(1.6px 1.6px at 186px 134px, rgba(125, 211, 252, .85), transparent 62%),
    radial-gradient(1.4px 1.4px at 112px 252px, rgba(52, 211, 153, .8), transparent 62%);
  background-size: 300px 300px;
  opacity: .55;
  pointer-events: none;
}
/* 3. gelombang energi: cahaya lembut turun menyusuri kisi (bukan balok menyapu) */
.gm-hero__pulsa {
  position: absolute; left: -8%; right: -8%; top: 0; height: 46%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(56, 189, 248, .1) 32%,
    rgba(125, 211, 252, .2) 50%,
    rgba(52, 211, 153, .12) 68%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
}
/* 4. garis pindai tipis: 3px berpendar turun pelan (kesan presisi) */
.gm-hero__pindai {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent,
    rgba(125, 211, 252, .5) 15%,
    rgba(255, 255, 255, .9) 50%,
    rgba(52, 211, 153, .5) 85%,
    transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 50%, transparent);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .gm-hero__denyut::before { animation: gm-lingkar 6.5s ease-out infinite; }
  .gm-hero__denyut::after { animation: gm-lingkar 6.5s ease-out 3.25s infinite; }
  .gm-hero__partikel {
    animation: gm-partikel-naik 32s linear infinite, gm-kedip 5.5s ease-in-out infinite alternate;
  }
  .gm-hero__pulsa { animation: gm-pulsa 11s cubic-bezier(.45, 0, .55, 1) infinite; }
  .gm-hero__pindai { animation: gm-pindai-turun 9.5s linear infinite; }
}
@keyframes gm-lingkar {
  0% { transform: scale(.35); opacity: 0; }
  22% { opacity: .95; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes gm-partikel-naik {
  from { transform: translateY(0); }
  to { transform: translateY(-300px); }
}
@keyframes gm-kedip {
  from { opacity: .32; }
  to { opacity: .72; }
}
@keyframes gm-pulsa {
  0% { transform: translateY(-120%); opacity: 0; }
  10% { opacity: 1; }
  86% { opacity: .9; }
  100% { transform: translateY(240%); opacity: 0; }
}
@keyframes gm-pindai-turun {
  0% { top: 0; opacity: 0; }
  6% { opacity: .9; }
  92% { opacity: .8; }
  100% { top: 100%; opacity: 0; }
}
}
@keyframes gm-putar { to { transform: rotate(360deg); } }

.gm-hero__dalam { position: relative; z-index: 2; }

.gm-lencana {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, .38);
  background: linear-gradient(120deg, rgba(56, 189, 248, .16), rgba(15, 191, 164, .14));
  color: #cfeeff;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.gm-lencana__titik {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gm-teal-2);
  box-shadow: 0 0 12px 3px rgba(52, 211, 153, .75);
}
@media (prefers-reduced-motion: no-preference) {
  .gm-lencana__titik { animation: gm-denyut 2.4s ease-in-out infinite; }
}
@keyframes gm-denyut {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.5); }
}

.gm-judul {
  font-family: var(--saj-font-judul);
  font-size: clamp(2.15rem, 6.1vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 20px 0 16px;
  color: #fff;
  max-width: 23ch;
}
.gm-judul em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gm-biru-2) 0%, #eafcff 45%, var(--gm-teal-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gm-sub {
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  color: #bdd8f6; max-width: 62ch; margin: 0 0 24px;
}
.gm-aksi { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------- kartu 3D di dalam hero -------- */
.gm-kartu-baris {
  display: grid; gap: 14px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  perspective: 1200px;
}
.gm-kartu {
  position: relative;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 26px 52px -32px rgba(0, 0, 0, .9),
    0 20px 40px -30px var(--gm-aksen, #38bdf8);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease, border-color .5s ease;
  overflow: hidden;
}
.gm-kartu > * { position: relative; z-index: 1; }
/* tepi kartu bercahaya (pengganti balok kilau yang menyapu isi kartu) */
@property --gm-sudut {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.gm-kartu::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--gm-sudut, 0deg),
    transparent 0 58%,
    rgba(125, 211, 252, .95) 76%,
    rgba(255, 255, 255, .9) 84%,
    rgba(52, 211, 153, .95) 90%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.gm-kartu:hover::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gm-kartu:hover::after { animation: gm-tepi-putar 3.4s linear infinite; }
}
@keyframes gm-tepi-putar {
  from { --gm-sudut: 0deg; }
  to { --gm-sudut: 360deg; }
}

/* ikon 3D bernyawa: mengapung halus (bergiliran) + miring saat disentuh */
.gm-kartu .lux-ikon { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.gm-kartu:hover .lux-ikon { transform: rotate(-5deg) scale(1.08); }
@media (prefers-reduced-motion: no-preference) {
  .gm-kartu .gm-ikon-lingkar {
    animation: gm-ikon-apung 5.6s ease-in-out infinite;
    animation-delay: calc(var(--t, 0) * 260ms);
  }

}
@keyframes gm-ikon-apung {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.05); }
}
.gm-kartu:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(-4deg) scale(1.02);
  border-color: rgba(255, 255, 255, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .26),
    0 42px 74px -34px rgba(0, 0, 0, .95),
    0 0 46px -12px var(--gm-aksen, #38bdf8);
}
@media (prefers-reduced-motion: no-preference) {
  .gm-kartu { animation: gm-melayang 7.5s ease-in-out infinite; animation-delay: calc(var(--t, 0) * 620ms); }
}
@keyframes gm-melayang {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
.gm-kartu h2 {
  font-family: var(--saj-font-judul);
  font-size: 1.04rem; color: #fff; margin: 14px 0 6px;
}
.gm-kartu p { margin: 0; color: #c2daf5; font-size: 14.4px; line-height: 1.6; }
.gm-kartu__cap {
  display: inline-block; margin-top: 12px; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  background: linear-gradient(120deg, var(--gm-aksen, #38bdf8), var(--gm-aksen-2, #38bdf8));
  color: #04182f;
}

/* cincin menyala di belakang ikon permata */
.gm-ikon-lingkar { position: relative; display: inline-flex; }
.gm-ikon-lingkar::before {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--gm-aksen, #38bdf8), transparent 38%,
    var(--gm-aksen-2, #38bdf8), transparent 78%,
    var(--gm-aksen, #38bdf8));
  filter: blur(7px);
  opacity: .65;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-ikon-lingkar::before { animation: gm-putar 6.5s linear infinite; }
}
.gm-kartu:hover .gm-ikon-lingkar::before { opacity: .95; }


/* pita berjalan bergaya panggung game: dasar biru tua + garis neon, tanpa
   gradasi putih di ujung kiri-kanan */
.gm-ticker {
  position: relative;
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, .18), rgba(15, 191, 164, .16) 55%, rgba(29, 120, 255, .2)),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 10px, rgba(255, 255, 255, 0) 10px 24px),
    linear-gradient(180deg, #062440, #04182f 58%, #05321f);
  border-top: 1px solid rgba(56, 189, 248, .5);
  border-bottom: 1px solid rgba(52, 211, 153, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 26px 46px -34px rgba(56, 189, 248, .9),
    inset 0 -26px 46px -34px rgba(52, 211, 153, .85);
}
.gm-ticker__jalur {
  position: relative; z-index: 1;
  display: flex; gap: 30px; width: max-content;
  padding: 13px 0;
  color: #eaf6ff; font-size: 12.6px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 0 14px rgba(56, 189, 248, .35);
  white-space: nowrap;
}
.gm-ticker__jalur span { display: inline-flex; align-items: center; gap: 12px; }
.gm-ticker__jalur span::after {
  content: "";
  width: 7px; height: 7px; border-radius: 2px;
  background: linear-gradient(120deg, var(--gm-biru-2), var(--gm-teal-2));
  box-shadow: 0 0 10px 1px rgba(56, 189, 248, .55);
  transform: rotate(45deg);
}
/* berlian kecil menyala berurutan seperti LED berjalan (pengganti kilau menyapu) */
@media (prefers-reduced-motion: no-preference) {
  .gm-ticker__jalur span::after { animation: gm-titik-nyala 4.8s ease-in-out infinite; }
  .gm-ticker__jalur span:nth-child(6n+2)::after { animation-delay: .6s; }
  .gm-ticker__jalur span:nth-child(6n+3)::after { animation-delay: 1.2s; }
  .gm-ticker__jalur span:nth-child(6n+4)::after { animation-delay: 1.8s; }
  .gm-ticker__jalur span:nth-child(6n+5)::after { animation-delay: 2.4s; }
  .gm-ticker__jalur span:nth-child(6n+6)::after { animation-delay: 3s; }
}
@keyframes gm-titik-nyala {
  0%, 100% { opacity: .45; transform: rotate(45deg) scale(1); box-shadow: 0 0 10px 1px rgba(56, 189, 248, .45); }
  14% { opacity: 1; transform: rotate(45deg) scale(1.6); box-shadow: 0 0 16px 3px rgba(125, 211, 252, .9); }
  34% { opacity: .45; transform: rotate(45deg) scale(1); box-shadow: 0 0 10px 1px rgba(56, 189, 248, .45); }
}
@media (prefers-reduced-motion: no-preference) {
  .gm-ticker__jalur { animation: gm-jalan 34s linear infinite; }
}
@keyframes gm-jalan { to { transform: translateX(-50%); } }

/* ---------------------------------------- tab segmen di dalam hero gelap -- */
.gm-hero .saj-tab { margin-top: 34px; }
.gm-hero .saj-tab__label {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #dbeafe;
}
.gm-hero .saj-tab__label:hover { border-color: rgba(56, 189, 248, .6); color: #fff; }
.gm-hero .saj-tab__in:checked + .saj-tab__label {
  background: linear-gradient(120deg, var(--gm-biru), var(--gm-teal));
  border-color: transparent; color: #04182f;
  box-shadow: 0 16px 34px -18px rgba(29, 120, 255, .95), 0 0 28px -8px rgba(52, 211, 153, .6);
}
.gm-hero .saj-tab__panel__judul,
.gm-hero .saj-tab__judul { color: #fff; }
.gm-hero .saj-tab__panel p { color: #c2daf5; }
.gm-hero .saj-shot { border-radius: 22px; }

/* ------------------------------------------------------------ responsif --- */
@media (max-width: 719px) {
  .gm-hero { padding: 32px 0 54px; }
  .gm-judul { font-size: clamp(1.72rem, 8.6vw, 2.4rem); max-width: 100%; }
  .gm-sub { font-size: 1rem; }
  .gm-aksi { width: 100%; }
  .gm-aksi .saj-btn { width: 100%; justify-content: center; }
  .gm-kartu-baris { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .gm-kartu { padding: 18px; }
  .gm-ticker__jalur { font-size: 12.4px; gap: 26px; padding: 11px 0; }
  .gm-hero .saj-tab { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-hero__kisi, .gm-cahaya--biru, .gm-cahaya--teal,
  .gm-hero__denyut::before, .gm-hero__denyut::after,
  .gm-hero__partikel, .gm-hero__pulsa, .gm-hero__pindai,
  .gm-lencana__titik, .gm-kartu, .gm-ikon-lingkar::before, .gm-ticker__jalur { animation: none; }
  .gm-kartu:hover { transform: none; }
}

/* susunan dua kolom di layar lebar: kiri teks+kartu, kanan pilihan segmen */
.gm-hero__teks { position: relative; }
@media (min-width: 1000px) {
  .gm-hero__dalam { display: grid; grid-template-columns: 1.32fr .86fr; gap: 30px 34px; align-items: start; }
  .gm-hero .saj-tab { margin-top: 0; }
}

/* ==================== 3. CONTOH TAMPILAN KODE QRIS (beranda) ============== */
.gm-qris {
  position: relative;
  display: grid; gap: 8px;
  margin-bottom: 12px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 20px 44px -30px rgba(8, 24, 47, .85), inset 0 0 0 1px rgba(8, 24, 47, .06);
}
.gm-qris__kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gm-qris__merek {
  font-family: var(--saj-font-judul); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; color: #0b2445;
  padding: 3px 9px; border-radius: 6px;
  background: linear-gradient(120deg, #eaf1fe, #dff3ee);
}
.gm-qris__ket { font-size: 11px; color: var(--saj-teks-2); }
.gm-qris__toko { margin: 0; font-weight: 700; font-size: 13.5px; color: var(--saj-teks); }
.gm-qris__kode {
  position: relative;
  display: grid; place-items: center;
  padding: 10px; border-radius: 16px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(8, 24, 47, .08);
  overflow: hidden;
}
.gm-qris__kode img { width: min(100%, 208px); height: auto; display: block; }
/* garis pemindai yang bergerak naik turun */
.gm-qris__kode::after {
  content: "";
  position: absolute; left: 6%; right: 6%; top: 8%; height: 18%;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0), rgba(56, 189, 248, .38), rgba(56, 189, 248, 0));
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-qris__kode::after { animation: gm-pindai 3s ease-in-out infinite; }
}
@keyframes gm-pindai {
  0%, 100% { top: 8%; }
  50% { top: 70%; }
}
/* sudut bidik khas pemindai */
.gm-qris__sudut { position: absolute; width: 22px; height: 22px; border: 3px solid #38bdf8; border-radius: 4px; }
.gm-qris__sudut--1 { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.gm-qris__sudut--2 { top: 6px; right: 6px; border-left: 0; border-bottom: 0; border-color: #34d399; }
.gm-qris__sudut--3 { bottom: 6px; left: 6px; border-right: 0; border-top: 0; border-color: #34d399; }
.gm-qris__sudut--4 { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.gm-qris__nominal {
  margin: 0; font-family: var(--saj-font-judul); font-weight: 700;
  font-size: 1.32rem; color: #0b2445;
}
.gm-qris__tagihan { margin: 0; font-size: 11.5px; color: var(--saj-teks-2); }
.gm-qris__catatan {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--saj-teks-2);
}
.gm-qris__catatan::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(120deg, #38bdf8, #34d399);
  box-shadow: 0 0 10px 2px rgba(56, 189, 248, .55);
}
@media (max-width: 719px) {
  .gm-qris__kode img { width: min(100%, 176px); }
}
@media (prefers-reduced-motion: reduce) {
  .gm-qris__kode::after { animation: none; }
}

/* ============================================================================
   4. KARTU HERO: susunan seimbang + animasi masuk berurutan
   Sebelumnya kartu memakai auto-fit sehingga di desktop menjadi 3 di atas dan
   1 di bawah (tidak seimbang). Sekarang: 1 kolom di HP, 2x2 dari layar sedang.
   Animasi: tiap kartu "masuk" satu per satu (delay bertingkat dari --t),
   setelah selesai kartu mulai mengapung pelan. Saat kursor menyentuh, kartu
   mengapung dijeda dan kartu miring 3D (dipaksa dengan !important agar menang
   dari animasi yang sedang berjalan).
   ============================================================================ */
.gm-kartu-baris { grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 520px) {
  .gm-kartu-baris { grid-template-columns: repeat(2, 1fr); }
}

.gm-kartu { --gm-tunda: calc(var(--t, 0) * 150ms); }

@media (prefers-reduced-motion: no-preference) {
  .gm-kartu {
    animation:
      gm-masuk .95s cubic-bezier(.2, .7, .2, 1) var(--gm-tunda) both,
      gm-melayang 7.5s ease-in-out infinite calc(var(--gm-tunda) + 1s);
  }
}
@keyframes gm-masuk {
  0% { opacity: 0; transform: translateY(34px) rotateX(-16deg) scale(.94); }
  62% { opacity: 1; transform: translateY(-6px) rotateX(3deg) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

/* saat disentuh: apungan dijeda supaya kemiringan 3D bisa bekerja */
.gm-kartu:hover {
  animation-play-state: paused;
  transform: translateY(-10px) rotateX(5deg) rotateY(-4deg) scale(1.02) !important;
}

@media (prefers-reduced-motion: reduce) {
  .gm-kartu { animation: none; opacity: 1; transform: none; --gm-tunda: 0ms; }
  .gm-kartu:hover { transform: none !important; }
}

/* 4c. LAYAR LEBAR (>=1000px): keempat kartu hero dijadikan SATU baris penuh.
   Sebelumnya kartu berada di dalam kolom kiri (2x2) sehingga ruang di bawah
   panel segmen (kolom kanan) kosong. Sekarang baris kartu membentang penuh
   (grid-area 2 / 1 / 3 / -1) dengan 4 kolom seimbang. */
@media (min-width: 1000px) {
  .gm-hero__teks { grid-area: 1 / 1 / 2 / 2; }
  .gm-hero .saj-tab { grid-area: 1 / 2 / 2 / 3; }
  .gm-kartu-baris {
    grid-area: 2 / 1 / 3 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
  }
  .gm-kartu { padding: 18px 20px; }
}

/* ============================================================================
   5. TAB SEGMEN HERO: satu gambar besar, satu nama segmen yang tampil
   bergantian (bukan semua label sekaligus), lalu teks deskripsi.
   Label segmen lain disembunyikan supaya tidak menumpuk dan tidak ada label
   kembar (termasuk label bayangan yang dibuat skrip). Berlaku di semua lebar:
   HP, tablet, dan desktop.
   ============================================================================ */
.gm-hero .saj-tab__layar { flex: 1 1 100%; }
.gm-hero .saj-tab__layar .saj-shot { display: none; }
.gm-hero .saj-tab:has(.saj-tab__in:nth-of-type(1):checked) .saj-tab__layar [data-panel="1"],
.gm-hero .saj-tab:has(.saj-tab__in:nth-of-type(2):checked) .saj-tab__layar [data-panel="2"],
.gm-hero .saj-tab:has(.saj-tab__in:nth-of-type(3):checked) .saj-tab__layar [data-panel="3"],
.gm-hero .saj-tab:has(.saj-tab__in:nth-of-type(4):checked) .saj-tab__layar [data-panel="4"] { display: block; }

/* baris pengalih: mengecil pas sebesar nama segmen, ditengahkan di bawah gambar */
.gm-hero .saj-tab__bar {
  flex: 0 1 auto;
  width: auto;
  margin: 12px auto 0;
  padding: 0; gap: 0;
  border: 0; border-radius: 0;
  background: none; box-shadow: none;
  overflow: visible;
}
.gm-hero .saj-tab__bar::before,
.gm-hero .saj-tab__bar::after { content: none; }

/* hanya nama segmen yang sedang aktif yang tampil; sisanya (termasuk label
   bayangan buatan skrip) disembunyikan di semua mode */
.gm-hero .saj-tab__label { display: none; }
.gm-hero .saj-tab__in:checked + .saj-tab__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; padding: 8px 15px;
  pointer-events: none;
}
.gm-hero .saj-tab__in:checked + .saj-tab__label::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(4, 24, 47, .5);
  box-shadow: 0 0 0 3px rgba(4, 24, 47, .16);
}
@media (prefers-reduced-motion: no-preference) {
  .gm-hero .saj-tab__in:checked + .saj-tab__label {
    animation: gm-pill-muncul .55s cubic-bezier(.2, .7, .2, 1) both;
  }
}
@keyframes gm-pill-muncul {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

/* gambar segmen di HP tetap 4:3 (dulu diatur lewat .saj-tab__panel .saj-shot) */
@media (max-width: 560px) {
  .gm-hero .saj-tab__layar .saj-shot { aspect-ratio: 4 / 3; }
}

/* panel kini hanya teks: tanpa kartu putih bawaan HP */
.gm-hero .saj-tab__panel {
  margin-bottom: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none;
}
/* ============================================================================
   6. KARTU HERO: judul diletakkan di samping ikon 3D (bukan di bawahnya)
   supaya penataannya rapi; deskripsi dan lencana paket tetap penuh lebar.
   ============================================================================ */
.gm-kartu {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 13px;
  align-items: center;
}
.gm-kartu h2 { grid-column: 2; grid-row: 1; margin: 0; }
.gm-kartu > p { grid-column: 1 / -1; margin-top: 12px; }
.gm-kartu__cap { grid-column: 1 / -1; justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  .gm-ticker__jalur { animation: none; }
  .gm-ticker__jalur span::after { animation: none; }
}
/* ============================================================================
   7. TAB SEGMEN HERO: nama segmen, deskripsi, dan tautan panduan disatukan di
   dalam satu kartu kaca; chip nama segmen menempel di tepi atas kartu. Tombol
   oval yang berat diganti tautan ringan dengan tanda panah.
   ============================================================================ */
.gm-hero .saj-tab__bar {
  position: relative; z-index: 2;
  margin: 14px auto -17px;
}
.gm-hero .saj-tab__in:checked + .saj-tab__label {
  font-size: 12.4px; padding: 7px 14px;
  letter-spacing: .03em;
}
.gm-hero .saj-tab__panel {
  margin: 0; padding: 30px 22px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .02));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 26px 54px -42px rgba(0, 0, 0, .95);
  text-align: center;
}
.gm-hero .saj-tab__panel > p:first-child {
  max-width: 46ch; margin: 0 auto;
  font-size: 14px; line-height: 1.62;
}
.gm-hero .saj-tab__panel > p:last-child { margin: 12px 0 0; }

/* tautan panduan: ringan, tanpa bingkai oval */
.gm-hero .saj-tab__panel .saj-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; min-height: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: #7dd3fc; font-size: 13.6px; font-weight: 700;
}
.gm-hero .saj-tab__panel .saj-btn:hover { transform: none; color: #bae6fd; }
.gm-hero .saj-tab__panel .saj-btn::after { content: "\2192"; transition: transform .25s ease; }
.gm-hero .saj-tab__panel .saj-btn:hover::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .gm-hero .saj-tab__panel .saj-btn:hover::after { transform: none; }
  .gm-hero .saj-tab__panel .saj-btn::after { transition: none; }
}
/* ============================================================================
   8. KARTU HERO: tanda air ikon di pojok (pengganti cahaya bulat) - ikon yang
   sama dengan ikon kartu, dibuat samar dan bergerak halus supaya tidak norak.
   ============================================================================ */
.gm-kartu > .gm-kartu__tanda {
  position: absolute; top: 4px; right: 6px; z-index: 0;
  width: clamp(56px, 30%, 78px);
  height: auto;
  color: var(--gm-aksen, #38bdf8);
  opacity: .16;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .gm-kartu > .gm-kartu__tanda {
    animation: gm-tanda-apung 7.6s ease-in-out infinite, gm-tanda-sinar 4.8s ease-in-out infinite;
    animation-delay: calc(var(--t, 0) * 320ms);
  }
}
@keyframes gm-tanda-apung {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-4deg); }
}
@keyframes gm-tanda-sinar {
  0%, 100% { opacity: .1; }
  50% { opacity: .26; }
}

/* ============================================================================
   9. BAGIAN ISI BERANDA: gaya premium + sentuhan animasi pro gaming.
   Menyentuh: pemisah antar bagian, judul bagian + label, kartu isi (nomor urut,
   tepi gradien, tepi bercahaya saat disentuh), baris fitur (gambar & teks),
   tabel add-on, catatan, serta animasi muncul berurutan.
   Semua gerak hanya transform/opacity dan berhenti saat "kurangi gerak".
   ============================================================================ */

/* --- pemisah antar bagian: garis neon tipis dengan titik cahaya ----------- */
.saj-sec { position: relative; }
.saj-sec + .saj-sec::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 16px;
  z-index: 2; pointer-events: none;
  background:
    radial-gradient(6.5px 6.5px at 50% 8px, rgba(var(--pita-2), .9), rgba(var(--pita-2), 0) 72%),
    linear-gradient(90deg, rgba(var(--pita), 0), rgba(var(--pita), .5) 20%, rgba(var(--pita-2), .55) 50%, rgba(var(--pita), .5) 80%, rgba(var(--pita), 0)) center 8px / 100% 2px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .saj-sec + .saj-sec::before { animation: gm-pemisah-sinar 4.8s ease-in-out infinite; }
}
@keyframes gm-pemisah-sinar { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* --- judul bagian: garis aksen bergradien di bawah judul ------------------ */
.saj-sec__kepala h2::after {
  content: "";
  display: block; width: 78px; height: 4px; margin-top: 13px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gm-biru), var(--gm-teal));
  box-shadow: 0 0 16px -3px rgba(56, 189, 248, .9);
}
.saj-sec__kepala--tengah h2::after { margin-inline: auto; }
.saj-sec__kepala p { max-width: 60ch; }

/* label kecil di atas judul: pil kaca + titik denyut */
.saj-sec__label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(120deg, rgba(56, 189, 248, .16), rgba(52, 211, 153, .14));
  border: 1px solid rgba(29, 120, 255, .22);
  color: #0b3b63; font-weight: 700; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase;
}
.saj-sec__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(120deg, var(--gm-biru-2), var(--gm-teal-2));
  box-shadow: 0 0 10px 2px rgba(56, 189, 248, .6);
}
@media (prefers-reduced-motion: no-preference) {
  .saj-sec__label::before { animation: gm-titik-denyut 2.6s ease-in-out infinite; }
}
@keyframes gm-titik-denyut {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(1.45); }
}

/* --- kartu isi: tepi bergradien + nomor urut + tepi bercahaya saat disentuh */
.saj-grid { counter-reset: gm-nomor; }
.saj-kartu {
  position: relative; overflow: hidden;
  counter-increment: gm-nomor;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(140deg, rgba(29, 120, 255, .3), rgba(15, 191, 164, .24) 55%, rgba(242, 197, 124, .22)) border-box;
  box-shadow: 0 20px 44px -36px rgba(8, 24, 47, .65);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}
.saj-kartu::before {
  content: counter(gm-nomor, decimal-leading-zero);
  position: absolute; top: 10px; right: 16px;
  font-family: var(--saj-font-judul); font-weight: 700; line-height: 1;
  font-size: clamp(22px, 2.4vw, 30px);
  color: rgba(11, 59, 99, .1);
}
.saj-kartu::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--gm-sudut, 0deg), transparent 0 56%,
    rgba(56, 189, 248, .95) 76%, rgba(52, 211, 153, .95) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.saj-kartu:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 60px -34px rgba(29, 120, 255, .5);
}
.saj-kartu:hover::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .saj-kartu:hover::after { animation: gm-tepi-putar 3.4s linear infinite; }
}



/* --- kartu bagian "Coba sendiri & baca panduannya": satu kartu satu warna penuh ----
   Gaya berbeda dari kartu Fitur unggulan: di sini seluruh badan kartu diwarnai penuh
   (bukan kartu putih berpinggiran warna). Tiap kartu bergerak sendiri: sapuan cahaya
   melintas, nomor besar mengapung pelan, dan garis di bawah judul berdenyut. */
.saj-sec--coba .saj-kartu {
  --coba-1: #4338ca;
  --coba-2: #312e81;
  --coba: 67, 56, 202;
  --coba-laju: 7s;
  --coba-tunda: 0s;
  border-color: rgba(255, 255, 255, .3);
  background:
    radial-gradient(120% 90% at 86% -12%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 56%) padding-box,
    linear-gradient(152deg, var(--coba-1), var(--coba-2)) padding-box;
  box-shadow: 0 26px 50px -30px rgba(var(--coba), .8);
  color: #fff;
}
.saj-sec--coba .saj-kartu:nth-child(2) { --coba-1: #0e7490; --coba-2: #155e75; --coba: 14, 116, 144; --coba-laju: 7.8s; --coba-tunda: -1.4s; }
.saj-sec--coba .saj-kartu:nth-child(3) { --coba-1: #a21caf; --coba-2: #701a75; --coba: 162, 28, 175; --coba-laju: 7.4s; --coba-tunda: -2.6s; }
.saj-sec--coba .saj-kartu:nth-child(4) { --coba-1: #c2410c; --coba-2: #7c2d12; --coba: 194, 65, 12; --coba-laju: 6.8s; --coba-tunda: -3.5s; }
.saj-sec--coba .saj-kartu:nth-child(5) { --coba-1: #15803d; --coba-2: #14532d; --coba: 21, 128, 61; --coba-laju: 8.2s; --coba-tunda: -4.6s; }
.saj-sec--coba .saj-kartu:nth-child(6) { --coba-1: #b91c1c; --coba-2: #7f1d1d; --coba: 185, 28, 28; --coba-laju: 6.4s; --coba-tunda: -5.4s; }

/* tulisan di atas warna penuh */
.saj-sec--coba .saj-kartu h3 { color: #fff; padding-right: 58px; }
.saj-sec--coba .saj-kartu p { color: rgba(255, 255, 255, .9); }
.saj-sec--coba .saj-kartu a { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.saj-sec--coba .saj-kartu a:hover { color: #ffe9b8; }
.saj-sec--coba .saj-kartu h3::after {
  content: ""; display: block;
  width: clamp(36px, 32%, 62px); height: 3px;
  margin-top: 12px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .22));
  transform-origin: left center;
}
.saj-sec--coba .saj-lencana--segera {
  background: rgba(255, 255, 255, .92); color: #7a2c00; border-color: rgba(255, 255, 255, .8);
}

/* nomor besar tembus pandang di sudut kanan bawah */
.saj-sec--coba .saj-kartu::before {
  top: auto; bottom: 4px; right: 16px;
  font-size: clamp(40px, 4.8vw, 58px);
  line-height: 1;
  color: rgba(255, 255, 255, .26);
}

/* sapuan cahaya melintas dari kiri ke kanan (jalan sendiri) */
.saj-sec--coba .saj-kartu::after {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 45%;
  padding: 0; border-radius: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0));
  -webkit-mask: none; mask: none;
  opacity: 1;
  transform: translateX(-130%);
  pointer-events: none;
}
.saj-sec--coba .saj-kartu:hover { box-shadow: 0 32px 62px -28px rgba(var(--coba), .9); }

@media (prefers-reduced-motion: no-preference) {
  .saj-sec--coba .saj-kartu::after {
    animation: saj-coba-kilau var(--coba-laju) ease-in-out infinite;
    animation-delay: var(--coba-tunda);
  }
  .saj-sec--coba .saj-kartu::before { animation: saj-coba-angka 6.5s ease-in-out infinite; }
  .saj-sec--coba .saj-kartu:nth-child(2)::before { animation-delay: -1.1s; }
  .saj-sec--coba .saj-kartu:nth-child(3)::before { animation-delay: -2.2s; }
  .saj-sec--coba .saj-kartu:nth-child(4)::before { animation-delay: -3.3s; }
  .saj-sec--coba .saj-kartu:nth-child(5)::before { animation-delay: -4.4s; }
  .saj-sec--coba .saj-kartu:nth-child(6)::before { animation-delay: -5.5s; }
  .saj-sec--coba .saj-kartu h3::after { animation: saj-coba-nadi 3.8s ease-in-out infinite; }
  .saj-sec--coba .saj-kartu:nth-child(2) h3::after { animation-delay: -.6s; }
  .saj-sec--coba .saj-kartu:nth-child(3) h3::after { animation-delay: -1.2s; }
  .saj-sec--coba .saj-kartu:nth-child(4) h3::after { animation-delay: -1.8s; }
  .saj-sec--coba .saj-kartu:nth-child(5) h3::after { animation-delay: -2.4s; }
  .saj-sec--coba .saj-kartu:nth-child(6) h3::after { animation-delay: -3s; }
}
@keyframes saj-coba-kilau {
  0% { transform: translateX(-130%); }
  58%, 100% { transform: translateX(330%); }
}
@keyframes saj-coba-angka {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .8; }
  50% { transform: translate3d(-7px, -9px, 0); opacity: 1; }
}
@keyframes saj-coba-nadi {
  0%, 100% { transform: scaleX(.7); opacity: .72; }
  50% { transform: scaleX(1); opacity: 1; }
}



/* tautan di dalam kartu & baris fitur: tanda panah yang bergeser */
.saj-kartu p:last-child a::after,
.saj-fitur__teks p:last-child a::after {
  content: "\2192"; display: inline-block; margin-left: 5px;
  transition: transform .25s ease;
}
.saj-kartu p:last-child a:hover::after,
.saj-fitur__teks p:last-child a:hover::after { transform: translateX(4px); }

/* --- baris fitur: garis aksen neon, lencana paket, gambar mengapung -------- */
.saj-fitur__teks { position: relative; padding-left: 18px; }
.saj-fitur__teks::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gm-biru-2), var(--gm-teal-2));
  box-shadow: 0 0 18px -2px rgba(56, 189, 248, .7);
}
.saj-fitur__paket {
  background: rgba(4, 24, 47, .05);
  border: 1px solid rgba(29, 120, 255, .2);
  color: #0b3b63;
}
.saj-fitur__paket::before {
  content: ""; display: inline-block; margin-right: 8px;
  width: 7px; height: 7px; border-radius: 50%; vertical-align: middle;
  background: linear-gradient(120deg, var(--gm-biru-2), var(--gm-teal-2));
  box-shadow: 0 0 10px 2px rgba(56, 189, 248, .55);
}
.saj-fitur .saj-shot {
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow:
    0 30px 60px -38px rgba(8, 24, 47, .75),
    0 0 0 1px rgba(8, 24, 47, .06);
}
@media (prefers-reduced-motion: no-preference) {
  .saj-fitur .saj-shot { animation: gm-gambar-apung 7.4s ease-in-out infinite; }
  .saj-fitur--balik .saj-shot { animation-delay: 1.6s; }
}
@keyframes gm-gambar-apung {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* chip: pil neon dengan titik menyala + sedikit terangkat saat disentuh */
.saj-chip { transition: transform .3s ease, box-shadow .3s ease; }
.saj-chip::before { box-shadow: 0 0 8px 1px var(--chip-titik, transparent); }
.saj-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -16px rgba(29, 120, 255, .8); }

/* --- tabel add-on: kepala gelap bergradien, baris belang, sorot saat disentuh */
.saj-tabel-bungkus {
  border-radius: 20px;
  border: 1px solid rgba(8, 24, 47, .1);
  box-shadow: 0 30px 60px -44px rgba(8, 24, 47, .8);
  background: #fff;
}
table.saj-tabel thead th {
  background: linear-gradient(120deg, #04182f 0%, #0b3557 52%, #04564a 100%);
  color: #e6f6ff; border-bottom: 0; letter-spacing: .05em;
}
table.saj-tabel tbody tr { transition: background .25s ease, box-shadow .25s ease; }
table.saj-tabel tbody tr:nth-child(even) { background: rgba(56, 189, 248, .05); }
table.saj-tabel tbody tr:hover {
  background: rgba(52, 211, 153, .12);
  box-shadow: inset 3px 0 0 var(--gm-teal);
}
table.saj-tabel tbody td { border-bottom: 1px solid rgba(8, 24, 47, .07); }

/* catatan: pita lembut beraksen teal */
.saj-catatan {
  border-left: 4px solid var(--gm-teal);
  background: linear-gradient(120deg, rgba(56, 189, 248, .12), rgba(52, 211, 153, .1));
  border-radius: 0 16px 16px 0;
}

/* --- tekstur kisi tipis pada bagian berlatar agar senada dengan hero ------- */
.saj-sec--latar::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 120, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 120, 255, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.saj-sec--latar > .saj-wrap { position: relative; z-index: 1; }

/* --- animasi muncul berurutan (rasa pro gaming) --------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .saj-grid > .saj-muncul:nth-child(2) { transition-delay: .07s; }
  .saj-grid > .saj-muncul:nth-child(3) { transition-delay: .14s; }
  .saj-grid > .saj-muncul:nth-child(4) { transition-delay: .21s; }
  .saj-grid > .saj-muncul:nth-child(5) { transition-delay: .28s; }
  .saj-grid > .saj-muncul:nth-child(6) { transition-delay: .35s; }
  .saj-fitur.saj-muncul:nth-of-type(2) { transition-delay: .06s; }
  .saj-fitur.saj-muncul:nth-of-type(3) { transition-delay: .12s; }
  .saj-fitur.saj-muncul:nth-of-type(4) { transition-delay: .18s; }
  .saj-fitur.saj-muncul:nth-of-type(5) { transition-delay: .24s; }
}

/* ==========================================================================
   Pembeda antar bagian beranda: tiap bagian punya warna garis sendiri,
   ada bagian berlatar berbeda, jadi tidak terasa seperti satu bagian panjang.
   ========================================================================== */

/* setiap bagian punya warna sendiri (untuk garis pemisah & lapis warna tipis) */
.saj-sec { --pita: 29, 120, 255; --pita-2: 52, 211, 153; }
.saj-sec:nth-of-type(3n+1) { --pita: 29, 120, 255; --pita-2: 56, 189, 248; }
.saj-sec:nth-of-type(3n+2) { --pita: 13, 168, 148; --pita-2: 163, 230, 53; }
.saj-sec:nth-of-type(3n) { --pita: 124, 58, 237; --pita-2: 219, 39, 96; }

/* selang-seling: bagian berlatar putih tertentu diberi lapis warna tipis */
.saj-sec:not(.saj-sec--latar):not(.saj-sec--terang):not(.saj-sec--gelap):not(.saj-sec--katalog):nth-of-type(odd) {
  background: linear-gradient(180deg, rgba(var(--pita), .065), rgba(var(--pita-2), .04));
}

/* bagian gelap: jeda kuat di tengah beranda */
.saj-sec--gelap {
  color: #e6f4fb;
  background:
    radial-gradient(90% 62% at 10% 0%, rgba(56, 189, 248, .2), rgba(6, 32, 58, 0) 62%),
    radial-gradient(80% 62% at 92% 100%, rgba(52, 211, 153, .18), rgba(6, 32, 58, 0) 64%),
    linear-gradient(162deg, #06203a, #072b45 52%, #06333a);
}
.saj-sec--gelap .saj-sec__kepala h2 { color: #fff; }
.saj-sec--gelap .saj-sec__kepala h2::after { box-shadow: 0 0 18px -3px rgba(125, 211, 252, .95); }
.saj-sec--gelap .saj-sec__kepala p { color: rgba(224, 243, 252, .84); }
.saj-sec--gelap .saj-kartu {
  color: var(--saj-teks);
  border-color: rgba(255, 255, 255, .24);
  box-shadow: 0 30px 62px -34px rgba(0, 0, 0, .85);
}
.saj-sec--gelap .saj-catatan {
  color: rgba(232, 246, 253, .92);
  background: rgba(255, 255, 255, .07);
  border-left-color: #34d399;
}
.saj-sec--gelap .saj-catatan a { color: #7dd3fc; }
.saj-sec--gelap .saj-kartu h3, .saj-sec--gelap .saj-kartu p, .saj-sec--gelap .saj-kartu a { color: inherit; }

/* --- palet kartu bagian "Fitur unggulan": gaya sama dengan "Coba sendiri",
   hanya warnanya lain supaya kedua bagian tetap terasa berbeda -------------- */
.saj-sec--unggulan .saj-kartu:nth-child(1) { --coba-1: #1d4ed8; --coba-2: #1e3a8a; --coba: 29, 78, 216; --coba-laju: 7.6s; --coba-tunda: -.8s; }
.saj-sec--unggulan .saj-kartu:nth-child(2) { --coba-1: #0f766e; --coba-2: #115e59; --coba: 15, 118, 110; --coba-laju: 6.9s; --coba-tunda: -2s; }
.saj-sec--unggulan .saj-kartu:nth-child(3) { --coba-1: #6d28d9; --coba-2: #4c1d95; --coba: 109, 40, 217; --coba-laju: 8s; --coba-tunda: -3.2s; }
.saj-sec--unggulan .saj-kartu:nth-child(4) { --coba-1: #b45309; --coba-2: #78350f; --coba: 180, 83, 9; --coba-laju: 7.2s; --coba-tunda: -4.4s; }
.saj-sec--unggulan .saj-kartu:nth-child(5) { --coba-1: #be123c; --coba-2: #881337; --coba: 190, 18, 60; --coba-laju: 6.6s; --coba-tunda: -5.6s; }
.saj-sec--unggulan .saj-kartu:nth-child(6) { --coba-1: #4d7c0f; --coba-2: #365314; --coba: 77, 124, 15; --coba-laju: 8.4s; --coba-tunda: -6.8s; }

/* ==========================================================================
   Bagian "Kenapa memilih sajoo?": pita aurora + kartu kaca berwarna.
   Sentuhan geraknya sengaja lain dari bagian lain: bukan sapuan di badan kartu
   atau tepi yang berputar, tetapi (1) gumpalan warna di dalam kartu berkeliling
   pelan, (2) garis aksen di tepi atas bergeser kiri-kanan, dan (3) pita cahaya
   menyapu seluruh bagian.
   ========================================================================== */
.saj-sec--kenapa {
  overflow: hidden;
  border-top: 1px solid rgba(8, 24, 47, .07);
  border-bottom: 1px solid rgba(8, 24, 47, .07);
  background:
    radial-gradient(58% 52% at 10% 6%, rgba(124, 58, 237, .15), rgba(255, 255, 255, 0) 62%),
    radial-gradient(56% 50% at 92% 10%, rgba(56, 189, 248, .18), rgba(255, 255, 255, 0) 62%),
    radial-gradient(72% 60% at 50% 106%, rgba(52, 211, 153, .18), rgba(255, 255, 255, 0) 64%),
    linear-gradient(180deg, #f7fbff, #f1fdf9 56%, #ffffff);
}
.saj-sec--kenapa > .saj-wrap { position: relative; z-index: 1; }

/* pita cahaya menyapu seluruh bagian (pelan, lalu jeda) */
.saj-sec--kenapa::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 60%) -45% 0 / 42% 100% no-repeat;
}

/* judul bagian: garis aksen tiga warna + cahaya lembut */
.saj-sec--kenapa .saj-sec__kepala h2::after {
  width: 92px;
  background: linear-gradient(90deg, #7c3aed, #38bdf8 46%, #34d399);
  box-shadow: 0 0 20px -4px rgba(56, 189, 248, .95);
}
.saj-sec--kenapa .saj-sec__kepala p { color: #2c4a63; }

/* kartu kaca: tiap kartu punya warna aksen sendiri */
.saj-sec--kenapa .saj-kartu {
  --knp: 13, 148, 136;
  --knp-2: 56, 189, 248;
  --knp-laju: 18s;
  --knp-tunda: 0s;
  position: relative; overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(70% 70% at 18% 0%, rgba(var(--knp), .14), rgba(255, 255, 255, 0) 72%) padding-box,
    linear-gradient(165deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .78)) padding-box,
    linear-gradient(140deg, rgba(var(--knp), .5), rgba(var(--knp-2), .42)) border-box;
  box-shadow: 0 26px 52px -34px rgba(var(--knp), .75);
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
}
.saj-sec--kenapa .saj-kartu:nth-child(2) { --knp: 29, 78, 216; --knp-2: 56, 189, 248; --knp-laju: 21s; --knp-tunda: -5s; }
.saj-sec--kenapa .saj-kartu:nth-child(3) { --knp: 124, 58, 237; --knp-2: 192, 132, 252; --knp-laju: 24s; --knp-tunda: -11s; }
.saj-sec--kenapa .saj-kartu:nth-child(4) { --knp: 180, 83, 9; --knp-2: 250, 204, 21; --knp-laju: 20s; --knp-tunda: -16s; }
.saj-sec--kenapa .saj-kartu h3, .saj-sec--kenapa .saj-kartu > p { position: relative; z-index: 1; }

/* gumpalan warna yang berkeliling pelan di dalam kartu */
.saj-sec--kenapa .saj-kartu::before {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  left: -18%; top: -22%; width: 64%; height: 64%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--knp), .55), rgba(var(--knp), 0) 72%);
  filter: blur(12px);
}

/* garis aksen warna di tepi atas kartu, bergeser kiri-kanan */
.saj-sec--kenapa .saj-kartu::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  padding: 0; border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--knp), 0), rgba(var(--knp), .95) 30%, rgba(var(--knp-2), .95) 66%, rgba(var(--knp), 0)) -60% 0 / 55% 100% no-repeat;
  -webkit-mask: none; mask: none;
  opacity: .95; pointer-events: none;
}
.saj-sec--kenapa .saj-kartu:hover { box-shadow: 0 34px 66px -32px rgba(var(--knp), .95); }
.saj-sec--kenapa .saj-kartu:hover::before { filter: blur(14px) brightness(1.08); }

@media (prefers-reduced-motion: no-preference) {
  .saj-sec--kenapa::after { animation: knp-sapu 22s ease-in-out infinite; }
  .saj-sec--kenapa .saj-kartu::before {
    animation: knp-keliling var(--knp-laju) ease-in-out infinite;
    animation-delay: var(--knp-tunda);
  }
  .saj-sec--kenapa .saj-kartu::after {
    animation: knp-garis 9s ease-in-out infinite;
    animation-delay: var(--knp-tunda);
  }
  .saj-sec--kenapa .saj-kartu:nth-child(2)::after { animation-duration: 10.5s; }
  .saj-sec--kenapa .saj-kartu:nth-child(3)::after { animation-duration: 12s; }
  .saj-sec--kenapa .saj-kartu:nth-child(4)::after { animation-duration: 9.6s; }
}
@keyframes knp-sapu {
  0% { background-position: -45% 0; }
  40%, 100% { background-position: 145% 0; }
}
@keyframes knp-keliling {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(190%, 130%, 0) scale(1.2); }
  66% { transform: translate3d(60%, 210%, 0) scale(1.05); }
}
@keyframes knp-garis {
  0% { background-position: -60% 0; }
  55%, 100% { background-position: 165% 0; }
}

/* ==========================================================================
   Kartu bagian "Tiga hal yang membuat sajoo berbeda": warna penuh + gerak yang
   sengaja belum dipakai di bagian lain, yaitu (1) warna kartu bergeser sendiri,
   (2) pusaran cahaya berputar pelan di belakang tulisan, (3) butir cahaya naik
   dua lapis seperti arus data.
   ========================================================================== */
.saj-sec--tiga .saj-kartu {
  --tiga-1: #1e40af;
  --tiga-2: #172554;
  --tiga: 30, 64, 175;
  --tiga-laju: 17s;
  --tiga-tunda: 0s;
  --tiga-pusar: 28s;
  position: relative; overflow: hidden;
  border-color: rgba(255, 255, 255, .3);
  background: linear-gradient(155deg, var(--tiga-1), var(--tiga-2));
  box-shadow: 0 28px 54px -32px rgba(var(--tiga), .85);
  color: #fff;
}
.saj-sec--tiga .saj-kartu:nth-child(2) { --tiga-1: #9d174d; --tiga-2: #6b0f33; --tiga: 157, 23, 77; --tiga-laju: 20s; --tiga-tunda: -6s; --tiga-pusar: 33s; }
.saj-sec--tiga .saj-kartu:nth-child(3) { --tiga-1: #115e59; --tiga-2: #073b36; --tiga: 17, 94, 89; --tiga-laju: 23s; --tiga-tunda: -12s; --tiga-pusar: 38s; }
.saj-sec--tiga .saj-kartu:nth-child(4) { --tiga-1: #047857; --tiga-2: #064e3b; --tiga: 4, 120, 87; --tiga-laju: 19s; --tiga-tunda: -3s; --tiga-pusar: 31s; }
.saj-sec--tiga .saj-kartu:nth-child(5) { --tiga-1: #0369a1; --tiga-2: #075985; --tiga: 3, 105, 161; --tiga-laju: 22s; --tiga-tunda: -9s; --tiga-pusar: 36s; }
.saj-sec--tiga .saj-kartu:nth-child(6) { --tiga-1: #a16207; --tiga-2: #713f12; --tiga: 161, 98, 7; --tiga-laju: 25s; --tiga-tunda: -15s; --tiga-pusar: 41s; }

/* enam kartu: 2 kolom sejak 600px, 3 kolom sejak 1000px supaya rapi 3 + 3 */
.saj-sec--tiga .saj-grid { grid-template-columns: 1fr; }
@media (min-width: 600px) { .saj-sec--tiga .saj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .saj-sec--tiga .saj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.saj-sec--tiga .saj-kartu h3 { color: #fff; }
.saj-sec--tiga .saj-kartu p { color: rgba(255, 255, 255, .92); }
.saj-sec--tiga .saj-kartu a { color: #fff; text-decoration-color: rgba(255, 255, 255, .65); }
.saj-sec--tiga .saj-kartu a:hover { color: #ffe9b8; }
.saj-sec--tiga .saj-kartu h3, .saj-sec--tiga .saj-kartu > p { position: relative; z-index: 1; }

/* pusaran cahaya berputar di belakang tulisan */
.saj-sec--tiga .saj-kartu::before {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; width: 200%; aspect-ratio: 1 / 1;
  margin: -100% 0 0 -100%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0 16%, rgba(255, 255, 255, .22) 24%,
    rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 58%,
    rgba(255, 255, 255, .16) 68%, rgba(255, 255, 255, 0) 82%);
}

/* butir cahaya naik dua lapis, seperti arus data */
.saj-sec--tiga .saj-kartu::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  padding: 0; border-radius: 0; -webkit-mask: none; mask: none;
  background-image:
    radial-gradient(2px 2px at 5px 5px, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 72%),
    radial-gradient(1.6px 1.6px at 21px 17px, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 72%);
  background-size: 27px 27px, 33px 33px;
  opacity: .5;
}

.saj-sec--tiga .saj-kartu:hover { box-shadow: 0 36px 68px -30px rgba(var(--tiga), 1); }

@media (prefers-reduced-motion: no-preference) {
  .saj-sec--tiga .saj-kartu::before { animation: tiga-pusar var(--tiga-pusar) linear infinite; }
  .saj-sec--tiga .saj-kartu::after { animation: tiga-naik 7.5s linear infinite; }
}
@media (min-width: 720px) and (prefers-reduced-motion: no-preference) {
  /* warna kartu hidup: rona warna bergeser perlahan (layar lebar saja) */
  .saj-sec--tiga .saj-kartu {
    animation: tiga-warna var(--tiga-laju) ease-in-out infinite;
    animation-delay: var(--tiga-tunda);
  }
}
@keyframes tiga-pusar {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes tiga-naik {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 -27px, 0 -33px; }
}
@keyframes tiga-warna {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.04); }
  50% { filter: hue-rotate(-28deg) saturate(1.16); }
}

/* --- bukti katalog online: contoh toko sungguhan yang bisa dibuka pembaca ---- */
.saj-toko__bukti {
  display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 2px; gap: 8px; margin: 0;
  padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(120deg, rgba(56, 189, 248, .14), rgba(52, 211, 153, .12));
  border: 1px solid rgba(29, 120, 255, .2);
  font-size: 12.5px; color: #0b3b63;
}
.saj-toko__bukti::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: linear-gradient(120deg, #1d78ff, #34d399);
  box-shadow: 0 0 10px 2px rgba(56, 189, 248, .6);
}
.saj-toko__bukti a { font-weight: 700; color: #0b3b63; }
.saj-toko__bukti a:hover { color: #0e7490; }

/* --- baris coba gratis bagian katalog online --------------------------------- */
.saj-toko__gratis {
  display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0;
  padding: 11px 14px; border-radius: 12px;
  background: linear-gradient(120deg, rgba(52, 211, 153, .16), rgba(56, 189, 248, .13));
  border: 1px solid rgba(16, 185, 129, .3);
  font-size: 14.5px; color: #0b3b63;
}
.saj-toko__gratis::before {
  content: "\2713"; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #10b981, #0284c7);
  box-shadow: 0 6px 14px -6px rgba(16, 185, 129, .9);
}
.saj-toko__gratis strong { color: #047857; }

/* ==========================================================================
   Bagian "Add-on - Katalog Online": panggung gelap mewah (obsidian + emas).
   Gerak yang terasa mahal: tepi panel berputar seperti batu permata, aurora
   bergeser di dalam panel, pendar kristal berputar pelan di badan panel, kilau
   menyapu layar tiruan, foto produk berkilau, titik alamat berdenyut, dan tombol
   pesan bernafas.
   ========================================================================== */
@property --kat-sudut {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.saj-sec--katalog {
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(242, 197, 124, .2);
  border-bottom: 1px solid rgba(242, 197, 124, .2);
  background-image:
    radial-gradient(58% 54% at 12% 0%, rgba(124, 58, 237, .32), rgba(6, 8, 20, 0) 62%),
    radial-gradient(54% 50% at 88% 8%, rgba(56, 189, 248, .22), rgba(6, 8, 20, 0) 62%),
    radial-gradient(76% 62% at 50% 112%, rgba(242, 197, 124, .16), rgba(6, 8, 20, 0) 64%),
    linear-gradient(160deg, #070a18, #0b0f24 48%, #0d1226);
  color: #e8eefb;
}
/* kisi halus sebagai latar panggung (diam) */
.saj-sec--katalog::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, rgba(255, 255, 255, 0) 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, rgba(255, 255, 255, 0) 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000, rgba(0, 0, 0, 0) 78%);
  mask-image: radial-gradient(72% 62% at 50% 42%, #000, rgba(0, 0, 0, 0) 78%);
}
.saj-sec--katalog > .saj-wrap { position: relative; z-index: 1; }

/* panel kaca gelap dengan tepi permata yang berputar */
.saj-sec--katalog .saj-toko {
  position: relative;
  isolation: isolate; overflow: hidden;
  border-color: transparent;
  background:
    radial-gradient(85% 70% at 14% 0%, rgba(124, 58, 237, .32), rgba(12, 16, 38, 0) 62%) padding-box,
    linear-gradient(158deg, rgba(21, 27, 56, .97), rgba(9, 13, 30, .97)) padding-box,
    conic-gradient(from var(--kat-sudut, 0deg),
      rgba(124, 58, 237, .92), rgba(56, 189, 248, .65) 22%,
      rgba(242, 197, 124, .95) 42%, rgba(56, 189, 248, .6) 68%,
      rgba(192, 38, 211, .82) 88%, rgba(124, 58, 237, .92)) border-box;
  box-shadow: 0 42px 84px -48px rgba(0, 0, 0, .95), 0 0 64px -34px rgba(124, 58, 237, .85);
}
.saj-sec--katalog .saj-toko > * { position: relative; z-index: 1; }
.saj-sec--katalog .saj-toko::before {
  content: "";
  position: absolute; inset: -25% -8% auto -8%; height: 78%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 58% at 28% 42%, rgba(124, 58, 237, .55), rgba(124, 58, 237, 0) 70%),
    radial-gradient(44% 56% at 72% 58%, rgba(34, 211, 238, .42), rgba(34, 211, 238, 0) 70%);
  filter: blur(34px);
  opacity: .75;
}
.saj-sec--katalog .saj-toko::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 50%; margin: -65% 0 0 -65%;
  width: 130%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255, 255, 255, 0) 0 10%, rgba(242, 197, 124, .26) 18%,
    rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 50%,
    rgba(125, 211, 252, .24) 60%, rgba(255, 255, 255, 0) 74%);
  filter: blur(10px);
  opacity: .5;
}
.saj-sec--katalog .saj-toko:hover::before { opacity: .95; }

/* tulisan di atas panggung gelap */
.saj-sec--katalog .saj-toko__label {
  background: rgba(242, 197, 124, .14); color: #f2c57c; border: 1px solid rgba(242, 197, 124, .32);
}
.saj-sec--katalog .saj-toko h2 { color: #fff; }
.saj-sec--katalog .saj-toko__sub { color: rgba(226, 236, 255, .84); }
.saj-sec--katalog .saj-toko__daftar strong { color: #fff; }
.saj-sec--katalog .saj-toko__daftar li > div > span { color: rgba(214, 226, 248, .82); }
.saj-sec--katalog .saj-toko__daftar em { color: #f2c57c; }
.saj-sec--katalog .saj-toko__tanda {
  background: rgba(56, 189, 248, .16); border-color: rgba(56, 189, 248, .4);
  box-shadow: 0 0 16px -4px rgba(56, 189, 248, .95);
}
.saj-sec--katalog .saj-toko__tanda::after { border-color: #7dd3fc; }
.saj-sec--katalog .saj-toko__badge { color: rgba(214, 226, 248, .74); }
.saj-sec--katalog .saj-btn--garis {
  background: rgba(255, 255, 255, .05); color: #e8eefb; border-color: rgba(232, 238, 251, .34);
}
.saj-sec--katalog .saj-btn--garis:hover { border-color: rgba(242, 197, 124, .68); color: #f2c57c; }
.saj-sec--katalog .saj-toko__gratis {
  background: linear-gradient(120deg, rgba(52, 211, 153, .18), rgba(56, 189, 248, .14));
  border-color: rgba(52, 211, 153, .38); color: #d8f3e8;
}
.saj-sec--katalog .saj-toko__gratis strong { color: #6ee7b7; }

/* layar tiruan: perangkat gelap berkilau */
.saj-sec--katalog .saj-toko__layar {
  position: relative; overflow: hidden;
  border-color: rgba(255, 255, 255, .14);
  background: linear-gradient(168deg, #0e1430, #090e24);
  box-shadow: 0 36px 66px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(124, 58, 237, .42), 0 0 52px -22px rgba(56, 189, 248, .9);
}
.saj-sec--katalog .saj-toko__layar::after {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 42%; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, 0));
  transform: translateX(-140%);
}
.saj-sec--katalog .saj-toko__alamat { background: rgba(255, 255, 255, .08); color: rgba(226, 236, 255, .82); }
.saj-sec--katalog .saj-toko__produk { background: rgba(255, 255, 255, .07); }
.saj-sec--katalog .saj-toko__foto {
  background: linear-gradient(135deg, rgba(124, 58, 237, .6), rgba(56, 189, 248, .5) 55%, rgba(242, 197, 124, .45));
  background-size: 170% 170%;
}
.saj-sec--katalog .saj-toko__nama { color: #fff; }
.saj-sec--katalog .saj-toko__harga { color: #f2c57c; }
.saj-sec--katalog .saj-toko__keranjang {
  background: linear-gradient(135deg, #7c3aed, #22d3ee);
  box-shadow: 0 16px 32px -18px rgba(124, 58, 237, .95);
}
.saj-sec--katalog .saj-toko__keterangan { color: rgba(214, 226, 248, .7); }
.saj-sec--katalog .saj-toko__bukti {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18);
  color: rgba(214, 226, 248, .86);
}
.saj-sec--katalog .saj-toko__bukti a { color: #f2c57c; }
.saj-sec--katalog .saj-toko__bukti a:hover { color: #ffe9b8; }

@media (prefers-reduced-motion: no-preference) {
  .saj-sec--katalog .saj-toko { animation: kat-permata 16s linear infinite; }
  .saj-sec--katalog .saj-toko::before { animation: kat-aurora 22s ease-in-out infinite; }
  .saj-sec--katalog .saj-toko::after { animation: kat-kristal 42s linear infinite, kat-napas 8.5s ease-in-out infinite; }
  .saj-sec--katalog .saj-toko__layar::after { animation: kat-layar 7.5s ease-in-out infinite; }
  .saj-sec--katalog .saj-toko__foto { animation: kat-foto 6s ease-in-out infinite; }
  .saj-sec--katalog .saj-toko__keranjang { animation: kat-denyut 3.8s ease-in-out infinite; }
  .saj-sec--katalog .saj-toko__titik { animation: kat-titik 2.6s ease-in-out infinite; }
}
@keyframes kat-permata {
  from { --kat-sudut: 0deg; }
  to { --kat-sudut: 360deg; }
}
@keyframes kat-aurora {
  0%, 100% { transform: translate3d(-4%, -2%, 0) scale(1); opacity: .68; }
  50% { transform: translate3d(6%, 5%, 0) scale(1.12); opacity: .92; }
}
@keyframes kat-kristal {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes kat-napas {
  0%, 100% { opacity: .32; }
  50% { opacity: .62; }
}
@keyframes kat-layar {
  0% { transform: translateX(-140%); }
  45%, 100% { transform: translateX(330%); }
}
@keyframes kat-foto {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
@keyframes kat-denyut {
  0%, 100% { box-shadow: 0 14px 30px -18px rgba(124, 58, 237, .9); }
  50% { box-shadow: 0 18px 40px -14px rgba(34, 211, 238, .95); }
}
@keyframes kat-titik {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

/* tombol + catatan bagian katalog: di HP rata tengah bertumpuk, di layar lebar
   disusun 2 kolom supaya aksi utama (uji coba gratis) selebar panel. */
@media (max-width: 720px) {
  .saj-sec--katalog .saj-toko__kaki { justify-content: center; gap: 10px; text-align: center; }
  .saj-sec--katalog .saj-toko__kaki .saj-btn { width: 100%; max-width: 340px; }
  .saj-sec--katalog .saj-toko__badge { width: 100%; text-align: center; }
}
@media (min-width: 721px) {
  .saj-sec--katalog .saj-toko__kaki {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: center;
  }
  .saj-sec--katalog .saj-toko__kaki > :nth-child(1) { grid-column: 1 / -1; }
  .saj-sec--katalog .saj-toko__kaki .saj-toko__badge { grid-column: 1 / -1; }
}

/* pil bukti contoh toko: rapat dan rata tengah di HP kecil */
@media (max-width: 480px) {
  .saj-sec--katalog .saj-toko__bukti {
    width: 100%; max-width: 100%; justify-content: center; text-align: center;
    padding: 6px 10px; border-radius: 12px; font-size: 11.5px; gap: 4px 6px; line-height: 1.45;
  }
  .saj-sec--katalog .saj-toko__bukti::before { width: 6px; height: 6px; }
  .saj-sec--katalog .saj-toko__bukti a { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .saj-sec--katalog .saj-toko__bukti {
    padding: 5px 9px; font-size: 11px; gap: 3px 5px;
  }
}