/* Presentation only. Navigation, content, forms, and application logic stay intact. */
body.prototype-ui {
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --paper: #f5f5f7;
  --line: #dedee2;
  color: var(--ink);
  background: #fff;
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.prototype-ui :is(h1,h2,h3,h4,h5,h6,p,a,label,input,select,textarea,button,table) {
  font-family: Inter, Arial, sans-serif;
  letter-spacing: 0;
}
body.prototype-ui :is(h1,h2,h3,h4,h5,h6) { text-wrap: balance; }
body.prototype-ui :is(p,li,td,th,label,a,button) { overflow-wrap: break-word; }
body.prototype-ui :is(input,select,textarea) { max-width: 100%; }
body.prototype-ui #brandLogo { width: 34px; height: 32px; object-fit: contain; }
body.prototype-ui #footerLogo { width: 34px; height: 32px; object-fit: contain; }
body.prototype-ui .nav { gap: 28px; }
body.prototype-ui .navlinks { gap: 22px; }
body.prototype-ui .navlinks button { color: #343438; }
body.prototype-ui .navlinks button[aria-expanded=true] { color: var(--teal); }
body.prototype-ui .flyout { border-bottom: 1px solid #e8e8ed; }
body.prototype-ui .flyout-content { gap: 72px; }
body.prototype-ui .flyout h3 { line-height: 1.5; }
body.prototype-ui .flyout a { line-height: 1.4; }
body.prototype-ui .footer-inner { max-width: 1140px; }
body.prototype-ui .footer-columns a { line-height: 1.65; }
body.prototype-ui .footer-contact { line-height: 1.6; }

/* Preserve the original homepage composition and large product imagery. */
body.prototype-ui .hero-main h1 { color: #273444; }
body.prototype-ui .hero-main { height: min(692px, calc(100svh - 140px)); }
body.prototype-ui .hero-main .hero-subhead { color: #1d1d1f; }
body.prototype-ui .feature p { color: #6e6e73; }

/* Public page titles share one hierarchy; compact tool headings remain smaller. */
body.prototype-ui :is(.cat-hero-title,.trade-title,.promo-title,.sp-hero h1,
  .payment-header h2,.guide-header .section-title,.antrian-header h2,
  .pickup-header h2,.about-title,.anti-fraud-title,.service-header h3) {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.15;
  color: #1d1d1f;
  margin-bottom: 18px;
}
body.prototype-ui :is(.trade-subtitle,.promo-subtitle,.guide-subtitle,
  .sp-hero-desc,.payment-header .subtitle,.antrian-header .subtitle,
  .pickup-header p,.about-description,.service-header p) {
  font-size: 16px;
  line-height: 1.75;
  color: #6e6e73;
}
body.prototype-ui :is(.trade-category,.promo-category,.guide-category,
  .payment-category,.cat-hero-eyebrow,.sp-eyebrow) {
  font-size: 11px;
  line-height: 1.5;
  color: #6e6e73;
  font-weight: 600;
}
body.prototype-ui :is(.tradein-wrapper,.promo-page-wrapper,.payment-guide-wrapper) {
  background: #fff;
  padding: 64px 24px 80px;
}
body.prototype-ui :is(.tradein-wrapper,.promo-page-wrapper)::before,
body.prototype-ui :is(.tradein-wrapper,.promo-page-wrapper)::after { display: none; }
body.prototype-ui :is(.trade-header,.promo-header,.guide-header,.payment-header,.antrian-header) {
  margin-bottom: 40px;
}
body.prototype-ui :is(.tradein-section,.promo-container,.payment-guide-container) {
  max-width: 1040px;
  margin-inline: auto;
}
body.prototype-ui :is(.lcd-education,.iclear-service,.antrian-section,.pickup-section,.anti-fraud) {
  padding: 64px 24px 80px;
  background: #fff;
}
body.prototype-ui .lcd-education .section-title { font-size: 36px; line-height: 1.2; font-weight: 600; }
body.prototype-ui .lcd-education .section-desc { font-size: 16px; line-height: 1.7; color: #6e6e73; }
body.prototype-ui :is(.lcd-education .step,.promo-card,.process-step-card,.step-card,.highlight-item) {
  box-shadow: none;
  border-radius: 8px;
}
body.prototype-ui :is(.lcd-education .step,.process-step-card,.step-card) {
  background: #f5f5f7;
  border: 0;
  padding: 24px;
}
body.prototype-ui :is(.lcd-education .step h3,.promo-card-title,.commitment-title) {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
body.prototype-ui :is(.lcd-education .step p,.promo-card-desc,.process-step-text) {
  font-size: 14px;
  line-height: 1.75;
  color: #6e6e73;
}
body.prototype-ui :is(.promo-lead-box,.process-section,.commitment-section,.cta-box,.anti-fraud-box) {
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
}
body.prototype-ui :is(.promo-lead-box,.commitment-section,.anti-fraud-box) {
  padding: 32px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid #e8e8ed;
}
body.prototype-ui .cta-box { background: #f5f5f7; color: #1d1d1f; padding: 40px 24px; }
body.prototype-ui .cta-box :is(.cta-title,.cta-sub) { color: #1d1d1f; }

/* Keep existing catalogue, variant selectors, and checkout forms. */
body.prototype-ui .cat-wrapper { padding: 40px 0 80px; }
body.prototype-ui .cat-container { max-width: 1140px; padding-inline: 24px; }
body.prototype-ui .cat-hero { margin-bottom: 40px; min-height: 280px; border: 0; border-radius: 0; }
body.prototype-ui .cat-hero::before { background: #ffffffcc; }
body.prototype-ui .cat-search-bar { border-radius: 8px; border-color: #d2d2d7; }
body.prototype-ui :is(.cat-product-card,.product-card) { border-radius: 8px; box-shadow: none; }
body.prototype-ui .cat-grid { gap: 24px; }
body.prototype-ui .cat-product-card img { object-fit: contain; }
body.prototype-ui .detail-container { margin: 48px auto 72px; padding: 32px 24px; gap: 56px; }
body.prototype-ui .detail-container .title { font-size: 36px; font-weight: 600; line-height: 1.2; }
body.prototype-ui .detail-container .price { font-size: 24px; color: #1d1d1f; line-height: 1.5; }
body.prototype-ui .detail-container .selector-title { font-size: 13px; font-weight: 600; margin-top: 24px; }
body.prototype-ui .detail-container .selector a { border-radius: 8px; }
body.prototype-ui .detail-container .btn-buy { background: #01475c; border-radius: 8px; font-size: 14px; }

/* Shared form treatments do not change names, values, validation, or handlers. */
body.prototype-ui :is(.form-control,.form-select,.trade-select,.sp-select) {
  min-height: 46px;
  border: 1px solid #c6c6cc;
  border-radius: 8px;
  background-color: #fff;
  color: #1d1d1f;
  box-shadow: none;
  font-size: 14px;
}
body.prototype-ui :is(.form-control,.form-select,.trade-select):focus {
  border-color: #01475c;
  outline: 2px solid #01475c33;
  outline-offset: 2px;
  box-shadow: none;
}
body.prototype-ui :is(.btn,.cta-button,.sp-btn-search,.sp-btn-action) {
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  min-height: 42px;
  box-shadow: none;
}
body.prototype-ui :is(.btn-primary,.sp-btn-search,.sp-btn-antrian) {
  background: #01475c;
  border-color: #01475c;
  color: #fff;
}
body.prototype-ui .btn-outline-primary { color: #01475c; border-color: #01475c; }
body.prototype-ui .btn-outline-primary:hover { background: #01475c; color: #fff; }
body.prototype-ui :is(.trade-card,.sp-checker-card) { border: 1px solid #dedee2; border-radius: 8px; box-shadow: none; backdrop-filter: none; background: #fff; }
body.prototype-ui .trade-card { padding: 32px; }
body.prototype-ui .trade-card .trade-table { font-size: 14px; line-height: 1.65; }
body.prototype-ui :is(.payment-card,.toko-card,.sp-price-card,.sp-toko-card,.sp-benefit-card) { border-radius: 8px; box-shadow: none; }
body.prototype-ui .payment-section { padding: 48px 24px 80px; background: #fff; }
body.prototype-ui :is(.payment-toggle,.product-tabs) { border-radius: 8px; }
body.prototype-ui .payment-toggle .toggle-btn { border-radius: 6px; }
body.prototype-ui .payment-accordion .accordion-item { border-radius: 0; border: 0; border-bottom: 1px solid #dedee2; box-shadow: none; }
body.prototype-ui .accordion-button { font-size: 15px; line-height: 1.6; padding: 22px 18px; }
body.prototype-ui .accordion-button:not(.collapsed) { background: #f5f5f7; color: #01475c; box-shadow: none; }
body.prototype-ui .accordion-body { font-size: 14px; line-height: 1.8; padding: 18px; }
body.prototype-ui .lokasi-wrapper { padding: 40px 24px 72px; gap: 24px; }
body.prototype-ui .toko-card { border: 1px solid #dedee2; padding: 20px; }
body.prototype-ui .toko-card strong { font-size: 16px; }
body.prototype-ui .toko-card p { font-size: 14px; line-height: 1.65; }
body.prototype-ui .service-item .service-icon { margin-inline: auto; }
body.prototype-ui .table { font-size: 14px; line-height: 1.6; }
body.prototype-ui .table th { font-weight: 600; }
body.prototype-ui #faq { padding: 64px 24px 80px; background: #fff; }
body.prototype-ui #faq > .container > h2 { font-size: 44px; font-weight: 600; margin-bottom: 40px; }
body.prototype-ui #faq .accordion-item { border: 0; border-bottom: 1px solid #dedee2; border-radius: 0; margin: 0; box-shadow: none; }
body.prototype-ui #faq .accordion-button { border-radius: 0; font-size: 15px; line-height: 1.6; font-weight: 500; padding: 22px 18px; }
body.prototype-ui #faq .accordion-header { margin: 0; }
body.prototype-ui :is(.tg-section,.about-section) { padding: 64px 24px 80px; }
body.prototype-ui .tg-title { font-size: 36px; line-height: 1.2; font-weight: 600; }
body.prototype-ui .tg-card { border-radius: 8px; box-shadow: none; }
body.prototype-ui .queue-page-container { background: #fff; }
body.prototype-ui .service-lcd { border: 0; border-radius: 0; box-shadow: none; padding-inline: 0; }
body.prototype-ui .benefit-item { border-radius: 8px; box-shadow: none; }
body.prototype-ui .service-lcd-image,
body.prototype-ui .service-lcd-image img { border-radius: 8px; }
body.prototype-ui .queue-form-card { border-radius: 8px; box-shadow: none; }

/* Authentication retains both panels, every field, link, and submit action. */
body.prototype-ui.retail-auth { display: block; background: #fff; }
body.prototype-ui.retail-auth .auth-card-wrapper {
  max-width: 1000px;
  margin: 48px auto 72px;
  min-height: 600px;
  border: 1px solid #e8e8ed;
  border-radius: 8px;
  box-shadow: none;
  backdrop-filter: none;
  background: #fff;
}
body.prototype-ui.retail-auth .auth-form-side { padding: 40px; }
body.prototype-ui.retail-auth .auth-brand-side { border-radius: 0; }
body.prototype-ui .brand-logo-mark { width: 42px; height: 40px; }
body.prototype-ui .brand-logo-mark img { width: 42px; height: 40px; object-fit: contain; }
body.prototype-ui.retail-auth :is(.auth-title,.welcome-title) { font-size: 30px; line-height: 1.2; }
body.prototype-ui.retail-auth :is(.btn-login-primary,.btn-register-primary) { border-radius: 8px; min-height: 46px; background: #01475c; box-shadow: none; }
body.prototype-ui.prototype-guest > main { padding: 56px 24px 72px; background: #fff; }
body.prototype-ui.prototype-guest > main > div > a > svg { width: 42px; height: 40px; }

@media (max-width: 1100px) {
  body.prototype-ui .nav { gap: 20px; }
  body.prototype-ui .navlinks { gap: 16px; }
  body.prototype-ui.retail-auth .auth-card-wrapper { margin-inline: 24px; }
}
@media (max-width: 833px) {
  body.prototype-ui #brandLogo { width: 30px; height: 28px; }
  body.prototype-ui #footerLogo { width: 32px; height: 30px; }
  body.prototype-ui .nav { padding-inline: 18px; gap: 14px; }
  body.prototype-ui .flyout-content { padding-inline: 8px; }
  body.prototype-ui .flyout .primary-menu a { font-size: 25px; }
  body.prototype-ui .hero-main { height: min(580px, calc(100svh - 136px)); }
  body.prototype-ui :is(.cat-hero-title,.trade-title,.promo-title,.sp-hero h1,
    .payment-header h2,.guide-header .section-title,.antrian-header h2,
    .pickup-header h2,.about-title,.anti-fraud-title,.service-header h3) { font-size: 30px; }
  body.prototype-ui :is(.trade-subtitle,.promo-subtitle,.guide-subtitle,.sp-hero-desc,
    .payment-header .subtitle,.antrian-header .subtitle,.pickup-header p,.about-description) { font-size: 15px; }
  body.prototype-ui :is(.tradein-wrapper,.promo-page-wrapper,.payment-guide-wrapper,
    .lcd-education,.iclear-service,.antrian-section,.pickup-section,.anti-fraud) { padding: 40px 20px 56px; }
  body.prototype-ui .lcd-education .section-title { font-size: 28px; }
  body.prototype-ui #faq { padding: 40px 20px 56px; }
  body.prototype-ui #faq > .container > h2 { font-size: 30px; }
  body.prototype-ui :is(.tg-section,.about-section) { padding: 40px 20px 56px; }
  body.prototype-ui .tg-title { font-size: 28px; }
  body.prototype-ui .cat-wrapper { padding: 24px 0 56px; }
  body.prototype-ui .cat-container { padding-inline: 20px; }
  body.prototype-ui .cat-hero { padding: 40px 20px; min-height: 240px; margin-bottom: 28px; }
  body.prototype-ui :is(.form-control,.form-select,.trade-select,.sp-select) { font-size: 16px; }
  body.prototype-ui .trade-card { padding: 24px 18px; }
  body.prototype-ui .trade-table td { padding-inline: 8px; }
  body.prototype-ui .detail-container { margin: 24px auto 48px; padding: 24px 20px; gap: 32px; flex-direction: column; }
  body.prototype-ui .detail-container :is(.detail-image,.right-box) { width: 100%; min-width: 0; }
  body.prototype-ui .detail-container .title { font-size: 28px; }
  body.prototype-ui .detail-container .price { font-size: 22px; }
  body.prototype-ui .payment-section { padding: 32px 20px 56px; }
  body.prototype-ui .lokasi-wrapper { padding: 24px 20px 48px; }
  body.prototype-ui.retail-auth .auth-card-wrapper { min-height: 0; margin: 28px 16px 48px; }
  body.prototype-ui.retail-auth .auth-form-side { padding: 28px 24px; }
  body.prototype-ui .footer-contact { gap: 14px; }
  body.prototype-ui .service-price { padding: 40px 20px; }
  body.prototype-ui .iclear-service .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px 16px; }
  body.prototype-ui .iclear-service .service-title { font-size: 28px; }
  body.prototype-ui .service-cta { flex-wrap: wrap; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body.prototype-ui .auth-card-wrapper,
  body.prototype-ui .auth-form-side { animation: none; }
}