/* HetWerkt.net — inloggen, ingelogd, wachtwoord vergeten
   Een inlogscherm zoals u het verwacht. Het licht erachter is het netwerk uit het logo. */

.inlog{position:relative;min-height:100svh;display:grid;place-items:center;padding:clamp(110px,16vh,160px) var(--goot) clamp(60px,9vh,100px);overflow:hidden;isolation:isolate}
.inlog::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(74,31,184,.5),transparent 70%),radial-gradient(ellipse 90% 50% at 50% 110%,rgba(74,31,184,.22),transparent 70%)}
.inlog-net{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.6s .2s;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 100%)}
.inlog-net.is-aan{opacity:1}

.inlog-kolom{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:26px}
.inlog-logo{font-size:clamp(1.5rem,5vw,1.9rem)}
.inlog-paneel{width:100%;padding:clamp(24px,5vw,36px);background:rgba(10,5,22,.62)}
.inlog-paneel h1{font-size:clamp(1.6rem,4vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.inlog-paneel h1+p{margin-top:8px;color:var(--tekst-zacht);font-size:.95rem}
.inlog-form{display:grid;gap:16px;margin-top:26px}

.ww{position:relative}
.ww input{padding-right:5.6em}
.ww-toon{position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:.5em .8em;border-radius:8px;
  font:500 .68rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tekst-dof);transition:color .25s,background .25s}
.ww-toon:hover{color:var(--tekst);background:rgba(255,255,255,.06)}

.inlog-rij{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;font-size:.88rem;color:var(--tekst-zacht)}
.inlog-rij label{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.inlog-rij input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--paars-licht)}
.inlog-rij a,.inlog-onder a{color:var(--lila);text-decoration:underline;text-decoration-color:rgba(205,191,255,.35);text-underline-offset:3px;transition:color .25s}
.inlog-rij a:hover,.inlog-onder a:hover{color:var(--tekst)}

.inlog-form .knop{width:100%;margin-top:4px;padding:.9em 1.2em;font-size:1rem}
.inlog-form .knop[disabled]{cursor:progress;transform:none;filter:saturate(.75) brightness(.92)}
.inlog-form .knop[disabled]::before{content:"";width:1em;height:1em;border-radius:50%;border:2px solid rgba(20,7,0,.28);border-top-color:#140700;animation:inlogDraai .7s linear infinite;flex:none}
@keyframes inlogDraai{to{transform:rotate(360deg)}}
.inlog-form.is-bezig .veld input{opacity:.55}

.inlog-onder{font-size:.88rem;color:var(--tekst-dof);text-align:center}

/* wachtwoord vergeten: de uitkomst */
.uitkomst{display:grid;gap:14px;margin-top:4px;animation:inlogIn .7s var(--zacht)}
.uitkomst[hidden]{display:none}
.uitkomst:focus{outline:none}
.uitkomst h2{font-size:clamp(1.35rem,3.4vw,1.7rem);font-weight:800;letter-spacing:-.035em;line-height:1.15}
.uitkomst p{color:var(--tekst-zacht);font-size:.97rem}
.uitkomst .melding{display:flex;align-items:center;gap:12px;font-size:.92rem}
.uitkomst .melding .statuslamp{flex:none}
.uitkomst-ref{font:500 .74rem var(--mono);letter-spacing:.05em;color:var(--tekst-dof);font-variant-numeric:tabular-nums}
.uitkomst .knop{width:100%;margin-top:6px;padding:.9em 1.2em;font-size:1rem}
@keyframes inlogIn{from{opacity:0;transform:translateY(12px);filter:blur(6px)}}

/* ingelogd */
.binnen{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5vh,44px)}
.binnen-logo{font-size:clamp(2rem,7.4vw,3.6rem)}
.binnen-logo .lamp{filter:drop-shadow(0 0 .18em var(--oranje-gloed))}
.binnen-brief{width:100%;padding:clamp(26px,5vw,44px);background:rgba(10,5,22,.62);display:grid;gap:16px;justify-items:start}
.binnen-brief .statuspil{margin-bottom:6px}
.binnen-brief .statuspil:hover{color:var(--tekst-zacht);border-color:var(--glas-rand)}
.binnen-brief h1{font-size:clamp(1.5rem,4.2vw,2.1rem);font-weight:700;letter-spacing:-.035em;line-height:1.15;text-wrap:balance;min-height:1.15em}
.binnen-brief p{color:var(--tekst-zacht);font-size:clamp(1rem,2vw,1.1rem);max-width:44ch}
.binnen-brief p b{color:var(--tekst);font-weight:600}
.binnen-groet{margin-top:10px}
.binnen-verder{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
.binnen-verder .verder{margin-top:0}