html,body{width:100%;overflow-x:hidden;position:relative;margin:0;padding:0;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}.hide-scrollbar::-webkit-scrollbar{display:none}.hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.pb-safe{padding-bottom:env(safe-area-inset-bottom,20px)!important}.mb-safe{margin-bottom:env(safe-area-inset-bottom,20px)!important}.pt-safe{padding-top:env(safe-area-inset-top,0px)!important}.retro-shadow{box-shadow:0 8px 32px #0000001a}.retro-card{background:linear-gradient(135deg,#f2e8cf,#fff)}.menu-card:hover{transform:translateY(-4px);transition:all .3s ease}.status-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500}.status-hadir{background:#6a994e;color:#fff}.status-izin{background:#ff9248;color:#fff}.status-sakit{background:#d1495b;color:#fff}.status-alpa{background:#556b2f;color:#fff}.calendar-day{min-height:120px;border:2px solid #F2E8CF}.calendar-day.today{border-color:#ff9248;background:#ff92481a}@media(max-width:768px){.calendar-day{min-height:80px;font-size:12px}.retro-banner{height:auto;min-height:180px}.retro-text-glow{font-size:1.2rem}.menu-card{padding:1rem}.menu-card .text-6xl{font-size:2.5rem}.menu-card h3{font-size:1rem}.status-badge{font-size:10px;padding:2px 8px}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.mobile-form-grid{grid-template-columns:1fr;gap:1rem}.mobile-chart{height:250px}body{padding-bottom:calc(120px + env(safe-area-inset-bottom))}}@media(max-width:480px){.calendar-day{min-height:60px;font-size:10px;padding:.5rem}}.retro-banner{position:relative;overflow:hidden;background:linear-gradient(to bottom,#87ceeb,#98d8e8);animation:skyColorCycle 30s ease-in-out infinite}@keyframes skyColorCycle{0%{background:linear-gradient(to bottom,#ff6b6b,#ffb347,#ffe66d 40%,#87ceeb)}16.67%{background:linear-gradient(to bottom,#ffb347,#ffe66d 30%,#87ceeb 70%,#b8e6b8)}33.33%{background:linear-gradient(to bottom,#87ceeb,#98d8e8,#b8e6b8 80%,#90ee90)}50%{background:linear-gradient(to bottom,#87ceeb,#98d8e8,#b8e6b8 80%,#90ee90)}66.67%{background:linear-gradient(to bottom,#ff6b6b,#ffb347,#ffe66d,orange,#87ceeb)}83.33%{background:linear-gradient(to bottom,#2c3e50,#34495e,#4a6741 60%,#2f4f4f)}to{background:linear-gradient(to bottom,#0f1419,#1a252f,#2c3e50 80%,#1c1c2e)}}.retro-banner:before{content:"";position:absolute;bottom:0;left:0;right:0;height:70%;background:radial-gradient(ellipse 200px 80px at 20% 60%,#6b8e5a,#5a7a49),radial-gradient(ellipse 180px 70px at 80% 65%,#6b8e5a,#5a7a49),radial-gradient(ellipse 150px 90px at 35% 50%,#4a6741,#3a5233),radial-gradient(ellipse 160px 85px at 65% 55%,#4a6741,#3a5233),radial-gradient(ellipse 120px 100px at 15% 40%,#2c5530,#1f3d23),radial-gradient(ellipse 140px 110px at 50% 35%,#2c5530,#1f3d23),radial-gradient(ellipse 130px 95px at 85% 45%,#2c5530,#1f3d23);clip-path:polygon(0% 100%,0% 65%,8% 50%,15% 55%,22% 40%,28% 45%,35% 30%,42% 35%,48% 25%,52% 30%,58% 20%,65% 25%,72% 15%,78% 20%,85% 35%,92% 40%,100% 30%,100% 100%);z-index:1;filter:drop-shadow(0 3px 12px rgba(0,0,0,.4));animation:mountainSway 20s ease-in-out infinite alternate}@keyframes mountainSway{0%{transform:translate(0) scaleX(1)}to{transform:translate(1px) scaleX(1.005)}}.retro-banner:after{content:"";position:absolute;bottom:0;left:0;right:0;height:50%;background:radial-gradient(ellipse 15px 45px at 5% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 18px 50px at 12% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 12px 40px at 18% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 20px 55px at 25% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 16px 48px at 32% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 14px 42px at 38% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 22px 58px at 45% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 17px 47px at 52% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 19px 52px at 58% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 13px 38px at 65% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 21px 56px at 72% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 15px 44px at 78% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 18px 49px at 85% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 16px 46px at 92% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 14px 41px at 97% 100%,#0F3A0F 0%,#0F3A0F 80%,transparent 81%),radial-gradient(ellipse 10px 35px at 8% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 12px 38px at 15% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 14px 42px at 22% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 11px 36px at 29% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 16px 45px at 36% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 13px 39px at 43% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 15px 43px at 50% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 12px 37px at 57% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 17px 47px at 64% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 14px 41px at 71% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 11px 35px at 78% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 16px 44px at 85% 100%,#083308 0%,#083308 85%,transparent 86%),radial-gradient(ellipse 13px 40px at 92% 100%,#083308 0%,#083308 85%,transparent 86%);z-index:2;animation:forestSway 12s ease-in-out infinite alternate;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}.sun{position:absolute;width:70px;height:70px;background:radial-gradient(circle,gold,orange 70%,#ff8c00);border-radius:50%;z-index:3;animation:sunMovement 30s ease-in-out infinite;box-shadow:0 0 30px #ffd700cc}@keyframes sunMovement{0%{left:48%;top:75%;opacity:.3;transform:scale(.5);box-shadow:0 0 15px #ff8c0066}16.67%{left:50%;top:55%;opacity:.8;transform:scale(.8);box-shadow:0 0 20px #ffd70099}33.33%{left:50%;top:15%;opacity:1;transform:scale(1.2);box-shadow:0 0 40px gold}50%{left:50%;top:10%;opacity:1;transform:scale(1.3);box-shadow:0 0 50px gold}66.67%{left:52%;top:45%;opacity:.9;transform:scale(1);box-shadow:0 0 35px #ff8c00cc}83.33%{left:54%;top:70%;opacity:.4;transform:scale(.6);box-shadow:0 0 15px #ff450080}to{left:55%;top:85%;opacity:0;transform:scale(.3);box-shadow:0 0 5px #ff450033}}.moon{position:absolute;width:55px;height:55px;background:radial-gradient(circle at 35% 35%,#fffacd,beige 40%,#e6e6fa);border-radius:50%;z-index:3;opacity:0;animation:moonMovement 30s ease-in-out infinite;box-shadow:0 0 25px #f5f5dccc}.moon:before{content:"";position:absolute;top:8px;left:12px;width:6px;height:6px;background:#d3d3d3;border-radius:50%;box-shadow:15px 5px 0 -1px #d3d3d3,8px 15px 0 -2px #d3d3d3,20px 18px 0 -1px #d3d3d3,5px 25px 0 -2px #d3d3d3}@keyframes moonMovement{0%,66.67%{left:25%;top:95%;opacity:0;transform:scale(.3) rotate(0)}83.33%{left:30%;top:35%;opacity:.7;transform:scale(.8) rotate(10deg)}to{left:70%;top:20%;opacity:1;transform:scale(1) rotate(15deg)}}.stars{position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;opacity:0;animation:starsAppear 18s ease-in-out infinite}.star{position:absolute;background:#fff;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:starTwinkle 3s ease-in-out infinite alternate}.star:nth-child(1){width:8px;height:8px;top:15%;left:20%;animation-delay:0s}.star:nth-child(2){width:6px;height:6px;top:25%;left:80%;animation-delay:.5s}.star:nth-child(3){width:10px;height:10px;top:20%;left:60%;animation-delay:1s}.star:nth-child(4){width:7px;height:7px;top:35%;left:15%;animation-delay:1.5s}.star:nth-child(5){width:9px;height:9px;top:30%;left:85%;animation-delay:2s}.star:nth-child(6){width:5px;height:5px;top:40%;left:45%;animation-delay:2.5s}.star:nth-child(7){width:8px;height:8px;top:18%;left:35%;animation-delay:.3s}.star:nth-child(8){width:6px;height:6px;top:28%;left:70%;animation-delay:.8s}@keyframes starsAppear{0%,66.67%{opacity:0}83.33%,to{opacity:1}}@keyframes starTwinkle{0%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.3) rotate(180deg)}to{opacity:.6;transform:scale(1) rotate(360deg)}}.animals{position:absolute;bottom:30%;left:0;right:0;height:20%;z-index:4}.bird{position:absolute;width:18px;height:6px;background:#000;clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%);animation:birdFly 15s linear infinite}.bird:nth-child(1){top:10%;animation-delay:0s}.bird:nth-child(2){top:25%;animation-delay:3s}.bird:nth-child(3){top:40%;animation-delay:6s}.bird:nth-child(4){top:15%;animation-delay:9s}.bird:nth-child(5){top:35%;animation-delay:12s}@keyframes birdFly{0%{left:-25px;transform:scaleY(1) scaleX(1)}20%{transform:scaleY(.7) scaleX(1.1)}40%{transform:scaleY(1.3) scaleX(.9)}60%{transform:scaleY(.8) scaleX(1.2)}80%{transform:scaleY(1.1) scaleX(.95)}to{left:105%;transform:scaleY(1) scaleX(1)}}.deer{position:absolute;bottom:0;left:12%;width:28px;height:22px;background:#000;clip-path:polygon(15% 100%,15% 65%,10% 45%,20% 25%,30% 20%,40% 25%,50% 18%,60% 25%,70% 20%,80% 25%,85% 45%,80% 65%,80% 100%,70% 100%,70% 75%,50% 75%,50% 100%,30% 100%,30% 75%,25% 75%,25% 100%);animation:deerMove 20s ease-in-out infinite}@keyframes deerMove{0%,60%{left:12%;transform:scaleX(1)}70%{left:18%;transform:scaleX(1)}80%{left:25%;transform:scaleX(1)}90%{left:20%;transform:scaleX(-1)}to{left:12%;transform:scaleX(1)}}.rabbit{position:absolute;bottom:2px;right:18%;width:16px;height:14px;background:#000;border-radius:50%/60% 60% 40% 40%;animation:rabbitHop 12s ease-in-out infinite}.rabbit:before{content:"";position:absolute;top:-9px;left:9px;width:3px;height:11px;background:#000;border-radius:50%}.rabbit:after{content:"";position:absolute;top:-9px;left:4px;width:3px;height:11px;background:#000;border-radius:50%}@keyframes rabbitHop{0%,70%{right:18%;bottom:2px;transform:scaleX(1)}75%{right:14%;bottom:10px;transform:scaleX(1)}80%{right:10%;bottom:2px;transform:scaleX(1)}85%{right:8%;bottom:8px;transform:scaleX(1)}90%{right:6%;bottom:2px;transform:scaleX(1)}95%{right:8%;bottom:6px;transform:scaleX(-1)}to{right:12%;bottom:2px;transform:scaleX(-1)}}.bear{position:absolute;bottom:0;left:75%;width:35px;height:25px;background:#000;border-radius:40% 40% 20% 20%;animation:bearWalk 25s ease-in-out infinite}.bear:before{content:"";position:absolute;top:-8px;left:25px;width:12px;height:12px;background:#000;border-radius:50%}.bear:after{content:"";position:absolute;top:-5px;left:28px;width:4px;height:4px;background:#000;border-radius:50%}@keyframes bearWalk{0%,80%{left:75%;transform:scaleX(1)}90%{left:70%;transform:scaleX(1)}95%{left:68%;transform:scaleX(-1)}to{left:72%;transform:scaleX(-1)}}.owl{position:absolute;top:5%;right:15%;width:20px;height:18px;background:#000;border-radius:50% 50% 20% 20%;animation:owlHoot 8s ease-in-out infinite;opacity:0}.owl:before{content:"";position:absolute;top:-6px;left:2px;width:6px;height:8px;background:#000;clip-path:polygon(0% 100%,50% 0%,100% 100%)}.owl:after{content:"";position:absolute;top:-6px;right:2px;width:6px;height:8px;background:#000;clip-path:polygon(0% 100%,50% 0%,100% 100%)}@keyframes owlHoot{0%,66.67%{opacity:0;transform:scale(1)}83.33%{opacity:1;transform:scale(1.1)}90%{opacity:1;transform:scale(.9)}95%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.retro-text-glow{text-shadow:0 2px 10px rgba(0,0,0,.3);animation:textFloat 3s ease-in-out infinite alternate;position:relative;z-index:5}@keyframes textFloat{0%{transform:translateY(0)}to{transform:translateY(-3px)}}