/* Reset CSS */
body,
h1,
h2,
h3,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.link-haxorai {
    color: #fff;
    text-decoration: none; /* Opsional: Menghapus garis bawah tautan */
}

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    background-color: rgb(14.118958%, 10.5896%, 14.898682%);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2px;
}

/* Header Styles */
header {
    background: rgb(14.118958%, 10.5896%, 14.898682%);
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    src: local('Great Vibes'), local('GreatVibes-Regular'), url(https://fonts.gstatic.com/s/greatvibes/v10/RWmMoKWR9v4ksMfaWd_JN-XCg6UKDXlq.ttf) format('truetype');
  }

header h1 {
    font-size: 26px;
    text-shadow: 0px 0px 5px #7d2ae8;
    font-family: 'Great Vibes', cursive;
    font-size: 36px;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}

/* Navigation Styles */
nav {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav a {
    text-decoration: none;
    color: white; /* Warna teks tautan */
    align-items: center; /* Untuk membuat ikon dan teks sejajar */
}

/* Efek hover untuk tautan */
nav a:hover {
    color: #d4c16c; /* Warna teks saat dihover */
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li:last-child {
    margin-right: 0;
}

/* Main Content Styles */
h2 {
    font-size: 22px;
    margin-top: 0px;
    color: white;
    text-align: center;
}

/* Form Styles */
form {
    margin-top: 20px;
    display: flex;
    align-items: center;
}

input[type="file"] {
    margin-bottom: 10px;
}

input[type="text"] {
    padding: 10px 69px;
    /* Padding yang lebih besar */
    margin-bottom: 0px;
    /* Jarak bawah yang lebih besar */
    border: none;
    /* Hilangkan border default */
    background-color: #f5f5f5;
    /* Warna latar belakang abu-abu */
    border-radius: 50px;
    /* Sudut border yang lebih bulat */
    font-size: 16px;
    /* Ukuran font yang lebih besar */
    color: #333;
    /* Warna teks yang lebih gelap */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Shadow ringan */
    transition: background-color 0.3s, box-shadow 0.3s;
    /* Transisi untuk hover */
}

/* Efek hover saat kursor di atas input */
input[type="text"]:hover {
    background-color: #e0e0e0;
    /* Warna latar belakang hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Shadow hover yang lebih kuat */
}

/* Efek focus saat input aktif */
input[type="text"]:focus {
    background-color: #fff;
    /* Warna latar belakang saat focus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Shadow saat focus */
    outline: none;
    /* Hilangkan outline focus default */
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th,
td {
    padding: 4px;
    font-size: 12px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Button Styles */
button {
    background-color: #7d2ae8;
    color: #fff;
    border: none;
    padding: 4px 5px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

button:hover {
    background: #7d2ae8;
    opacity: 0.9;
}

/* Button Note */
.note {
    background: linear-gradient(30deg,#44a9d7 19%,#7d2ae8 100%);
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 3px;
}

/* Footer Styles */
footer {
    background-color: rgb(14.118958%, 10.5896%, 14.898682%);
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

/* Loading Animation Styles */
@keyframes startLoading {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* Tambahan CSS untuk posisi tengah */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.loading-line-container {
    @include centerItems();
    justify-content: flex-start;
    box-sizing: content-box;
    transition: box-shadow .5s;
    padding: 2px;
    position: relative;
    width: 40%;
    height: 20px;
    border: 2px solid rgba(32, 186, 230, .5);
    border-radius: 20px;

    @media screen and (max-width: 1500px) {
        width: 45%;
    }

    @media screen and (max-width: 1000px) {
        width: 60%;
    }

    @media screen and (max-width: 500px) {
        width: 70%;
    }

    @media screen and (max-width: 350px) {
        width: 80%;
    }
}

.loading-percent {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 999;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: .9rem;
    opacity: .9;
}

.loading-line {
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgb(32, 186, 230), rgb(110, 6, 173));
    opacity: .8;
}

@keyframes startLoading {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.startLoading {
    animation-name: startLoading;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0, 0, 0, 0);
}

/* Tambahkan animasi loading */
#loading-animation {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Search Input Styles */
#search-input {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* Notification Styles */
#notification {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#notification-message {
    font-size: 1rem;
    margin-bottom: 10px;
}

#notification-button {
    background-color: #007BFF;
    border: none;
    padding: 5px 10px;
    color: #fff;
    cursor: pointer;
}

svg {
    width: 22x;
    height: 22px;
    vertical-align: middle;
}

.samuelpasaribu {
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20viewBox%3D%220%200%20150%2060%22%20height%3D%2280%22%20version%3D%221.0%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M4.5%2028H49v10H4.5zm0%200%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22b%22%3E%3Cpath%20d%3D%22M7%2037h18v18.934H7zm0%200%22%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M29%2037h18v18.934H29zm0%200%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22%237000FF%22%20d%3D%22M144.129%2070.078H-17.898a4.496%204.496%200%200%201-4.489-4.488V5.566a4.496%204.496%200%200%201%204.489-4.488h162.027a4.493%204.493%200%200%201%204.484%204.488V65.59a4.493%204.493%200%200%201-4.484%204.488%22%2F%3E%3Cpath%20fill%3D%22%2324244D%22%20d%3D%22M138.684%2075.75H-23.348a4.493%204.493%200%200%201-4.484-4.488V11.238a4.493%204.493%200%200%201%204.484-4.488h162.032a4.495%204.495%200%200%201%204.484%204.488v60.024a4.495%204.495%200%200%201-4.484%204.488%22%2F%3E%3Cpath%20fill%3D%22%23241B26%22%20d%3D%22M14.746%2020.547h24.297v10.351H14.746V20.547%22%2F%3E%3Cg%20clip-path%3D%22url(%23a)%22%3E%3Cpath%20fill%3D%22%236C36FF%22%20d%3D%22M26.66%2032.293c-3.445%200-6.785.441-10.031%201.328a40.08%2040.08%200%200%200-9.281%203.844c-.18.094-.332.156-.457.187a1.727%201.727%200%200%201-.395.047c-.226%200-.41-.054-.555-.168a1.868%201.868%200%200%201-.382-.43L4.395%2035.2a43.141%2043.141%200%200%201%205.511-3.086%2038.02%2038.02%200%200%201%205.477-2.054%2038.778%2038.778%200%200%201%205.539-1.153%2045.177%2045.177%200%200%201%205.738-.355c1.95%200%203.86.117%205.73.355a38.12%2038.12%200%200%201%205.54%201.153%2038.06%2038.06%200%200%201%205.465%202.054%2043.868%2043.868%200%200%201%205.53%203.086l-1.179%201.903a1.795%201.795%200%200%201-.387.43.865.865%200%200%201-.55.167c-.246%200-.52-.078-.825-.234a38.744%2038.744%200%200%200-9.273-3.86%2038.333%2038.333%200%200%200-10.05-1.312zm0%200%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%236C36FF%22%20d%3D%22m14.727%2011.781%203.539.653-3.746%2020.351-3.543-.652%203.75-20.352M35.406%2012.473l3.54-.653%203.745%2020.352-3.543.652-3.742-20.351%22%2F%3E%3Cpath%20fill%3D%22%23241B26%22%20d%3D%22M14.676%2041.27a5.175%205.175%200%201%200-.002%2010.349%205.175%205.175%200%200%200%20.002-10.35%22%2F%3E%3Cg%20clip-path%3D%22url(%23b)%22%3E%3Cpath%20fill%3D%22%236C36FF%22%20d%3D%22M15.719%2055.152c-4.75%200-8.625-3.875-8.625-8.636%200-4.746%203.875-8.625%208.625-8.625%204.758%200%208.62%203.879%208.62%208.625.016%204.761-3.862%208.636-8.62%208.636zm0-12.511a3.89%203.89%200%200%200-3.88%203.875%203.888%203.888%200%200%200%203.88%203.875%203.884%203.884%200%200%200%203.87-3.875%203.879%203.879%200%200%200-3.87-3.875zm0%200%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%23241B26%22%20d%3D%22M39.094%2041.27a5.177%205.177%200%200%200-5.176%205.175%205.176%205.176%200%200%200%2010.352%200%205.175%205.175%200%200%200-5.176-5.175%22%2F%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill%3D%22%236C36FF%22%20d%3D%22M38.172%2055.152c-4.746%200-8.625-3.875-8.625-8.636%200-4.746%203.879-8.625%208.625-8.625%204.762%200%208.625%203.879%208.625%208.625.012%204.761-3.863%208.636-8.625%208.636zm0-12.511a3.89%203.89%200%200%200-3.875%203.875%203.887%203.887%200%200%200%203.875%203.875%203.884%203.884%200%200%200%203.875-3.875%203.88%203.88%200%200%200-3.875-3.875zm0%200%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%236C36FF%22%20d%3D%22M14.793%2011.777H39.09V22.13H14.793V11.777%22%2F%3E%3Cpath%20d%3D%22M67.199%2032.227h-4.563v-6.86h-5.297v6.86h-4.578V15.383h4.578v6.25h5.297v-6.25h4.563zM81.53%2032.227l-.859-1.734h-.094c-.605.761-1.226%201.28-1.86%201.562-.624.27-1.437.406-2.437.406-1.23%200-2.199-.367-2.906-1.11-.7-.737-1.047-1.773-1.047-3.108%200-1.395.477-2.43%201.438-3.11.969-.676%202.375-1.055%204.219-1.14l2.171-.079v-.171c0-1.083-.53-1.625-1.593-1.625-.95%200-2.157.324-3.625.968l-1.297-2.968c1.52-.782%203.437-1.172%205.75-1.172%201.676%200%202.972.418%203.89%201.25.914.824%201.375%201.98%201.375%203.468v8.563zm-3.328-2.953c.54%200%201.004-.172%201.39-.516.384-.344.579-.789.579-1.344V26.4l-1.031.047c-1.48.054-2.219.601-2.219%201.64%200%20.793.426%201.188%201.281%201.188zM92.926%2025.57l-3.984-6.39h5.125l1.984%203.656%202.016-3.656h5.125l-4.078%206.39%204.25%206.657h-5.125l-2.188-3.969-2.203%203.969h-5.125zM119.936%2025.664c0%202.137-.574%203.805-1.719%205-1.148%201.2-2.75%201.797-4.812%201.797-1.992%200-3.574-.61-4.75-1.828-1.168-1.226-1.75-2.883-1.75-4.969%200-2.125.57-3.773%201.719-4.953%201.156-1.176%202.77-1.765%204.843-1.765%201.282%200%202.41.277%203.39.828a5.527%205.527%200%200%201%202.282%202.344c.531%201.011.797%202.195.797%203.546zm-8.453%200c0%201.125.148%201.985.453%202.579.3.585.8.875%201.5.875.707%200%201.203-.29%201.484-.875.29-.594.438-1.454.438-2.579%200-1.101-.149-1.941-.438-2.515-.293-.57-.793-.86-1.5-.86-.687%200-1.183.29-1.484.86-.305.562-.453%201.402-.453%202.515zM132.837%2018.946c.383%200%20.754.03%201.11.093l.265.047-.406%204.25c-.375-.093-.886-.14-1.531-.14-.992%200-1.711.226-2.156.672-.438.449-.657%201.093-.657%201.937v6.422h-4.5V19.18h3.344l.703%202.078h.22a4.548%204.548%200%200%201%201.562-1.672c.675-.426%201.359-.64%202.046-.64zm0%200%22%20fill%3D%22%23A96BFF%22%2F%3E%3Cg%20fill%3D%22%23A96BFF%22%3E%3Cpath%20d%3D%22M63.372%2037.329v7.547c0%201.648-.469%202.922-1.406%203.828-.93.898-2.266%201.344-4.016%201.344-1.71%200-3.027-.438-3.953-1.313-.918-.875-1.375-2.133-1.375-3.781v-7.625h3.406v7.36c0%20.886.164%201.53.5%201.937.332.398.82.594%201.469.594.695%200%201.203-.196%201.516-.594.312-.395.468-1.047.468-1.953v-7.344zM71.64%2050.048c-.5%200-.946-.078-1.329-.235-.387-.164-.773-.46-1.156-.89h-.156c.101.68.156%201.097.156%201.265v3.907h-3.36V40.157h2.735l.469%201.235h.156c.625-.938%201.484-1.407%202.578-1.407%201.082%200%201.926.45%202.531%201.344.614.887.922%202.105.922%203.656%200%201.574-.32%202.813-.953%203.719-.637.898-1.5%201.344-2.594%201.344zm-1.126-7.438c-.5%200-.851.18-1.047.532-.187.355-.293.875-.312%201.562v.266c0%20.843.11%201.453.328%201.828.227.367.582.547%201.063.547.425%200%20.734-.18.921-.547.196-.375.297-.989.297-1.844%200-.832-.101-1.43-.297-1.797-.187-.363-.507-.547-.953-.547zM80.454%2049.876h-3.359v-13.36h3.36zM92.072%2044.985c0%201.594-.434%202.84-1.297%203.735-.856.886-2.047%201.328-3.578%201.328-1.48%200-2.657-.453-3.532-1.36-.875-.914-1.312-2.148-1.312-3.703%200-1.582.426-2.812%201.281-3.687.852-.875%202.055-1.313%203.61-1.313.957%200%201.8.203%202.53.61.727.406%201.29.992%201.688%201.75.407.75.61%201.632.61%202.64zm-6.313%200c0%20.844.11%201.485.328%201.922.227.438.61.656%201.14.656.52%200%20.884-.218%201.095-.656.218-.437.328-1.078.328-1.922%200-.82-.11-1.445-.328-1.875-.22-.426-.59-.64-1.11-.64-.523%200-.898.214-1.125.64-.218.418-.328%201.043-.328%201.875zM100.315%2049.876l-.64-1.281h-.063c-.46.554-.922.933-1.39%201.14-.47.207-1.075.313-1.813.313-.918%200-1.64-.27-2.172-.813-.523-.55-.781-1.328-.781-2.328%200-1.031.36-1.8%201.078-2.312.719-.508%201.758-.797%203.125-.86l1.625-.047v-.14c0-.801-.399-1.203-1.188-1.203-.71%200-1.609.242-2.703.718l-.969-2.203c1.133-.582%202.567-.875%204.297-.875%201.25%200%202.211.309%202.891.922.687.617%201.031%201.48%201.031%202.594v6.375zm-2.484-2.203c.406%200%20.75-.125%201.031-.375.29-.258.437-.598.437-1.016v-.75l-.765.031c-1.106.043-1.656.45-1.656%201.22%200%20.593.316.89.953.89zM107.95%2050.048c-.699%200-1.308-.196-1.828-.594-.511-.395-.914-.973-1.203-1.734-.281-.77-.422-1.664-.422-2.688%200-1.582.317-2.816.953-3.703.633-.895%201.508-1.344%202.625-1.344.54%200%201.016.11%201.422.328.406.211.781.575%201.125%201.094h.063a16.541%2016.541%200%200%201-.157-2.281v-2.61h3.375v13.36h-2.53l-.72-1.234h-.125c-.585.937-1.445%201.406-2.578%201.406zm1.36-2.656c.539%200%20.922-.165%201.14-.5.22-.344.336-.864.36-1.563v-.266c0-.863-.125-1.472-.375-1.828-.242-.363-.625-.547-1.157-.547-.437%200-.78.211-1.03.625-.243.407-.36.996-.36%201.766%200%20.75.117%201.324.36%201.719.25.398.6.594%201.062.594zM120.922%2050.048c-1.625%200-2.887-.426-3.782-1.281-.898-.864-1.343-2.094-1.343-3.688%200-1.645.414-2.906%201.25-3.781.832-.875%202.015-1.313%203.547-1.313%201.468%200%202.597.383%203.39%201.14.801.763%201.203%201.86%201.203%203.298v1.5h-6c.02.543.22.969.594%201.281.375.305.883.453%201.531.453.594%200%201.133-.05%201.625-.156.5-.113%201.04-.305%201.625-.578v2.406a5.837%205.837%200%200%201-1.64.563c-.563.101-1.23.156-2%20.156zm-.203-7.781c-.399%200-.73.125-1%20.375-.262.25-.414.64-.454%201.171h2.875c-.011-.468-.148-.843-.406-1.125-.25-.28-.59-.421-1.015-.421zM132.956%2039.985c.289%200%20.566.024.828.063l.187.031-.297%203.172c-.273-.07-.652-.11-1.14-.11-.73%200-1.262.172-1.594.516-.336.336-.5.813-.5%201.438v4.78h-3.36v-9.718h2.5l.532%201.547h.156a3.35%203.35%200%200%201%201.172-1.234c.5-.32%201.004-.485%201.516-.485zm0%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-size: cover;
    width: 96px;
    height: 38px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1;
}

.samuelpasaribu:hover {
    opacity: 75%;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header svg {
    width: 50px;
    height: 50px;
    margin-right: 10px; /* Atur jarak antara ikon dan teks di sini */
}

h1 {
    font-size: 24px; /* Ukuran teks h1 yang sesuai */
}

/* Back to top button styles */
#back-to-top-button {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(30deg,#44a9d7 19%,#7d2ae8 100%);
    color: white;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s, transform 0.3s;
}
  
#back-to-top-button:hover {
    background-color: #0056b3;
}
  
.arrow-up {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}
  
/* Show the button when the user scrolls down */
body::-webkit-scrollbar-thumb {
    background-color: #007BFF;
}
  
/* Change button color when scrolling */
body::-webkit-scrollbar-thumb:hover {
    background-color: #0056b3;
}

.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* CSS untuk elemen Beranda */
.beranda {
    position: relative;
    display: inline-block;
}

.beranda::before {
    content: '';
    display: inline-block;
    width: 22px; /* Sesuaikan dengan lebar SVG */
    height: 22px; /* Sesuaikan dengan tinggi SVG */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>');
}

.beranda::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: tomato;
    border-radius: 50%;
}

/* CSS untuk elemen Code */
.code::before {
    content: url('data:image/svg+xml;utf8,<svg style="color: white" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16"><path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z" fill="white"></path></svg>');
}

/* CSS untuk elemen notes */
.notes::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" height="16" fill="white" viewBox="0 0 16 16" width="16" class="notes-icon"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path><path d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path></svg>');
    margin-left: 6px;
    vertical-align: middle;
}

/* CSS untuk elemen upload */
.upcode::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" width="19" height="19" viewBox="0 0 16 16"><path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path><path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"></path></svg>');
    margin-left: 6px;
    vertical-align: middle;
}

/* CSS untuk elemen Home */
.home::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" zoomAndPan="magnify" viewBox="0 0 75 74.999997" height="40px" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g><g id="id1"></g></g></defs><path fill="rgb(14.118958%, 10.5896%, 14.898682%)" d="M 17.078125 16.023438 L 57.570312 16.023438 L 57.570312 33.273438 L 17.078125 33.273438 L 17.078125 16.023438 " fill-opacity="1" fill-rule="nonzero"></path><g fill="rgb(42.349243%, 21.179199%, 100%)" fill-opacity="1"><g transform="translate(11.622399, 23.972034)"><g><path d="M 25.3125 11.625 C 19.570312 11.625 14 12.363281 8.59375 13.84375 C 3.1875 15.320312 -1.96875 17.457031 -6.875 20.25 C -7.175781 20.40625 -7.429688 20.507812 -7.640625 20.5625 C -7.859375 20.613281 -8.078125 20.640625 -8.296875 20.640625 C -8.671875 20.640625 -8.976562 20.546875 -9.21875 20.359375 C -9.457031 20.171875 -9.671875 19.929688 -9.859375 19.640625 L -11.796875 16.46875 C -8.710938 14.445312 -5.648438 12.734375 -2.609375 11.328125 C 0.421875 9.921875 3.460938 8.78125 6.515625 7.90625 C 9.578125 7.03125 12.65625 6.390625 15.75 5.984375 C 18.851562 5.585938 22.039062 5.390625 25.3125 5.390625 C 28.5625 5.390625 31.742188 5.585938 34.859375 5.984375 C 37.972656 6.390625 41.050781 7.03125 44.09375 7.90625 C 47.132812 8.78125 50.171875 9.921875 53.203125 11.328125 C 56.242188 12.734375 59.316406 14.445312 62.421875 16.46875 L 60.453125 19.640625 C 60.265625 19.929688 60.050781 20.171875 59.8125 20.359375 C 59.570312 20.546875 59.265625 20.640625 58.890625 20.640625 C 58.484375 20.640625 58.023438 20.507812 57.515625 20.25 C 52.628906 17.425781 47.476562 15.28125 42.0625 13.8125 C 36.644531 12.351562 31.0625 11.625 25.3125 11.625 Z M 25.3125 11.625 "></path></g></g></g><path fill="rgb(42.349243%, 21.179199%, 100%)" d="M 17.042969 1.414062 L 22.941406 2.5 L 16.699219 36.417969 L 10.796875 35.332031 L 17.042969 1.414062 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(42.349243%, 21.179199%, 100%)" d="M 51.511719 2.5625 L 57.410156 1.480469 L 63.652344 35.398438 L 57.75 36.484375 L 51.511719 2.5625 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(14.118958%, 10.5896%, 14.898682%)" d="M 16.957031 50.558594 C 12.195312 50.558594 8.332031 54.417969 8.332031 59.183594 C 8.332031 63.945312 12.195312 67.808594 16.957031 67.808594 C 21.722656 67.808594 25.582031 63.945312 25.582031 59.183594 C 25.582031 54.417969 21.722656 50.558594 16.957031 50.558594 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(42.349243%, 21.179199%, 100%)" d="M 18.695312 73.699219 C 10.78125 73.699219 4.320312 67.238281 4.320312 59.304688 C 4.320312 51.390625 10.78125 44.929688 18.695312 44.929688 C 26.628906 44.929688 33.066406 51.390625 33.066406 59.304688 C 33.089844 67.238281 26.628906 73.699219 18.695312 73.699219 Z M 18.695312 52.84375 C 15.144531 52.84375 12.234375 55.753906 12.234375 59.304688 C 12.234375 62.855469 15.144531 65.761719 18.695312 65.761719 C 22.246094 65.761719 25.152344 62.855469 25.152344 59.304688 C 25.152344 55.753906 22.265625 52.84375 18.695312 52.84375 Z M 18.695312 52.84375 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(14.118958%, 10.5896%, 14.898682%)" d="M 57.65625 50.558594 C 52.894531 50.558594 49.03125 54.417969 49.03125 59.183594 C 49.03125 63.945312 52.894531 67.808594 57.65625 67.808594 C 62.421875 67.808594 66.28125 63.945312 66.28125 59.183594 C 66.28125 54.417969 62.421875 50.558594 57.65625 50.558594 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(42.349243%, 21.179199%, 100%)" d="M 56.121094 73.699219 C 48.207031 73.699219 41.746094 67.238281 41.746094 59.304688 C 41.746094 51.390625 48.207031 44.929688 56.121094 44.929688 C 64.054688 44.929688 70.496094 51.390625 70.496094 59.304688 C 70.515625 67.238281 64.054688 73.699219 56.121094 73.699219 Z M 56.121094 52.84375 C 52.570312 52.84375 49.660156 55.753906 49.660156 59.304688 C 49.660156 62.855469 52.570312 65.761719 56.121094 65.761719 C 59.671875 65.761719 62.578125 62.855469 62.578125 59.304688 C 62.578125 55.753906 59.691406 52.84375 56.121094 52.84375 Z M 56.121094 52.84375 " fill-opacity="1" fill-rule="nonzero"></path><path fill="rgb(42.349243%, 21.179199%, 100%)" d="M 17.15625 1.40625 L 57.648438 1.40625 L 57.648438 18.65625 L 17.15625 18.65625 L 17.15625 1.40625 "></path></svg>');
}

/* CSS untuk elemen Home */
.home {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
}

/* CSS untuk teks di dalam menu */
.menu-text {
  margin-left: 3px; /* Sesuaikan jarak antara teks dan ikon sesuai keinginan Anda */
  vertical-align: middle;
}

@media screen and (min-width: 768px) {
.topnav {
  overflow: hidden;
  background: linear-gradient(30deg,#44a9d7 19%,#7d2ae8 100%);
  display: flex;
  justify-content: center;
}
  
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  margin: 0 15px;
}
}

/* Tata letak untuk tampilan mobile (tanpa flexbox) */
@media screen and (max-width: 767px) {
    .topnav {
        text-align: center;
        overflow: hidden;
        background: linear-gradient(30deg,#44a9d7 19%,#7d2ae8 100%);
    }
    
    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        margin: 10px 0; /* Jarak antara menu */
    }
}

.topnav i {
  display: inline-block;
  vertical-align: top;
}
  
/* Tambahan gaya untuk memperbaiki tata letak ikon */
.topnav .icon {
  display: flex;
  align-items: center;
}
  
.topnav a:hover {
  background-color: transparent;
  color: white;
  padding: 15px;
}

.topnav a.active {
  background-color: transparent;
  color: white;
  padding: 15px;
}
  
.topnav .icon {
  display: none;
}
  
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
  }
  
.right-lnk {
     float: right;
}

.search-box {
    margin-bottom: 20px;
}