:root{
  --br-ink:#0b2530;
  --br-muted:#5a6b70;
  --br-green:#1c346b;
  --br-green-d:#0f1d3d;
  --br-green-light:#5f7cbf;
  --br-gold:#c9a227;
  --br-bg:#f4f5f7;
}
*{box-sizing:border-box;}
.br-body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--br-ink);
  background:var(--br-bg);
  -webkit-font-smoothing:antialiased;
}

/* NAVBAR */
.br-nav{
  background:#fff;
  border-bottom:1px solid #e7e9ec;
  position:sticky; top:0; z-index:20;
}
.br-nav-inner{
  max-width:1200px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:24px;
}
.br-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--br-ink);}
.br-brand img{width:44px; height:44px; object-fit:contain;}
.br-brand strong{display:block; font:800 .95rem 'Poppins',sans-serif; letter-spacing:.3px;}
.br-brand small{display:block; font-size:.68rem; color:var(--br-muted); letter-spacing:.5px;}
.br-nav-links{display:flex; gap:26px; margin-left:12px; flex:1;}
.br-nav-links a{
  text-decoration:none; color:var(--br-muted); font-weight:500; font-size:.92rem;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.br-nav-links a.active{color:var(--br-ink); border-color:var(--br-green);}
.br-nav-links a:hover{color:var(--br-green);}
.br-nav-badge{
  display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--br-muted);
  white-space:nowrap;
}
.br-nav-badge i{color:var(--br-green); font-size:1.1rem;}
.br-burger{display:none; background:none; border:0; font-size:1.5rem; color:var(--br-ink); cursor:pointer;}
.br-nav-mobile{display:none; flex-direction:column; padding:8px 24px 16px; gap:4px; background:#fff;}
.br-nav-mobile a{padding:10px 0; text-decoration:none; color:var(--br-ink); font-weight:500; border-bottom:1px solid #eef1ee;}
.br-nav-mobile a.active{color:var(--br-green);}
.br-nav-mobile.open{display:flex;}

/* HERO */
.br-hero{position:relative; overflow:hidden; border-radius:0 0 32px 32px;}
.br-hero-bg{
  position:absolute; inset:0;
  background:#0a101f url('../images/login-bg.jpg') center 30% / cover no-repeat;
}
.br-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6, 10, 20,.9) 0%, rgba(6, 10, 20,.72) 45%, rgba(6, 10, 20,.5) 100%);
}
.br-hero-inner{
  position:relative; max-width:1200px; margin:0 auto;
  padding:64px 24px 110px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;
}
.br-badge-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(28, 52, 107,.35); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:8px 16px; border-radius:999px; font-size:.85rem; font-weight:500;
  margin-bottom:18px;
}
.br-eyebrow{color:#dfe2e8; letter-spacing:4px; font-size:.85rem; font-weight:600; margin:0 0 6px;}
.br-title{
  color:#fff; font:800 clamp(2.2rem,4vw,3.4rem)/1.08 'Poppins',sans-serif;
  margin:0 0 18px; text-shadow:0 3px 16px rgba(0,0,0,.35);
}
.br-title-normal{font-size:.62em;}
.br-title-green{font-size:.62em; color:var(--br-green-light);}
.br-desc{color:rgba(255,255,255,.85); font-size:1.02rem; line-height:1.6; max-width:480px; margin:0 0 32px;}
.br-features{display:flex; gap:28px; flex-wrap:wrap;}
.br-feature{display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:#fff; font-size:.88rem; font-weight:600; max-width:150px;}
.br-feature-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(160deg, var(--br-green), var(--br-green-d));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.15rem;
}

/* LOGIN CARD */
.br-login-card{
  background:linear-gradient(180deg,#f2f3f7 0%,#ffffff 40%);
  border-radius:24px; padding:32px 30px 26px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  text-align:center;
}
.br-login-logo{width:72px; height:72px; object-fit:contain; margin-bottom:12px;}
.br-login-title{margin:0 0 6px; font:700 1.55rem/1.2 'Poppins',sans-serif; color:var(--br-ink);}
.br-login-sub{margin:0 0 22px; color:var(--br-muted); font-size:.95rem; line-height:1.5;}
.br-login-form{text-align:left;}
.br-field{position:relative; margin-bottom:14px;}
.br-field > i:first-child{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--br-muted);}
.br-field input{
  width:100%; height:52px; padding:0 46px; border:1px solid #d9dce2; border-radius:12px;
  font-size:.95rem; color:var(--br-ink); outline:none; background:#fff;
}
.br-field input::placeholder{color:#8b9a8f;}
.br-field input:focus{border-color:var(--br-green); box-shadow:0 0 0 4px rgba(28, 52, 107,.15);}
.br-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; background:none; color:var(--br-muted); cursor:pointer;}
.br-remember{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--br-ink); margin:4px 0 18px;}
.br-remember input{accent-color:var(--br-green);}
.br-login-btn{
  width:100%; height:52px; border:0; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:700 1.05rem 'Poppins',sans-serif; color:#fff;
  background:linear-gradient(90deg,var(--br-green-d),var(--br-green));
  box-shadow:0 10px 24px rgba(15, 29, 61,.35);
}
.br-login-btn:hover{filter:brightness(1.06);}
.br-login-foot{margin-top:18px; font-size:.75rem; color:var(--br-muted); text-transform:uppercase;}

