* { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        overflow-x: hidden;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        text-align: center;
        background: #000; /* fallback jika animasi tidak jalan */
    }

    #container, .glow {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 0;
    }

    .profil, .tombol, h2, p {
        position: relative;
        z-index: 5;
    }

    /* logo panjang */
    .logo img {
      display: block;
      max-width: 220px;
      width: 100%;
      height: auto;
      margin: 40px auto 15px;
      object-fit: contain;
    }

    /* foto profil */
    .profil img.foto {
      border-radius: 50%;
      width: 140px;
      height: 140px;
      object-fit: cover;
      margin-top: 20px;  
      margin-bottom: 15px;
    }

    h2 {
      margin: 10px 0;
      font-size: 26px;
      font-weight: 700;
    }

    p {
      max-width: 500px;
      margin: auto;
      margin-bottom: 25px;
      color: #bbb;
      font-size: 15px;
      line-height: 1.5;
      padding: 0 10px;
    }
.tombol {
  display: block;
  margin: 12px auto;
  padding: 14px 22px;
  width: 85%;
  max-width: 400px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: linear-gradient(145deg, #2a0024ff, #1a001a);
  border: 1px solid #660066;
  box-shadow: 0 5px 0 #5e015eff;
  transition: 0.3s;
}

.tombol:hover {
  background: linear-gradient(145deg, #ca00caff, #ca00caff);
  box-shadow: 0 7px 0 #550055;
  transform: translateY(-2px);
}
    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .logo img { max-width: 160px; margin: 30px auto 10px; }
      .profil img.foto { width: 110px; height: 110px; }
      h2 { font-size: 22px; }
      p { font-size: 14px; }
      .tombol { font-size: 15px; padding: 12px 18px; }
    }

    @media (max-width: 480px) {
      .logo img { max-width: 130px; margin: 20px auto 8px; }
      .profil img.foto { width: 90px; height: 90px; }
      h2 { font-size: 20px; }
      p { font-size: 13px; }
      .tombol { font-size: 14px; padding: 10px 15px; }
    }
.tombol {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 12px auto;
  padding: 0;               /* padding dihapus biar icon mepet kiri */
  height: 55px;             /* tinggi fix tombol */
  width: 85%;
  max-width: 400px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(145deg, #2a002a, #1a001a);
  border: 1px solid #660066;
  box-shadow: 0 5px 0 #330033;
  overflow: hidden;         /* biar icon gak keluar tombol */
  transition: 0.3s;
}

.tombol:hover {
  background: linear-gradient(145deg, #ca00ca, #770077);
  box-shadow: 0 7px 0 #550055;
  transform: translateY(-2px);
}

/* icon mepet kiri, full tinggi tombol */
.tombol .btn-icon {
  height: 100%;
  width: 55px;              /* sama dengan tinggi tombol -> kotak */
  object-fit: contain;
  flex-shrink: 0;
}

/* teks tetap center */
.tombol span {
  flex: 1;
  text-align: center;
}

body {
  background: #000 url("uploads/wallpapers/<?= $profil['wallpaper'] ?>") no-repeat center center fixed;
  background-size: cover;
}