@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap";:root{--font-main: "Inter", "Outfit", system-ui, -apple-system, sans-serif;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--gray-950: #030712;--accent: #2563eb;--accent-light: #3b82f6;--accent-soft: #60a5fa;--accent-glow: rgba(37, 99, 235, .12);--accent-glow-strong: rgba(59, 130, 246, .25);--card-bg: rgba(255, 255, 255, .55);--card-bg-solid: #ffffff;--card-border: rgba(0, 0, 0, .06);--card-border-hover: rgba(59, 130, 246, .3);--card-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03);--card-hover-shadow: 0 20px 60px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .08), 0 0 0 1px rgba(59, 130, 246, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:#f0f2f5;color:var(--gray-800);min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bg-image-layer{position:fixed;top:0;left:0;width:100%;height:100%;background:url(https://www.sman6bdg.sch.id/pojokdigital6/img/banner/background.jpg) center center / cover no-repeat;opacity:.12;z-index:0;pointer-events:none}.bg-grid-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,0,0,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.025) 1px,transparent 1px);background-size:52px 52px;z-index:1;pointer-events:none}.bg-vignette{position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.06) 100%);z-index:1;pointer-events:none}.dashboard-container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.header{position:absolute;top:40px;text-align:center;z-index:10;pointer-events:none}.header-badge{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:var(--accent);background:var(--accent-glow);border:1px solid rgba(37,99,235,.12);padding:6px 20px;border-radius:100px;margin-bottom:18px}.header h1{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:900;letter-spacing:4px;color:var(--gray-900);margin-bottom:10px;line-height:1.1}.title-accent{color:var(--accent)}.header-subtitle{font-size:clamp(.85rem,1.2vw,1.05rem);color:var(--gray-500);font-weight:400;letter-spacing:.5px}.roulette-container{width:100%;height:56vh;display:flex;align-items:center;perspective:1200px;overflow:hidden;cursor:grab;margin-top:40px}.roulette-container:active{cursor:grabbing}.roulette-track{display:flex;gap:24px;padding:0 10vw;transition:transform .1s ease-out;will-change:transform}.menu-card{position:relative;width:clamp(220px,18vw,280px);aspect-ratio:9 / 14;border-radius:24px;overflow:hidden;flex-shrink:0;cursor:pointer;text-decoration:none;background:#ffffffa6;backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(0,0,0,.06);box-shadow:var(--card-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .55s cubic-bezier(.23,1,.32,1),box-shadow .55s cubic-bezier(.23,1,.32,1),border-color .4s ease,background .4s ease;transform-origin:center center}.menu-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:24px;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.2) 40%,transparent 70%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:6;opacity:1;transition:opacity .4s ease}.card-number{position:absolute;top:16px;right:18px;font-size:.65rem;font-weight:700;color:var(--gray-300);letter-spacing:1px;font-variant-numeric:tabular-nums;z-index:7;transition:opacity .4s ease,color .4s ease}.menu-card:hover .card-number{opacity:0}.card-image-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1;opacity:0;transition:opacity .7s cubic-bezier(.23,1,.32,1)}.card-image{width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:brightness(.85) contrast(1.05);transition:transform 1.2s cubic-bezier(.23,1,.32,1),filter .7s ease}.card-image-wrapper:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;background:linear-gradient(180deg,#0000000d,#00000026,#000000a6 80%,#000000d9);pointer-events:none}.card-content-default{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 20px;transition:opacity .45s cubic-bezier(.23,1,.32,1),transform .45s cubic-bezier(.23,1,.32,1)}.card-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:18px;background:linear-gradient(145deg,var(--gray-50),var(--gray-100));border:1px solid var(--gray-200);color:var(--gray-500);margin-bottom:20px;transition:all .45s ease;box-shadow:0 2px 8px #0000000a,inset 0 1px #fffc}.card-title{font-size:1rem;font-weight:800;color:var(--gray-800);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;transition:color .4s ease}.card-line{width:28px;height:2px;background:var(--gray-300);border-radius:2px;margin-bottom:12px;transition:background .4s ease,width .4s ease}.card-subtitle{font-size:.72rem;color:var(--gray-400);font-weight:400;letter-spacing:.4px;line-height:1.5}.card-overlay-hover{position:absolute;bottom:0;left:0;width:100%;padding:36px 24px 28px;z-index:4;opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1)}.card-overlay-title{font-size:1.35rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:2.5px;margin-bottom:6px;text-shadow:0 2px 12px rgba(0,0,0,.4)}.card-overlay-subtitle{font-size:.78rem;color:#ffffffbf;font-weight:400;letter-spacing:.4px;text-shadow:0 1px 6px rgba(0,0,0,.3)}.card-shine{position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.05) 40%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 60%,transparent 100%);z-index:5;pointer-events:none;transition:left .8s cubic-bezier(.23,1,.32,1)}.menu-card:hover{transform:scale(1.06) translateY(-10px);box-shadow:var(--card-hover-shadow);border-color:var(--card-border-hover)}.menu-card:hover:before{opacity:0}.menu-card:hover .card-image-wrapper{opacity:1}.menu-card:hover .card-image{transform:scale(1);filter:brightness(.75) contrast(1.1)}.menu-card:hover .card-content-default{opacity:0;transform:translateY(-24px) scale(.95)}.menu-card:hover .card-overlay-hover{opacity:1;transform:translateY(0)}.menu-card:hover .card-shine{left:150%}.roulette-track:hover .menu-card:not(:hover){transform:scale(.93);filter:brightness(.92);opacity:.55}.footer-bar{position:absolute;bottom:22px;text-align:center;z-index:10;font-size:.68rem;color:var(--gray-400);font-weight:400;letter-spacing:.3px;pointer-events:none;display:flex;align-items:center;gap:8px}.footer-bar strong{font-weight:600;color:var(--gray-500)}.footer-divider{opacity:.4}@media (max-width: 768px){.header{top:20px}.header h1{font-size:1.8rem}.roulette-container{margin-top:60px}.menu-card{width:clamp(180px,45vw,240px)}.roulette-track{gap:16px;padding:0 5vw}.footer-bar{flex-direction:column;gap:4px}.footer-divider{display:none}}