/* ==========================================================================
   Halaman produk (pands, produk, invest-pro, elearning, data-feeding, oforu, tessa-app)
   Memakai token var(--iv-*) dari site.css.
   ========================================================================== */

/* ---------- Hero produk (terang) ---------- */
.product-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(60rem 30rem at 100% 0%, rgba(63, 163, 232, .18), transparent 60%),
        radial-gradient(40rem 26rem at 0% 100%, rgba(31, 99, 209, .10), transparent 60%),
        linear-gradient(180deg, #f3f7fe 0%, #ffffff 100%);
    padding: clamp(2.25rem, 6vw, 5rem) 0 clamp(2.75rem, 7vw, 5.5rem);
}
.product-hero h1 { font-size: clamp(1.75rem, 3.8vw, 2.9rem); line-height: 1.18; margin-bottom: 1rem; }
.product-hero h1 b, .product-hero h1 strong { color: var(--iv-blue); font-weight: 800; }
.product-hero .lead { color: var(--iv-muted); font-size: clamp(1rem, 1.5vw, 1.125rem); }
.product-hero .breadcrumb { font-size: .85rem; margin-bottom: 1.25rem; }
.product-hero .breadcrumb a { color: var(--iv-muted); }
.product-hero .breadcrumb-item.active { color: var(--iv-navy); }
.product-logo { display: block; height: 52px; width: auto; max-width: 100%; margin-bottom: 1.25rem; }
.product-logo-square { height: 96px; }
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.75rem; }
.product-media { position: relative; text-align: center; }
.product-media img { width: 100%; max-width: 640px; filter: drop-shadow(0 24px 40px rgba(18, 38, 75, .18)); }
.product-media::before {
    content: ""; position: absolute; z-index: -1; inset: 8% 6%;
    background: radial-gradient(closest-side, rgba(31, 99, 209, .16), transparent);
    filter: blur(10px);
}

/* Varian gelap (TESSA) */
.product-hero-dark { color: rgba(255, 255, 255, .85); background: var(--iv-navy) center/cover no-repeat; }
.product-hero-dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(18, 38, 75, .95) 0%, rgba(18, 38, 75, .82) 50%, rgba(31, 99, 209, .55) 100%); }
.product-hero-dark h1, .product-hero-dark .breadcrumb-item.active { color: #fff; }
.product-hero-dark .lead { color: rgba(255, 255, 255, .82); }
.product-hero-dark .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5); }
.product-hero-dark .breadcrumb a { color: rgba(255, 255, 255, .7); }
.product-hero-dark .product-media img { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .35)); }

.tessa-logo { height: 140px; margin-bottom: .5rem; }
.tessa-phone { width: 100%; max-width: 250px; height: auto; }

/* ---------- Store badges ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: .6rem; }
.store-badges img { height: 46px; width: auto; transition: transform .15s; }
.store-badges a:hover img { transform: translateY(-2px); }

/* ---------- Kartu & daftar ---------- */
.feature-card .feature-desc { color: var(--iv-muted); margin: 0; }
.feature-card .feature-desc p:last-child { margin-bottom: 0; }
.feature-card .card-title { font-size: 1.1rem; }
.feature-card-sm { padding: 1.35rem 1.4rem; }
.feature-card-sm .feature-icon { width: 44px; height: 44px; font-size: 1.25rem; border-radius: 12px; margin-bottom: .75rem; }
.feature-card-sm p { margin: 0; color: #3a4456; font-size: .95rem; }
.feature-card-sm strong, .feature-card-sm b { color: var(--iv-navy); }
.feature-img { height: 64px; width: auto; margin-bottom: 1rem; }
.feature-shot { margin-top: 1.25rem; border-radius: var(--iv-radius-sm); width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--iv-surface); }
.step-num { display: inline-block; font-size: 2rem; font-weight: 800; color: var(--iv-blue); line-height: 1; margin-bottom: .5rem; letter-spacing: -.02em; }
.step-card { text-align: center; }
.step-card .step-img { width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: contain; margin: 0 auto 1rem; display: block; }
.step-card p { color: var(--iv-muted); margin: 0; }
.hashtag { color: var(--iv-blue) !important; font-size: 1.05rem; margin-bottom: .35rem; }

.lead-muted { color: var(--iv-muted); font-size: 1.05rem; }
.product-shot { border-radius: var(--iv-radius); box-shadow: var(--iv-shadow); width: 100%; }
.product-shot-plain { width: 100%; max-width: 560px; display: block; margin: 0 auto; }

