/* =========================================================
   ZENNIT — Template Sheets (jualan template Google Sheets + Apps Script)
   Memakai komponen .lx-* dari latihan-excel.css (hero, kartu, harga, FAQ, CTA);
   file ini hanya berisi komponen tambahan. Ritme spacing sama dengan Latihan Excel.
   ========================================================= */

.ts { --xl-green: #188038; } /* hijau khas Google Sheets */

/* ── Hero: kolase hasil template + notifikasi otomasi ── */
.ts-collage { position: relative; padding: var(--sp-6) var(--sp-6) var(--sp-16) var(--sp-10); }
.ts-collage-main { width: 86%; margin-left: auto; transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.ts-collage-slip, .ts-collage-receipt {
  position: absolute; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 24px 60px rgba(0,0,0,.4);
  animation: tsFloat 7s ease-in-out infinite;
}
.ts-collage-slip { left: 0; bottom: var(--sp-4); width: 50%; rotate: -4deg; }
.ts-collage-receipt { right: 0; bottom: 0; width: 36%; rotate: 4deg; animation-delay: -3.5s; }
.ts-collage .lx-shot-bar b { font-size: var(--fs-2xs); }

.ts-toast {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2); border-radius: var(--radius-xl);
  background: var(--white); box-shadow: 0 16px 40px rgba(0,0,0,.28);
  font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--gray-500); white-space: nowrap;
  opacity: 0; animation: tsToast .6s cubic-bezier(.2,.9,.3,1.3) forwards, tsFloat 6s ease-in-out infinite;
}
.ts-toast b { display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--green-900); }
.ts-toast-icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green-100); color: var(--green-700); }
.ts-toast--1 { top: 0; left: 0; animation-delay: .5s, 1.1s; }
.ts-toast--2 { top: 38%; right: calc(-1 * var(--sp-2)); animation-delay: 1.2s, 1.8s; }
.ts-toast--2 .ts-toast-icon { background: var(--gold-soft); color: var(--green-900); }
.ts-toast--3 { bottom: 30%; left: 18%; animation-delay: 1.9s, 2.5s; }
@keyframes tsToast { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tsFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ── Usahamu yang mana? ────────────────────────── */
.ts-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.ts-pick-tile {
  position: relative; display: flex; flex-direction: column; padding: var(--sp-8) var(--sp-6) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); color: inherit;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ts-pick-tile:hover, .ts-pick-tile:focus-visible { transform: translateY(-4px); border-color: var(--green-400); box-shadow: var(--shadow-md); }
.ts-pick-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: var(--green-100); color: var(--green-700); transition: background .25s, color .25s;
}
.ts-pick-tile:hover .ts-pick-icon { background: var(--green-700); color: var(--white); }
.ts-pick-ask { margin-top: var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-500); }
.ts-pick-answer { margin-top: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); color: var(--green-900); }
.ts-pick-desc { margin-top: var(--sp-2); flex: 1; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-700); }
.ts-pick-go {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5);
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--green-600);
}
.ts-pick-go svg { transition: transform .25s; }
.ts-pick-tile:hover .ts-pick-go svg { transform: translateX(4px); }

/* ── Etalase template (tab) ────────────────────── */
.ts-show { scroll-margin-top: calc(var(--nav-h) + var(--sp-6)); }
.ts-tabs {
  display: flex; justify-content: center; gap: var(--sp-2); width: fit-content; max-width: 100%; margin: 0 auto var(--sp-10);
  padding: var(--sp-2); border-radius: var(--radius-xl); background: var(--white); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); overflow-x: auto; scrollbar-width: none;
}
.ts-tabs::-webkit-scrollbar { display: none; }
.ts-show:not(.is-tabbed) .ts-tabs { display: none; }
.ts-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; padding: var(--sp-3) var(--sp-5);
  border: 0; border-radius: var(--radius-xl); background: transparent; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-none); color: var(--gray-500);
  transition: background .2s, color .2s;
}
.ts-tab:hover { color: var(--green-800); background: var(--green-50); }
.ts-tab[aria-selected="true"] { background: var(--green-700); color: var(--white); }
.ts-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.ts-product {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--sp-16); align-items: center;
  padding: var(--sp-12); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm);
}
.ts-show:not(.is-tabbed) .ts-product + .ts-product { margin-top: var(--sp-10); }
.ts-show.is-tabbed .ts-product:not(.is-active) { display: none; }
.ts-show.is-tabbed .ts-product.is-active { animation: tsPanel .45s ease both; }
@keyframes tsPanel { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.ts-product-tag {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--green-600);
}
.ts-product h3 {
  margin-top: var(--sp-3);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700;
  line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--green-900);
}
.ts-product-headline { margin-top: var(--sp-2); font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--gray-700); }
.ts-product-for {
  display: inline-block; margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  background: var(--gold-soft); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--green-900);
}
.ts-product-for b { font-weight: 600; }

