:root {
      --primary: #0088cc;
      --secondary: #3d5a80;
      --accent: #f27b09;
      --green: #127720;
      --brown: #473933;
      --light-bg: #e0fbfc;
      --light-text: #293241;
      --white: #fff;
  }

  body.dark {
      --light-bg: #121212;
      --light-text: #e0e0e0;
      --white: #1e1e1e;
  }

  body {
      font-family: "Poppins", sans-serif;
      font-size: 16px;
      margin: 0;
      background: var(--light-bg);
      color: var(--light-text);
      display: flex;
      flex-direction: column;
      transition: background 0.3s, color 0.3s;
  }

  .container {
      width: 100%;
      margin: 0 auto;
      padding: 0 15px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 20px 10px;
      background: var(--light-bg)
        url("https://elementor.merchant.id/wp-content/uploads/1886/2024/06/OrnamentBG_01.png")
        no-repeat top right;
  }

  header img {
      width: 100px;
      height: auto;
      border-radius: 15px;
      box-shadow: 5px 5px 0 var(--accent);
  }

  header h1 {
      font-size: 1.8em;
      font-weight: 800;
      margin: 15px 0 5px;
  }

  header p {
      font-family: Lato, sans-serif;
      font-size: 1.2em;
      margin: 0;
  }

  #linksContainer {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 15px 0;
      text-align: center;
  }

  .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 450px;
      margin: 8px 0;
      padding: 15px;
      border-radius: 8px;
      font-size: 1em;
      font-weight: 500;
      text-decoration: none;
      transition: transform 0.2s, background 0.2s;
      text-align: center;
      word-wrap: break-word;
  }

  .btn:hover {
      transform: scale(1.05);
  }

  /* warna tombol */
  .btn-telegram { background: #0088cc; color: #fff; }
  .btn-orange { background: #f27b09; color: #fff; }
  .btn-blue { background: #1d559d; color: #fff; }
  .btn-white { background: #fff; color: #3d5a80; border: 1px solid #ddd; }
  .btn-green { background: #127720; color: #fff; }
  .btn-brown { background: #473933; color: #fff; }

  .socials {
      padding: 30px 0;
      display: flex;
      justify-content: center;
      gap: 15px;
      flex-wrap: wrap;
  }

  .socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      font-size: 22px;
      border-radius: 50%;
      background: #fff;
      color: #3d5a80;
      transition: transform 0.2s, background 0.2s;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  }

  .socials a:hover {
      transform: scale(1.15);
      background: #f0f0f0;
  }

  footer {
      padding: 30px 0 35px;
      font-size: 0.9em;
      text-align: center;
  }

  footer a {
      color: blue;
      text-decoration: none;
  }

  .dark-toggle {
      position: fixed;
      top: 15px;
      right: 15px;
      background: var(--white);
      color: var(--secondary);
      border: none;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
      transition: background 0.3s, transform 0.2s;
      z-index: 1000;
  }

  .dark-toggle:hover { 
      transform: scale(1.1); 
  }

  /* Responsive */
  /* Tablet */
  @media (min-width: 768px) and (max-width: 1024px) {
      header h1 {
          font-size: 1.4em;
      }
      header p { 
          font-size: 1em;
      }
      footer { 
          font-size: 0.9em;
          padding: 30px 0 40px;
      }
      .btn {
          font-size: 1em;
          width: 90%;
      }
  }

  /* Mobile */
  @media (max-width: 767px) {
      header h1 { 
          font-size: 1.4em; 
      }
      header p { 
          font-size: 1em;
      }
      footer { 
          font-size: 0.9em;
          padding: 30px 0 40px;
      }
      .btn {
          font-size: 1em;
          width: 90%;
      }

  }