/* Halaman Tools & Product (/tools/), dirender assets/js/tools.js.
   Memakai komponen Portfolio (.pf-search, .pf-body, .pf-filter, .pf-cat, modal .pd-*) dan kartu produk (.product-card). */

.pf-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-num { font-size: 12px; font-weight: 600; color: var(--gray-400); }
.pf-cat.active .pf-num { color: inherit; opacity: .7; }
.tp-note { font-size: 12.5px; line-height: 1.55; color: var(--gray-400); }

.tp-main { display: flex; flex-direction: column; gap: 52px; min-width: 0; }
.tp-group .hn-label { margin-bottom: 8px; }
.tp-desc { margin: 0 0 18px; font-size: 14.5px; color: var(--gray-500); }
.tp-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.tp-more:hover { color: var(--purple-700); }
.tp-more svg { width: 14px; height: 14px; }
.tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kartu Tools / Gadget = kartu produk + label kategori, rating, label afiliasi */
.tp-card-link { display: block; }
.tp-card h3 a { color: inherit; }
.tp-card h3 a:hover { color: var(--purple-700); }
.tp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.tp-cat { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--lav-100); color: var(--purple-700); font-size: 12px; font-weight: 600; }
.tp-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.tp-rate b { font-weight: 700; }
.tp-stars { display: inline-flex; gap: 2px; }
.tp-stars i { width: 13px; height: 13px; background: #dcd7e8; -webkit-mask: var(--star) center / contain no-repeat; mask: var(--star) center / contain no-repeat; }
.tp-stars i.is-on { background: #f5a524; }
.tp-stars i.is-half { background: linear-gradient(90deg, #f5a524 50%, #dcd7e8 50%); }
.tp-stars { --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l2.1 4.6 5 .5-3.8 3.4 1.1 4.9L8 11.9l-4.4 2.5 1.1-4.9L.9 6.1l5-.5z'/%3E%3C/svg%3E"); }
.tp-card .product-price .tp-price { font-family: 'Geist', sans-serif; font-size: 15px; line-height: 1.3; }
.tp-aff { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gray-400); }

/* Detail (modal) */
.tp-modal { max-width: 960px; }
.tp-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; padding-top: 32px; padding-bottom: 40px; }
.tp-detail-media .product-cover { border-radius: 10px; border: 1px solid var(--line); }
.tp-detail-main h2 { margin: 4px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; }
.tp-detail-lead { font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.tp-detail-price { display: flex; gap: 12px; align-items: baseline; margin-top: 16px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tp-detail-price span { font-size: 13px; font-weight: 600; color: var(--gray-400); }
.tp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.tp-pc b { display: block; margin-bottom: 6px; font-size: 14px; }
.tp-pc ul { padding-left: 1.1em; list-style: disc; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.tp-detail-body { margin-top: 18px; font-size: 15.5px; }
.tp-detail-body h2 { margin-top: 1.2em; font-size: 19px; letter-spacing: -.2px; }
.tp-detail-body h3 { font-size: 16.5px; }
.tp-detail-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 22px; }
.tp-disclosure { margin-top: 12px; font-size: 12.5px; line-height: 1.55; color: var(--gray-400); }

@media (max-width: 900px) {
  .tp-detail { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-main { gap: 40px; }
  .tp-detail-main h2 { font-size: 24px; }
  .tp-pc { grid-template-columns: 1fr; }
}

/* ---------- Tools (SaaS): kartu ringkas logo 1:1, langsung ke situs resmi ---------- */
.sa-uses { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; }
.sa-use { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--gray-500); }
.sa-use:hover { border-color: var(--ink); color: var(--ink); }
.sa-use.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sa-card { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s; }
a.sa-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 28px -22px rgba(76,29,122,.5); }
.sa-logo { flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.sa-logo img { width: 100%; height: 100%; object-fit: contain; }
.sa-logo b { font: 800 22px 'Geist', sans-serif; color: var(--purple-700); }
.sa-body { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sa-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sa-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 700; }
.sa-pick { flex-shrink: 0; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--purple-grad); color: #fff; font-size: 10.5px; font-weight: 700; }
.sa-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--gray-500); }
.sa-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sa-badge { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; background: #f3f3f6; font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.sa-badge--gratis, .sa-badge--freemium { background: #e8f7ee; color: #17703f; }
.sa-badge--trial { background: #fff4dd; color: #8a5a00; }
.sa-go { flex: 0 0 16px; width: 16px; height: 16px; align-self: flex-start; color: var(--gray-400); }
a.sa-card:hover .sa-go { color: var(--ink); }
@media (max-width: 1100px) { .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sa-grid { grid-template-columns: 1fr; }
  .sa-uses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .sa-uses::-webkit-scrollbar { display: none; }
  .sa-use { flex-shrink: 0; height: 32px; font-size: 13px; }
}
.sa-badge--pick { background: var(--purple-grad); color: #fff; }

/* ===== Layout halaman (tanpa hero): judul, baris pencarian + tab kategori, lalu grup ===== */
.tp-page { padding: 120px 0 88px; }
.tp-title { margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 36px; font-weight: 800; letter-spacing: -1.1px; line-height: 1.1; }
.tp-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; }
.tp-bar .tp-search { flex: 0 1 300px; height: 42px; margin: 0; padding: 0 16px; }
.tp-bar .tp-search input { font-size: 14px; }
.tp-tabs { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tp-tabs::-webkit-scrollbar { display: none; }
.tp-tabs .tp-tab { flex-shrink: 0; height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.tp-tabs .tp-tab:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.tp-tabs .tp-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tp-tabs .tp-tab.active .pf-num { color: rgba(255,255,255,.7); opacity: 1; }
.tp-main { gap: 44px; }
.tp-group .hn-label { margin-bottom: 16px; }
.tp-main .tp-grid--aether { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tp-main .tp-grid--gadget { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tp-grid--gadget .product-cover { background: #f6f5fa; }
.tp-grid--gadget .product-body { padding: 16px; gap: 6px; }
.tp-grid--gadget .product-body h3 { font-size: 16.5px; }
.tp-grid--gadget .product-body p { font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-main .sa-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .tp-main .tp-grid--gadget { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-main .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-main .tp-grid--aether { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tp-page { padding: 92px 0 64px; }
  .tp-title { font-size: 26px; margin-bottom: 14px; padding-bottom: 14px; }
  .tp-bar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 24px; }
  .tp-bar .tp-search { flex: none; width: 100%; }
  .tp-tabs { margin-right: -16px; padding-right: 16px; }
  .tp-tabs .tp-tab { height: 36px; padding: 0 14px; font-size: 13px; }
  .tp-main { gap: 32px; }

  /* Gadget: 2 kartu per baris */
  .tp-main .tp-grid--gadget { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tp-grid--gadget .product-cover { aspect-ratio: 1 / 1; padding: 10px; }
  .tp-grid--gadget .product-body { padding: 10px 10px 12px; }
  .tp-grid--gadget .product-body h3 { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tp-grid--gadget .product-body p { display: none; }
  .tp-grid--gadget .product-foot { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 6px; }
  .tp-grid--gadget .tp-card .product-price .tp-price { font-size: 13.5px; }
  .tp-grid--gadget .tp-aff { font-size: 10.5px; }
  .tp-grid--gadget .product-foot .btn { width: 100%; height: 34px; padding: 0 10px; justify-content: center; margin: 0; font-size: 12px; }
  .tp-grid--gadget .product-foot .btn .btn-arrow { display: none; }

  /* Tools: 2 per baris, kartu ringkas seperti tombol */
  .tp-main .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sa-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .sa-logo { flex-basis: auto; width: 40px; height: 40px; border-radius: 10px; }
  .sa-top b { font-size: 14px; }
  .sa-meta { font-size: 11.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; }
  .sa-badges .sa-badge:nth-child(n+3) { display: none; }
  .sa-go { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; }

  /* Produk Aether: satu kartu memanjang tapi pendek (gambar kiri) */
  .tp-main .tp-grid--aether { grid-template-columns: 1fr; gap: 10px; }
  .tp-grid--aether .product-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .tp-grid--aether .product-cover { aspect-ratio: auto; height: 100%; min-height: 112px; padding: 10px; }
  .tp-grid--aether .product-cover .product-glyph { font-size: 34px; letter-spacing: -1.5px; }
  .tp-grid--aether .product-cover .product-kind, .tp-grid--aether .product-cover .chip--soon { display: none; }
  .tp-grid--aether .product-body { padding: 12px; gap: 4px; }
  .tp-grid--aether .product-body h3 { font-size: 14.5px; }
  .tp-grid--aether .product-body p { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tp-grid--aether .product-foot { padding-top: 6px; gap: 8px; }
  .tp-grid--aether .product-price strong { font-size: 15px; }
  .tp-grid--aether .product-price s { font-size: 11.5px; }
  .tp-grid--aether .product-foot .btn { height: 32px; padding: 0 12px; font-size: 12px; }
  .tp-grid--aether .product-foot .btn .btn-arrow { display: none; }
}
@media (max-width: 640px) { .tp-grid--aether .product-cover--image img, .tp-grid--gadget .product-cover--image img { width: 100%; height: 100%; object-fit: contain; } }
.tp-grid--gadget .product-foot { flex-direction: column; align-items: stretch; gap: 10px; }
.tp-grid--gadget .product-foot .btn { width: 100%; justify-content: center; margin: 0; }

/* Kartu Gadget: harga kiri, tombol checkout putih bergaris hitam di pojok kanan bawah (tanpa panah) */
.tp-grid--gadget .product-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
.tp-grid--gadget .product-foot .tp-buy { width: auto; align-self: flex-end; margin: 0; height: 38px; padding: 0 16px; background: #fff; font-size: 13px; }
.tp-grid--gadget .product-foot .tp-buy:hover { background: var(--ink); color: #fff; }
@media (max-width: 640px) {
  .tp-grid--gadget .product-foot .tp-buy { width: auto; height: 32px; padding: 0 12px; font-size: 11.5px; }
}

/* Judul + "in partner with Tech Insight ID" (logo T vektor, assets/img/techinsight-t.svg) */
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.tp-head .tp-title { margin: 0; padding: 0; border: 0; }
.tp-partner { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); white-space: nowrap; }
.tp-partner img { width: 22px; height: auto; }
.tp-partner b { font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); }
@media (max-width: 640px) {
  .tp-head { margin-bottom: 14px; padding-bottom: 14px; gap: 8px; }
  .tp-partner { font-size: 12px; }
  .tp-partner img { width: 18px; }
  .tp-partner b { font-size: 13px; }
}

/* Popup Gadget: tombol checkout di pojok kanan bawah */
.tp-detail-main { display: flex; flex-direction: column; }
.tp-detail-cta--end { justify-content: flex-end; margin-top: auto; padding-top: 22px; }
.tp-detail-main > .tp-cat, .tp-detail-main > .tp-tags { align-self: flex-start; }