*  {
      box-sizing: border-box;
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
    }

     /*Menu Button*/
    .menu-button {
      position: fixed;
      bottom: 20px;
      left: 20px;
      width: 70px;
      height: 70px;
      background-color: #ff6af8;
      color: rgb(255, 255, 255);
      font-weight: bold;
      border: none;
      border-radius: 50%;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      z-index: 1000;
      font-size: 14px;
      transition: 0.2s;
    }
 
    /*Side Menu*/
    .side-menu {
      position: fixed;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
      width: 220px;
      background: rgba(0, 0, 0, 0.6); /* transparan hitam */
      color: white;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
      border-radius: 20px;
      z-index: 999;
      transition: transform 0.3s ease;
    }

    .side-menu.hidden {
      transform: translate(-120%, -50%);
    }

    .side-menu h2 {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      text-align: center;
    }

    .side-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .side-menu ul li {
      margin-bottom: 12px;
    }

    .side-menu ul li a {
      text-decoration: none;
      color: white;
      font-weight: 600;
      padding: 10px 15px;
      background: #1a1a1a;
      border-radius: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background 0.2s, transform 0.2s;
    }

    .side-menu ul li a:hover {
     background: #333;
     transform: translateX(5px);
    }

    hr {
      border: none;
      border-top: 1px solid #666;
      margin: 15px;
    }

    .menu-button:hover {
      transform: scale(1.1);
    }
 
    /*Button Menu Styling*/
    .menu-style {
      display: block;
      background: linear-gradient(145deg, #ff6af8, #bb5cb6);
      color: #ffffff;
      font-weight: bold;
      padding: 12px 16px;
      margin: 8px 0;
      border-radius: 12px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(17, 17, 17, 0.281);
      transition: all 0.2s ease;
    }
    .menu-style:hover {
      background: linear-gradient(145deg, #ff749d, #ff76a4);
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    /*Body Website*/
    body {
      font-family: Arial, sans-serif;
      background: url('https://ar-hosting.pages.dev/1753198021581.jpg') repeat;
      background-size: auto;
      animation: moveBg 60s linear infinite;
      color: #ffffff;
      text-align: center;
      padding: 50px 0;
    }
    @keyframes moveBg {
    from {
    background-position: 0 0;
    }
    to {
    background-position: 1000px 1000px;
    }
    }

    /*Text H1*/
    h1 {
      margin-bottom: 30px;
      font-size: 5rem;
      background-image: linear-gradient(270deg, #ff6af8, #f7f5f6);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: headerRGB 6s ease infinite;
    }
    @keyframes headerRGB {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /**/
    .button-container {
      margin-bottom: 40px;
    }

    /*Buttons*/
    .button {
      display: inline-block;
      background: linear-gradient(145deg, #ff6af8, #ff6af8);
      color: #ffffff;
      font-weight: bold;
      padding: 12px 16px;
      text-align: center;
      width: auto;
      margin: 10px 0;
      white-space: nowrap;
      border: none;
      border-radius: 30px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      transition: all 0.2s ease;
    }

    .button:hover {
      background: linear-gradient(145deg, #ff6af8, #ff6af8);
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    .section-buttons {
      margin-top: 20px;
    }

    .section-content {
      display: none;
      margin-top: 20px;
      padding: 20px;
      background: #1e1e1e;
      border-radius: 8px;
    }

    .active {
      display: block;
    }

    /*Text H2*/
    h2 {
      margin-top: 60px;
      font-size: 1.5rem;
    }

    /*Text Info*/
    .text-info {
      font-size: 1rem;
      font-weight: bold;
      color: #ff6af8;
      margin-top: 10px;
    }

    /*Small Text*/
    .small-text {
      font-size: 1rem;
      font-weight: 400;
      color: #cccccc;
      margin-top: 10px;
    }

     /* Container Rules & Copyright */
    .main-wrapper-box {
       width: 100vw;
       background: rgba(0, 0, 0, 0.6);
       padding: 30px 40px;
       border-radius: 0;
       box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5);
       margin: 40px 0;
    }

    .section-title-box h3 {
      text-align: center;
      font-style: italic;
      color: white;
      font-size: 20px;
      margin-bottom: 20px;
   }

   .section-box {
      background: transparent;
      color: white;
      font-family: 'Poppins', sans-serif;
      font-size: 16px;
      line-height: 1.7;
      text-align: center;
      margin-bottom: 20px;
   }

   .section-box strong {
      font-weight: 700;
   }

   .copyright-box {
      font-size: 14px;
   }

    /*Box IP*/
    pre.ip-box {
      background-color: #0000008c;
      padding: 10px;
      border-radius: 8px;
      overflow-x: auto;
      color: rgb(255, 255, 255);
      text-align: left;
    }

    /*Box Text*/
    .box-text {
      display: flex;
      align-items: flex-start;
      background-color: #1e1e2fe8;
      color: #fff;
      padding: 12px 16px;
      border-radius: 12px;
      margin-bottom: 12px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 4);
    }

    /*Box Container*/
    .box-container {
      background: #0e0e0eaf;
      border-radius: 20px;
      padding: 25px;
      border: 1px solid #332;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
      margin-top: 30px;

      width: 90%;             
      max-width: 720px;       
      margin-left: auto;
      margin-right: auto;
    }

    /**Important Text*/
    .important {
      font-size: 1rem;
      color: rgb(255, 255, 255);
    }

    /*Slider*/
    .slider {
      width: 100%;
      overflow: hidden;
      background: #111;
      padding: 20px 0;
    }

    .slider-track {
      display: flex;
      width: calc(220px * 6);
      animation: scroll 15s linear infinite;
    }

    .slide {
      width: 220px;
      flex-shrink: 0;
      background: #ff6af85d;
      border: 2px solid #ff6af8;
      color: white;
      margin: 0 10px;
      padding: 20px;
      border-radius: 15px;
      text-align: center;
      box-shadow: 0 0 10px #000000;
    }

    /*Title Text*/
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .desc {
     font-size: 14px;
     color: #ccc;
    }

    @keyframes scroll {
    0% {
     transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
   }
 }