.ts-perks { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
.ts-perks li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.ts-perks svg {
  flex-shrink: 0; width: 24px; height: 24px; padding: var(--sp-1); margin-top: 2px;
  border-radius: 50%; background: var(--green-100); color: var(--green-600);
}
.ts-perks b { display: block; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--green-900); line-height: var(--lh-snug); }
.ts-perks p { margin-top: var(--sp-1); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-500); }

.ts-product-buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.ts-product-price { display: flex; align-items: baseline; gap: var(--sp-3); }
.ts-product-price s { font-size: var(--fs-md); color: var(--gray-400); }
.ts-product-price strong { font-family: var(--font-display); font-size: var(--fs-4xl); font-weight: 700; color: var(--green-900); line-height: var(--lh-none); }
.ts-next { margin-left: auto; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--gray-500); transition: color .2s; }
.ts-next:hover { color: var(--green-700); }
.ts-show:not(.is-tabbed) .ts-next { display: none; }

.ts-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; line-height: var(--lh-normal);
  background: var(--green-700); color: var(--white); border: 1.5px solid var(--green-700);
  transition: background .2s, border-color .2s;
}
.ts-buy:hover { background: var(--green-800); border-color: var(--green-800); }
.ts-buy--block { width: 100%; justify-content: center; border: 0; cursor: pointer; }
.is-owned { background: var(--green-50); color: var(--green-700); border-color: var(--green-400); box-shadow: none; }
.is-owned:hover { background: var(--green-100); color: var(--green-800); }

.ts-product-visual { position: relative; padding-bottom: var(--sp-8); }
.ts-shot--float {
  position: absolute; right: calc(-1 * var(--sp-6)); bottom: 0; width: 38%;
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); rotate: 3deg;
}

/* ── Kerja manual vs pakai template ────────────── */
.ts-vs { max-width: 980px; margin: 0 auto; }
.ts-vs-head, .ts-vs-row { display: grid; grid-template-columns: 1fr 44px 1fr; align-items: stretch; gap: var(--sp-3); }
.ts-vs-head { margin-bottom: var(--sp-4); }
.ts-vs-label {
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.ts-vs-label.is-old { color: var(--gray-400); }
.ts-vs-label.is-new { grid-column: 3; color: var(--green-600); }
.ts-vs-row + .ts-vs-row { margin-top: var(--sp-3); }
.ts-vs-old, .ts-vs-new {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm); font-size: var(--fs-md); line-height: var(--lh-normal);
}
.ts-vs-old { background: var(--gray-100); color: var(--gray-500); }
.ts-vs-old svg { flex: none; margin-top: 3px; color: var(--gray-400); }
.ts-vs-new { background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-900); font-weight: 500; }
.ts-vs-new svg { flex: none; margin-top: 3px; color: var(--green-600); }
.ts-vs-new a { display: inline-block; margin-left: var(--sp-1); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--green-600); text-decoration: underline; text-underline-offset: 3px; }
.ts-vs-arrow { display: grid; place-items: center; color: var(--green-500); }
.ts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Cara kerja (di bawah alasan) ──────────────── */
.ts-how { margin-top: var(--sp-16); }
.ts-how-title {
  margin-bottom: var(--sp-8); text-align: center;
  font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); color: var(--green-900);
}
.ts-how-title span { color: var(--green-500); }

/* ── Cara kerja ────────────────────────────────── */
.ts-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); counter-reset: none; }
.ts-steps li {
  position: relative; padding: var(--sp-8) var(--sp-6) var(--sp-6);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md);
}
.ts-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-700); color: var(--white);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-none);
}
.ts-steps b { display: block; margin-top: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; color: var(--green-900); line-height: var(--lh-snug); }
.ts-steps p { margin-top: var(--sp-2); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-500); }

/* ── Harga & bundle ────────────────────────────── */
.ts-login-note { max-width: 720px; margin: 0 auto var(--sp-8); text-align: center; font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-500); }
.ts-login-note a { font-weight: 600; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

.ts-bundle {
  position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-12); align-items: center;
  max-width: 1000px; margin: 0 auto; padding: var(--sp-12); border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(ellipse at 90% 10%, rgba(245,166,35,.22), transparent 55%),
    linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 65%, var(--xl-green) 100%);
  color: var(--white); box-shadow: var(--shadow-lg);
}
.ts-bundle-ribbon {
  position: absolute; top: 0; left: var(--sp-12); padding: var(--sp-2) var(--sp-4); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--gold); color: var(--green-900);
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.ts-bundle-copy h3 { margin-top: var(--sp-4); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
.ts-bundle-copy > p { margin-top: var(--sp-3); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: rgba(255,255,255,.75); }
.ts-bundle-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.ts-bundle-list li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-base); }
.ts-bundle-list svg { flex-shrink: 0; color: var(--gold); }
.ts-bundle-list span { flex: 1; font-weight: 500; }
.ts-bundle-list s { font-size: var(--fs-sm); color: rgba(255,255,255,.5); }

