/* KlikBCA Mobile - m.klikbca.com style */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { font-family:Arial,Helvetica,sans-serif; font-size:14px; background:#fff; color:#111; -webkit-text-size-adjust:100%; }

#wrapper { width:100%; max-width:100%; min-height:100vh; display:flex; flex-direction:column; background:#fff; }

/* HEADER */
#header { background:#3D3DB4; border-bottom:7px solid #F5C400; display:flex; align-items:center; padding:4px 8px 0 4px; gap:10px; min-height:58px; }
#header img#logo { height:50px; width:auto; display:block; flex-shrink:0; }
#header-date { color:#ffffff; font-size:14px; }

/* LOGIN FORM */
#content { padding:14px 10px 6px 10px; }
.login-table { width:100%; border:none; }
.login-table td { padding:2px 0; }
.lbl-id { display:block; font-size:13px; color:#111; text-decoration:underline; margin-bottom:1px; }
.lbl-en { display:block; font-size:12px; color:#E57C00; font-style:italic; margin-bottom:5px; }
.input-field { display:block; width:100%; max-width:380px; height:34px; border:2px solid #111; padding:4px 8px; font-size:14px; outline:none; background:#fff; border-radius:0; margin-bottom:10px; }
.input-field:focus { border-color:#3D3DB4; }
.btn-table { width:100%; max-width:380px; margin-top:4px; border:none; }
.btn-table td { vertical-align:middle; }
.td-fullsite { text-align:right; padding-right:4px; }
.btn-login { background:#fff; border:2px solid #111; padding:5px 18px; font-size:14px; font-weight:bold; cursor:pointer; color:#111; }
.btn-login:hover { background:#f2f2f2; }
.link-fullsite { color:#3D3DB4; font-size:13px; text-decoration:none; }
.link-fullsite:hover { text-decoration:underline; }
.error-box { background:#fff5f5; border:1px solid #ffbbbb; color:#cc0000; font-size:13px; padding:7px 10px; margin-top:8px; max-width:380px; white-space:pre-line; }

/* BANNER */
#banner-area { margin:10px 10px 0 10px; position:relative; }
.banner-slide-container { position:relative; display:block; width:100%; }
.banner-slide { display:none; }
.banner-slide .banner-image { width:100%; display:block; }
.prev-navigation, .next-navigation { cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); padding:8px 12px; color:#fff; font-weight:bold; font-size:16px; background:rgba(0,0,0,0.35); user-select:none; border-radius:2px; z-index:10; }
.prev-navigation { left:0; }
.next-navigation { right:0; }
.prev-navigation:hover, .next-navigation:hover { background:rgba(0,0,0,0.6); }
.dot-navigation { cursor:pointer; height:8px; width:8px; margin:0 3px; background-color:#bbb; border-radius:50%; display:inline-block; transition:background-color 0.3s; }
.dot-navigation.active, .dot-navigation:hover { background-color:#3D3DB4; }

/* SECURITY BADGES */
#security-row { padding:10px 10px 8px; display:flex; align-items:center; gap:10px; }
#img-keamanan { height:50px; width:auto; cursor:pointer; }
#img-digicert  { height:50px; width:auto; }

/* LEGAL */
#legal { padding:0 10px 16px; }
.legal-hr { border:none; border-top:1px solid #ccc; margin:6px 0; }
#legal-id { font-size:12px; line-height:1.65; color:#111; }
#legal-en { font-size:12px; line-height:1.65; color:#E57C00; }
#legal-id a { color:#111; text-decoration:underline; }
#legal-en a  { color:#E57C00; text-decoration:underline; }

/* FOOTER */
#login-footer { background:#3D3DB4; height:26px; margin-top:auto; }

/* INNER PAGES - page title */
.page-title { background:#3D3DB4; color:#fff; font-size:15px; font-weight:bold; padding:10px; text-transform:uppercase; width:100%; }

/* MENU LIST */
.menu-item { border-bottom:1.5px solid #3D3DB4; }
.menu-item a { display:block; padding:11px 10px; color:#3D3DB4; font-size:14px; font-weight:bold; text-decoration:none; width:100%; }
.menu-item a:hover, .menu-item a:active { background:#f0f0ff; }
.menu-item.sub a { padding-left:26px; }

/* FOOTER NAV */
#footer-nav { background:#3D3DB4; padding:12px 14px; display:flex; gap:20px; margin-top:auto; width:100%; }
#footer-nav a { color:#fff; font-size:14px; font-weight:bold; text-decoration:none; text-transform:uppercase; }
#footer-nav a:hover { text-decoration:underline; }

/* FORM ROWS */
.form-row { background:#f0f0f0; padding:7px 10px 8px; border-bottom:1px solid #ddd; }
.form-row label { display:block; font-size:12px; font-weight:bold; color:#3D3DB4; text-transform:uppercase; margin-bottom:5px; }
.form-row select, .form-row input[type="text"], .form-row input[type="password"] { border:1.5px solid #3D3DB4; padding:5px 8px; font-size:13px; background:#fff; outline:none; color:#111; width:100%; max-width:340px; }
.form-row select:focus, .form-row input:focus { border-color:#111; }
.radio-row { background:#f0f0f0; padding:8px 10px; border-bottom:1px solid #ddd; }
.radio-row .radio-title { font-size:12px; font-weight:bold; color:#3D3DB4; text-transform:uppercase; display:block; margin-bottom:6px; }
.radio-inline { display:flex; gap:20px; flex-wrap:wrap; }
.radio-inline label { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:bold; color:#3D3DB4; cursor:pointer; }
.radio-inline input[type="radio"] { accent-color:#3D3DB4; width:16px; height:16px; }

/* KEYBCA */
.keybca-wrap { display:flex; gap:8px; align-items:center; }
.keybca-box { border:1px solid #aaa; background:#e8e8e8; padding:5px 10px; font-size:14px; font-weight:bold; color:#111; min-width:60px; text-align:center; font-family:Courier,monospace; }

/* DATA TABLES */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table thead td { background:#3D3DB4; color:#fff; font-weight:bold; padding:7px 8px; border-right:1px solid #5555cc; }
.data-table tbody td { padding:7px 8px; border-bottom:1px solid #ddd; color:#3D3DB4; font-weight:bold; }
.data-table tbody tr:nth-child(odd)  { background:#f5f5ff; }
.data-table tbody tr:nth-child(even) { background:#fff; }
.data-table .cr { color:#006600; }
.data-table .db { color:#cc0000; }
.data-table .amount { text-align:right; }

/* INFO / SUMMARY BLOCKS */
.info-block { background:#f0f0f0; border-bottom:2px solid #3D3DB4; }
.info-block-row { display:flex; padding:4px 10px; font-size:13px; border-bottom:1px solid #e0e0e0; }
.info-block-row .lbl { font-weight:bold; color:#3D3DB4; width:110px; flex-shrink:0; }
.summary-block { background:#f0f0f0; border-top:2px solid #3D3DB4; }
.summary-row { display:flex; padding:5px 10px; font-size:13px; border-bottom:1px solid #e0e0e0; }
.summary-row .lbl { font-weight:bold; color:#3D3DB4; width:160px; flex-shrink:0; }
.summary-row .val { font-weight:bold; color:#111; }

/* RESULT BLOCK */
.result-block { background:#f0f0f0; }
.result-row { display:flex; padding:6px 10px; font-size:13px; border-bottom:1px solid #ddd; }
.result-row .lbl { font-weight:bold; color:#3D3DB4; width:160px; flex-shrink:0; }
.result-row .val { font-weight:bold; color:#111; }

/* MESSAGES */
.msg-ok  { background:#efffef; border:1px solid #99cc99; color:#226622; font-size:13px; padding:8px 10px; margin:6px 0; }
.msg-err { background:#fff0f0; border:1px solid #ffaaaa; color:#cc0000; font-size:13px; padding:8px 10px; margin:6px 0; }
.note-red  { color:#cc0000; font-size:12px; font-weight:bold; padding:6px 10px; background:#fff0f0; }
.note-blue { color:#3D3DB4; font-size:12px; font-weight:bold; padding:6px 10px; line-height:1.6; }

/* BUTTONS */
.btn-action { background:#d0d0d0; border:1.5px solid #888; padding:6px 18px; font-size:14px; font-weight:bold; color:#3D3DB4; cursor:pointer; margin:8px 10px; display:inline-block; }
.btn-action:hover { background:#bbb; }

/* HEADER DATE BAR (inner pages) */
.header-date-bar { background:#3D3DB4; border-bottom:7px solid #F5C400; display:flex; align-items:center; padding:4px 8px 0; gap:10px; min-height:58px; }
.header-date-bar img { height:50px; width:auto; flex-shrink:0; }
.header-date-bar span { color:#fff; font-size:14px; }