:root{--blue:#075fc7;--blue-bright:#0b74e5;--blue-dark:#063b80;--navy:#062a55;--yellow:#ffc928;--white:#fff;--muted:#687a91;--line:#d8e5f3;--soft-blue:#eef6ff}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}
.silama-auth{min-height:100vh;padding:18px;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--navy);background:radial-gradient(circle at 8% 12%,rgba(255,201,40,.24) 0,transparent 24%),radial-gradient(circle at 92% 88%,rgba(11,116,229,.16) 0,transparent 28%),linear-gradient(135deg,#f9fcff 0%,#eef6ff 55%,#f7fbff 100%)}
.auth-shell{width:min(1120px,100%);min-height:min(650px,calc(100vh - 36px));margin:0 auto;display:grid;grid-template-columns:.92fr 1.08fr;overflow:hidden;background:rgba(255,255,255,.98);border:1px solid rgba(168,196,225,.72);border-top:5px solid var(--yellow);border-radius:26px;box-shadow:0 22px 65px rgba(6,42,85,.16)}
.auth-shell.compact{max-width:1040px;min-height:min(610px,calc(100vh - 36px))}
.auth-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:46px 50px;color:#fff;background:linear-gradient(145deg,rgba(3,44,101,.98),rgba(8,105,211,.96)),var(--blue-dark)}
.auth-brand:before,.auth-brand:after{position:absolute;content:"";border-radius:50%;pointer-events:none}.auth-brand:before{width:430px;height:430px;right:-270px;bottom:-245px;border:54px solid rgba(255,255,255,.11)}.auth-brand:after{width:245px;height:245px;right:-135px;bottom:-135px;border:32px solid rgba(255,201,40,.22)}
.brand-logo{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:275px;max-width:100%;min-height:105px;margin:0 0 28px;padding:14px 20px;background:#fff;border:3px solid var(--yellow);border-radius:18px;box-shadow:0 14px 28px rgba(1,29,66,.2)}.brand-logo img{display:block;max-width:100%;max-height:76px;object-fit:contain}
.eyebrow{position:relative;z-index:1;margin:0 0 9px;color:var(--yellow);font-size:13px;font-weight:800;letter-spacing:2.5px}.eyebrow.blue{color:var(--blue);letter-spacing:2px}
.auth-brand h1{position:relative;z-index:1;margin:0 0 16px;font-size:clamp(37px,4vw,46px);line-height:1.05;letter-spacing:-.8px}.auth-brand h1 span{display:block;margin-top:5px;color:var(--yellow)}
.brand-copy{position:relative;z-index:1;max-width:450px;margin:0 0 20px;color:rgba(255,255,255,.92);font-size:16px;line-height:1.6}.benefits{position:relative;z-index:1;list-style:none;padding:0;margin:0}.benefits li{margin:10px 0;font-size:14px;font-weight:700;line-height:1.4}.benefits i{margin-right:10px;color:var(--yellow)}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:42px 52px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}.auth-form-wrap{width:min(100%,445px)}
.lock-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin:0 0 18px;color:var(--blue);font-size:23px;background:var(--soft-blue);border:1px solid #dcecff;border-radius:16px}
.auth-panel h2{margin:0 0 7px;font-size:clamp(32px,3.4vw,39px);line-height:1.12;letter-spacing:-.7px}.subtitle{margin:0 0 23px;color:var(--muted);font-size:16px;line-height:1.5}.auth-panel label{display:block;margin:14px 0 7px;font-size:14px;font-weight:800}
.field{height:59px;display:flex;align-items:center;overflow:hidden;background:#f8fbff;border:1.5px solid var(--line);border-radius:13px;transition:border-color .2s,box-shadow .2s,background .2s}.field:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 0 0 4px rgba(7,95,199,.1)}.field>i{width:50px;flex:0 0 50px;color:#6d8db1;font-size:17px;text-align:center}
.field input{min-width:0;flex:1;padding:0 10px 0 0;color:var(--navy);background:transparent;border:0;outline:0;font:600 15px Inter,"Segoe UI",Arial,sans-serif}.field input::placeholder{color:#8a9aae}.toggle-password{width:52px;height:100%;flex:0 0 52px;color:#416f9f;background:transparent;border:0;cursor:pointer;font-size:17px}.toggle-password:hover{color:var(--blue);background:#f0f7ff}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:17px 3px;font-size:14px}.form-options .remember{display:flex;align-items:center;margin:0;font-weight:700}.remember input{width:17px;height:17px;margin:0 8px 0 0;accent-color:var(--blue)}
a{color:var(--blue);font-weight:800;text-decoration:none}a:hover{text-decoration:underline}.primary-button{width:100%;height:57px;color:#fff;background:linear-gradient(100deg,var(--blue-dark),var(--blue-bright));border:0;border-bottom:3px solid rgba(4,41,91,.28);border-radius:13px;box-shadow:0 12px 24px rgba(7,87,184,.22);cursor:pointer;font:800 16px Inter,"Segoe UI",Arial,sans-serif;transition:transform .2s,box-shadow .2s}.primary-button:hover{transform:translateY(-2px);box-shadow:0 16px 28px rgba(7,87,184,.29)}.primary-button:disabled{opacity:.7;cursor:wait;transform:none}.primary-button i{margin-left:10px}
.notice{margin:0 0 16px;padding:12px 14px;border-radius:11px;font-size:14px;line-height:1.45}.notice.error{color:#a11818;background:#fff0f0;border:1px solid #f2b6b6}.notice.success{color:#176a3a;background:#ecfbf2;border:1px solid #9bdfb6}.field-error{margin:6px 2px;color:#b31b1b;font-size:12px}.security-note,.copyright{color:var(--muted);font-size:12px;line-height:1.45;text-align:center}.security-note{margin:18px 0 8px}.copyright{margin:0}.back-link{display:block;margin-top:20px;text-align:center}
@media(max-height:720px) and (min-width:901px){.silama-auth{padding:10px}.auth-shell{min-height:calc(100vh - 20px)}.auth-brand{padding:30px 42px}.brand-logo{width:235px;min-height:82px;margin-bottom:18px;padding:10px 16px}.brand-logo img{max-height:60px}.auth-brand h1{font-size:38px;margin-bottom:12px}.brand-copy{margin-bottom:12px;font-size:14px}.benefits li{margin:6px 0;font-size:13px}.auth-panel{padding:28px 46px}.lock-icon{width:46px;height:46px;margin-bottom:12px;font-size:20px}.auth-panel h2{font-size:32px}.subtitle{margin-bottom:16px;font-size:14px}.auth-panel label{margin-top:10px}.field{height:52px}.form-options{margin:13px 3px}.primary-button{height:52px}.security-note{margin-top:12px}}
@media(max-width:900px){.silama-auth{padding:12px}.auth-shell,.auth-shell.compact{width:min(100%,680px);min-height:0;grid-template-columns:1fr}.auth-brand{padding:32px 36px}.brand-logo{width:235px;min-height:88px;margin-bottom:20px}.brand-logo img{max-height:62px}.auth-brand h1{font-size:36px}.brand-copy{margin-bottom:0;font-size:15px}.benefits{display:none}.auth-panel{padding:34px 36px}.auth-panel h2{font-size:32px}}
@media(max-width:520px){.silama-auth{padding:0;background:#fff}.auth-shell,.auth-shell.compact{width:100%;border:0;border-radius:0;box-shadow:none}.auth-brand{padding:26px 22px}.brand-logo{width:205px;min-height:76px;margin-bottom:16px;padding:10px 14px}.brand-logo img{max-height:54px}.eyebrow{font-size:11px;letter-spacing:1.8px}.auth-brand h1{margin-bottom:10px;font-size:31px}.brand-copy{font-size:14px;line-height:1.5}.auth-panel{padding:30px 22px 34px}.lock-icon{width:48px;height:48px;margin-bottom:14px}.auth-panel h2{font-size:30px}.subtitle{margin-bottom:20px;font-size:14px}.field{height:55px}.form-options{align-items:flex-start;flex-direction:column;gap:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* SILAMA V2.3.1 - halaman masuk mengikuti identitas familiar SILAMA lama */
.silama-auth-familiar{background:radial-gradient(circle at 8% 12%,rgba(255,201,40,.32) 0,transparent 26%),radial-gradient(circle at 92% 88%,rgba(11,116,229,.15) 0,transparent 30%),linear-gradient(135deg,#fffdf3 0%,#eef6ff 58%,#f8fbff 100%)}
.silama-auth-familiar .auth-shell{border-top-color:#0757bd;box-shadow:0 24px 70px rgba(6,42,85,.18)}
.silama-auth-familiar .auth-brand{color:#073d83;background:radial-gradient(circle at 110% 100%,rgba(255,255,255,.27) 0 190px,transparent 192px),linear-gradient(145deg,#ffdf43,#ffcb12)}
.silama-auth-familiar .auth-brand:before{border-color:rgba(7,87,189,.11)}
.silama-auth-familiar .auth-brand:after{border-color:rgba(7,87,189,.18)}
.silama-auth-familiar .brand-logo{width:380px;min-height:126px;margin-bottom:25px;padding:0;border:0;background:transparent;box-shadow:none;justify-content:flex-start}
.silama-auth-familiar .brand-logo img{width:100%;height:auto;max-height:126px;object-fit:contain;object-position:left center;filter:drop-shadow(0 5px 8px rgba(5,54,112,.14))}
.silama-auth-familiar .eyebrow{color:#064cad}
.silama-auth-familiar .auth-brand h1{color:#053f8e}
.silama-auth-familiar .auth-brand h1 span{color:#075fc7}
.silama-auth-familiar .brand-copy{color:#244d7b}
.silama-auth-familiar .benefits li{color:#093f82}
.silama-auth-familiar .benefits i{color:#075fc7}
.silama-auth-familiar .auth-panel{background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)}
.silama-auth-familiar .primary-button{border-bottom-color:#f0b600;background:linear-gradient(100deg,#06449b,#0878db)}
@media(max-height:720px) and (min-width:901px){.silama-auth-familiar .brand-logo{width:320px;min-height:92px}.silama-auth-familiar .brand-logo img{max-height:92px}}
@media(max-width:900px){.silama-auth-familiar .brand-logo{width:310px;min-height:102px}.silama-auth-familiar .brand-logo img{max-height:102px}}
@media(max-width:520px){.silama-auth-familiar .brand-logo{width:270px;min-height:90px}.silama-auth-familiar .brand-logo img{max-height:90px}}