/* Tahap 6: kulit publik/customer untuk bridge tool legacy. Kandidat P1: selector legacy dibatasi agar tidak memengaruhi navbar bersama. */ body.sr-auth-page { background: #fff; color: #20231f; } body.sr-auth-page .sr-login-wrap { width: min(100%, 560px); padding-block: 32px; } body.sr-auth-page .sr-login-card { padding: 40px; border: 1px solid #e3e5df; border-radius: 12px; background: #fff; box-shadow: none; backdrop-filter: none; } body.sr-auth-page .sr-login-logo span { background: none; color: #20231f; -webkit-text-fill-color: currentColor; } body.sr-auth-page .sr-login-subtitle { margin-top: 12px; color: #60665f; letter-spacing: .06em; text-transform: uppercase; } body.sr-auth-page .sr-login-subtitle i { display: none; } body.sr-auth-page .sr-login-card h1 { font-family: var(--sr-font-family, 'Manrope', sans-serif); font-weight: 700; color: #20231f; } body.sr-auth-page .sr-login-desc, body.sr-auth-page .sr-login-note { color: #60665f; } body.sr-auth-page .sr-login-note { border: 1px solid #e3e5df; border-radius: 8px; background: #f7f6f2; } body.sr-auth-page .sr-login-note strong { color: #ae6108; } body.sr-auth-page .sr-input-wrap input { border-color: #939490; border-radius: 8px; box-shadow: none; } body.sr-auth-page .sr-input-wrap input:focus { border-color: #ae6108; box-shadow: 0 0 0 2px rgba(244,140,20,.2); } body.sr-auth-page .sr-toggle-password { color: #ae6108; font-size: 12px; } body.sr-auth-page .sr-btn-login { border-radius: 8px; background: #f48c14; color: #20231f; box-shadow: none; } body.sr-auth-page .sr-btn-login:hover { transform: none; box-shadow: none; } body.sr-auth-page .sr-register-cta { border: 1px solid #e3e5df; border-radius: 8px; background: #f7f6f2; } body.sr-auth-page .sr-btn-register { border: 1px solid #939490; border-radius: 8px; color: #20231f; background: #fff; box-shadow: none; } body.sr-auth-page .sr-login-footer { color: #60665f; } body.sr-auth-page .sr-login-footer a { color: #ae6108; } @media (max-width: 600px) { body.sr-auth-page .sr-login-wrap { padding: 20px 16px; } body.sr-auth-page .sr-login-card { padding: 28px 20px; } } body.sr-tool-page { min-width: 0; overflow-x: hidden; font-family: var(--sr-font-family, 'Manrope', sans-serif); background: var(--sr-color-bg, #fff); color: var(--sr-color-text, #20231f); } /* .sr-navbar now carries sr-scope (P2 Kelompok A, for correct Manrope rendering). .sr-scope sets overflow-x: hidden as a safety net; on an element with a defined height that forces overflow-y to auto too, which clips the Belajar dropdown menu rendering below the 65px header box. Restore visible overflow here, scoped to this navbar only. (The 8px offset that used to be added here was compensating for a browser-default margin bug on the rest of the site -- that margin is now reset at the source in sr-design-system.css, so this navbar no longer needs its own offset.) */ body.sr-tool-page .sr-navbar { overflow: visible; } body.sr-tool-page .page-header { min-height: 0; padding: 116px 24px 42px; background: #f7f6f2; text-align: left; } body.sr-tool-page .page-header::before { display: none; } body.sr-tool-page .page-header-inner { max-width: 1280px; } body.sr-tool-page .page-header h1 { font-family: var(--sr-font-family, 'Manrope', sans-serif); font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.035em; color: #20231f; } body.sr-tool-page .page-header h1 span { background: none; color: inherit; -webkit-text-fill-color: currentColor; } body.sr-tool-page .page-header p { max-width: 720px; color: #60665f; } body.sr-tool-page .main-layout { max-width: 1280px; padding: 32px 24px 64px; } body.sr-tool-page .kal-sidebar { width: 248px; top: 88px; } body.sr-tool-page .kal-cat { color: #60665f; margin-top: 24px; } body.sr-tool-page .kal-item { border-radius: 8px; color: #60665f; transition: background-color .15s, color .15s, border-color .15s; } body.sr-tool-page .kal-item:hover { background: #fdf2e5; color: #ae6108; } body.sr-tool-page .kal-item.active { background: #fdf2e5; color: #ae6108; border-color: #f48c14; box-shadow: none; } body.sr-tool-page .kal-content { padding-left: 32px; } body.sr-tool-page .kal-card { border: 1px solid #e3e5df; border-radius: 12px; box-shadow: none; } body.sr-tool-page .kal-card-title { font-family: var(--sr-font-family, 'Manrope', sans-serif); color: #20231f; } body.sr-tool-page .kal-input, body.sr-tool-page .kal-select, body.sr-tool-page input, body.sr-tool-page select, body.sr-tool-page textarea { border-color: #939490; border-radius: 8px; } body.sr-tool-page .kal-input:focus, body.sr-tool-page .kal-select:focus, body.sr-tool-page input:focus, body.sr-tool-page select:focus, body.sr-tool-page textarea:focus { border-color: #ae6108; box-shadow: 0 0 0 2px rgba(244,140,20,.2); outline: none; } /* Buttons live in the main tool and the comparator modal; the shared navbar is outside both. */ body.sr-tool-page .main-layout button, body.sr-tool-page .main-layout .btn, body.sr-tool-page .main-layout .btn-primary, body.sr-tool-page .comp-modal-overlay button, body.sr-tool-page .comp-modal-overlay .btn, body.sr-tool-page .comp-modal-overlay .btn-primary { border-radius: 8px; background: #f48c14; color: #20231f; box-shadow: none; } body.sr-tool-page .sr-tool-footer { border-top: 1px solid #e3e5df; padding: 24px; color: #60665f; text-align: center; font-size: 13px; } body.sr-tool-page .sr-tool-footer a { color: #ae6108; margin-inline: 8px; } @media (max-width: 900px) { body.sr-tool-page .main-layout { padding-inline: 16px; } body.sr-tool-page .kal-content { padding-left: 0; } } @media (max-width: 700px) { body.sr-tool-page .page-header { padding: 100px 16px 32px; } body.sr-tool-page .kal-sidebar { position: static; width: 100%; } body.sr-tool-page .kal-sidebar .kal-cat { width: 100%; } body.sr-tool-page .kal-item { flex: 1 1 auto; min-width: 140px; } body.sr-tool-page .kal-card { padding: 20px 16px; } }