.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: #c02d76; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ===== Gaya Valora Animal Clinic (navy blue, konsisten dengan aplikasi klinik) ===== */ body { font-family: 'Segoe UI', Tahoma, sans-serif; background: #F4F6F8; margin: 0; color: #222; } .header-klinik { background: #0A3D62; color: white; padding: 20px 24px; } .header-klinik h1 { margin: 0; font-size: 22px; } .header-klinik p { margin: 4px 0 0; color: rgba(255,255,255,.75); font-size: 14px; } .kontainer { max-width: 640px; margin: 24px auto; padding: 0 16px 40px; } .kartu { background: white; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); padding: 24px; margin-bottom: 20px; } label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 14px; } input[type=text], input[type=tel], input[type=email], input[type=date], input[type=time], input[type=password], select, textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; } .btn-utama { background: #0A3D62; color: white; border: none; border-radius: 4px; padding: 12px 20px; font-size: 15px; cursor: pointer; margin-top: 16px; } .btn-utama:disabled { background: #99a9b8; cursor: not-allowed; } .pesan-sukses { background: #E0F7E0; color: #1B5E20; padding: 12px; border-radius: 4px; margin-top: 12px; } .pesan-error { background: #FDECEA; color: #B32121; padding: 12px; border-radius: 4px; margin-top: 12px; } .link-navigasi { display: block; margin-top: 12px; color: #0A3D62; } /* ===== Booking Online — redesain premium (teal gelap + gold + ivory), 18 Agustus 2026 =================== Brief dari user (dibuat lewat AI Canva, diteruskan sebagai prompt desain): halaman booking harus terasa seperti "premium veterinary clinic" — bersih, mewah, elegan, TANPA mengubah logic booking sama sekali. SENGAJA diberi namespace ".vb-" (Valora Booking) dan HANYA dipakai di Booking.razor — Home.razor dan halaman Investor (InvestorLogin/InvestorDashboard/InvestorLaporan) TIDAK disentuh sama sekali, supaya scope redesain ini tetap sesuai permintaan (khusus booking online), tidak menimbulkan regresi visual di halaman lain yang masih pakai kelas lama (.kontainer/.kartu/.header-klinik/.btn-utama/dst.). Logo asli klinik TIDAK tersedia sebagai file di repo (hanya ada logo.ico Desktop) — dipakai brand mark ikon+wordmark sederhana sebagai gantinya, BUKAN logo asli. Alamat/telepon/media sosial fisik SENGAJA tidak dicantumkan di footer (supaya tidak mengarang data bisnis yang belum tentu benar) — footer hanya berisi info yang sudah pasti akurat (jam operasional yang sama dengan bagian info, tautan internal, dan penjelasan bahwa konfirmasi lewat WhatsApp). ============================================================ */ .vb-page { /* PERBAIKAN 9 September 2026 (permintaan user: "buat warna-warna sesuai dengan logo") -- SEBELUMNYA --vb-navy-* memakai navy KEBIRUAN (#0A3D62, sama seperti Desktop/Web Klinik) yang TERNYATA meleset dari warna asli logo Valora. Diukur langsung dari piksel logo-valora.jpg (histogram warna latar lingkaran logo, dominan #004050) -- warna sebenarnya teal gelap, bukan navy biru. Nilai di bawah diganti mengikuti hasil pengukuran itu. Varian warna emerald/rose (dipakai sebentar untuk "variasi warna" pada beberapa ikon) DIHAPUS di seluruh file ini sesuai permintaan user "jangan warna hijau" -- logo aslinya cuma teal + emas + putih/perak, jadi semua ikon kembali konsisten emas seperti logo. */ --vb-navy-950: #00252E; --vb-navy-900: #004050; --vb-navy-800: #0B5568; --vb-navy-700: #147184; --vb-gold-600: #B8892F; --vb-gold-500: #D4A94A; --vb-gold-100: #F6E9CE; --vb-ivory: #FAF7F1; --vb-white: #FFFFFF; --vb-ink: #1C2A28; --vb-ink-soft: #5B6B67; --vb-border: #E7E1D4; --vb-radius-lg: 20px; --vb-shadow-soft: 0 24px 55px -18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 169, 74, .1); font-family: 'Inter', 'Segoe UI', sans-serif; color: var(--vb-ink); /* PERBAIKAN 9 September 2026 (permintaan user: "buat web booking online lebih berwarna seperti web spin") -- SEBELUMNYA seluruh halaman berlatar ivory polos, cuma panel hero kiri yang gelap+bertekstur. Sekarang latar gelap navy+titik emas (pola sama .vb-hero-panel) dipakai untuk SELURUH halaman, bukan cuma satu panel -- kartu info/form TETAP putih (kontras & keterbacaan input tidak berubah), tapi "mengapung" di atas latar gelap dengan glow emas, meniru nuansa Web Spin (dark navy + gold + kartu putih untuk input). Logic booking SAMA SEKALI TIDAK berubah, murni restyle. */ /* PENTING (ditemukan sendiri lewat pratinjau lokal sebelum diserahkan ke user, BUKAN dilaporkan user): dua percobaan sebelumnya (background-attachment:fixed, lalu background-size:cover pada layer gradient linear) sama-sama menyisakan AREA KOSONG ABU-ABU begitu halaman di-scroll melewati tinggi kolom hero (cuma 540px, sedangkan kolom info+form di sebelahnya jauh lebih tinggi -- CSS grid align-items:start membuat sisa ruang kosong di kolom pendek, dan gradient sebagai satu-satunya background TIDAK SELALU merentang penuh ke situ di semua kondisi render). Perbaikan tuntas: background-COLOR solid (navy gelap) dipasang sebagai lapisan dasar terpisah -- ini SELALU menutup 100% kotak elemen apa pun yang terjadi pada layer gradient di atasnya, baru gradient dekoratif (bintik keemasan + pola titik) ditumpuk di atasnya lewat background-image. Diverifikasi scroll penuh sampai footer, tidak ada celah lagi. */ background-color: var(--vb-navy-950); background-image: radial-gradient(circle at 12% 0%, rgba(212, 169, 74, .16), transparent 32%), radial-gradient(circle at 92% 8%, rgba(212, 169, 74, .12), transparent 30%), url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZyBmaWxsPSIjRjZFOUNFIiBmaWxsLW9wYWNpdHk9IjAuMDgiPjxjaXJjbGUgY3g9IjMyIiBjeT0iNDIiIHI9IjgiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjI2IiByPSI0LjYiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjE1IiByPSI0LjYiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjE1IiByPSI0LjYiLz48Y2lyY2xlIGN4PSI0OSIgY3k9IjI2IiByPSI0LjYiLz48L2c+PC9zdmc+Cg=="), linear-gradient(175deg, var(--vb-navy-950) 0%, #0C2E4C 55%, var(--vb-navy-900) 100%); background-repeat: no-repeat, no-repeat, repeat, no-repeat; background-size: 900px 900px, 900px 900px, 64px 64px, 100% 100%; background-attachment: scroll, scroll, scroll, scroll; } .vb-page h1, .vb-page h2, .vb-page h3 { font-family: 'Poppins', 'Segoe UI', sans-serif; color: var(--vb-navy-900); margin: 0; } /* ---- Eyebrow pill emas (dekoratif, meniru chip "LAUNCHING BOOKING ONLINE" di Web Spin) ---- */ .vb-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(212, 169, 74, .14); border: 1px solid rgba(212, 169, 74, .5); color: var(--vb-gold-500); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 16px 7px 12px; border-radius: 999px; margin: 0 auto 18px; } .vb-eyebrow svg { flex-shrink: 0; } /* ---- Header sticky ---- */ .vb-header { position: sticky; top: 0; z-index: 50; background: rgba(7, 27, 46, .82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212, 169, 74, .22); } .vb-header-inner { max-width: 1180px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .vb-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vb-white); } .vb-brand-mark { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; object-fit: cover; box-shadow: 0 0 0 2px rgba(212, 169, 74, .55), 0 2px 10px rgba(0, 0, 0, .4); } .vb-brand-mark-sm { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(212, 169, 74, .4); } .vb-brand-text { display: flex; flex-direction: column; line-height: 1.15; } .vb-brand-text strong { font-family: 'Poppins', sans-serif; font-size: 15px; letter-spacing: .06em; color: var(--vb-white); } .vb-brand-text small { font-size: 9px; letter-spacing: .14em; color: var(--vb-gold-500); } .vb-btn-primary { background: linear-gradient(135deg, var(--vb-gold-500), var(--vb-gold-600)); color: var(--vb-navy-950); font-weight: 700; padding: 14px 28px; border-radius: 999px; text-decoration: none; border: none; box-shadow: 0 12px 24px -8px rgba(212, 169, 74, .5); transition: transform .15s, box-shadow .15s; cursor: pointer; font-size: 15px; display: inline-block; } .vb-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -8px rgba(212, 169, 74, .6); } /* ---- Layout 3 kolom: panel hero (logo besar+tagline) | info+kontak | form ---- */ .vb-main { max-width: 1320px; margin: 32px auto 0; padding: 0 24px 80px; position: relative; } .vb-grid { display: grid; grid-template-columns: .9fr .85fr 1.25fr; gap: 24px; align-items: start; } .vb-hero-panel { position: relative; overflow: hidden; border-radius: var(--vb-radius-lg); background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0Ij48ZyBmaWxsPSIjRjZFOUNFIiBmaWxsLW9wYWNpdHk9IjAuMTAiPjxjaXJjbGUgY3g9IjMyIiBjeT0iNDIiIHI9IjgiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjI2IiByPSI0LjYiLz48Y2lyY2xlIGN4PSIyNSIgY3k9IjE1IiByPSI0LjYiLz48Y2lyY2xlIGN4PSIzOSIgY3k9IjE1IiByPSI0LjYiLz48Y2lyY2xlIGN4PSI0OSIgY3k9IjI2IiByPSI0LjYiLz48L2c+PC9zdmc+Cg=="), linear-gradient(160deg, var(--vb-navy-950), var(--vb-navy-800)); background-size: 64px 64px, cover; box-shadow: var(--vb-shadow-soft), 0 0 0 1px rgba(212, 169, 74, .35); min-height: 540px; display: flex; align-items: center; justify-content: center; padding: 40px 26px; } .vb-hero-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 20% 10%, rgba(212, 169, 74, .22), transparent 42%), radial-gradient(circle at 88% 92%, rgba(212, 169, 74, .28), transparent 50%); } .vb-hero-panel::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -18%; height: 46%; pointer-events: none; border-radius: 50%; background: linear-gradient(0deg, rgba(212, 169, 74, .16), transparent 70%); } .vb-hero-panel-inner { position: relative; z-index: 1; text-align: center; } .vb-hero-logo { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(212, 169, 74, .5); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); margin-bottom: 22px; } .vb-hero-panel h1.vb-hero-tagline { color: white; font-size: 21px; line-height: 1.4; margin: 0 0 14px; } .vb-hero-tagline-rule { display: block; width: 56px; height: 2px; background: var(--vb-gold-500); margin: 0 auto 26px; } .vb-hero-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; } .vb-hero-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; color: rgba(255, 255, 255, .85); line-height: 1.3; } .vb-hero-mini-icon { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--vb-gold-500); color: var(--vb-gold-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vb-info-card { background: var(--vb-white); border-radius: var(--vb-radius-lg); padding: 28px; box-shadow: var(--vb-shadow-soft); margin-bottom: 20px; border: 1px solid var(--vb-border); } .vb-info-card h2, .vb-info-card h3 { font-size: 18px; margin-bottom: 14px; } .vb-trust-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .vb-trust-list li { display: flex; gap: 12px; align-items: flex-start; } .vb-trust-icon { width: 38px; height: 38px; border-radius: 12px; background: var(--vb-gold-100); color: var(--vb-gold-600); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .vb-trust-list strong { display: block; font-size: 14px; color: var(--vb-navy-900); } .vb-trust-list span { font-size: 13px; color: var(--vb-ink-soft); } .vb-alamat { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: var(--vb-ink); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px dashed var(--vb-border); } .vb-alamat span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--vb-ink-soft); } .vb-alamat:hover span:last-child { color: var(--vb-navy-900); } .vb-jam-buka { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--vb-navy-900); } .vb-kontak-phone { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--vb-navy-900); font-weight: 700; font-size: 15px; margin-bottom: 16px; } /* PERBAIKAN 9 September 2026 (permintaan user: "jangan warna hijau") -- SEBELUMNYA hijau khas WhatsApp (#25D366), BUKAN bagian palet resmi klinik (navy/emerald/gold/merah) dan menonjol lepas dari nuansa gelap+emas di sekitarnya -- diganti gradasi navy (senada .vb-btn-submit) supaya tetap satu identitas, ikon WhatsApp-nya sendiri (currentColor/putih) tetap gampang dikenali tanpa perlu warna hijau. */ .vb-btn-wa { display: flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(135deg, var(--vb-navy-800), var(--vb-navy-950)); color: white; padding: 11px 16px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; transition: transform .15s, box-shadow .15s; box-shadow: 0 10px 22px -12px rgba(7, 27, 46, .7); } .vb-btn-wa:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(7, 27, 46, .8); } /* ---- Form card ---- */ .vb-form-card { background: var(--vb-white); border-radius: var(--vb-radius-lg); padding: 32px; box-shadow: var(--vb-shadow-soft); border: 1px solid var(--vb-border); } .vb-form-card h2 { font-size: 20px; margin-bottom: 6px; } .vb-form-sub { color: var(--vb-ink-soft); font-size: 14px; margin: 0 0 26px; } .vb-form-section { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--vb-border); } .vb-form-section:last-of-type { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; } .vb-section-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--vb-navy-900); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; } .vb-section-num { width: 22px; height: 22px; border-radius: 50%; background: var(--vb-navy-900); color: var(--vb-gold-500); font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .vb-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .vb-field { margin-bottom: 16px; } .vb-field:last-child { margin-bottom: 0; } .vb-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--vb-ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .03em; } .vb-hint { color: var(--vb-ink-soft); font-size: 13px; margin: 4px 0 0; } .vb-page input[type=text], .vb-page input[type=tel], .vb-page input[type=email], .vb-page input[type=date], .vb-page input[type=time], .vb-page select, .vb-page textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--vb-border); border-radius: 10px; font-size: 14px; font-family: inherit; background: var(--vb-ivory); color: var(--vb-ink); transition: border-color .15s, box-shadow .15s, background .15s; } .vb-page input:focus, .vb-page select:focus, .vb-page textarea:focus { outline: none; border-color: var(--vb-gold-500); background: white; box-shadow: 0 0 0 3px rgba(212, 169, 74, .18); } .vb-page textarea { resize: vertical; min-height: 90px; } /* Picker "Dokter yang Diinginkan" — kartu terpilih dengan foto kecil. Foto dimuat sebagai data URI (base64) langsung dari Supabase, tidak butuh request tambahan. Logic pemilihan TIDAK berubah, murni restyle. */ .dokter-picker { display: flex; flex-wrap: wrap; gap: 12px; } .dokter-kartu { display: flex; flex-direction: column; align-items: center; width: 96px; padding: 14px 8px; border: 1.5px solid var(--vb-border); border-radius: 14px; cursor: pointer; text-align: center; background: var(--vb-ivory); transition: border-color .15s, transform .15s, box-shadow .15s; font: inherit; appearance: none; } .dokter-kartu:hover { border-color: var(--vb-gold-500); transform: translateY(-2px); } .dokter-kartu.dipilih { border-color: var(--vb-gold-500); background: var(--vb-gold-100); box-shadow: 0 8px 16px -8px rgba(212, 169, 74, .4); } /* D-R2/Web (audit): dokter-kartu diubah dari
+@@onclick jadi