.ts-bundle-buy { padding: var(--sp-8); border-radius: var(--radius-md); background: var(--white); color: var(--text); text-align: center; }
.ts-bundle-was { font-size: var(--fs-sm); color: var(--gray-500); }
.ts-bundle-alt { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--gray-500); }
.ts-bundle-buy .lx-price-amount { justify-content: center; margin-top: var(--sp-4); }
.ts-bundle-per { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-sm); font-weight: 600; color: var(--green-600); }

.ts-single-title {
  margin: var(--sp-16) 0 var(--sp-6); text-align: center;
  font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--gray-500);
}
.ts-price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.ts-price-grid .lx-price-head { flex: 1; } /* harga & tombol sejajar walau nama produk 2 baris */
.ts-price-grid .lx-price-amount strong { font-size: var(--fs-5xl); }
.ts-price-grid .lx-price-btn { margin-bottom: var(--sp-4); }
.ts-price-grid .lx-price-btn.is-owned { gap: var(--sp-2); }
.ts-detail-link { align-self: center; font-size: var(--fs-sm); font-weight: 500; color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

/* ── Halaman pesanan & pembelian ───────────────── */
.ts-templates { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); text-align: left; }
.ts-template {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gray-200); border-radius: var(--radius-sm); background: var(--white);
}
.ts-template-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--green-100); color: var(--green-700);
}
.ts-template-name { flex: 1; font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; color: var(--green-900); }
.ts-guide { margin-top: var(--sp-6); padding: var(--sp-5); border-radius: var(--radius-sm); background: var(--gold-soft); text-align: left; }
.ts-guide b { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; color: var(--green-900); }
.lxp-upgrade-item .lxp-pkg { color: var(--white); } /* aturan span di daftar upsell menimpa warna ikon */
.ts-guide ol { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--gray-700); }

/* ── Responsif ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ts-toast { opacity: 1; animation: none; }
  .ts-collage-slip, .ts-collage-receipt, .ts-show.is-tabbed .ts-product.is-active { animation: none; }
}
@media (max-width: 1024px) {
  .ts-collage { max-width: 600px; width: 100%; margin: 0 auto; }
  .ts-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-tabs { justify-content: flex-start; }
  /* Satu kolom: judul & kelebihan → gambar → harga & tombol beli */
  .ts-product { display: flex; flex-direction: column; gap: 0; padding: var(--sp-10) var(--sp-8); }
  .ts-product-copy { display: contents; }
  .ts-product-copy > * { align-self: flex-start; }
  .ts-product-copy > .ts-perks, .ts-product-buy { align-self: stretch; }
  .ts-product-visual { order: 1; max-width: 620px; width: 100%; margin: var(--sp-10) auto 0; }
  .ts-product-buy { order: 2; }
  .ts-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-bundle { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-12) var(--sp-8) var(--sp-8); }
  .ts-price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ts-collage { padding: var(--sp-10) 0 var(--sp-12); }
  .ts-collage-main { width: 92%; transform: none; }
  .ts-toast--3 { display: none; }
  .ts-toast--2 { right: 0; }
  .ts-pick { gap: var(--sp-4); }
  .ts-pick-tile { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .ts-tabs { margin-bottom: var(--sp-6); }
  .ts-product { padding: var(--sp-6) var(--sp-5); border-radius: var(--radius-md); }
  .ts-shot--float { right: calc(-1 * var(--sp-2)); width: 40%; }
  .ts-vs-head { display: none; }
  .ts-vs-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .ts-vs-row + .ts-vs-row { margin-top: var(--sp-5); }
  .ts-vs-arrow { rotate: 90deg; height: 20px; }
  .ts-steps { gap: var(--sp-4); }
  .ts-steps li { padding: var(--sp-6); }
  .ts-bundle { padding: var(--sp-12) var(--sp-5) var(--sp-5); border-radius: var(--radius-md); }
  .ts-bundle-ribbon { left: var(--sp-5); }
  .ts-bundle-buy { padding: var(--sp-6); }
  .ts-single-title { margin-top: var(--sp-12); }
  .ts-price-grid { gap: var(--sp-4); }
}
@media (max-width: 560px) {
  .ts-pick, .ts-steps, .ts-price-grid { grid-template-columns: 1fr; }
  .ts-toast { font-size: var(--fs-2xs); }
  .ts-collage .lx-shot-bar span { display: none; }
  .ts-toast b { font-size: var(--fs-xs); }
  .ts-product-buy { flex-direction: column; align-items: stretch; }
  .ts-product-buy form, .ts-product-buy .ts-buy { width: 100%; }
  .ts-next { margin-left: 0; text-align: center; }
}