@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');
:root{--sun:#f4d34f;--sun-deep:#e7bd2d;--ink:#282418;--muted:#807966;--cream:#fffaf0;--line:#e9dfc8;--rust:#b86443;--green:#31594b}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:'DM Sans',system-ui,sans-serif;color:var(--ink)}
.login-page{min-height:100vh;min-height:100svh;background:linear-gradient(145deg,#f7df76 0%,#f3d04b 50%,#e9bd35 100%);overflow:hidden;position:relative}
.login-stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:38px 18px 72px;position:relative;isolation:isolate;overflow:hidden}
.login-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 17% 18%,rgba(255,255,255,.5),transparent 33%),radial-gradient(ellipse at 82% 80%,rgba(255,248,214,.3),transparent 35%);z-index:-3}
.sun-orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.3);pointer-events:none;z-index:-2}.sun-orb-one{width:440px;height:440px;top:-240px;right:-120px;box-shadow:0 0 0 28px rgba(255,255,255,.045),0 0 0 58px rgba(255,255,255,.035)}.sun-orb-two{width:250px;height:250px;bottom:-160px;left:-90px;box-shadow:0 0 0 22px rgba(255,255,255,.06)}
.grain{position:absolute;inset:0;opacity:.12;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.login-card{width:min(440px,100%);position:relative;z-index:2;background:rgba(255,250,240,.96);border:1px solid rgba(255,255,255,.85);border-radius:26px;padding:35px 38px 25px;box-shadow:0 26px 70px rgba(93,67,16,.2),0 5px 16px rgba(93,67,16,.09);backdrop-filter:blur(14px);opacity:0;transform:translateY(25px) scale(.975);animation:card-arrive .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
@keyframes card-arrive{to{opacity:1;transform:translateY(0) scale(1)}}
.brand-mark{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em}.brand-mark small{display:block;font-size:8px;letter-spacing:.32em;color:#aa8e4f;margin-top:3px}.brand-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--ink);color:#f7d65a;font-family:'Playfair Display',serif;font-size:21px;font-weight:600;letter-spacing:0}
.login-eyebrow{font-size:9px;font-weight:700;letter-spacing:.24em;color:#a48a4e;margin:30px 0 8px}.login-card h1,.logout-card h1{font:600 clamp(2rem,6vw,2.55rem)/1.12 'Playfair Display',Georgia,serif;margin:0;color:#29251d;letter-spacing:-.035em}.login-card h1 span,.logout-card h1 span{color:#c98f36}.login-subtitle{font-size:13px;line-height:1.7;color:var(--muted);margin:9px 0 23px}
.login-form{display:flex;flex-direction:column;gap:9px}.login-form label{font-size:11px;font-weight:700;color:#514b3d;margin-top:7px}.input-wrap{height:51px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;background:#fffdf8;padding:0 13px;transition:border-color .2s,box-shadow .2s,transform .2s}.input-wrap:focus-within{border-color:#c69d43;box-shadow:0 0 0 4px rgba(198,157,67,.13);transform:translateY(-1px)}.input-icon{color:#b18c42;font-size:16px;width:16px;text-align:center}.input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:500 13px 'DM Sans',sans-serif}.input-wrap input::placeholder{color:#b6ae9e}.password-toggle{border:0;background:transparent;color:#88764f;cursor:pointer;padding:6px;font-size:17px}
.login-button{margin-top:15px;width:100%;min-height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border:0;border-radius:13px;background:#28271f;color:#fff8e9;font:700 13px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 9px 20px rgba(40,39,31,.17);transition:transform .2s,background .2s,box-shadow .2s}.login-button:hover{background:#3c4939;transform:translateY(-2px);box-shadow:0 13px 24px rgba(40,39,31,.2)}.login-button:active{transform:translateY(0)}.login-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.login-button b{font-size:21px;font-weight:400;color:#f2d46b}
.login-foot{display:flex;justify-content:space-between;gap:10px;margin-top:25px;padding-top:17px;border-top:1px solid #eee5d3;color:#aa9e85;font-size:8px;font-weight:700;letter-spacing:.13em}.login-foot a{color:#9b7d3e;text-decoration:none}.login-foot a:hover{text-decoration:underline}
.notice-message,.error-message,.setup-notice{border-radius:12px;padding:11px 13px;margin:0 0 14px;font-size:11px;line-height:1.55}.notice-message{background:#edf5e9;color:#3e6546;border:1px solid #d8e8d1}.error-message{background:#fff0e9;color:#984b32;border:1px solid #f4d4c5}.setup-notice{background:#fff4cf;color:#725b20;border:1px solid #f0dfa2;display:flex;flex-direction:column;gap:5px}.setup-notice strong{font-size:12px}.setup-link{color:#695018;font-weight:700;text-decoration:none;margin-top:4px}.setup-link:hover{text-decoration:underline}
.mascot-track{position:absolute;left:0;right:0;bottom:8px;height:205px;z-index:3;pointer-events:none;overflow:hidden}.mascot{position:absolute;width:clamp(106px,15vw,165px);height:auto;left:-210px;bottom:0;filter:drop-shadow(0 10px 5px rgba(92,64,16,.15));animation:mascot-cross 8.5s cubic-bezier(.42,0,.58,1) .45s both}.mascot-body{transform-origin:95px 190px;animation:body-bob .42s ease-in-out infinite alternate}.mascot-head{fill:#e9b98b;stroke:#76553d;stroke-width:2}.mascot-hair{fill:#514033}.mascot-cap{fill:#f5d35b;stroke:#8d6d2d;stroke-width:2}.mascot-neck{fill:#e0aa7b}.mascot-body-shape{fill:#e8eee2;stroke:#526c56;stroke-width:2}.mascot-apron{fill:#c78a48;stroke:#805a32;stroke-width:2}.mascot-bib{fill:#f7e7bd;stroke:#b88942;stroke-width:1.5}.mascot-satchel{fill:#b96f42;stroke:#73452e;stroke-width:2}.mascot-eye{fill:#3b3027}.mascot-smile{fill:none;stroke:#754c3b;stroke-width:2.5;stroke-linecap:round}.mascot-arm{fill:none;stroke:#e2ac7d;stroke-width:11;stroke-linecap:round;transform-origin:60px 108px}.mascot-arm-left{animation:arm-swing .42s ease-in-out infinite alternate}.mascot-arm-right{stroke-width:10;transform-origin:120px 108px;animation:arm-swing-reverse .42s ease-in-out infinite alternate}.mascot-hand{fill:#e2ac7d;stroke:#805a32;stroke-width:1.3}.mascot-broom{stroke:#805a32;stroke-width:4;stroke-linecap:round}.mascot-broom-head{fill:#d59d45;stroke:#805a32;stroke-width:1.5}.mascot-leg{fill:none;stroke:#526c56;stroke-width:10;stroke-linecap:round;transform-origin:90px 168px}.mascot-leg-left{animation:leg-left .38s ease-in-out infinite alternate}.mascot-leg-right{animation:leg-right .38s ease-in-out infinite alternate}.mascot-shoe{fill:#4c4435}.mascot-shadow ellipse{fill:rgba(99,69,20,.18);animation:shadow-pulse .42s ease-in-out infinite alternate}.sparkles{fill:#fff8d7;opacity:.9;animation:sparkle .8s ease-in-out infinite alternate}
@keyframes mascot-cross{0%{transform:translateX(0) translateY(0)}12%{transform:translateX(12vw) translateY(-4px)}45%{transform:translateX(46vw) translateY(0)}72%{transform:translateX(76vw) translateY(-3px)}100%{transform:translateX(calc(100vw + 230px)) translateY(0)}}
@keyframes body-bob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}@keyframes arm-swing{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}@keyframes arm-swing-reverse{from{transform:rotate(12deg)}to{transform:rotate(-15deg)}}@keyframes leg-left{from{transform:rotate(-16deg)}to{transform:rotate(18deg)}}@keyframes leg-right{from{transform:rotate(18deg)}to{transform:rotate(-16deg)}}@keyframes shadow-pulse{from{transform:scaleX(.9);opacity:.5}to{transform:scaleX(1.08);opacity:.9}}@keyframes sparkle{from{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.12)}}
.login-bottom-note{position:absolute;bottom:17px;right:22px;color:rgba(76,60,22,.55);font-size:8px;font-weight:700;letter-spacing:.18em;z-index:1}
.setup-card{max-width:470px}.setup-card .login-eyebrow{margin-top:23px}.setup-card .login-form{gap:6px}.setup-button-link{text-decoration:none}.setup-card .login-foot{margin-top:18px}
.logout-page{display:grid;place-items:center;padding:24px}.logout-card{width:min(420px,100%);padding:40px 30px;text-align:center;background:var(--cream);border-radius:25px;box-shadow:0 25px 65px rgba(93,67,16,.2);animation:logout-card-exit .95s ease both}.logout-card .login-eyebrow{margin-top:22px}.logout-card p:not(.login-eyebrow){font-size:13px;color:var(--muted)}.logout-check{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:#e5efdb;color:#426b45;font-size:28px;animation:check-pop .55s cubic-bezier(.2,1.5,.5,1) both}.logout-progress{height:4px;background:#eee4cb;border-radius:99px;overflow:hidden;margin:24px 0 16px}.logout-progress span{display:block;width:0;height:100%;background:#b88a37;animation:logout-progress .9s linear forwards}.logout-card a{font-size:11px;color:#987734;text-decoration:none}@keyframes check-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}@keyframes logout-card-exit{0%{opacity:0;transform:translateY(18px) scale(.98)}20%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-18px) scale(.98)}}@keyframes logout-progress{to{width:100%}}
@media(max-width:600px){.login-stage{padding:24px 16px 65px}.login-card{padding:29px 24px 22px;border-radius:22px}.login-card .login-eyebrow{margin-top:24px}.mascot-track{height:150px;bottom:0}.mascot{width:112px}.login-bottom-note{font-size:7px;right:12px;bottom:9px}.login-foot{font-size:7px}.setup-card{padding:25px 21px 20px}.setup-card .login-eyebrow{margin-top:17px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}


/* ======================================================================
   RAGILDESKA LOGIN MOTION V1.1
   Urutan: karakter masuk -> berhenti -> menyiram -> tanaman tumbuh -> kartu login muncul -> karakter keluar.
   ====================================================================== */
.login-card{
  opacity:0;filter:blur(8px);transform:translateY(28px) scale(.94);
  animation:login-card-reveal 1.15s cubic-bezier(.19,1,.22,1) 2.9s both;
}
@keyframes login-card-reveal{
  0%{opacity:0;filter:blur(8px);transform:translateY(28px) scale(.94)}
  62%{opacity:1;filter:blur(0);transform:translateY(-3px) scale(1.012)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}
}
.mascot-track{
  --mascot-stop:clamp(8px,calc(50vw - 400px),250px);
  position:absolute;left:0;right:0;top:calc(50% - 18px);bottom:auto;
  height:220px;z-index:4;pointer-events:none;overflow:visible;
}
.mascot{
  position:absolute;left:0;bottom:0;width:clamp(138px,16vw,174px);height:auto;
  opacity:0;filter:drop-shadow(0 10px 6px rgba(92,64,16,.16));transform:translateX(-230px);
  animation:mascot-sequence 7.2s cubic-bezier(.42,0,.28,1) .12s both;
}
@keyframes mascot-sequence{
  0%{opacity:0;transform:translateX(-230px)}
  5%{opacity:1;transform:translateX(-160px)}
  18%{opacity:1;transform:translateX(var(--mascot-stop))}
  38%{opacity:1;transform:translateX(var(--mascot-stop))}
  44%{opacity:1;transform:translateX(calc(var(--mascot-stop) + 28px))}
  100%{opacity:1;transform:translateX(calc(100vw + 240px))}
}
.mascot-body{transform-origin:98px 204px;animation:mascot-body-sequence 7.2s ease-in-out .12s both}
@keyframes mascot-body-sequence{
  0%,5%{transform:translateY(0) rotate(0)}
  18%{transform:translateY(-3px) rotate(-1deg)}
  20%,38%{transform:translateY(0) rotate(0)}
  44%{transform:translateY(-2px) rotate(1deg)}
  100%{transform:translateY(0) rotate(0)}
}
.mascot-head{fill:#e9b98b;stroke:#76553d;stroke-width:2}
.mascot-hair{fill:#514033}.mascot-cap{fill:#f5d35b;stroke:#8d6d2d;stroke-width:2}
.mascot-neck{fill:#e0aa7b}.mascot-body-shape{fill:#e8eee2;stroke:#526c56;stroke-width:2}
.mascot-apron{fill:#c78a48;stroke:#805a32;stroke-width:2}.mascot-bib{fill:#f7e7bd;stroke:#b88942;stroke-width:1.5}
.mascot-satchel{fill:#b96f42;stroke:#73452e;stroke-width:2}.mascot-eye{fill:#3b3027}
.mascot-smile{fill:none;stroke:#754c3b;stroke-width:2.5;stroke-linecap:round}
.mascot-arm{fill:none;stroke:#e2ac7d;stroke-width:11;stroke-linecap:round}
.mascot-hand{fill:#e2ac7d;stroke:#805a32;stroke-width:1.3}
.mascot-arm-left{transform-origin:60px 120px;animation:arm-left-timeline 7.2s ease-in-out .12s both}
@keyframes arm-left-timeline{
  0%,4%{transform:rotate(0)} 7%{transform:rotate(-15deg)} 10%{transform:rotate(15deg)}
  13%{transform:rotate(-14deg)} 16%{transform:rotate(13deg)} 18%,38%{transform:rotate(0)}
  44%{transform:rotate(12deg)} 50%{transform:rotate(-12deg)} 56%{transform:rotate(13deg)}
  62%{transform:rotate(-13deg)} 68%{transform:rotate(13deg)} 74%{transform:rotate(-12deg)}
  80%{transform:rotate(12deg)} 88%{transform:rotate(-10deg)} 100%{transform:rotate(0)}
}
.watering-arm{transform-origin:124px 119px;animation:watering-arm-sequence 7.2s ease-in-out .12s both}
@keyframes watering-arm-sequence{
  0%,18%{transform:rotate(0)} 22%{transform:rotate(-8deg)}
  27%,34%{transform:rotate(-24deg)} 39%,100%{transform:rotate(0)}
}
.watering-can-group{transform-origin:160px 143px;animation:watering-can-tip 7.2s ease-in-out .12s both}
@keyframes watering-can-tip{
  0%,21%{transform:rotate(0)} 28%,34%{transform:rotate(27deg)} 40%,100%{transform:rotate(0)}
}
.water-pour{opacity:0;animation:water-pour 7.2s linear .12s both}
@keyframes water-pour{
  0%,25%{opacity:0} 27%,35%{opacity:1} 39%,100%{opacity:0}
}
.water-pour path{stroke-dasharray:5 7;animation:water-flow 420ms linear infinite}
@keyframes water-flow{to{stroke-dashoffset:-24}}
.mascot-leg{fill:none;stroke:#526c56;stroke-width:10;stroke-linecap:round;transform-origin:96px 186px}
.mascot-leg-left{animation:leg-left-timeline 7.2s ease-in-out .12s both}
.mascot-leg-right{animation:leg-right-timeline 7.2s ease-in-out .12s both}
@keyframes leg-left-timeline{
  0%,4%{transform:rotate(0)} 7%{transform:rotate(-17deg)} 10%{transform:rotate(17deg)}
  13%{transform:rotate(-16deg)} 16%{transform:rotate(15deg)} 18%,38%{transform:rotate(0)}
  44%{transform:rotate(15deg)} 49%{transform:rotate(-17deg)} 54%{transform:rotate(17deg)}
  59%{transform:rotate(-16deg)} 64%{transform:rotate(16deg)} 69%{transform:rotate(-16deg)}
  74%{transform:rotate(17deg)} 79%{transform:rotate(-16deg)} 84%{transform:rotate(15deg)}
  90%{transform:rotate(-14deg)} 96%,100%{transform:rotate(0)}
}
@keyframes leg-right-timeline{
  0%,4%{transform:rotate(0)} 7%{transform:rotate(17deg)} 10%{transform:rotate(-17deg)}
  13%{transform:rotate(16deg)} 16%{transform:rotate(-15deg)} 18%,38%{transform:rotate(0)}
  44%{transform:rotate(-15deg)} 49%{transform:rotate(17deg)} 54%{transform:rotate(-17deg)}
  59%{transform:rotate(16deg)} 64%{transform:rotate(-16deg)} 69%{transform:rotate(16deg)}
  74%{transform:rotate(-17deg)} 79%{transform:rotate(16deg)} 84%{transform:rotate(-15deg)}
  90%{transform:rotate(14deg)} 96%,100%{transform:rotate(0)}
}
.plant-scene{
  position:absolute;left:calc(var(--mascot-stop) + 130px);bottom:0;width:88px;height:116px;z-index:1;
  transform-origin:50% 100%;animation:plant-arrive 7.2s ease-out .12s both;
}
@keyframes plant-arrive{
  0%,22%{opacity:.65;transform:translateY(7px) scale(.96)}
  30%,44%{opacity:1;transform:translateY(0) scale(1.04)}
  52%,100%{opacity:.94;transform:translateY(0) scale(1)}
}
.plant-scene svg{display:block;width:100%;height:100%;overflow:visible}
.water-stream{
  position:absolute;left:calc(var(--mascot-stop) + 166px);top:82px;width:48px;height:86px;z-index:2;
  overflow:visible;opacity:0;animation:water-stream-sequence 7.2s linear .12s both;
}
.water-stream-line{fill:none;stroke:#66c5ec;stroke-width:4.2;stroke-linecap:round;stroke-dasharray:5 7;filter:drop-shadow(0 1px 1px rgba(255,255,255,.75));animation:water-stream-flow 420ms linear infinite}
.water-stream-drop{fill:#66c5ec;stroke:#fff;stroke-width:1;animation:water-drop-pulse 420ms ease-in-out infinite alternate}
.water-stream-drop-two{animation-delay:-210ms}
@keyframes water-stream-sequence{
  0%,25%{opacity:0;transform:translateY(-7px)}
  27%,36%{opacity:1;transform:translateY(0)}
  40%,100%{opacity:0;transform:translateY(5px)}
}
@keyframes water-stream-flow{to{stroke-dashoffset:-24}}
@keyframes water-drop-pulse{from{opacity:.65;transform:translateY(-2px)}to{opacity:1;transform:translateY(3px)}}
.plant-leaves{transform-box:fill-box;transform-origin:50% 100%;transform:scale(.72);animation:plant-grow 7.2s cubic-bezier(.2,.8,.2,1) .12s both}
@keyframes plant-grow{
  0%,24%{transform:scale(.66) rotate(-3deg)} 33%{transform:scale(1.07) rotate(3deg)}
  40%,100%{transform:scale(1) rotate(0)}
}
.plant-flower{transform-box:fill-box;transform-origin:50% 50%;animation:flower-bloom 7.2s cubic-bezier(.2,1.5,.5,1) .12s both}
@keyframes flower-bloom{
  0%,30%{opacity:0;transform:scale(.1)} 38%,100%{opacity:1;transform:scale(1)}
}
.mascot-shadow ellipse{fill:rgba(99,69,20,.18);animation:shadow-sequence 650ms ease-in-out infinite alternate}
@keyframes shadow-sequence{from{transform:scaleX(.9);opacity:.5}to{transform:scaleX(1.08);opacity:.9}}
.sparkles{fill:#fff8d7;opacity:.9;animation:sparkle .8s ease-in-out infinite alternate}
.login-bottom-note{z-index:1}
@media(max-width:600px){
  .login-stage{padding:24px 16px 65px}
  .login-card{animation-delay:2.9s;padding:29px 24px 22px;border-radius:22px}
  .mascot-track{top:auto;bottom:0;height:145px;--mascot-stop:clamp(0px,calc(50vw - 260px),70px)}
  .mascot{width:112px}
  .plant-scene{left:calc(var(--mascot-stop) + 95px);width:58px;height:78px}
  .water-stream{left:calc(var(--mascot-stop) + 116px);top:42px;width:34px;height:62px}
  .login-bottom-note{font-size:7px;right:12px;bottom:9px}
  .login-foot{font-size:7px}
  .setup-card{padding:25px 21px 20px}
}
@media(prefers-reduced-motion:reduce){
  .login-card{opacity:1;filter:none;transform:none;animation:none}
  .mascot{opacity:1;transform:none;animation:none;left:calc(50% - 70px)}
  .mascot-body,.watering-arm,.watering-can-group,.water-pour,.water-stream,.water-stream-line,.water-stream-drop,.mascot-leg-left,.mascot-leg-right,.mascot-arm-left,.plant-scene,.plant-leaves,.plant-flower,.mascot-shadow ellipse,.sparkles{animation:none;transform:none;opacity:1}
  .plant-scene{left:calc(50% + 22px)}
}