:root{--primary-color: #ff6a02;--primary-second-color: #bf5000;--background-color: #ffffff;--background-second-color: #d3d3d3;--text-color: #000000}body.dark-mode{--background-color: #000000;--background-second-color: #181818;--text-color: #f9fafb}body{margin:0;background-color:var(--background-color);color:var(--text-color);font-family:sans-serif}html,body{height:100%;margin:0}main{flex:1}header{padding:1rem;position:fixed;top:40px;left:0;right:0;z-index:10;display:flex;flex-direction:row;justify-content:space-between;transition:background-color .3s ease}header.not-home{background-color:var(--background-color);box-shadow:0 2px 4px #0000000d}header.scrolled{background-color:var(--background-color);box-shadow:0 2px 4px #0000001a}.nav-aside{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;color:var(--background-color);border-radius:.5rem;transition:background-color .3s ease}.nav-aside:hover{background-color:var(--primary-second-color)}a.sub-menu{font-weight:100;color:var(--background-color);display:block;padding:.5rem 1rem;border-radius:.5rem;font-size:medium;text-decoration:none}a.sub-menu:hover{background-color:var(--primary-second-color);color:var(--background-color)}footer{padding:1rem;background-color:var(--background-second-color);text-align:center}.burger{color:var(--text-color)}.hero-section{padding:2rem;height:100vh;width:100%}.hero-img{width:300%;height:auto;object-fit:cover}.btn-primary{background-color:var(--primary-color);color:#fff;padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer}.btn-primary:hover{background-color:var(--primary-second-color)}.bt-icon{cursor:pointer}.bt-icon:hover{color:var(--primary-second-color)}.logo-img{width:80px;height:80px;border-radius:10%;overflow:hidden;display:inline-block}.nav-link{display:inline-block;padding:.5rem 1rem;color:var(--text-color);text-decoration:none;transition:color .2s ease;font-size:large;font-weight:700}.nav-link:hover{color:var(--primary-color)}.nav-link.active{color:var(--primary-color);font-weight:700}.nav-link-rounded{background-color:var(--primary-color);display:inline-block;padding:.5rem 1rem;color:#fff;text-decoration:none;transition:color .2s ease,background-color .2s ease;border-radius:999px;font-size:large;font-weight:700}.nav-link-rounded:hover{background-color:var(--primary-second-color);color:#fff}.nav-link-rounded-white{background-color:#fff;display:inline-block;padding:.5rem 1rem;color:var(--primary-color);text-decoration:none;transition:color .2s ease,background-color .2s ease;border-radius:999px;font-size:large;font-weight:700}.nav-link-rounded-white:hover{background-color:#ffd8bd;color:var(--primary-color)}.judul{color:#fff;font-weight:700;font-size:xxx-large}h2{font-weight:700;font-size:large;color:var(--primary-color)}.text-hover{color:#fff;font-size:1.5rem;font-weight:600;opacity:0;transition:opacity .3s ease;text-align:center;padding:0 .5rem}.text-hover:hover{opacity:100}.group:hover .text-hover{opacity:1}.nav-main{color:var(--text-color);font-size:large;font-weight:700;text-decoration:none}.text-mode{color:var(--text-color)}a:hover{color:var(--primary-color)}.text-data{color:#000}h4{color:#fff;font-size:large}.container-data{display:flex;flex-direction:column;background-color:#fff;border-radius:10px;padding:20px;width:150px;margin-top:30px;box-shadow:0 0 10px #0000001a}.container-mode{background-color:var(--background-second-color)}.icon-primary{color:var(--primary-color);font-size:2rem}.icon-socmed{position:relative;display:inline-block;width:45px;height:45px;background-color:#dfdfdf;border-radius:50%;text-align:center;line-height:45px;font-size:20px;margin:0 10px;transition:all .3s ease;color:var(--primary-color)}.icon-socmed:hover{background-color:var(--primary-color);color:#fff;transform:scale(1.1)}.icon-socmed:hover:before{background-color:#0003}.icon-option.selected{background-color:var(--primary-color);color:var(--text-color);border-color:var(--background-second-color)}.dataTables_wrapper .dataTables_filter{margin-bottom:1rem;float:right}.dataTables_wrapper .dataTables_paginate{margin-top:1rem;float:right}.dataTables_wrapper .dataTables_info{margin-top:1rem;float:left}.dataTables_wrapper .dataTables_length{margin-bottom:1rem}@media (max-width: 768px){.hero-section{padding:1.5rem}.btn-primary{padding:.5rem}a{margin-bottom:.5rem}header{display:flex;flex-direction:column}.hero-section h1{font-size:large}.hero-section h4,.hero-section a{font-size:small}}