:root {
    --tbc-navy: #0d3970;
    --tbc-blue: #1559a6;
    --tbc-orange: #ec6b2d;
    --tbc-green: #13a84a;
    --tbc-text: #18324d;
    --tbc-muted: #65778a;
    --tbc-line: #dce5ee;
    --tbc-soft: #f5f8fc;
    --tbc-white: #fff;
    --tbc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --tbc-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.tbc-catalog, .tbc-single { color: var(--tbc-text); background: #fff; font-family: var(--tbc-font-body); }
.tbc-catalog h1, .tbc-catalog h2, .tbc-catalog h3, .tbc-catalog h4,
.tbc-single h1, .tbc-single h2, .tbc-single h3, .tbc-single h4 { font-family: var(--tbc-font-heading); }
.tbc-catalog button, .tbc-catalog input, .tbc-catalog textarea, .tbc-catalog select,
.tbc-single button, .tbc-single input, .tbc-single textarea, .tbc-single select { font-family: var(--tbc-font-body); }
.tbc-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.tbc-catalog *, .tbc-single * { box-sizing: border-box; }

.tbc-hero { padding: 64px 0 36px; text-align: center; background: radial-gradient(circle at 10% 10%, #edf5ff 0, transparent 26%), radial-gradient(circle at 92% 8%, #fff0e8 0, transparent 25%); border-radius: 0 0 34px 34px; }
.tbc-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--tbc-orange); font-weight: 700; letter-spacing: .03em; }
.tbc-hero h1 { margin: 0; font-size: var(--tbc-catalog-title-size, 52px); font-weight: var(--tbc-catalog-title-weight, 700); line-height: 1.08; color: var(--tbc-navy); }
.tbc-hero > p { max-width: 760px; margin: 16px auto 30px; color: var(--tbc-muted); font-size: var(--tbc-catalog-subtitle-size, 17px); font-weight: var(--tbc-catalog-subtitle-weight, 400); }
.tbc-search-wrap { position: relative; max-width: 720px; margin: 0 auto; }
.tbc-search { width: 100%; min-height: 56px; border: 1px solid var(--tbc-line); border-radius: 999px; padding: 0 24px 0 52px; font-size: 1rem; box-shadow: 0 10px 30px rgba(25,63,101,.08); outline: none; }
.tbc-search:focus { border-color: var(--tbc-blue); box-shadow: 0 0 0 3px rgba(21,89,166,.12); }
.tbc-search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.tbc-filter-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.tbc-filter { appearance: none; border: 1px solid var(--tbc-line); background: #fff; color: var(--tbc-navy); border-radius: 999px; padding: 9px 16px; font-weight: 700; cursor: pointer; }
.tbc-filter.is-active { background: var(--tbc-blue); border-color: var(--tbc-blue); color: #fff; }

/* Card tetap rapi dan seragam, tetapi tinggi dapat bertambah agar field tidak pernah terpotong. */
.tbc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 1fr; align-items: stretch; gap: 22px; padding: 42px 0 50px; }
.tbc-catalog-cards-only .tbc-shell { width: 100%; max-width: 100%; }
.tbc-catalog-cards-only .tbc-grid { padding-top: 0; padding-bottom: 0; }
.tbc-card { display: flex; flex-direction: column; width: 100%; max-width: var(--tbc-card-width, 280px); min-height: var(--tbc-card-height, 650px); height: auto; min-width: 0; justify-self: center; align-self: stretch; border: 1px solid var(--tbc-line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(25,63,101,.07); transition: transform .2s ease, box-shadow .2s ease; }
.tbc-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(25,63,101,.12); }
.tbc-card[hidden] { display: none !important; }
.tbc-cover { display: block; width: 100%; aspect-ratio: 4/5; max-height: var(--tbc-card-cover-height, 300px); flex: 0 0 auto; background: var(--tbc-soft); overflow: hidden; }
.tbc-cover img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.tbc-cover-placeholder { display: flex; height: 100%; padding: 28px; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; color: var(--tbc-navy); background: linear-gradient(155deg, #eaf2fb, #fff7f1); }
.tbc-cover-placeholder span { font-size: 44px; }
.tbc-card-body { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; padding: 20px; }
.tbc-card-categories { min-height: 18px; color: var(--tbc-orange); font-size: .78rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .03em; }
.tbc-card h3 { margin: 8px 0 12px; min-height: 2.44em; max-height: 2.44em; font-size: var(--tbc-card-title-size, 18px); font-weight: var(--tbc-card-title-weight, 700); line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.tbc-card h3 a { color: var(--tbc-navy); text-decoration: none; line-height: inherit; }
.tbc-field-list { margin: 0; }
.tbc-field-list-card { flex: 0 0 auto; min-height: 0; overflow: visible; }
.tbc-field-row { display: grid; grid-template-columns: minmax(90px,.8fr) 1.2fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef2f6; }
.tbc-field-row dt { color: var(--tbc-muted); font-size: var(--tbc-card-text-size, 14px); font-weight: 400; line-height: 1.4; }
.tbc-field-row dd { margin: 0; text-align: right; font-weight: var(--tbc-card-text-weight, 500); font-size: var(--tbc-card-text-size, 14px); line-height: 1.4; overflow-wrap: anywhere; }
.tbc-field-list-card .tbc-field-row:first-child dd { color: var(--tbc-text); }
.tbc-field-list-card .tbc-field-row dt:has(+ dd) { color: var(--tbc-muted); }
.tbc-card-actions { display: grid; gap: 9px; margin-top: auto; padding-top: 18px; }
.tbc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 9px; text-decoration: none !important; font-size: var(--tbc-button-size, 14px); font-weight: var(--tbc-button-weight, 700); line-height: 1.1; border: 1px solid transparent; font-family: var(--tbc-font-body); }
.tbc-btn-detail { color: var(--tbc-blue) !important; border-color: var(--tbc-blue); background: #fff; }
.tbc-btn-wa { color: #fff !important; background: var(--tbc-green); border-color: var(--tbc-green); }
.tbc-btn-large { min-height: 52px; padding-left: 24px; padding-right: 24px; }
.tbc-empty, .tbc-no-results { grid-column: 1/-1; text-align: center; padding: 34px; border-radius: 14px; background: var(--tbc-soft); color: var(--tbc-muted); }
.tbc-no-results { margin-bottom: 30px; }

/* Rating bintang, mendukung nilai pecahan seperti 4.5. */
.tbc-rating { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.tbc-rating-stars { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; font-size: 1rem; }
.tbc-rating-base { color: #d7dee6; }
.tbc-rating-fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #f3a51f; white-space: nowrap; }
.tbc-rating-number { color: var(--tbc-text); font-weight: var(--tbc-card-text-weight, 500); font-variant-numeric: tabular-nums; }
.tbc-field-rating dt { font-weight: 700; color: var(--tbc-text); }
.tbc-field-list-detail .tbc-field-rating dd { text-align: left; }
.tbc-field-list-detail .tbc-field-rating .tbc-rating { justify-content: flex-start; }
.tbc-field-list-detail .tbc-rating-stars { font-size: 1.2rem; }
.tbc-field-list-detail .tbc-rating-number { font-size: var(--tbc-detail-field-size, 14px); font-weight: var(--tbc-detail-field-weight, 600); }

.tbc-about { display: grid; grid-template-columns: .85fr 1.15fr; gap: 46px; align-items: center; padding: 44px; border: 1px solid var(--tbc-line); border-radius: 20px; background: #fff; }
.tbc-about-mark { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient(145deg,#f0f6fd,#fff7f1); color: var(--tbc-navy); }
.tbc-about-icon { font-size: 58px; }
.tbc-about-mark strong { font-size: 2rem; }
.tbc-about-mark small { color: var(--tbc-orange); font-weight: 700; }
.tbc-about h2 { margin: 0 0 12px; color: var(--tbc-navy); font-size: var(--tbc-section-title-size, 28px); font-weight: var(--tbc-section-title-weight, 700); line-height: 1.2; }
.tbc-about p { color: var(--tbc-muted); line-height: 1.8; }

.tbc-benefits { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 34px 0; }
.tbc-benefit { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--tbc-line); border-radius: 14px; background: #fff; }
.tbc-benefit > span { font-size: 30px; }
.tbc-benefit strong { color: var(--tbc-navy); }
.tbc-benefit p { margin: 5px 0 0; color: var(--tbc-muted); font-size: .9rem; }

.tbc-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 60px; padding: 32px 36px; border-radius: 18px; color: #fff; background: linear-gradient(120deg,var(--tbc-navy),var(--tbc-blue)); }
.tbc-cta h2 { margin: 0 0 4px; color: #fff; font-size: var(--tbc-section-title-size, 28px); font-weight: var(--tbc-section-title-weight, 700); line-height: 1.2; }
.tbc-cta p { margin: 0; opacity: .88; }

.tbc-single { padding: 42px 0 70px; }
.tbc-back { display: inline-block; margin-bottom: 26px; color: var(--tbc-blue); font-weight: 700; text-decoration: none; }
.tbc-single-hero { display: grid; grid-template-columns: minmax(280px,.8fr) minmax(0,1.4fr); gap: 60px; align-items: start; }
.tbc-single-cover { border-radius: 16px; overflow: hidden; background: var(--tbc-soft); box-shadow: 0 16px 42px rgba(25,63,101,.13); }
.tbc-single-cover img { width: 100%; height: auto; display: block; }
.tbc-single-summary { padding-top: 12px; }
.tbc-single-cats { color: var(--tbc-orange); font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.tbc-single h1 { margin: 8px 0 16px; color: var(--tbc-navy); font-size: var(--tbc-detail-title-size, 48px); font-weight: var(--tbc-detail-title-weight, 700); line-height: 1.08; }
.tbc-single-excerpt { color: var(--tbc-muted); font-size: var(--tbc-description-size, 16px); font-weight: var(--tbc-description-weight, 400); line-height: 1.7; }
.tbc-field-list-detail { margin: 26px 0; border-top: 1px solid var(--tbc-line); }
.tbc-field-list-detail .tbc-field-row { padding: 11px 0; }
.tbc-field-list-detail .tbc-field-row dt, .tbc-field-list-detail .tbc-field-row dd { font-size: var(--tbc-detail-field-size, 14px); }
.tbc-field-list-detail .tbc-field-row dd { font-weight: var(--tbc-detail-field-weight, 600); }
.tbc-single-content { margin-top: 56px; padding-top: 38px; border-top: 1px solid var(--tbc-line); font-size: var(--tbc-description-size, 16px); font-weight: var(--tbc-description-weight, 400); line-height: 1.85; }
.tbc-single-content h2 { color: var(--tbc-navy); font-size: var(--tbc-section-title-size, 28px); font-weight: var(--tbc-section-title-weight, 700); }
.tbc-single-bottom-cta { margin-top: 48px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 14px; background: var(--tbc-soft); }
.tbc-single-bottom-cta strong, .tbc-single-bottom-cta span { display: block; }
.tbc-single-bottom-cta span { margin-top: 4px; color: var(--tbc-muted); }

@media (max-width: 1024px) {
    .tbc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 760px) {
    .tbc-shell { width: min(100% - 22px, 1180px); }
    .tbc-hero { padding: 42px 12px 28px; }
    .tbc-grid { gap: 12px; padding-top: 28px; }
    .tbc-card-body { padding: 14px; }
    .tbc-field-row { grid-template-columns: 1fr; gap: 2px; }
    .tbc-field-row dd { text-align: left; }
    .tbc-rating { justify-content: flex-start; }
    .tbc-about { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .tbc-benefits { grid-template-columns: 1fr; }
    .tbc-cta { align-items: stretch; flex-direction: column; padding: 26px; }
    .tbc-single-hero { grid-template-columns: 1fr; gap: 28px; }
    .tbc-single-cover { max-width: 430px; margin: 0 auto; }
    .tbc-single-bottom-cta { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
    /* Mobile 2-column catalog: compact, aligned, and resistant to text overflow. */
    .tbc-catalog { overflow-x: clip; }
    .tbc-catalog .tbc-shell { width: calc(100% - 16px); max-width: 100%; }
    .tbc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; align-items: stretch; gap: 10px; min-width: 0; }
    .tbc-card { height: 100%; min-height: 0; max-width: 100%; min-width: 0; align-self: stretch; border-radius: 12px; box-shadow: 0 5px 16px rgba(25,63,101,.07); }
    .tbc-cover { aspect-ratio: 4/3; max-height: 220px; background: #f6f8fb; }
    .tbc-cover img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 4px; }
    .tbc-card-body { padding: 12px; min-width: 0; }
    .tbc-card-categories { min-height: 0; margin: 0 0 3px; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tbc-card h3 { min-height: 3.6em; max-height: 3.6em; margin: 6px 0 8px; font-size: 15px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
    .tbc-card h3 a { font-size: inherit; line-height: inherit; }
    .tbc-field-list-card { flex: 0 0 auto; min-height: 0; min-width: 0; overflow: visible; }
    .tbc-field-list-card .tbc-field-row { display: grid; grid-template-columns: minmax(42px,.7fr) minmax(0,1.3fr); gap: 2px 5px; padding: 4px 0; align-items: center; min-width: 0; }
    .tbc-field-list-card .tbc-field-rating { grid-template-columns: minmax(42px,.62fr) minmax(0,1.38fr); }
    .tbc-field-list-card dt,
    .tbc-field-list-card dd,
    .tbc-field-list-card .tbc-rating-number { min-width: 0; font-size: 12px; line-height: 1.3; }
    .tbc-field-list-card dt { overflow-wrap: normal; word-break: normal; }
    .tbc-field-list-card dd { text-align: right; overflow-wrap: break-word; word-break: normal; }
    .tbc-field-list-card .tbc-rating { width: 100%; max-width: 100%; justify-content: flex-end; gap: 3px; min-width: 0; }
    .tbc-field-list-card .tbc-rating-stars { min-width: 0; flex: 0 1 auto; font-size: 11px; letter-spacing: 0; }
    .tbc-field-list-card .tbc-rating-number { flex: 0 0 auto; }
    .tbc-card-actions { margin-top: auto; padding-top: 10px; gap: 7px; }
    .tbc-card-actions .tbc-btn { width: 100%; min-height: 38px; padding: 7px 6px; font-size: 12px; line-height: 1.15; white-space: nowrap; border-radius: 8px; }
}

@media (max-width: 360px) {
    .tbc-catalog .tbc-shell { width: calc(100% - 12px); }
    .tbc-grid { gap: 8px; }
    .tbc-card-body { padding: 10px; }
    .tbc-field-list-card .tbc-field-row { grid-template-columns: minmax(38px,.68fr) minmax(0,1.32fr); gap: 2px 4px; }
    .tbc-card-actions .tbc-btn { padding-left: 4px; padding-right: 4px; }
}