/* SERMAKAM Distribution — login / forgot / reset. Flat, square; light and dark themes (html[data-theme]).
   Desktop (>=1000px) follows the approved reference at 1536x1024: every size is expressed in "design pixels"
   (--u = 1 design px, scaled to the window). Below 1000px the layout is mobile-first: hero band + form. */
@font-face{font-family:"SD Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-Regular.woff2") format("woff2")}
@font-face{font-family:"SD Sans";font-style:normal;font-weight:500 900;font-display:swap;src:url("../fonts/inter-Medium.woff2") format("woff2")}
:root{color-scheme:light;--navy:#123B5D;--blue:#1566D6;--blue-hover:#1058BA;--link:#1566D6;--ink:#0D1B3A;--text:#17212B;--muted:#5A6B85;--line:#DDE5F0;--field:#EEF3F8;--field-line:#DBE3EC;--panel:#FAFBFD;--icon:#324A6B;--focusbg:#fff;--role:#EEF3F8;--role-hover:#E6EDF6;--on:#DCE8F8;
  --ok-bg:#E6F5EE;--ok-fg:#0B6B4C;--ok-line:#BDE3D2;--err-bg:#FBEBED;--err-fg:#9B1C2B;--err-line:#F2C5CB;
  --u:min(calc(100vw / 1536),calc(100vh / 1024))}