/* Baris produk zig-zag (halaman produk) */
.product-row + .product-row { margin-top: clamp(3rem, 7vw, 5rem); }
.product-row h3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: .75rem; }
.product-row p { color: var(--iv-muted); }
.product-row-media { background: var(--iv-surface); border-radius: calc(var(--iv-radius) + 6px); padding: clamp(1rem, 3vw, 2rem); text-align: center; }
.product-row-media img { width: 100%; max-height: 360px; object-fit: contain; }

/* Kartu pilihan Produk / Solusi */
.choice-card .card-body { padding: 1.75rem; display: flex; flex-direction: column; }
.choice-card .card-body p { color: var(--iv-muted); flex: 1; }

/* ---------- Online Learning: pilihan fitur (tab) ---------- */
.feature-tabs { --bs-nav-link-padding-x: 0; --bs-nav-link-padding-y: 0; border: 0; }
.feature-tab { width: 100%; height: 100%; text-align: center; background: #fff; border: 1px solid var(--iv-line) !important; border-radius: var(--iv-radius) !important; padding: 1.25rem !important; color: var(--iv-ink); box-shadow: var(--iv-shadow-sm); transition: border-color .15s, box-shadow .15s, transform .15s; }
.feature-tab:hover { transform: translateY(-3px); box-shadow: var(--iv-shadow); }
.feature-tab img { width: 100%; max-width: 260px; aspect-ratio: 5/3; object-fit: contain; margin: 0 auto .75rem; display: block; }
.feature-tab .h6 { color: var(--iv-navy); font-weight: 800; margin-bottom: .75rem; letter-spacing: .02em; }
.feature-tab .more { font-weight: 600; font-size: .9rem; color: var(--iv-blue); }
.feature-tab.active { border-color: var(--iv-blue) !important; box-shadow: 0 0 0 3px var(--iv-blue-soft), var(--iv-shadow); }
.feature-tab.active .more { color: var(--iv-navy); }
.feature-pane { background: #fff; border: 1px solid var(--iv-line); border-radius: var(--iv-radius); box-shadow: var(--iv-shadow-sm); padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-top: 1.5rem; }
.feature-pane h3 { font-size: 1.35rem; margin-bottom: 1.25rem; }
.feature-pane h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--iv-blue); margin: 1.5rem 0 .75rem; }
.feature-pane .check-list li { color: #3a4456; }
.feature-pane .carousel { border-radius: var(--iv-radius-sm); overflow: hidden; background: var(--iv-surface); }
.feature-pane .carousel-control-prev-icon, .feature-pane .carousel-control-next-icon { background-color: rgba(18, 38, 75, .55); border-radius: 50%; background-size: 50%; width: 2.4rem; height: 2.4rem; }
.feature-pane .carousel-indicators [data-bs-target] { background-color: var(--iv-navy); }

/* ---------- Tabel perbandingan ---------- */
.compare-table { min-width: 640px; background: #fff; }
.compare-table th, .compare-table td { padding: .9rem 1rem; vertical-align: top; }
.compare-table tbody th { color: var(--iv-navy); font-weight: 700; width: 24%; }
.compare-table td ul { margin: 0; padding-left: 1.1rem; }
.compare-table td li + li { margin-top: .2rem; }
.compare-table .is-us { background: var(--iv-blue-soft); }
.compare-table thead th.is-us { background: var(--iv-blue); color: #fff; }
.compare-wrap { border: 1px solid var(--iv-line); border-radius: var(--iv-radius); box-shadow: var(--iv-shadow-sm); }

/* ---------- CTA kontak ---------- */
.product-cta { background: radial-gradient(50rem 24rem at 100% 0%, rgba(63, 163, 232, .25), transparent 60%), var(--iv-navy); }
.product-cta-title { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: .75rem; }
.product-cta .eyebrow { color: #9cc6ff; }
.product-cta-box { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--iv-radius); padding: 1.5rem; }
.product-cta-contact { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.product-cta-contact li { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .5rem; }
.product-cta-contact i { color: #9cc6ff; }
.product-cta-contact a { color: #fff; overflow-wrap: anywhere; }
.btn-outline-light { --bs-btn-hover-color: var(--iv-navy); }

@media (max-width: 991.98px) {
    .product-media { margin-top: 1rem; }
    .product-media img { max-width: 520px; }
}
@media (max-width: 575.98px) {
    .store-badges img { height: 40px; }
    .product-logo { height: 44px; }
    .product-logo-square { height: 80px; }
}
.pane-img { width: 100%; max-width: 400px; }