@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
        :root { --malam: #151214; --panel: #211b1d; --garis: #493b3c; --teks: #fff9f0; --muted: #c4b7b2; --aksen: #e8c982; --oranye: #9b3342; }
        * { box-sizing: border-box; }
        html { overflow-x: clip; scroll-behavior: smooth; }
        body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--malam); color: var(--teks); font-family: 'Manrope', sans-serif; perspective: 1000px; position: relative; }
        body::before { content: ''; position: fixed; z-index: -1; inset: 0 0 auto auto; width: 42vw; height: 520px; background: linear-gradient(135deg, #8d283b, #d09b56); clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 58%); opacity: .88; animation: floatBg 6s ease-in-out infinite; }
        body::after { content: ''; position: fixed; top: -10%; right: -5%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(232, 201, 130, .08) 0%, transparent 70%); pointer-events: none; z-index: -1; animation: floatDecor 8s ease-in-out infinite; }
        @keyframes floatDecor { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-30px, 20px) rotate(5deg); } }
        @keyframes floatBg { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(20px); } }
        .beranda { width: min(1180px, calc(100% - 48px)); margin: auto; padding: 28px 0 72px; }
        .topbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 72px; animation: slideDown .8s ease-out; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
        .logo { display: inline-flex; align-items: center; color: var(--aksen); font-size: 21px; font-weight: 800; letter-spacing: 3px; text-decoration: none; transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), filter .3s ease; }
        .logo:hover { transform: scale(1.05) rotateZ(2deg); filter: brightness(1.2); }
        .logo img { display: block; width: auto; height: 42px; max-width: min(180px, 40vw); object-fit: contain; }
        .mode-navigation { display: flex; align-items: center; gap: 24px; }
        .mode-navigation .back-home { position: relative; z-index: 10; }
        .back-home { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; text-decoration: none; text-transform: uppercase; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); padding: 8px 12px; border: 1px solid rgba(232, 201, 130, .3); border-radius: 2px; position: relative; }
        .back-home::before { content: ''; position: absolute; left: -8px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--aksen); transform: translateY(-50%); box-shadow: 0 0 0 2px rgba(232, 201, 130, .2); animation: pulse 2s ease-in-out infinite; }
        .back-home span { color: var(--aksen); font-size: 16px; line-height: 1; font-weight: 700; }
        .back-home:hover { color: var(--teks); transform: translateX(-6px); border-color: var(--aksen); background: rgba(232, 201, 130, .08); box-shadow: 0 8px 16px rgba(232, 201, 130, .15); }
        .status-live { color: var(--teks); display: flex; align-items: center; gap: 9px; color: var(--teks); font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; }
        .status-live form { display: inline; margin: 0; }
        .status-live form button { width: auto; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; }
        .status-live form button:hover { color: var(--aksen); }
        .status-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--aksen); box-shadow: 0 0 0 5px rgba(232, 201, 130, .15); animation: pulse 2s ease-in-out infinite; }
        @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(232, 201, 130, .15); } 50% { box-shadow: 0 0 0 12px rgba(232, 201, 130, .08); } }
        .hero { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 80px; align-items: start; perspective: 1200px; }
        .halaman-mode .hero { display: block; max-width: 720px; margin: 0 auto; }
        .halaman-mode .hero > div:first-child, .halaman-mode .info-card, .halaman-mode .mode-label { display: none; }
        .halaman-mode .form-area { width: 100%; }
        .halaman-mode .pilihan { justify-content: center; margin-bottom: 28px; }
        .halaman-mode .panel-heading { display: none; }
        .halaman-mode .panel form { margin: 0 auto; }
        .halaman-statistik .hero > div:first-child, .halaman-statistik .info-card, .halaman-statistik .mode-label, .halaman-statistik .pilihan, .halaman-statistik .panel { display: none; }
        .halaman-statistik .form-area { width: 100%; }
        .halaman-statistik .statistik-panel { display: block; max-width: 820px; margin: 0 auto; }
        .statistik-heading { margin-bottom: 24px; text-align: center; animation: fadeInUp .8s ease-out; }
        .statistik-heading h1 { max-width: none; margin-bottom: 10px; font-size: clamp(34px, 5vw, 58px); }
        .statistik-heading p { margin: 0; color: var(--muted); }
        .statistik-ringkasan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
        .statistik-box { padding: 20px; border: 1px solid var(--garis); background: var(--panel); text-align: center; transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; }
        .statistik-box:hover { transform: rotateY(5deg) rotateX(-2deg) translateY(-8px); box-shadow: 0 20px 40px rgba(232, 201, 130, .1); border-color: var(--aksen); }
        .statistik-box strong { display: block; margin-bottom: 6px; color: var(--aksen); font-size: 30px; }
        .statistik-box span { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; text-transform: uppercase; }
        .statistik-tabel { width: 100%; border-collapse: collapse; border: 1px solid var(--garis); background: var(--panel); }
        .statistik-tabel th, .statistik-tabel td { padding: 14px 16px; border-bottom: 1px solid var(--garis); text-align: left; }
        .statistik-tabel th { color: var(--aksen); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; text-transform: uppercase; }
        .statistik-tabel td { color: var(--teks); font-size: 14px; }
        .statistik-tabel td:last-child, .statistik-tabel th:last-child { text-align: right; }
        .statistik-status { display: inline-block; padding: 5px 9px; color: #151214; background: #8fc9a8; font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 600; }
        .statistik-foto { display: block; width: 64px; height: 48px; overflow: hidden; border: 1px solid var(--garis); background: #080d10; }
        .statistik-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
        .statistik-foto:hover img { transform: scale(1.08); }
        .statistik-kosong { padding: 24px; border: 1px solid var(--garis); color: var(--muted); text-align: center; }
        .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--aksen); font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; animation: slideInLeft .6s ease-out; }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
        .eyebrow::before { content: '//'; color: var(--oranye); }
        h1 { max-width: 700px; margin: 0 0 24px; font-size: clamp(48px, 7vw, 88px); line-height: .98; letter-spacing: 0; animation: fadeInUp .8s ease-out .1s both; }
        @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
        h1 span { color: var(--aksen); }
        .intro { max-width: 560px; margin: 0 0 34px; color: var(--muted); font-size: 17px; line-height: 1.7; animation: fadeInUp .8s ease-out .2s both; }
        .info-card { padding: 28px; border: 1px solid rgba(255,255,255,.18); background: rgba(24, 38, 49, .9); transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; backdrop-filter: blur(10px); animation: fadeInRight .8s ease-out; }
        @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px) rotateY(20deg); } to { opacity: 1; transform: translateX(0) rotateY(0); } }
        .info-card:hover { transform: rotateY(-5deg) rotateX(2deg) translateZ(20px); box-shadow: 0 25px 50px rgba(232, 201, 130, .15); }
        .status-hari-ini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
        .status-hari-ini .status-item { padding: 16px; border: 1px solid var(--garis); background: var(--panel); }
        .status-hari-ini strong { display: block; margin-bottom: 5px; color: var(--aksen); font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; }
        .status-hari-ini span { color: var(--teks); font-size: 14px; }
        .status-hari-ini small { display: block; margin-top: 6px; color: var(--muted); line-height: 1.5; }
        .info-title { margin-bottom: 22px; color: var(--aksen); font-size: 20px; font-weight: 800; }
        .info-item { padding: 18px 0; border-top: 1px solid var(--garis); transition: all .3s ease; }
        .info-item:hover { padding-left: 8px; }
        .info-item strong { display: block; margin-bottom: 7px; font-size: 14px; }
        .info-item span { color: var(--muted); font-size: 13px; line-height: 1.5; }
        .landing { padding: 28px 0 20px; }
        .landing-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 70px; align-items: end; margin-bottom: 56px; }
        .landing h1 { max-width: 850px; margin-bottom: 26px; font-size: clamp(58px, 9vw, 122px); line-height: .86; }
        .landing h1 span { display: block; padding-left: clamp(24px, 8vw, 120px); }
        .landing-copy { max-width: 290px; justify-self: end; padding-bottom: 6px; color: var(--muted); font-size: 14px; line-height: 1.7; animation: fadeInUp .8s ease-out .3s both; }
        .landing-copy strong { display: block; margin-bottom: 12px; color: var(--aksen); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
        .choice-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; animation: slideInUp .6s ease-out; }
        @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .choice-label span:last-child { color: var(--aksen); }
        .choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; perspective: 1200px; }
        .choice-card { position: relative; min-height: 250px; padding: 22px; overflow: hidden; border: 1px solid var(--garis); background: var(--panel); color: var(--teks); text-decoration: none; transition: all .4s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; animation: fadeInUp .6s ease-out forwards; }
        .choice-card:nth-child(1) { animation-delay: 0s; }
        .choice-card:nth-child(2) { animation-delay: .1s; }
        .choice-card:nth-child(3) { animation-delay: .2s; }
        .choice-card:nth-child(4) { animation-delay: .3s; }
        .choice-card::after { content: ''; position: absolute; right: -30px; bottom: -55px; width: 150px; height: 150px; border: 1px solid currentColor; border-radius: 50%; opacity: .28; transition: all .4s ease; }
        .choice-card:hover::after { transform: scale(1.2); opacity: .45; }
        .choice-card:hover { transform: rotateY(-8deg) rotateX(5deg) translateZ(30px) translateY(-12px); border-color: var(--card-accent); background: var(--card-dark); box-shadow: 0 30px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1); }
        .choice-card .number { display: block; color: var(--card-accent); font-family: 'DM Mono', monospace; font-size: 12px; transition: all .3s ease; }
        .choice-card:hover .number { letter-spacing: 2px; }
        .choice-card h2 { margin: 68px 0 9px; font-size: 23px; transition: color .3s ease; }
        .choice-card:hover h2 { color: var(--card-accent); }
        .choice-card p { max-width: 170px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
        .choice-card .arrow { position: absolute; right: 22px; top: 20px; color: var(--card-accent); font-size: 24px; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .choice-card:hover .arrow { transform: translate(8px, -8px) scale(1.3); }
        .choice-card.presensi { --card-accent: #e8c982; --card-dark: #30291e; }
        .choice-card.izin { --card-accent: #d86b78; --card-dark: #351b24; }
        .choice-card.sakit { --card-accent: #8fc9a8; --card-dark: #193129; }
        .choice-card.dispen { --card-accent: #e8a5b5; --card-dark: #35202a; }
        .statistik-link { display: block; width: fit-content; margin: 22px auto 0; padding: 12px 18px; border: 1px solid var(--garis); color: var(--muted); font-family: 'DM Mono', monospace; font-size: 11px; text-decoration: none; text-transform: uppercase; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .statistik-link:hover { border-color: var(--aksen); color: var(--aksen); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(232, 201, 130, .15); }
        .form-area { grid-column: 1 / -1; }
        .mode-label { margin: 0 0 14px; color: var(--muted); font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; animation: slideInLeft .6s ease-out .1s both; }
        .pilihan { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
        .pilihan a { display: inline-block; width: auto; margin: 0; padding: 11px 18px; border: 1px solid var(--garis); border-radius: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: none; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; }
        .pilihan a:hover { transform: translateY(-2px) scale(1.05); }
        .pilihan a.aktif, .pilihan a:hover { border-color: var(--aksen); background: var(--aksen); color: var(--malam); }
        .pilihan a[data-mode="izin"].aktif, .pilihan a[data-mode="izin"]:hover { border-color: #d86b78; background: #d86b78; }
        .pilihan a[data-mode="sakit"].aktif, .pilihan a[data-mode="sakit"]:hover { border-color: #8fc9a8; background: #8fc9a8; }
        .pilihan a[data-mode="dispen"].aktif, .pilihan a[data-mode="dispen"]:hover { border-color: #e8a5b5; background: #e8a5b5; }
        .panel { display: none; --tema: var(--aksen); --tema-gelap: #30291e; }
        .panel.aktif { display: block; animation: muncul .5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
        .panel#panel-izin { --tema: #d86b78; --tema-gelap: #351b24; }
        .panel#panel-sakit { --tema: #8fc9a8; --tema-gelap: #193129; }
        .panel#panel-dispen { --tema: #e8a5b5; --tema-gelap: #35202a; }
        .panel-heading { max-width: 680px; margin-bottom: 14px; padding-left: 18px; border-left: 3px solid var(--tema); animation: slideInLeft .6s ease-out; }
        .panel-kicker { margin: 0 0 5px; color: var(--tema); font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
        .panel-heading h2 { margin: 0 0 5px; color: var(--teks); font-size: 27px; }
        .panel-heading p, .panel p { margin-top: 0; color: var(--muted); }
        .panel form { max-width: 680px; padding: 28px; border: 1px solid var(--garis); background: var(--panel); color: var(--teks); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); animation: fadeInUp .5s ease-out; }
        textarea { box-sizing: border-box; width: 100%; min-height: 100px; padding: 13px; border: 1px solid var(--garis); background: rgba(0,0,0,.2); color: var(--teks); font: inherit; resize: vertical; transition: all .3s ease; }
        textarea:focus { border-color: var(--tema); background: rgba(0,0,0,.4); transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(232, 201, 130, .1); outline: none; }
        .kamera { width: 100%; margin: 22px 0 12px; overflow: hidden; border: 1px solid var(--tema); background: #080d10; transition: all .3s ease; }
        .kamera:hover { border-color: var(--tema); box-shadow: 0 0 20px rgba(232, 201, 130, .2); }
        video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transform: scaleX(-1); }
        label { display: block; margin: 16px 0 7px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; transition: color .3s ease; }
        input, button { width: 100%; padding: 13px; font-size: 15px; }
        input { border: 1px solid var(--garis); background: rgba(0,0,0,.2); color: var(--teks); font: inherit; transition: all .3s ease; }
        input:focus { border-color: var(--tema); background: rgba(0,0,0,.4); transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(232, 201, 130, .1); outline: none; }
        .panel form > button { margin-top: 10px; border: 1px solid var(--tema); border-radius: 0; background: var(--tema); color: var(--malam); font-weight: 800; transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; }
        .panel form > button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, .18); border-radius: 50%; transform: translate(-50%, -50%); transition: width .6s, height .6s; }
        .panel form > button:hover::before { width: 260px; height: 260px; }
        .panel form > button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
        .panel form > button:active { transform: translateY(0); }
        body.light-theme input,
        body.light-theme textarea { border-color: var(--garis); background: var(--panel); color: var(--teks); }
        body.light-theme input:focus,
        body.light-theme textarea:focus { background: #fff; }
        button { cursor: pointer; }
        button:disabled { cursor: not-allowed; opacity: .55; }
        #status { min-height: 24px; margin-top: 14px; animation: fadeIn .4s ease; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .kotak-sukses { display: grid; gap: 7px; margin-top: 18px; padding: 20px; border: 1px solid var(--aksen); background: rgba(232, 201, 130, .12); color: var(--teks); animation: slideInUp .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
        .kotak-sukses[hidden] { display: none; }
        .kotak-sukses strong { color: var(--aksen); font-size: 18px; }
        .kotak-sukses span { color: var(--muted); font-size: 13px; }
        @keyframes muncul { from { opacity: 0; transform: translateY(20px) rotateX(-10deg); } to { opacity: 1; transform: translateY(0) rotateX(0); } }
        @media (max-width: 900px) { .landing-hero { grid-template-columns: 1fr; gap: 20px; } .landing-copy { justify-self: start; max-width: 480px; } .choice-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 820px) { body::before { width: 70vw; height: 360px; opacity: .45; } .beranda { width: min(100% - 32px, 600px); padding-top: 20px; } .topbar { padding-bottom: 58px; } .hero { grid-template-columns: 1fr; gap: 44px; } .info-card { max-width: 520px; } .frontier-crown { width: 300px; height: 300px; opacity: .04; } .frontier-chess { width: 350px; height: 350px; opacity: .03; } .frontier-numerals { width: 200px; height: 200px; opacity: .02; } .back-home { font-size: 11px; padding: 6px 10px; gap: 6px; } .back-home span:first-child { font-size: 14px; } }
        @media (max-width: 520px) { .topbar { align-items: flex-start; flex-wrap: wrap; gap: 14px; padding-bottom: 40px; } .mode-navigation { width: 100%; justify-content: space-between; gap: 12px; } .status-live { width: 100%; flex-wrap: wrap; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; } .landing { padding-top: 8px; } .landing h1 { font-size: 58px; } .landing h1 span { padding-left: 26px; } .landing-hero { margin-bottom: 40px; } .choice-grid { grid-template-columns: 1fr; } .choice-card { min-height: 190px; } .choice-card h2 { margin-top: 42px; } .intro { font-size: 15px; } .panel form { padding: 20px; } .pilihan a { flex: 1 1 calc(50% - 8px); text-align: center; } .statistik-ringkasan { grid-template-columns: 1fr; } .statistik-tabel th, .statistik-tabel td { padding: 12px 9px; font-size: 12px; } .frontier-crown { width: 250px; height: 250px; } .frontier-chess { width: 280px; height: 280px; } .frontier-numerals { width: 150px; height: 150px; } .back-home { font-size: 10px; padding: 6px 8px; gap: 4px; border: 1px solid rgba(232, 201, 130, .2); } .back-home span:first-child { font-size: 12px; } .back-home::before { width: 4px; height: 4px; left: -6px; } }
        .frontier-decor { position: fixed; pointer-events: none; z-index: -1; color: var(--aksen); }
        .frontier-crown { top: -80px; right: -60px; width: 400px; height: 400px; opacity: .06; animation: floatCrown 10s ease-in-out infinite; }
        .frontier-chess { bottom: -100px; left: -80px; width: 500px; height: 500px; opacity: .05; animation: floatChess 12s ease-in-out infinite reverse; }
        .frontier-numerals { top: 50%; right: 5%; width: 300px; height: 300px; opacity: .04; animation: floatNumerals 15s ease-in-out infinite; }
        @media (max-width: 520px) { .frontier-decor { display: none; } }
        @keyframes floatCrown { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 30px) rotate(3deg); } 66% { transform: translate(20px, -20px) rotate(-3deg); } }
        @keyframes floatChess { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -30px) rotate(-5deg); } 66% { transform: translate(-30px, 20px) rotate(5deg); } }
        @keyframes floatNumerals { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(15px, 15px); } }