/* Powered by Suryo DwiJayanto
   sPanel ID - github
   02/06/2026
*/
:root{--bg-color:#ffffff;--card-bg:#f8fafc;--accent-color:#ea580c;--accent-glow:rgba(234, 88, 12, 0.3);--text-main:#0f172a;--text-muted:#475569;--gradient:linear-gradient(135deg, #ea580c 0%, #ff7e47 100%);--card-border:rgba(15, 23, 42, 0.06)}*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;-webkit-tap-highlight-color:#fff0}body{background-color:var(--bg-color);color:var(--text-main);overflow-x:hidden;line-height:1.6;position:relative;min-height:100vh}a {color: var(--accent-color);text-decoration: none}.particle-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}.particle{position:absolute;bottom:-20px;background:radial-gradient(circle,rgb(234 88 12 / .7) 0%,#fff0 70%);border-radius:50%;animation:floatUp 10s linear infinite}@keyframes floatUp{0%{transform:translateY(0) scale(.3);opacity:0}10%{opacity:.8}90%{opacity:.4}100%{transform:translateY(-110vh) scale(1.2);opacity:0}}.container{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:40px 20px}@keyframes fadeInUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{from{opacity:0;transform:translateY(-25px)}to{opacity:1;transform:translateY(0)}}header{text-align:center;margin-bottom:50px;animation:fadeInDown 0.8s ease-out forwards}.profile-img-container{position:relative;width:150px;height:150px;margin:0 auto 25px}.profile-img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid var(--accent-color);box-shadow:0 10px 25px var(--accent-glow);transition:transform 0.5s ease,box-shadow 0.5s ease}.profile-img:hover{transform:scale(1.05) rotate(5deg);box-shadow:0 15px 30px rgb(234 88 12 / .5)}h1{font-size:2.7rem;font-weight:700;margin-bottom:15px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:#fff0}.description{color:var(--text-muted);font-size:1.1rem;max-width:650px;margin:0 auto;text-align:center;font-weight:400}section{background:var(--card-bg);border-radius:20px;padding:30px;margin-bottom:30px;box-shadow:0 10px 25px rgb(15 23 42 / .04);border:1px solid var(--card-border);transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;opacity:0;animation:fadeInUp 0.6s ease-out forwards}section:nth-of-type(1){animation-delay:0.1s}section:nth-of-type(2){animation-delay:0.2s}section:nth-of-type(3){animation-delay:0.3s}section:nth-of-type(4){animation-delay:0.4s}section:nth-of-type(5){animation-delay:0.5s}section:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgb(234 88 12 / .08);border-color:rgb(234 88 12 / .2)}h2{font-size:1.3rem;margin-bottom:25px;text-align:center;position:relative;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent-color);font-weight:700}.slider-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.slider-container{width:100%;overflow-x:auto;scroll-behavior:smooth;display:flex;gap:15px;padding:10px 5px;scrollbar-width:none}.slider-container::-webkit-scrollbar{display:none}.slider-item{flex:0 0 calc(33.333% - 10px);aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;cursor:pointer;border:2px solid var(--card-border);transition:transform 0.3s ease,border-color 0.3s ease}.slider-item:hover{transform:scale(1.03);border-color:var(--accent-color)}.slider-item img{width:100%;height:100%;object-fit:cover}.slider-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgb(255 255 255 / .9);border:1px solid var(--card-border);color:var(--text-main);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 10px rgb(0 0 0 / .1);z-index:2;transition:background 0.3s,color 0.3s,transform 0.2s}.slider-nav:hover{background:var(--accent-color);color:#fff}.slider-nav:active{transform:translateY(-50%) scale(.95)}.slider-nav.prev{left:-15px}.slider-nav.next{right:-15px}.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(15 23 42 / .95);z-index:9999;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s ease}.lightbox-overlay.active{display:flex;opacity:1}.lightbox-content{position:relative;max-width:90%;max-height:80%;display:flex;align-items:center;justify-content:center}.lightbox-img{max-width:100%;max-height:100vh;object-fit:contain;border-radius:8px;box-shadow:0 10px 30px rgb(0 0 0 / .5);transform:scale(.9);transition:transform 0.3s ease}.lightbox-overlay.active .lightbox-img{transform:scale(1)}.lightbox-btn{position:absolute;background:rgb(255 255 255 / .1);border:none;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;transition:background 0.3s,transform 0.2s}.lightbox-btn:hover{background:var(--accent-color)}.lightbox-close{top:-60px;right:0}.lightbox-prev{left:-70px}.lightbox-next{right:-70px}.icon-grid{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.icon-item{display:flex;flex-direction:column;align-items:center;gap:10px;transition:transform 0.3s ease}.icon-item:hover{transform:translateY(-6px)}.icon-item i{font-size:3.2rem}.icon-item span{font-size:.95rem;color:var(--text-main);font-weight:600}.fa-html5{color:#e34c26}.fa-css3-alt{color:#264de4}.fa-square-js{color:#f7df1e;background-color:#000;-webkit-background-clip:text}.fa-fire{color:#ffa611}.social-grid a{text-decoration:none;color:var(--text-main);transition:transform 0.3s ease,color 0.3s ease}.fa-facebook{color:#1877f2}.fa-instagram{color:#e1306c}.fa-tiktok{color:#000}.fa-youtube{color:red}.social-grid .icon-item span{color:var(--text-muted);font-weight:500}.donation-container{display:flex;flex-direction:column;align-items:center;text-align:center}.qr-card{background:#fff;padding:18px;border-radius:18px;display:inline-block;margin-top:15px;box-shadow:0 20px 40px rgb(234 88 12 / .12);border:1px solid rgb(234 88 12 / .15);transform-style:preserve-3d;transform:perspective(1000px);will-change:transform}.qr-card canvas{display:block}.donation-text{margin-bottom:10px;font-size:1rem;color:var(--text-muted)}footer{text-align:center;padding:35px 0 10px 0;color:var(--text-muted);font-size:.9rem;border-top:1px solid var(--card-border);margin-top:50px;opacity:.8;transition:opacity 0.3s ease}footer:hover{opacity:1}footer a{color:var(--accent-color);text-decoration:none;font-weight:600}button{background:var(--accent-color);border:none;padding:10px 20px;margin-top:4px;color:#fff;border-radius:20px;cursor:pointer}button:hover{background:#b5450b}.about-spanel-text{color:var(--text-muted);margin-bottom:25px;font-size:1.05rem}.spanel-list,.spanel-tips{list-style:none;margin-bottom:25px;text-align:left}.spanel-list li,.spanel-tips li{position:relative;padding-left:30px;margin-bottom:15px;color:var(--text-muted);font-size:.95rem}.spanel-list li strong{color:var(--accent-color)}.spanel-list li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:2px;color:var(--accent-color)}.tips-title{font-size:1.1rem;font-weight:700;color:var(--text-main);margin-bottom:15px;text-align:left;border-left:4px solid var(--accent-color);padding-left:10px}.spanel-tips li::before{content:"\f0eb";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:2px;color:#eab308}.plan-grid{display:flex;gap:20px;margin-top:20px}.plan-card{background:#fff;border:1px solid var(--card-border);border-radius:15px;padding:25px;text-align:center;transition:all 0.3s ease;display:flex;flex-direction:column;justify-content:space-between}.plan-card:hover{border-color:var(--accent-color);transform:translateY(-5px);box-shadow:0 10px 20px rgb(0 0 0 / .05)}.plan-card.popular{border:2px solid var(--accent-color)}.plan-card h3{font-size:1.2rem;margin-bottom:10px;color:var(--text-main)}.plan-card .price{font-size:1.5rem;font-weight:700;color:var(--accent-color);margin-bottom:5px}.plan-card .duration{font-size:.85rem;color:var(--text-muted);margin-bottom:20px}.plan-features{list-style:none;text-align:left;margin-bottom:25px}.plan-features li{font-size:.85rem;margin-bottom:8px;color:var(--text-muted);display:flex;align-items:center;gap:8px}.plan-features li i{color:#10b981}.btn-plan{display:inline-block;text-decoration:none;background:var(--gradient);color:#fff!important;padding:10px;border-radius:20px;font-size:.9rem;font-weight:600;transition:opacity 0.3s;text-align:center}.btn-plan:hover{opacity:.9}.alat-scroll-container{display:flex;gap:15px;overflow-x:auto;padding:10px 5px;scrollbar-width:none;scroll-snap-type:x mandatory;padding-bottom:20px}.alat-scroll-container::-webkit-scrollbar{display:none}.alat-card{flex:0 0 calc(25% - 12px);text-align:center;scroll-snap-align:start;text-decoration:none;color:inherit;transition:transform 0.3s ease}.alat-card:hover{transform:translateY(-5px)}.alat-img{width:80px;height:80px;border-radius:15px;object-fit:cover;box-shadow:0 4px 10px rgb(0 0 0 / .1);margin-bottom:8px}.alat-name{display:block;font-size:.85rem;font-weight:600;color:var(--text-main)}@media (max-width:768px){.slider-item{flex:0 0 calc(50% - 8px)}.lightbox-prev{left:10px;bottom:-60px;top:auto;transform:none}.lightbox-next{right:10px;bottom:-60px;top:auto;transform:none}.lightbox-content{max-height:70%}.alat-card{flex:0 0 calc(33.33% - 10px)}}@media (max-width:600px){h1{font-size:2.2rem}.description{font-size:1rem}.icon-grid{gap:25px}.icon-item i{font-size:2.8rem}.slider-item{flex:0 0 calc(100% - 5px)}.plan-grid{flex-direction:column}.alat-card{flex:0 0 calc(50% - 8px)}}