/* ========================================================================== Rumah PPR 2025 - custom.css Override ringkas Bootstrap + gaya khas brand ========================================================================== */ /* ---------------------- Root Tokens ---------------------- */ :root{ --mk-primary:#317CD7; --mk-primary-600:#1e62b6; --mk-primary-700:#164b8f; --mk-bg:#f7f9fc; --mk-paper:#ffffff; --mk-ink:#0f172a; --mk-ink-2:#334155; --mk-muted:#64748b; --mk-border:#e2e8f0; --mk-soft:#f1f5f9; --mk-warning-soft:#fff8e8; --mk-radius:16px; --mk-radius-sm:12px; --mk-shadow:0 10px 30px rgba(2,6,23,.06); --mk-focus:#9ec3ff; } /* Dark mode (opsyenal: tambah class .theme-dark pada ) */ html.theme-dark{ --mk-bg:#0b1220; --mk-paper:#0f172a; --mk-ink:#e5e7eb; --mk-ink-2:#cbd5e1; --mk-muted:#94a3b8; --mk-border:#1f2937; --mk-soft:#0b1220; --mk-warning-soft:#1e1a12; --mk-shadow:0 10px 30px rgba(0,0,0,.45); } /* ---------------------- Global Reset ---------------------- */ *{ box-sizing:border-box; } html,body{ height:100%; } html{ -webkit-tap-highlight-color: transparent; } body{ background:var(--mk-bg); color:var(--mk-ink); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-text-size-adjust:100%; /* elak zoom auto di iOS */ } /* ---------------------- Container ---------------------- */ .container{ width:100%; padding-inline:15px; } .container-narrow{ width:100%; max-width:560px; margin-inline:auto; } /* ---------------------- Typography ---------------------- */ .page-header{ color:var(--mk-ink); letter-spacing:.2px; } .small-note, .form-text, .text_asat{ color:var(--mk-muted); font-size:.92rem; } .text_asat{ font-weight:400; } /* ---------------------- Links ---------------------- */ a.link-mk{ color:#403B39; text-decoration:none; } a.link-mk:hover{ text-decoration:underline; } /* ---------------------- Cards & Panels ---------------------- */ .card{ background:var(--mk-paper); border:1px solid var(--mk-border); border-radius:var(--mk-radius); box-shadow:var(--mk-shadow); margin-bottom:.75rem; } .card-title{ border-bottom:1px dotted var(--mk-border); padding-bottom:.6em; font-size:1rem; } /* Panel borang khas */ .card-form{ background:var(--mk-paper); border:1px solid var(--mk-border); border-radius:var(--mk-radius); box-shadow:var(--mk-shadow); } /* ---------------------- Tables ---------------------- */ .table{ background:var(--mk-paper); } .table thead th{ border-bottom:1px solid var(--mk-border); } .table td, .table th{ border-color:var(--mk-border); } .table-status td{ background:var(--mk-warning-soft); } /* ---------------------- Buttons ---------------------- */ .btn-mk{ --bs-btn-bg:var(--mk-primary); --bs-btn-border-color:var(--mk-primary); --bs-btn-hover-bg:var(--mk-primary-600); --bs-btn-hover-border-color:var(--mk-primary-600); --bs-btn-active-bg:var(--mk-primary-700); --bs-btn-active-border-color:var(--mk-primary-700); color:#fff !important; background:linear-gradient(180deg, var(--mk-primary) 0%, var(--mk-primary-600) 100%); border:1px solid var(--mk-primary); border-radius:calc(var(--mk-radius) - 6px); padding:.85rem 1.1rem; font-weight:600; transition:transform .08s ease, box-shadow .2s ease, filter .2s ease; box-shadow:0 6px 14px rgba(49,124,215,.24); } .btn-mk:hover{ filter:saturate(1.05); box-shadow:0 10px 18px rgba(49,124,215,.28); } .btn-mk:active{ transform:translateY(1px) scale(.995); } .btn-mk:focus{ outline:3px solid var(--mk-focus); outline-offset:2px; } /* ---------------------- Forms ---------------------- */ .form-control, .form-select{ background:var(--mk-paper); color:var(--mk-ink); border:1px solid var(--mk-border); border-radius:calc(var(--mk-radius) - 8px); padding:.75rem .9rem; line-height:1.35; font-size:16px; /* ≥16px elak auto-zoom iOS ketika fokus */ transition:border-color .15s ease, box-shadow .15s ease, background .15s ease; } .form-control:focus, .form-select:focus{ border-color:var(--mk-primary); box-shadow:0 0 0 .15rem rgba(49,124,215,.25); } .input-group-text{ background:var(--mk-soft); color:var(--mk-ink-2); border:1px solid var(--mk-border); } /* OTP gaya pilihan */ .otp-input{ letter-spacing:.4rem; text-align:center; font-weight:600; } /* ---------------------- Utility Elements ---------------------- */ .brand-badge{ color:var(--mk-primary); font-weight:700; letter-spacing:.3px; text-decoration:none; } .holder{ /* overlay loading */ position:fixed; inset:0; background:rgba(255,255,255,.85); display:none; align-items:center; justify-content:center; z-index:1050; } html.theme-dark .holder{ background:rgba(15,23,42,.85); } /* Imej */ .footer-img{ max-width:450px; } /* ---------------------- Footer ---------------------- */ footer{ background:#403B39; color:#fff; } footer .list-group-item, footer .list-group-item:hover{ background:none; border:none; } footer a.nav-link{ color:#fff; padding-top:0; } footer a.nav-link:hover{ text-decoration:underline; } /* ---------------------- Motion Preference ---------------------- */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* ---------------------- Touch Precision ---------------------- */ button, .btn, .form-control, .form-select, .input-group-text{ -webkit-touch-callout: none; touch-action: manipulation; /* responsif tanpa delay */ } /* ---------------------- Helpers ---------------------- */ .shadow-soft{ box-shadow:var(--mk-shadow); } .rounded-2xl{ border-radius:var(--mk-radius) !important; }