/* Halaman login: kotak di tengah, logo di atas, latar foto toko + animasi barang tertata */
.lg-body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;position:relative;overflow:hidden;background:#0b3d1f;font-family:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
.lg-bg{position:fixed;inset:0;z-index:0;background:#0b3d1f url('../img/login-bg.jpg') center/cover no-repeat;animation:lgzoom 38s ease-in-out infinite alternate;transform-origin:50% 60%}
.lg-body::before{content:"";position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,40,20,.55) 0%,rgba(6,40,20,.35) 45%,rgba(6,40,20,.72) 100%)}
@keyframes lgzoom{from{transform:scale(1)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}}
@media (max-width:700px){.lg-bg{background-image:url('../img/login-bg-sm.jpg');background-position:40% center}}

.lg-wrap{position:relative;z-index:3;width:100%;padding:16px;min-height:100vh;min-height:100dvh;box-sizing:border-box;display:grid;place-items:center}
.lg-card{width:min(320px,100%);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:20px;padding:18px 20px 14px;box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.35);animation:lgin .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes lgin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.lg-logo{display:block;width:100%;max-width:240px;margin:0 auto 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.lg-form{display:flex;flex-direction:column;gap:11px}
.lg-form h1{margin:0;font-size:19px;text-align:center}
.lg-form .sub{margin:-6px 0 2px;text-align:center;font-size:13px;color:#5b6b61}
.lg-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:#33423a;position:relative}
.lg-form input{height:44px;font-size:15px;padding:0 12px;border:1px solid #cfd8d2;border-radius:10px;background:#fff;width:100%;box-sizing:border-box}
.lg-form input:focus{outline:none;border-color:#13923f;box-shadow:0 0 0 3px rgba(19,146,63,.18)}
.lg-form .btn.lg{height:46px;font-size:15px;justify-content:center}
.lg-form small{text-align:center;color:#7a877f}
.lg-form .alert{margin:0}

/* rak: barang-barang jatuh satu per satu lalu tertata rapi, berulang pelan */
.lg-shelf{position:fixed;left:0;right:0;bottom:0;z-index:2;height:128px;display:flex;justify-content:center;align-items:flex-end;padding:0 8px 16px;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.lg-shelf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(180deg,#5fd48a,#13923f 55%,#0b6a2c);box-shadow:0 -2px 10px rgba(0,0,0,.35)}
.it{position:relative;flex:0 0 auto;margin:0 clamp(2px,.55vw,9px);margin-bottom:0;transform-origin:50% 100%;opacity:0;animation:lgdrop 11s cubic-bezier(.25,1.2,.4,1) infinite;animation-delay:calc(var(--i)*.34s)}
@keyframes lgdrop{
  0%{opacity:0;transform:translateY(-170px) rotate(var(--r,0deg))}
  6%{opacity:1;transform:translateY(0) rotate(0)}
  8%{transform:translateY(-7px) scaleY(1.03)}
  10%{transform:translateY(0) scaleY(.97)}
  12%{transform:translateY(0) scaleY(1)}
  80%{opacity:1;transform:none}
  92%,100%{opacity:0;transform:translateY(6px)}}
.it::before,.it::after{content:"";position:absolute}
/* kaleng */
.it.can{width:34px;height:54px;border-radius:7px 7px 5px 5px;background:linear-gradient(90deg,var(--c),var(--l) 38%,var(--c) 72%,var(--d))}
.it.can::before{left:0;right:0;top:36%;height:26%;background:rgba(255,255,255,.88);border-top:2px solid var(--d);border-bottom:2px solid var(--d)}
.it.can::after{left:3px;right:3px;top:-3px;height:5px;border-radius:3px;background:#cfd6d2}
/* botol */
.it.bottle{width:26px;height:74px;border-radius:10px 10px 6px 6px;background:linear-gradient(90deg,var(--c),var(--l) 40%,var(--c) 75%,var(--d))}
.it.bottle::before{left:8px;width:10px;top:-15px;height:17px;border-radius:3px 3px 0 0;background:var(--d)}
.it.bottle::after{left:0;right:0;top:34%;height:30%;background:rgba(255,255,255,.9)}
/* kotak / dus */
.it.box{width:50px;height:42px;border-radius:4px;background:linear-gradient(135deg,var(--l),var(--c) 55%,var(--d))}
.it.box::before{left:0;right:0;top:0;height:9px;background:rgba(255,255,255,.35);border-radius:4px 4px 0 0}
.it.box::after{left:9px;right:9px;bottom:8px;height:12px;border-radius:3px;background:rgba(255,255,255,.88)}
/* kantong snack */
.it.bag{width:44px;height:60px;background:linear-gradient(90deg,var(--c),var(--l) 45%,var(--d));clip-path:polygon(7% 0,10% 4%,13% 0,16% 4%,19% 0,22% 4%,25% 0,28% 4%,31% 0,34% 4%,37% 0,40% 4%,43% 0,46% 4%,49% 0,52% 4%,55% 0,58% 4%,61% 0,64% 4%,67% 0,70% 4%,73% 0,76% 4%,79% 0,82% 4%,85% 0,88% 4%,91% 0,93% 4%,100% 100%,0 100%)}
.it.bag::before{left:20%;right:20%;top:38%;height:30%;border-radius:50%;background:rgba(255,255,255,.9)}
/* toples */
.it.jar{width:38px;height:40px;border-radius:6px 6px 8px 8px;background:linear-gradient(90deg,var(--c),var(--l) 40%,var(--c) 75%,var(--d))}
.it.jar::before{left:-2px;right:-2px;top:-8px;height:10px;border-radius:4px;background:#e7c20a}
.it.jar::after{left:5px;right:5px;top:14px;height:14px;border-radius:3px;background:rgba(255,255,255,.9)}
@media (max-width:700px){.lg-shelf{height:104px}.it{transform-origin:50% 100%;zoom:.78}.it:nth-child(n+11){display:none}.lg-wrap{padding-bottom:110px}}
@media (max-width:420px){.it:nth-child(n+9){display:none}}
@media (prefers-reduced-motion:reduce){.lg-bg,.it,.lg-card{animation:none!important}.it{opacity:1!important}}

.lg-body,.lg-body input,.lg-body button,.lg-body a{font-family:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif}
.lg-form{gap:9px}
.lg-form label{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#5b6b61;gap:5px}
.lg-form input{height:40px;font-size:14.5px;font-weight:500;letter-spacing:.01em;color:#16241c;background:#f5f8f6;border:1.5px solid #e1e8e3;border-radius:12px;padding:0 13px;transition:border-color .15s,box-shadow .15s,background .15s}
.lg-form input::placeholder{color:#a3b0a8;font-weight:400}
.lg-form input:focus{background:#fff}
.lg-form .btn.lg{height:42px;font-size:14px;font-weight:700;letter-spacing:.02em;border-radius:12px}
.lg-card small,.lg-card a{font-size:12px}
@media (max-width:700px){.lg-wrap{padding-bottom:16px}}
.lg-card{width:min(352px,100%);padding:18px 18px 14px}
.lg-form .cf-turnstile,.lg-form [id^=cf-chl-widget],.lg-form>div:has(iframe){width:300px;max-width:100%;margin:0 auto;overflow:hidden;border-radius:8px}
.lg-form .cf-turnstile iframe{max-width:100%}
@media (max-width:360px){.lg-form .cf-turnstile{transform:scale(.88);transform-origin:0 0;margin-bottom:-12px}}