/* FOOTER WAVE CAPTION */
.br-wave-caption{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:32px 24px 48px; color:var(--br-muted); font-style:italic; font-size:.95rem;
  background:var(--br-bg);
  margin-top:0;
}
.br-line{width:60px; height:1px; background:var(--br-gold);}

/* RESPONSIVE */
@media (max-width: 991px){
  .br-nav-links, .br-nav-badge{display:none;}
  .br-burger{display:block;}
  .br-hero-inner{grid-template-columns:1fr; padding:32px 20px 60px;}
  .br-hero-bg{background-image:url('../images/login-bg-sm.jpg');}
  .br-features{gap:18px;}
  .br-feature{max-width:none; flex:1 1 30%;}
}
@media (max-width: 480px){
  .br-title{font-size:1.9rem;}
  .br-login-card{padding:26px 20px 20px;}
}

/* == BERANDA BIRU 20261010 == */
.br-brand img {
    width:46px !important; height:46px !important; flex-shrink:0;
    border-radius:50% !important; object-fit:contain !important;
    background:#fff; padding:3px; box-shadow:0 2px 10px rgba(0,0,0,.25);
}
@media (max-width:900px) { .br-brand img { width:38px !important; height:38px !important; padding:2px; } }

.br-field input:-webkit-autofill,
.br-field input:-webkit-autofill:hover,
.br-field input:-webkit-autofill:focus {
    -webkit-text-fill-color:#0b2530 !important;
    -webkit-box-shadow:0 0 0 1000px #fff inset !important;
    box-shadow:0 0 0 1000px #fff inset !important;
    transition:background-color 9999s ease-in-out 0s;
}
.br-caps {
    display:flex; align-items:center; gap:8px; margin:-4px 0 12px; padding:8px 12px;
    border-radius:10px; font-size:12.5px; text-align:left;
    background:#fff6dc; border:1px solid #e8cd82; color:#6b5200;
}
.br-caps[hidden] { display:none; }
.br-login-btn:disabled { opacity:.8; cursor:not-allowed; transform:none; }
.br-spin {
    display:inline-block; width:16px; height:16px; border-radius:50%; vertical-align:-3px;
    border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff; animation:br-spin .7s linear infinite;
}
@keyframes br-spin { to { transform:rotate(360deg); } }
.br-help { margin-top:14px; font-size:12.5px; text-align:center; color:#5a6b70; line-height:1.5; }
.br-help b { color:#0b2530; font-weight:600; }

/* == BERANDA SERAGAM 20261010 == */
.br-body { background:#050f24; }

/* ---- Navbar navy ---- */
.br-nav { background:rgba(7,26,56,.92); border-bottom:1px solid rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.br-brand { color:#fff; }
.br-brand small { color:#9fb6d9; }
.br-nav-links a { color:#cfdcf0; }
.br-nav-links a.active { color:#fff; border-color:#2f6fe0; }
.br-nav-links a:hover { color:#fff; }
.br-nav-badge { color:#e6edf8; }
.br-nav-badge i { color:#6aa9ff; }
.br-burger { color:#fff; min-width:44px; min-height:44px; }
.br-nav-mobile { background:#071a38; }
.br-nav-mobile a { color:#e6edf8; border-bottom:1px solid rgba(255,255,255,.1); }
.br-nav-mobile a.active { color:#6aa9ff; }

/* ---- Hero ---- */
.br-hero { border-radius:0; }
.br-hero-bg { background-color:#050f24; }
.br-hero-bg::after { background:linear-gradient(100deg, rgba(4,16,40,.96) 0%, rgba(6,24,56,.90) 40%, rgba(8,30,66,.62) 70%, rgba(8,30,66,.45) 100%); }
.br-badge-pill { background:rgba(30,79,184,.30); border-color:rgba(106,169,255,.5); color:#eaf2ff; }
.br-eyebrow { color:#d7e2f3; }
.br-title-green { color:#6aa9ff; }
.br-feature-icon { background:linear-gradient(135deg,#2f6fe0,#1e4fb8); box-shadow:0 6px 16px rgba(0,0,0,.35); }

/* ---- Kartu login kaca navy ---- */
.br-login-card { background:linear-gradient(160deg, rgba(10,36,80,.92), rgba(6,24,58,.95));
    border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 80px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.br-login-title { color:#fff; margin-top:0; }
.br-login-sub { color:#b4c6e3; }
.br-field input { background:#0e2a55; color:#fff; border:1px solid rgba(255,255,255,.22); }
.br-field input::placeholder { color:#8ea5c8; }
.br-field input:focus { background:#13376e; border-color:#6aa9ff; box-shadow:0 0 0 3px rgba(106,169,255,.2); }
.br-field > i:first-child { color:#9fb6d9; }
.br-toggle { color:#9fb6d9; }
.br-toggle:hover { color:#fff; }
.br-field input:-webkit-autofill,
.br-field input:-webkit-autofill:hover,
.br-field input:-webkit-autofill:focus,
.br-field input:-webkit-autofill:active {
    -webkit-text-fill-color:#fff !important;
    -webkit-box-shadow:0 0 0 1000px #0e2a55 inset !important;
    box-shadow:0 0 0 1000px #0e2a55 inset !important;
    caret-color:#fff;
    transition:background-color 9999s ease-in-out 0s;
}
.br-field input:focus:-webkit-autofill {
    -webkit-box-shadow:0 0 0 1000px #13376e inset !important;
    box-shadow:0 0 0 1000px #13376e inset !important;
}
.br-remember { color:#dde7f6; }
.br-remember input { width:1.1rem; height:1.1rem; accent-color:#2f6fe0; }
.br-login-btn { background:linear-gradient(135deg,#2f6fe0,#1e4fb8); box-shadow:0 10px 26px rgba(30,79,184,.4); }
.br-login-btn:focus-visible, .br-toggle:focus-visible, .br-burger:focus-visible { outline:3px solid rgba(106,169,255,.55); outline-offset:2px; }
.br-caps { background:rgba(232,205,130,.14); border-color:rgba(232,205,130,.45); color:#f5e6b3; }
.br-help { color:#b4c6e3; }
.br-help b { color:#e6edf8; }
.br-login-foot { color:#8aa3c8; letter-spacing:1px; }

/* ---- Bagian bawah menyambung ---- */
.br-wave-caption { background:#050f24; color:#b4c6e3; }

/* ---- HP & tablet ---- */
@media (max-width:991px) {
    html { -webkit-text-size-adjust:100%; }
    .br-body { -webkit-tap-highlight-color:transparent; }
    .br-nav-inner { padding:calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px; gap:12px; justify-content:space-between; }
    .br-brand img { width:38px !important; height:38px !important; }
    .br-brand strong { font-size:.9rem; }
    .br-hero-bg::after { background:linear-gradient(180deg, rgba(4,16,40,.82) 0%, rgba(6,24,56,.92) 45%, rgba(3,14,34,.98) 100%); }
    .br-hero-inner { padding:22px max(18px, env(safe-area-inset-left)) 40px max(18px, env(safe-area-inset-right)); gap:26px; }
    .br-login-card { order:-1; padding:24px 18px 20px; border-radius:20px; box-shadow:0 18px 44px rgba(0,0,0,.5); }
    .br-login-title { font-size:1.4rem; }
    .br-login-sub { margin-bottom:18px; font-size:.9rem; }
    .br-field input { font-size:16px; height:52px; }
    .br-toggle { width:44px; height:44px; }
    .br-remember { font-size:.95rem; padding:4px 0; }
    .br-hero-text { text-align:center; }
    .br-desc { margin-left:auto; margin-right:auto; }
    .br-features { justify-content:center; text-align:left; }
    .br-wave-caption { padding:22px 18px calc(env(safe-area-inset-bottom, 0px) + 30px); font-size:.88rem; text-align:center; }
    .br-line { width:28px; flex-shrink:0; }
}
@media (max-width:480px) {
    .br-title { font-size:1.9rem; }
    .br-features { flex-direction:column; align-items:stretch; gap:10px; }
    .br-feature { flex-direction:row; align-items:center; max-width:none; flex:none; gap:12px;
        padding:10px 12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:14px; }
    .br-feature-icon { flex-shrink:0; }
}
@media (max-width:991px) and (orientation:landscape) and (max-height:520px) {
    .br-hero-inner { padding-top:12px; gap:16px; }
    .br-login-card { max-width:460px; margin:0 auto; padding:16px 18px; }
    .br-login-sub { margin-bottom:12px; }
    .br-field input { height:46px; }
    .br-login-btn { height:46px; }
}
@media (prefers-reduced-motion:reduce) { .br-spin { animation-duration:1.8s; } }