@media screen{:root[data-theme="dark"]{color-scheme:dark;--blue:#2F6FDB;--blue-hover:#3A7CEA;--link:#6CA6FF;--ink:#E7ECF2;--text:#E3E8EE;--muted:#8F9BAA;--line:#252E3A;--field:#161D26;--field-line:#2A3441;--panel:#0D1218;--icon:#9FB0C4;--focusbg:#1B2430;--role:#161D26;--role-hover:#1B2430;--on:rgba(76,141,246,.16);
  --ok-bg:rgba(43,180,136,.14);--ok-fg:#5FD3A8;--ok-line:rgba(43,180,136,.35);--err-bg:rgba(224,82,94,.14);--err-fg:#F58B95;--err-line:rgba(224,82,94,.38)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body.sdl{font-family:"Segoe UI",Inter,system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--panel);min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,input{font-family:inherit}
strong,b,th,legend{font-weight:500}
a{color:var(--link)}

/* ---------- mobile-first (default) ---------- */
.sdl-wrap{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.sdl-art{position:relative;color:#fff;background:#14264d;overflow:hidden;isolation:isolate}
.sdl-hero{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:50% 100%;background-repeat:no-repeat}
.sdl-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,24,48,.55),rgba(10,24,48,.15) 45%,rgba(6,16,31,.7))}
.sdl-art-in{padding:max(16px,env(safe-area-inset-top)) 20px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}
.sdl-logo-big{display:block;width:104px;height:auto;margin:6px auto 4px}
.sdl-logo-big.is-custom{background:#fff;border-radius:0;padding:6px;object-fit:contain;width:96px;height:96px}
.sdl-art h2{margin:6px 0 0;font-size:21px;line-height:1.2;font-weight:500;max-width:22em;color:#fff}
.sdl-art h2 span{display:block;color:#08A4FA;text-shadow:0 1px 8px rgba(0,20,50,.25)}
.sdl-sub{display:none;margin:8px 0 0;color:#dbe6f5;font-size:15px;line-height:1.45;max-width:34em}
.sdl-feat,.sdl-sign{display:none}

.sdl-langs{position:absolute;top:max(10px,env(safe-area-inset-top));right:12px;z-index:5;display:flex;gap:4px}
.sdl-flag{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:0;text-decoration:none;color:inherit;background:rgba(255,255,255,.14);border:1px solid transparent}
.sdl-flag svg{display:block;width:30px;height:21px;border-radius:0}
.sdl-flag.is-on{background:var(--on);border-color:#fff}
.sdl-flag:hover{background:rgba(255,255,255,.28)}
.sdl-flag.is-on:hover{background:var(--on)}

.sdl-panel{flex:1;background:var(--panel);padding:22px 20px 32px;display:flex;justify-content:center}
.sdl-card{width:100%;max-width:480px}
.sdl-card h1{margin:0;text-align:center;font-size:28px;line-height:1.15;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.sdl-hint{margin:6px 0 0;text-align:center;font-size:15px;line-height:1.45;color:var(--muted)}
.sdl-msg{border-radius:0;padding:12px 14px;font-size:14.5px;margin:16px 0 0;line-height:1.45}
.sdl-msg.ok{background:var(--ok-bg);color:var(--ok-fg);border:1px solid var(--ok-line)}
.sdl-msg.err{background:var(--err-bg);color:var(--err-fg);border:1px solid var(--err-line)}
.sdl-form{margin-top:22px}
.sdl-field{display:flex;align-items:center;gap:12px;height:54px;padding:0 6px 0 16px;margin-bottom:14px;background:var(--field);border:1px solid var(--field-line);border-radius:0;transition:border-color .15s,box-shadow .15s,background .15s}
.sdl-field:focus-within{background:var(--focusbg);border-color:var(--blue)}
.sdl-field>svg{flex:none;width:20px;height:20px;color:var(--icon)}
.sdl-field input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.sdl-field input::placeholder{color:var(--muted);opacity:1}
.sdl-eye{flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--icon);border-radius:0;display:grid;place-items:center;cursor:pointer;padding:0}
.sdl-eye svg{width:22px;height:22px}
.sdl-eye .on{display:none}.sdl-eye[aria-pressed=true] .on{display:block}.sdl-eye[aria-pressed=true] .off{display:none}
.sdl-eye:hover{color:var(--link)}
.sdl-row{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin:2px 0 14px;min-height:44px}
.sdl-row a,.sdl-links a{color:var(--link);text-decoration:none;font-weight:500;font-size:16px;display:inline-flex;align-items:center;min-height:44px}
.sdl-row a:hover,.sdl-links a:hover{text-decoration:underline}
.sdl-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:56px;border:0;border-radius:0;background:var(--blue);color:#fff;font-size:18px;font-weight:500;cursor:pointer;transition:background .15s,transform .05s;touch-action:manipulation}
.sdl-btn svg{width:22px;height:22px}
.sdl-btn:hover{background:var(--blue-hover)}
.sdl-btn:active{transform:translateY(1px)}
.sdl-btn.is-busy{opacity:.7;cursor:progress}
.sdl-btn:focus-visible,.sdl-flag:focus-visible,.sdl-eye:focus-visible,a:focus-visible,.sdl-role:focus-within{outline:3px solid rgba(21,102,214,.55);outline-offset:2px}
.sdl-or{display:flex;align-items:center;gap:14px;margin:22px 0 16px;color:var(--muted);font-size:15px}
.sdl-or::before,.sdl-or::after{content:"";flex:1;height:1px;background:var(--line)}
.sdl-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0;margin:0;padding:0;min-width:0}
.sdl-role{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:92px;padding:10px 6px;background:var(--role);border:1px solid transparent;border-radius:0;text-align:center;cursor:pointer;color:var(--ink);touch-action:manipulation;transition:background .15s,border-color .15s}
.sdl-role input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sdl-role svg{width:30px;height:30px;color:var(--link)}
.sdl-role b{font-weight:500;font-size:14px;line-height:1.2;display:flex;flex-direction:column;overflow-wrap:anywhere;hyphens:auto}
.sdl-role:hover{background:var(--role-hover)}
.sdl-role:has(input:checked){background:var(--on);border-color:var(--blue)}
.sdl-links{text-align:center;margin:12px 0 0}
.sdl-form label.sdl-lab{display:block;font-weight:500;font-size:14px;color:var(--ink);margin:0 0 6px}
.sdl-form .sdl-hint{margin:0 0 14px}
@media (max-width:400px){
  .sdl-roles{grid-template-columns:1fr}
  .sdl-role{flex-direction:row;justify-content:flex-start;gap:14px;min-height:56px;padding:8px 16px}
  .sdl-role b{flex-direction:row;gap:6px}
}
@media (min-width:480px){
  .sdl-logo-big{width:128px}.sdl-logo-big.is-custom{width:116px;height:116px}
  .sdl-art h2{font-size:26px}
  .sdl-sub{display:block}
  .sdl-art-in{padding-bottom:26px}
}
@media (min-width:640px){
  .sdl-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:20px 0 0;padding:0;width:100%;max-width:640px}
  .sdl-feat li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
  .sdl-feat .ic{width:44px;height:44px;border-radius:0;background:rgba(34,74,114,.9);display:grid;place-items:center}
  .sdl-feat .ic svg{width:22px;height:22px;color:#fff}
  .sdl-feat strong{font-size:13px;line-height:1.2;color:#fff}
  .sdl-feat em{display:none}
  .sdl-panel{padding-top:34px}
  .sdl-card h1{font-size:34px}
}

/* ---------- desktop: reference layout, scaled with --u ---------- */
@media (min-width:1000px){
  body.sdl{background:var(--panel)}
  .sdl-wrap{display:grid;grid-template-columns:52.5% 47.5%;height:100vh;height:100dvh;min-height:560px;overflow:hidden}
  .sdl-art{height:100%}
  .sdl-hero{background-position:50% 100%}
  .sdl-hero::after{background:linear-gradient(180deg,rgba(8,30,56,.12),rgba(8,30,56,0) 38%,rgba(2,22,42,.3) 80%,rgba(2,22,42,.55))}
  .sdl-art-in{position:static;padding:0;display:block}
  .sdl-logo-big{position:absolute;left:50%;top:calc(var(--u)*34);width:calc(var(--u)*252);margin:0;transform:translateX(-50%);filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}
  .sdl-logo-big.is-custom{width:calc(var(--u)*220);height:calc(var(--u)*220)}
  .sdl-art h2{position:absolute;left:0;right:0;top:calc(var(--u)*296);margin:0 auto;max-width:calc(var(--u)*600);padding:0 calc(var(--u)*20);font-size:max(26px,calc(var(--u)*41));line-height:1.145;font-weight:500;letter-spacing:-.005em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
  .sdl-sub{position:absolute;display:block;left:0;right:0;top:calc(var(--u)*443);margin:0 auto;padding:0 calc(var(--u)*20);max-width:calc(var(--u)*570);font-size:max(14px,calc(var(--u)*20));line-height:1.35;color:#e1ebf8;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .sdl-feat{position:absolute;left:calc(var(--u)*26);width:calc(var(--u)*666);bottom:calc(var(--u)*92);display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;max-width:none}
  .sdl-feat li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
  .sdl-feat .ic{width:max(44px,calc(var(--u)*60));height:max(44px,calc(var(--u)*60));border-radius:0;background:rgba(34,74,114,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);margin-bottom:calc(var(--u)*17);display:grid;place-items:center}
  .sdl-feat .ic svg{width:max(22px,calc(var(--u)*30));height:max(22px,calc(var(--u)*30))}
  .sdl-feat strong{display:block;font-size:max(12px,calc(var(--u)*17));line-height:1.18;color:#fff;font-weight:500;text-shadow:0 1px 6px rgba(0,0,0,.45)}
  .sdl-feat em{display:block;font-style:normal;margin-top:calc(var(--u)*12);padding:0 calc(var(--u)*3);font-size:max(11px,calc(var(--u)*14.5));line-height:1.3;color:#9fb8da;text-shadow:0 1px 6px rgba(0,0,0,.5)}
  .sdl-sign{position:absolute;left:calc(var(--u)*26);right:calc(var(--u)*34);bottom:calc(var(--u)*37);display:flex;align-items:center;gap:calc(var(--u)*12);color:#9fb8da;font-size:max(11px,calc(var(--u)*17));letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
  .sdl-sign i{flex:1;height:1px;background:rgba(130,170,225,.55)}
  .sdl-sign b{display:block;width:calc(var(--u)*26);height:calc(var(--u)*9);border-top:2px solid #1673EA;border-bottom:2px solid #1673EA}
  .sdl-langs{top:calc(var(--u)*28);right:calc(var(--u)*34);gap:calc(var(--u)*10)}
  .sdl-flag{width:max(44px,calc(var(--u)*46));height:max(44px,calc(var(--u)*34));border-radius:0;background:transparent}
  .sdl-flag svg{width:max(28px,calc(var(--u)*34));height:max(19px,calc(var(--u)*24));border-radius:0}
  .sdl-flag:hover{background:var(--role-hover)}
  .sdl-flag.is-on,.sdl-flag.is-on:hover{background:var(--on);border-color:transparent}
  .sdl-panel{display:block;padding:calc(var(--u)*197) 0 0;overflow-y:auto;height:100%}
  .sdl-card{width:calc(var(--u)*564);min-width:min(100%,340px);max-width:100%;margin:0 auto}
  .sdl-card h1{font-size:max(28px,calc(var(--u)*48));line-height:1.15;letter-spacing:-.012em}
  .sdl-hint{margin-top:calc(var(--u)*4);font-size:max(14px,calc(var(--u)*22));line-height:1.3}
  .sdl-msg{font-size:max(14px,calc(var(--u)*17));margin:calc(var(--u)*22) 0 0}
  .sdl-form{margin-top:calc(var(--u)*70)}
  .sdl-field{height:max(52px,calc(var(--u)*70));padding:0 calc(var(--u)*8) 0 calc(var(--u)*24);margin-bottom:calc(var(--u)*24);gap:calc(var(--u)*22);border-radius:0}
  .sdl-field>svg{width:max(18px,calc(var(--u)*24));height:max(18px,calc(var(--u)*24))}
  .sdl-field input{font-size:max(15px,calc(var(--u)*19))}
  .sdl-eye{width:max(44px,calc(var(--u)*56));height:max(44px,calc(var(--u)*56))}
  .sdl-eye svg{width:max(20px,calc(var(--u)*27));height:max(20px,calc(var(--u)*27))}
  .sdl-row{margin:calc(var(--u)*-17) 0 calc(var(--u)*23);min-height:44px}
  .sdl-row a,.sdl-links a{font-size:max(14px,calc(var(--u)*19))}
  .sdl-btn{height:max(52px,calc(var(--u)*62));font-size:max(16px,calc(var(--u)*22));gap:calc(var(--u)*12);border-radius:0}
  .sdl-btn svg{width:max(18px,calc(var(--u)*24));height:max(18px,calc(var(--u)*24))}
  .sdl-or{margin:calc(var(--u)*44) 0 calc(var(--u)*38);font-size:max(13px,calc(var(--u)*17));gap:calc(var(--u)*22)}
  .sdl-roles{gap:calc(var(--u)*17)}
  .sdl-role{min-height:max(84px,calc(var(--u)*132));gap:calc(var(--u)*10);border-radius:0}
  .sdl-role svg{width:max(26px,calc(var(--u)*38));height:max(26px,calc(var(--u)*38))}
  .sdl-role b{font-size:max(13px,calc(var(--u)*18))}
  .sdl-links{margin-top:calc(var(--u)*20)}
}
@media (min-width:1000px) and (max-width:1100px){.sdl-art h2{padding:0 24px}}
@media (min-width:1000px) and (max-height:620px){.sdl-panel{padding-top:24px}.sdl-form{margin-top:20px}.sdl-or{margin:16px 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* theme switch (sits with the language flags) */
.sdl-theme{border:1px solid transparent;cursor:pointer;padding:0;color:inherit;font:inherit}
.sdl-theme svg{width:22px;height:22px}
.sdl-theme .su{display:none}
:root[data-theme="dark"] .sdl-theme .su{display:inline}:root[data-theme="dark"] .sdl-theme .mo{display:none}
.sdl-theme:focus-visible{outline:3px solid rgba(21,102,214,.55);outline-offset:2px}
@media (min-width:1000px){.sdl-theme{color:var(--ink)}.sdl-theme svg{width:max(20px,calc(var(--u)*26));height:max(20px,calc(var(--u)*26))}}